博客运营 on kenji.blog

使用 Slack App + OAuth2 向 Slack 发布消息的方法

Wed, 16 Jul 2025 23:36:27 +0900

✅ 使用访问令牌的发布方法（Slack Web API）

Slack 的「OAuth Token（如 xoxb-〜）」是使用 Slack 的 Web API 进行发布的密钥。在这种情况下，与 Webhook 不同，它是向 Slack API 端点 发送带有 Authorization: Bearer 请求头的 POST 请求。

🔑 必要前提

在 Slack 应用中需要将 chat:write 包含在 OAuth 作用域（Scope）中：

设置步骤

访问 https://api.slack.com/apps
创建应用或选择现有应用
在「OAuth & Permissions」 > Scopes 中 → 添加 chat:write
点击「Install to Workspace」或「Reinstall」获取 Access Token（例如：xoxb-xxxxxxxxxx）

💻 C++ 代码（通过 WinHTTP 向 Slack API 发布消息）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72


#include <windows.h>
#include <winhttp.h>
#include <iostream>

#pragma comment(lib, "winhttp.lib")

bool PostSlackMessage(const std::wstring& accessToken, const std::string& channel, const std::string& text) {
 const wchar_t* host = L"slack.com";
 const wchar_t* path = L"/api/chat.postMessage";

 HINTERNET hSession = WinHttpOpen(L"SlackPoster/1.0",
 WINHTTP_ACCESS_TYPE_DEFAULT_PROXY,
 WINHTTP_NO_PROXY_NAME,
 WINHTTP_NO_PROXY_BYPASS, 0);
 if (!hSession) return false;

 HINTERNET hConnect = WinHttpConnect(hSession, host, INTERNET_DEFAULT_HTTPS_PORT, 0);
 if (!hConnect) return false;

 HINTERNET hRequest = WinHttpOpenRequest(hConnect, L"POST", path,
 NULL, WINHTTP_NO_REFERER,
 WINHTTP_DEFAULT_ACCEPT_TYPES,
 WINHTTP_FLAG_SECURE);

 // Authorization请求头和Content-Type
 std::wstring headers = L"Content-Type: application/json\r\n";
 headers += L"Authorization: Bearer " + accessToken + L"\r\n";

 // JSON请求体
 std::string body = R"({"channel":")" + channel + R"(","text":")" + text + R"("})";

 BOOL result = WinHttpSendRequest(hRequest,
 headers.c_str(),
 (DWORD)-1,
 (LPVOID)body.c_str(),
 body.length(),
 body.length(),
 0);

 if (!result || !WinHttpReceiveResponse(hRequest, NULL)) {
 std::cerr << "发送错误\n";
 return false;
 }

 // 检查状态码
 DWORD statusCode = 0;
 DWORD size = sizeof(statusCode);
 WinHttpQueryHeaders(hRequest,
 WINHTTP_QUERY_STATUS_CODE | WINHTTP_QUERY_FLAG_NUMBER,
 WINHTTP_HEADER_NAME_BY_INDEX,
 &statusCode, &size, WINHTTP_NO_HEADER_INDEX);

 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring token = L"xoxb-你的访问令牌"; // 访问令牌
 std::string channel = "频道ID或#general"; // 例如: "#general" 或 "C0123456789"
 std::string message = "尝试从C++向Slack发布消息！";

 if (PostSlackMessage(token, channel, message)) {
 std::cout << "发布成功！\n";
 } else {
 std::cerr << "发布失败。\n";
 }

 return 0;
}

📌 获取频道ID的方法

仅使用频道名称（例如：#general）有时会导致错误。可靠的方法是使用 Slack 频道页面 URL 中的 ID。

1
2


https://app.slack.com/client/Txxxxx/C0123456789
 ↑这部分就是频道ID

✅ 关于令牌种类（补充）

令牌格式	用途	示例
`xoxb-...`	Bot Token（推荐）	发布・编辑・删除
`xoxp-...`	User Token（不推荐）	非Bot类的操作
Refresh Token	用于长期令牌更新	通常不使用

📝 总结

要从 C++ 向 Slack 发布消息，Slack Web API + Bearer Token 方式是最可靠的
通过 HTTPS POST 使用 chat.postMessage 端点
令牌必须在 Bearer 请求头中发送
频道最好通过 指定ID 来确保准确无误

