Manajemen Blog on kenji.blog

Cara Memposting Pesan ke Slack Menggunakan Slack App + OAuth2

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

✅ Cara Memposting Menggunakan Token Akses (Slack Web API)

“OAuth Token (seperti xoxb- dst.)” dari Slack adalah kunci untuk memposting menggunakan Web API Slack. Dalam hal ini, tidak seperti Webhook, Anda melakukan POST ke Slack API Endpoint dengan header Authorization: Bearer.

🔑 Prasyarat yang Diperlukan

Anda harus menyertakan chat:write dalam cakupan OAuth pada aplikasi Slack Anda:

Langkah-langkah Pengaturan

Kunjungi https://api.slack.com/apps
Buat aplikasi atau pilih aplikasi yang sudah ada
Di “OAuth & Permissions” > Scopes → Tambahkan chat:write
“Install to Workspace” atau “Reinstall” untuk mendapatkan Access Token (contoh: xoxb-xxxxxxxxxx)

💻 Kode C++ (Memposting ke Slack API dengan WinHTTP)

 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 Header dan Content-Type
 std::wstring headers = L"Content-Type: application/json\r\n";
 headers += L"Authorization: Bearer " + accessToken + L"\r\n";

 // JSON Body
 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 << "Kesalahan pengiriman\n";
 return false;
 }

 // Periksa kode status
 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-token-akses-anda"; // Token Akses
 std::string channel = "ID-saluran-atau-#general"; // Contoh: "#general" atau "C0123456789"
 std::string message = "Mencoba memposting ke Slack dari C++!";

 if (PostSlackMessage(token, channel, message)) {
 std::cout << "Berhasil memposting!\n";
 } else {
 std::cerr << "Gagal memposting.\n";
 }

 return 0;
}

📌 Cara Mendapatkan ID Saluran