如何使用 C++（Win32 API + WinHTTP）向 Slack 发布消息【支持 Webhook】

Wed, 16 Jul 2025 19:42:56 +0900

如何使用 C++（Win32 API + WinHTTP）向 Slack 发布消息【支持 Webhook】

想从 C++ 向 Slack 发布消息。在 Node.js 或 Python 中很常见，但是使用「C++ × Win32 API × WinHTTP」的情况却很少见，对吧？

在本文中，我将 通过分步图文并茂的方式，简单易懂地讲解如何使用 Webhook URL 从 C++ 向 Slack 发送消息。

✅ 整体流程

要发布到 Slack，需要执行以下步骤。

获取 Slack 的 Webhook URL（API 密钥）
使用 WinHTTP 发送 POST 请求
以 JSON 格式构建消息正文
检查结果并完成！

🔑 Step1：如何获取 Slack Webhook URL

在 Slack 中，通过使用 Incoming Webhooks 功能，可以轻松地从外部服务发布消息。

获取步骤

访问 https://api.slack.com/apps
点击 Create New App
选择 From scratch，输入应用名称并选择发布目标工作区
从左侧菜单中选择“Incoming Webhooks”并启用它
点击“Add New Webhook to Workspace”并选择一个频道
复制生成的 URL（例如：https://hooks.slack.com/services/xxx/yyy/zzz）

该 URL 的作用类似于 API 密钥。

💻 Step2：使用 C++ 代码向 Slack 发送消息

使用的技术

Win32 API
WinHTTP（标准库）
JSON 格式的消息

示例代码（发布到 Slack）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82


#include <windows.h>
#include <winhttp.h>
#include <iostream>

#pragma comment(lib, "winhttp.lib")

bool PostToSlack(const std::wstring& webhookUrl, const std::string& messageJson) {
 // 解析 URL
 URL_COMPONENTS urlComp{};
 wchar_t hostName[256];
 wchar_t urlPath[1024];

 urlComp.dwStructSize = sizeof(urlComp);
 urlComp.lpszHostName = hostName;
 urlComp.dwHostNameLength = _countof(hostName);
 urlComp.lpszUrlPath = urlPath;
 urlComp.dwUrlPathLength = _countof(urlPath);

 if (!WinHttpCrackUrl(webhookUrl.c_str(), 0, 0, &urlComp)) {
 std::wcerr << L"URL解析失败\n";
 return false;
 }

 // 创建 HTTP 会话并连接
 HINTERNET hSession = WinHttpOpen(L"SlackPoster/1.0",
 WINHTTP_ACCESS_TYPE_DEFAULT_PROXY,
 WINHTTP_NO_PROXY_NAME,
 WINHTTP_NO_PROXY_BYPASS, 0);
 HINTERNET hConnect = WinHttpConnect(hSession, hostName, urlComp.nPort, 0);
 HINTERNET hRequest = WinHttpOpenRequest(hConnect, L"POST", urlPath,
 NULL, WINHTTP_NO_REFERER,
 WINHTTP_DEFAULT_ACCEPT_TYPES,
 WINHTTP_FLAG_SECURE);

 std::wstring headers = L"Content-Type: application/json\r\n";
 BOOL result = WinHttpSendRequest(hRequest,
 headers.c_str(),
 -1,
 (LPVOID)messageJson.c_str(),
 messageJson.length(),
 messageJson.length(),
 0);

 if (!result) {
 std::cerr << "发送请求失败\n";
 return false;
 }

 WinHttpReceiveResponse(hRequest, NULL);

 DWORD statusCode = 0;
 DWORD size = sizeof(statusCode);
 WinHttpQueryHeaders(hRequest,
 WINHTTP_QUERY_STATUS_CODE | WINHTTP_QUERY_FLAG_NUMBER,
 WINHTTP_HEADER_NAME_BY_INDEX,
 &statusCode, &size, WINHTTP_NO_HEADER_INDEX);

 // 释放资源
 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring webhookUrl = L"https://hooks.slack.com/services/xxx/yyy/zzz"; // 请替换为您自己的 Webhook URL

 std::string message = R"({
 "text": "Hello from C++ :rocket:",
 "username": "C++ Bot",
 "icon_emoji": ":robot_face:"
 })";

 if (PostToSlack(webhookUrl, message)) {
 std::cout << "发布成功！\n";
 } else {
 std::cerr << "发布失败。\n";
 }

 return 0;
}