Menggunakan nama saluran saja (contoh: #general) kadang bisa menyebabkan kesalahan. Cara yang lebih andal adalah menggunakan ID dari URL halaman saluran Slack.

1
2


https://app.slack.com/client/Txxxxx/C0123456789
 ↑ Bagian ini adalah ID Saluran

✅ Tentang Jenis Token (Tambahan)

Format Token	Kegunaan	Contoh
`xoxb-...`	Bot Token (Disarankan)	Posting, edit, hapus
`xoxp-...`	User Token (Tidak disarankan)	Operasi non-Bot
Refresh Token	Pembaruan token jangka panjang	Biasanya tidak digunakan

📝 Kesimpulan

Untuk memposting ke Slack dari C++, metode Slack Web API + Bearer Token adalah yang paling andal
Gunakan endpoint chat.postMessage dengan HTTPS POST
Token harus dikirim di header Bearer
Saluran lebih baik ditentukan berdasarkan ID

Cara Mengirim Pesan ke Slack dengan C++ (Win32 API + WinHTTP) [Dukungan Webhook]

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

Cara Mengirim Pesan ke Slack dengan C++ (Win32 API + WinHTTP) [Dukungan Webhook]

Saya ingin mengirim pesan ke Slack dari C++. Ini sangat umum di Node.js dan Python, tetapi ada sedikit kasus untuk penggunaan “C++ × Win32 API × WinHTTP”.

Dalam artikel ini, saya akan menjelaskan langkah demi langkah cara mengirim pesan dari C++ ke Slack menggunakan URL Webhook dengan cara yang mudah dipahami.

✅ Alur Keseluruhan

Untuk memposting ke Slack, ikuti langkah-langkah berikut:

Dapatkan URL Webhook Slack (Kunci API)
Kirim permintaan POST menggunakan WinHTTP
Bangun badan pesan dalam format JSON
Periksa hasilnya dan selesai!

🔑 Langkah 1: Cara Mendapatkan URL Webhook Slack

Di Slack, Anda dapat dengan mudah memposting pesan dari layanan eksternal menggunakan fitur yang disebut Incoming Webhooks.

Langkah-langkah Mendapatkan

Kunjungi https://api.slack.com/apps
Klik Create New App
Pilih From scratch, dan tentukan nama aplikasi serta ruang kerja tujuan
Dari menu kiri, pilih “Incoming Webhooks” dan aktifkan
Klik “Add New Webhook to Workspace” dan pilih saluran
Salin URL yang dihasilkan (contoh: https://hooks.slack.com/services/xxx/yyy/zzz)

URL ini berfungsi seperti kunci API.

💻 Langkah 2: Mengirim Pesan ke Slack dengan Kode C++

Teknologi yang Digunakan

Win32 API
WinHTTP (Pustaka Standar)
Pesan format JSON

Kode Contoh (Posting ke 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に置き換えてください

 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;
}

🧪 Menyesuaikan Pesan JSON

Di Slack Webhooks, Anda dapat menyertakan parameter seperti ini:

1
2
3
4
5
6


{
 "text": "Konten pemberitahuan",
 "username": "Nama Bot",
 "icon_emoji": ":rocket:",
 "channel": "#nama_saluran_bebas"
}

📌 Catatan Tambahan

Content-Type harus dipastikan disetel ke "application/json"
URL Webhook dilewatkan sebagai wstring apa adanya (pengkodean URL tidak diperlukan)
Karena ini adalah komunikasi HTTPS, jangan lupa WINHTTP_FLAG_SECURE

🎉 Bonus: Contoh Konfirmasi Posting di Slack

Akan ditampilkan seperti ini di Slack:

1
2


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

✍️ Ringkasan

Item	Detail
Metode Posting	Webhook (Incoming Webhooks)
Pustaka Komunikasi	WinHTTP
Format Data	JSON
Parameter Tersedia	text, username, icon_emoji, channel, dll.

Bahkan jika Anda berpikir integrasi Slack dengan C++ itu sulit… Anda dapat menambahkan bot pemberitahuan mulai hari ini!

🚀 Apa Selanjutnya?

Jika Anda tertarik, lain kali:

Lampiran File
UI dengan Tombol
Operasi API yang Fleksibel melalui Slack App + OAuth2

Kami juga dapat memperkenalkan integrasi Slack selangkah lebih maju seperti ini!

Tentang Tanda Wajib pada Formulir Input

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

Kami merangkum informasi tentang tanda “wajib” pada UI layar (formulir) di luar negeri, beserta materi pedoman UI.

📌 Tanda Wajib Utama dan Praktik Terbaik

Penggunaan Asterisk (*)
- Ini adalah yang paling umum dan banyak digunakan, di mana bidang wajib ditandai dengan “*”.
- Namun, penjelasan di awal formulir seperti “ adalah bidang wajib” sangat diperlukan* (Nielsen Norman Group, California State University, Northridge).
- Ada juga contoh penggunaan warna untuk penekanan (seperti teks merah).
Menyatakan “Required” atau “(required)” dengan Jelas pada Label
- Dengan menambahkan kata “Required” di dalam label, ini juga dapat diperjelas untuk pembaca layar, sehingga meningkatkan aksesibilitas (Deque).
Kombinasi Atribut ARIA dan Atribut required HTML5
- Selain tampilan visual, penggunaan aria-required="true" dan <input required> dapat menyampaikan kewajiban secara terprogram (Deque).
Menggunakan “(optional)” untuk Menandai Bidang Opsional Secara Jelas
- Ada juga metode untuk dengan jelas menyatakan bidang opsional menggunakan “(optional)” alih-alih bidang wajib, yang efektif ketika keduanya dicampur.
- Namun, Nielsen‑Norman menunjukkan bahwa “lebih mudah untuk menilai jika bidang wajib juga dinyatakan dengan jelas” (TPGi).

✅ Ringkasan Materi Pedoman UI

Sumber	Konten
NN/g: Marking Required Fields in Forms	Kombinasi asterisk + teks penjelasan direkomendasikan, dan hanya menampilkan opsi opsional dianggap kurang ramah pengguna (Nielsen Norman Group).
Deque (Anatomy of Accessible Forms)	・Menggunakan string “Required” atau gambar di dalam label. ・Dinyatakan dengan jelas bahwa indikasi berdasarkan warna saja tidak cukup.
W3C Techniques (H90)	Contoh penyertaan asterisk atau “(required)” dalam label, dan mendefinisikan artinya di awal formulir.
TPGi (Doing what’s required)	Mempertimbangkan aksesibilitas, kombinasi asterisk + atribut ARIA + penyisipan teks label dievaluasi sebagai yang paling optimal.
Panduan UX Formulir Contensis	Diringkas secara singkat bahwa penandaan yang konsisten (* atau (optional)) adalah hal yang penting.

✅ Pendekatan yang Direkomendasikan dalam Implementasi

Tambahkan teks penjelasan di awal formulir :

Fields marked with * are required. (Atau secara kolektif “All fields are required”, dan jika ada yang opsional “unless marked optional”)
Penambahan Label :
- Ditulis seperti First Name * atau Email (required).

Atribut ARIA dan HTML5 :

1
2


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

Jangan Hanya Mengandalkan Warna : Berikan dukungan baik secara visual maupun terprogram.

🔗 Tautan Referensi (Materi Pedoman UI)

NN/g: Marking Required Fields in Forms (California State University, Northridge, 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)

Jika diperlukan, kami juga dapat memberikan contoh kode HTML/CSS tertentu, templat desain komponen UI untuk Sketch atau Figma, dll. Jangan ragu untuk berkonsultasi dengan kami!

Daftar Perintah Hugo

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

Apa itu Hugo

Hugo adalah salah satu pembuat situs statis (static site generator). Ini memungkinkan Anda membuat situs web dengan mengubah file Markdown menjadi HTML. Hugo ditulis dalam bahasa Go dan berjalan sangat cepat.

Blog ini juga dibuat menggunakan Hugo.

Instalasi CLI Hugo

Untuk menginstal CLI Hugo, jalankan perintah berikut.

※ Ini adalah contoh untuk macOS. Untuk OS lain, silakan merujuk ke dokumentasi resmi.

1

brew install hugo

Anda dapat menginstalnya menggunakan Homebrew.

Daftar Perintah Hugo

Hugo menyediakan berbagai perintah. Berikut ini adalah ringkasan perintah yang sering digunakan.

Membuat situs baru

1

hugo new site <Nama Situs>

Perintah untuk membuat situs baru. Tentukan nama situs pada <Nama Situs>.

Membuat artikel baru

1

hugo new <Nama Artikel>.md

Perintah untuk membuat artikel baru. Tentukan nama artikel pada <Nama Artikel>.

Memulai server

1

hugo server

Perintah untuk memulai server lokal. Anda dapat mengaksesnya di http://localhost:1313.

Membangun (Build) situs

1

hugo

Perintah untuk membangun situs. File HTML akan dihasilkan di direktori public.

Melakukan deploy

1

hugo deploy

Perintah untuk men-deploy situs. Pengaturan deploy dikonfigurasi dalam file config.toml.

Menampilkan daftar artikel

1

hugo list all

Perintah untuk menampilkan daftar artikel.

Memeriksa konfigurasi

1

hugo config

Perintah untuk memeriksa konfigurasi.

Menampilkan bantuan

1

hugo help

Perintah untuk menampilkan bantuan.

Menampilkan versi

1

hugo version

Perintah untuk menampilkan versi.

Demikianlah daftar perintah Hugo. Ada banyak perintah lain yang tersedia, jadi silakan merujuk ke dokumentasi resmi.

Referensi

Dokumentasi Resmi Hugo

Ekstensi Browser Pembaruan Otomatis Halaman Web (Add-on Edge)

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

Saya akan memperkenalkan ekstensi browser Edge “Pembaruan Tab Otomatis” yang memperbarui halaman web secara otomatis.

Instalasi Pembaruan Tab Otomatis

Pembaruan Tab Otomatis

Akses situs di atas dan klik Instal.

Klik Tambahkan ekstensi.

Cara Menggunakan

Setelah instalasi selesai, sebuah ikon akan ditambahkan ke kanan atas Edge.

Buka halaman web yang ingin Anda perbarui secara otomatis dan klik ikon untuk memulai pembaruan otomatis.

Bagian yang dibingkai hijau adalah interval pembaruan otomatis. Silakan pilih waktu untuk memperbarui secara otomatis.

Untuk menghentikan pembaruan otomatis, klik ikon lalu klik Stop reloading this tab.

Template Halaman Web Keren (html5up)

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

Template halaman web yang keren

html5up https://html5up.net/

Saya pikir saya ingin mencobanya, jadi ini adalah catatan.

Tentang situs materi foto "Unsplash" yang dapat digunakan untuk blog

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

Tentang “Unsplash”

https://unsplash.com/ja/

Ringkasan tentang situs materi foto “Unsplash” adalah sebagai berikut:

Semua gambar dapat digunakan secara gratis
Boleh digunakan untuk tujuan komersial
Modifikasi gambar diperbolehkan
Tidak memerlukan izin penggunaan
Tidak memerlukan atribusi

Sangat mudah digunakan saat menulis artikel di blog, jadi silakan dicoba.

※ Untuk lisensi, silakan merujuk ke “catatan kaki” di bawah ini. ¹

Saya juga akan memanfaatkannya di situs ini.

Lisensi Unsplash ↩︎

Menggunakan Tag HTML di HUGO

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

Secara default, HUGO tidak mengizinkan penggunaan tag HTML di dalam artikel, tetapi Anda dapat mengaktifkannya dengan menambahkan kode berikut pada file config.toml.

1
2


[markup.goldmark.renderer]
 unsafe = true

Referensi: Configure Markup

Mencentang Semua Kotak Centang di Halaman Web

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

Untuk mencentang semua kotak centang di halaman web, buka DevTools dengan F12, tempelkan kode berikut ke dalam konsol, dan jalankan.

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;
 }
}