🧪 自定义 JSON 消息

Slack 的 Webhook 可以包含以下参数：

1
2
3
4
5
6


{
 "text": "通知内容",
 "username": "Bot名称",
 "icon_emoji": ":rocket:",
 "channel": "#任意频道名称"
}

📌 补充说明

Content-Type 必须指定为 "application/json"
Webhook URL 直接作为 wstring 传递（不需要 URL 编码）
由于是 HTTPS 通信，请不要忘记 WINHTTP_FLAG_SECURE

🎉 附录：Slack 中的发布确认示例

在 Slack 中显示如下：

1
2


[C++ Bot]
Hello from C++ :rocket:

✍️ 总结

项目	内容
发布方式	Webhook (Incoming Webhooks)
通信库	WinHTTP
数据格式	JSON
可用参数	text, username, icon_emoji, channel 等

即使您以前觉得使用 C++ 连接 Slack 有些困难，从今天起您也可以集成通知 Bot 了！

🚀 下期预告？

如果您感兴趣，下次：

文件附件
带按钮的 UI
Slack App + OAuth2 带来的灵活 API 操作

等，我们可以介绍更深入的 Slack 集成！

关于输入表单中的必填标记

Mon, 14 Jul 2025 13:47:51 +0900

我结合UI指南资料，整理了海外界面UI（表单）中关于“必填”标记的相关内容。

📌 主要必填标记及最佳实践

使用星号 (*)
- 一般最为普及，在必填字段上添加“*”。
- 但是，必须在表单开头添加“ 为必填项”等说明* (Nielsen Norman Group, 加州州立大学北岭分校)。
- 也有使用颜色进行强调的例子（如红色文字）。
在标签上明确标示 “Required” 或 “(required)”
- 通过在标签内添加“Required”文字，可以向屏幕阅读器明确提示，从而提高无障碍访问能力 (Deque)。
结合使用 ARIA 属性和 HTML5 的 required 属性
- 除了视觉上的显示，还可以使用 aria-required="true" 或 <input required>，在程序层面上告知其为必填项 (Deque)。
使用 “(optional)” 明示选填字段
- 也有不标必填字段，而是将选填字段明示为“(optional)”的方法，在两者混合出现时比较有效。
- 不过，Nielsen‑Norman指出，“同时标明必填项更容易判断” (TPGi)。

✅ UI指南资料汇总

来源	内容
NN/g: Marking Required Fields in Forms	推荐使用星号＋说明文的组合，认为仅标示选填项不够友好 (Nielsen Norman Group)。
Deque (Anatomy of Accessible Forms)	・在标签内并用“Required”字符串或图片。・明确指出仅靠颜色提示是不够的。
W3C Techniques (H90)	有在标签中包含星号或“(required)”，并在表单开头定义其含义的例子。
TPGi (Doing what’s required)	考虑到无障碍访问，认为星号＋ARIA属性＋插入标签文字是最佳选择。
Contensis 表单UX指南	简明扼要地指出，一致的标记（* 或 (optional)）非常重要。

✅ 开发实现建议方案

表单开头 添加说明文：

Fields marked with * are required. （或者统一写 “All fields are required”，有选填项时写 “unless marked optional”）
添加标签：
- 写成 First Name * 或 Email (required)。

ARIA属性・HTML5属性：

1
2


<label for="email">Email <abbr title="required">*</abbr></label>
<input id="email" required aria-required="true">

不要仅依赖颜色：需要同时满足视觉和程序上的要求。

🔗 参考链接（UI指南资料）

NN/g: Marking Required Fields in Forms (加州州立大学北岭分校, Nielsen Norman Group, Deque)
Deque: Anatomy of Accessible Forms (Deque)
W3C Techniques: H90 Indicating required form controls (W3C)
TPGi: Indicating mandatory fields accessibly (TPGi)
Contensis: UX Forms Guidelines (Contensis)

如果有需要，我还可以提供具体的 HTML／CSS 代码示例，或者适用于 Sketch・Figma 的 UI 组件设计模板。随时欢迎咨询！

Hugo命令一览

Fri, 31 May 2024 01:36:00 +0900

Hugo 是什么