Atau,

Buat bookmark baru, dan tempelkan kode berikut ke alamat saat mendaftar (biasanya di bagian Anda memasukkan https://…). Buka halaman web di mana Anda ingin mencentang kotak, klik bookmark yang telah dibuat, dan semua kotak centang akan dicentang.

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;}}})();

Jika Anda ingin menghapus semua centang, ubah bagian boxes[i].checked = true; pada skrip di atas menjadi boxes[i].checked = false;.

Perubahan Tata Letak Gambar PaperMod

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

Tata letak default menempatkan gambar di tengah dengan lebar 100%, tetapi kadang-kadang saya merasa itu agak terlalu besar, jadi saya mencoba membungkus gambar di bawah judul dan mengubah lebarnya menjadi sekitar 150px.

Lokasi perubahan file adalah sebagai berikut.

blank.css

Untuk mengubah margin, ukuran gambar, dan baris tampilan teks, tambahkan deskripsi berikut ke 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

Karena definisi tidak dapat dihapus di sisi blank.css, hapus satu baris berikut di post-entry.css.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← hapus baris ini
 height: auto;
}

list.html

Untuk mengubah tata letak gambar, saya mengubah bagian berikut dari 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) }} --><!-- pindah ke bawah -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- pindah ke bawah -->
 <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;"><!-- tambahkan -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- tambahkan -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- pindah dari atas -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- pindah dari atas -->
 </div><!-- tambahkan -->
 <div style="width:100%;"><!-- tambahkan -->
 {{- 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><!-- tambahkan -->
 </div><!-- tambahkan -->
</article>

Sepertinya ada cukup banyak permintaan serupa.

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

Saya akan berterima kasih jika pengembang asli juga mendukungnya.

Cara Mengatur Twitter Card di PaperMod

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

Pendahuluan

Tema PaperMod mendukung Twitter Card. Namun, pengaturan Twitter Card harus ditulis dalam config.toml atau di informasi header *.md pada setiap artikel. Jika diatur di artikel maupun di config.toml, informasi header dari setiap artikel akan diprioritaskan.

Cara Pengaturan

config.toml

Di config.toml, tambahkan item bernama images di bawah [params]. Di images, tulis path ke gambar yang akan ditampilkan di Twitter Card. Jika Anda menempatkan gambar di folder static, Anda hanya perlu menentukan nama filenya saja.

1
2


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

Struktur folder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Tulis di sini)
├─content
│ └─posts
│ └─folder artikel
│ │ index.md (Tulis di sini)
│ └─images
│ cover.png (Tempatkan di sini)
└─static
 twitter_card.jpg (Tempatkan di sini)

Informasi header setiap artikel

Di informasi header setiap artikel, tambahkan item bernama image di bawah cover. Jika Anda mengatur relative menjadi true, Anda dapat menentukannya dengan path relatif dari *.md artikel tersebut.

1
2
3


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

Jika Anda tidak ingin menampilkannya di bagian atas artikel

Jika Anda tidak ingin menampilkan gambar sampul di bagian atas artikel, tambahkan item bernama hidden di bawah cover dan atur menjadi true.

1
2
3
4


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

Tentang Ukuran Gambar

Berdasarkan spesifikasi PaperMod saat ini, ukuran Twitter Card tampaknya hanya mendukung summary_large_image. Ukuran yang tepat (resolusi) untuk summary_large_image bervariasi, namun sekitar 800 x 418 (rasio gambar 1.91:1) tampaknya sudah baik.

Situs referensi 1 Situs referensi 2

Jika memungkinkan, kami sarankan mengubah ukuran gambar sebelum mempublikasikannya.

Cara memeriksa pengaturan

Untuk memeriksa pengaturan Twitter Card, gunakan Twitter Card Validator. Namun, di lingkungan saya, pratinjau tidak ditampilkan dengan benar, jadi jika pratinjau tidak muncul, kami sarankan untuk memeriksanya sekali sebelum mempublikasikannya dengan menggunakan akun privat atau sejenisnya.

Mengubah Skema Warna PaperMod

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

Saya telah mengubah skema warna tema PaperMod. Saya merujuk ke bawah ini untuk metode perubahannya.

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

Path CSS adalah sebagai berikut.

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 {
}

Untuk saat ini, tidak ada perubahan pada mode gelap.