Hugo 是静态网站生成器之一。它可以将Markdown文件转换为HTML来创建网站。Hugo 使用Go语言编写，运行速度非常快。

这个博客也是使用 Hugo 创建的。

安装 Hugo CLI

要安装 Hugo CLI，请执行以下命令。

※ 这是macOS的示例。如果是其他操作系统，请参考官方文档。

1

brew install hugo

可以使用 Homebrew 进行安装。

Hugo 命令一览

Hugo 提供了各种各样的命令。下面总结了常用的命令。

创建新网站

1

hugo new site <网站名>

这是创建新网站的命令。<网站名>请指定网站的名称。

创建新文章

1

hugo new <文章名>.md

这是创建新文章的命令。<文章名>请指定文章的名称。

启动服务器

1

hugo server

这是启动本地服务器的命令。可以通过 http://localhost:1313 进行访问。

构建

1

hugo

这是构建网站的命令。会在 public 目录下生成HTML文件。

部署

1

hugo deploy

这是部署网站的命令。部署目标可以在 config.toml 文件中配置。

显示文章列表

1

hugo list all

这是显示文章列表的命令。

确认配置

1

hugo config

这是确认配置的命令。

显示帮助

1

hugo help

这是显示帮助的命令。

显示版本

1

hugo version

这是显示版本的命令。

以上就是 Hugo 的命令一览。除此之外，还有很多其他命令，请参考官方文档。

参考

Hugo 官方文档

网页自动刷新浏览器扩展 (Edge 附加组件)

Sat, 06 Apr 2024 15:36:54 +0900

介绍一款用于自动刷新网页的 Edge 浏览器扩展程序“标签页自动刷新”。

安装标签页自动刷新

标签页自动刷新

访问上述网站，然后点击获取。

点击添加扩展。

使用方法

安装完成后，Edge 的右上角会添加一个图标。

打开您想要自动刷新的网页，点击该图标，即可开始自动刷新。

绿框部分是自动刷新的间隔时间。请选择自动刷新的时机。

如果要停止自动刷新，请点击该图标，然后点击Stop reloading this tab。

帅气的Web页面模板（html5up）

Mon, 17 Apr 2023 00:26:55 +0900

帅气的Web页面模板

html5up https://html5up.net/

我想尝试使用一下，所以做个记录。

如何从Google Analytics获取并配置热门页面排行榜

Mon, 10 Apr 2023 20:26:57 +0900

简介

使用名为 Ranklet 的服务，您可以从 Google Analytics 中获取热门页面排行榜并轻松进行配置。

本文将介绍如何在 HUGO 博客中进行配置。

运行效果

准备工作

网站已设置 Google Analytics

步骤

访问 Ranklet
点击 Sign in with Google，使用 Google 账号登录（需与 Google Analytics 账号绑定）

点击 允许

设置基本信息

如上图所示进行了设置。

在 Google Analytics ビュー（Google Analytics 视图）中，选择要获取排行榜的视图。

设置文本替换

如上图所示进行了设置。设置目的是删除页面标题中的 | kenji.blog。

设置模板

HTML（隐藏了排行榜的数字）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<div class="ranklet ranklet-reset">
 <table class="ranklet-table">
 <tbody class="ranklet-pages">
 {{#context.pages}}
 <tr class="ranklet-page">
 <td class="ranklet-image">
 {{#image}}
 <a href="{{url}}" class="ranklet-link">
 <img class="ranklet-img" src="{{image}}" />
 </a>
 {{/image}}
 </td>
 <td class="ranklet-meta">
 <div class="ranklet-title">
 <a href="{{url}}" class="ranklet-link">
 {{title}}
 </a>
 </div>
 {{#description}}
 <div class="ranklet-description">
 <a href="{{url}}" class="ranklet-link">
 {{description}}
 </a>
 </div>
 {{/description}}
 </td>
 </tr>
 {{/context.pages}}
 </tbody>
 </table>
</div>

CSS（更改了字体大小，使说明文字显示为3行）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


#ranklet-{{context.id}} {
 .ranklet-reset { // 重置
 table, tr, td, div, span {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 line-height: 1;
 box-sizing: border-box;
 }
 }

 .ranklet-table {
 border-collapse: separate;
 border-spacing: 8px 24px;
 width: 100%;
 word-break: break-all;

 td {
 vertical-align: middle;
 }

 .ranklet-rank {
 text-align: center;
 font-size: 120%;
 }

 .ranklet-image {
 text-align: center;
 img {
 max-width: 128px;
 max-height: 128px;
 }
 }

 .ranklet-meta {
 .ranklet-title {
 font-size: 20px;
 line-height: 125%;
 }

 .ranklet-description {
 font-size: 16px;
 margin-top: 8px;
 line-height: 125%;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 行数 */
 }
 }
 }
}

JavaScript 保持不变

从网站发布中复制 HTML

复制显示的 HTML

粘贴到 HUGO 模板中

创建 layouts/partials/ranklet.html，并粘贴复制的 HTML

1

<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

在 layouts/_default/single.html 中的 </footer> 前一行粘贴以下代码

1

{{- partial "ranklet.html" . }}

以上。这样，页面底部就会像下面这样显示排行榜了。

关于可用于博客的照片素材网站“Unsplash”

Sun, 02 Apr 2023 14:44:17 +0900

关于“Unsplash”

https://unsplash.com/ja/

总结一下，照片素材网站“Unsplash”的特点如下：

所有图片均可免费使用
允许商业用途
允许修改图片
无需申请使用许可
无需署名（标注来源）

在撰写博客文章时非常方便好用，请务必尝试一下。

※关于许可证，请参考下面的“脚注”。¹

本网站也会充分利用它。

Unsplash 许可证 ↩︎

在HUGO中使用HTML标签

Tue, 17 Jan 2023 19:20:32 +0900

HUGO默认情况下是不允许在文章中使用HTML标签的，但是在config.toml中添加以下描述就可以使用了。

1
2


[markup.goldmark.renderer]
 unsafe = true

参考: Configure Markup

全选网页内的所有复选框

Wed, 05 Oct 2022 20:07:06 +0900

要全选网页内的所有复选框，请按F12打开DevTools，将以下代码粘贴到控制台并执行。

1
2
3
4
5
6


let boxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < boxes.length; i++) {
 if (!boxes[i].disabled) {
 boxes[i].checked = true;
 }
}

或者，

创建一个新书签，在注册时的地址栏（通常输入https://…的部分）中粘贴以下代码并保存。打开想要勾选的网页，点击创建好的书签，所有的复选框就会被全选。

1

javascript:(function(){let boxes=document.querySelectorAll('input[type="checkbox"]');for(let i=0;i<boxes.length;i++){if(!boxes[i].disabled){boxes[i].checked=true;}}})();

如果要全部取消勾选，请将上述脚本中的 boxes[i].checked = true; 修改为 boxes[i].checked = false;。

HUGO 中可用的简码

Sun, 11 Sep 2022 22:59:52 +0900

HUGO 中可用的简码

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

其他

Shortcodes

题外话

如果想在网站上显示 {{< foo >}}，则需要写成 {{</* foo */>}}。

更改 PaperMod 的图片布局

Sun, 11 Sep 2022 18:50:40 +0900

默认布局中，图片位于中央且宽度为 100%，但我有时觉得太大了，所以尝试将图片绕排在标题下方，并将其宽度更改为 150px 左右。

修改的文件及内容如下。

blank.css

为了更改边距、图片大小和文本显示行数，请在 blank.css 中添加以下描述。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

由于无法在 blank.css 中删除定义，请删除 post-entry.css 中以下位置的一行。

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← 删除此行
 height: auto;
}

list.html

为了更改图片的布局，我修改了 list.html 中的以下位置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- 移至下方 -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- 移至下方 -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- 添加 -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- 添加 -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- 从上方移来 -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- 从上方移来 -->
 </div><!-- 添加 -->
 <div style="width:100%;"><!-- 添加 -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- 添加 -->
 </div><!-- 添加 -->
</article>

似乎也有不少类似的需求。

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

如果官方能支持这个功能就好了。

如何在PaperMod中设置Twitter Card

Sat, 10 Sep 2022 18:41:22 +0900

简介

PaperMod主题支持Twitter Card。但是，Twitter Card的设置必须写在config.toml或每篇文章的*.md头部信息中。如果同时在文章和config.toml中进行了设置，则优先使用文章的头部信息。

设置方法

config.toml

在config.toml中，在[params]下添加一个名为images的项目。在images中，填写要在Twitter Card中显示的图像路径。如果将图像放置在static文件夹中，只需指定文件名即可。

1
2


[params]
 images = ["twitter_card.jpg"]

文件夹结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (在此编写)
├─content
│ └─posts
│ └─文章文件夹
│ │ index.md (在此编写)
│ └─images
│ cover.png (放置在此)
└─static
 twitter_card.jpg (放置在此)

各文章的头部信息

在每篇文章的头部信息中，在cover下添加一个名为image的项目。如果将relative设置为true，则可以使用相对于文章*.md的相对路径来指定。

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

如果不想在文章顶部显示

如果不想在文章顶部显示封面图像，可以在cover下添加一个名为hidden的项目，并将其设置为true。

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

关于图像尺寸

根据目前PaperMod的规范，Twitter Card的尺寸似乎只支持summary_large_image。关于summary_large_image的合适尺寸（分辨率）有很多说法，但大约800 x 418（图像比例 1.91:1）似乎是不错的选择。

参考网站1 参考网站2

建议您在发布前调整图像大小。

确认设置的方法

要确认Twitter Card的设置，请使用Twitter Card Validator。但是，在我的环境中，预览没有成功显示。因此，如果没有显示预览，建议您在发布之前使用私人帐户等进行确认。

更改 PaperMod 的配色

Wed, 07 Sep 2022 15:30:21 +0900

我更改了 PaperMod 主题的配色。更改方法参考了以下链接：

https://github.com/adityatelange/hugo-PaperMod/discussions/645

CSS 的路径如下：

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

目前暂时不更改暗黑模式。

【HUGO】在本地环境预览显示

Mon, 05 Sep 2022 12:28:01 +0900

安装 HUGO

下载

下载 HUGO

从上述网站，下载适合您环境的 Windows 模块并解压。就我而言，我下载了“hugo_0.102.3_Windows-64bit.zip”。

解压

解压下载的 zip 文件，将其中的 hugo.exe 复制到您创建的文件夹（例如 C:\bin）。

注册到环境变量

为了能从任何位置执行 hugo.exe，将其注册到环境变量。这是在 Windows 11 下的操作，但您应该可以通过以下步骤进行注册。

按 Win+Pause 键打开关于/版本信息。
点击“高级系统设置”。
点击“环境变量”。
选择 Path，然后点击“编辑”。
点击“新建”，在新行中输入“C:\bin”，然后点击“确定”关闭对话框。

预览博客

在命令提示符中移动到 HUGO 博客文件夹，并执行以下命令。

hugo server -D

执行结果如下。（-D 是显示草稿文章的选项。）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
Pages | 39
Paginator pages | 0
Non-page files | 7
Static files | 0
Processed images | 0
Aliases | 13
Sitemaps | 1
Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

执行时会输出地址（在上述示例中为 http://localhost:1313/），将其复制到浏览器中。每次保存文件时，预览将自动更新。要结束预览，请在命令提示符中按 Ctrl+C。

我开始写博客了

Fri, 02 Sep 2022 07:23:00 +0900

我开始写博客了

类似烟花的东西，代码在这里

大家好。虽然没有特别的理由，但我决定开始写博客了。

其实并没有什么“我想发布这个！”之类的宏大目标，只是觉得如果能有一个地方，可以把关于技术的、日常的，或者是脑子里冒出来的想法直接写下来就好了。

我不打算太较真，打算像用记事本一样来经营它。

我用Hugo制作的

这个博客是用叫做“Hugo”的静态网站生成器制作的。因为发现了一个不错的主题，就凭直觉引入了。（选主题花了大概两个小时，这是个秘密）

关于代码的事情，或者是感兴趣的工具，我也打算轻松地记录下来。

早上在Komeda（客美多）的故事

顺便说一下，今天早上我起得比较早，去了Komeda咖啡店。 8点半出发，呼吸着早晨的空气，悠哉地走着。

点了一份迷你冰与火（冰淇淋丹麦面包）和咖啡欧蕾的A套餐早餐。好像是800日元左右吧？（不记得了）

早晨的咖啡馆，真是不错呢。工作前有一点发呆的时间，感觉这一天都会很顺利。

就是这样，以后我会轻松地写下去。技术方面的话题，还有日常的事情，打算混合着来。

请多关照啦！