前言
有時候某篇文章有瑕疵或是涉及的資訊不想讓所有人都看到，但我們又希望文章能在網頁上供特定人士觀看。這時候，文章密碼就派上用場啦！
將文章上鎖後，需要輸入密碼才可繼續觀看。
要達到這種效果很簡單，僅需要修改 3 個檔案。如果有多語言需求，則須修改翻譯鍵。
修改 single.html
進入網站根目錄的 /layouts/posts/single.html 檔案，並於 {{- $params := .Scratch.Get "params" -}} 之下新增以下內容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!--頁面密碼-->
{{- $password := $params.password | default "" -}}
{{- $promptKey := $params.promptKey | default "" -}}
{{- if ne $password "" -}}
<script>
(function(){
if({{ $password }}){
let pageViewPrompt = prompt({{ $promptKey }} || {{ T "passwordPrompt" }});
if (pageViewPrompt != {{ $password }}){
alert({{ T "passwordError" }});
if (history.length === 1) {
window.opener = null;
window.open('', '_self');
window.close();
} else {
history.back();
}
}
}
})();
</script>
{{- end -}}
|
看起來會像是
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
| {{- define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end -}}
{{- define "content" -}}
{{- $params := .Scratch.Get "params" -}}
<!--頁面密碼-->
{{- $password := $params.password | default "" -}}
{{- $promptKey := $params.promptKey | default "" -}}
{{- if ne $password "" -}}
<script>
(function(){
if({{ $password }}){
let pageViewPrompt = prompt({{ $promptKey }} || {{ T "passwordPrompt" }});
if (pageViewPrompt != {{ $password }}){
alert({{ T "passwordError" }});
if (history.length === 1) {
window.opener = null;
window.open('', '_self');
window.close();
} else {
history.back();
}
}
}
})();
</script>
{{- end -}}
...
|
修改 default.md
接下來，到網站根目錄下的 /archetypes/default.md 檔案中新增 promptKey: "" 和 password: "" ，看起來會像是
1
2
3
4
5
6
7
| title: "{{ replace .TranslationBaseName "-" " " | title }}"
subtitle: ""
date: {{ .Date }}
lastmod: {{ .Date }}
draft: true
promptKey: ""
password: ""
|
修改國際化語言檔案
最後，到網站根目錄的 /i18n/語言代碼.toml 檔案中新增翻譯鍵值，以下使用繁體中文 (zh-tw) 和英文 (en) 示範。
zh-tw.toml
1
2
3
4
5
| [passwordPrompt]
other = "本文章暫不公開，請輸入密碼進行觀看。"
[passwordError]
other = "密碼錯誤。"
|
en.toml
1
2
3
4
5
| [passwordPrompt]
other = "This article is currently unpublished. Please enter the password to view it."
[passwordError]
other = "Incorrect password."
|
使用方法
如果文章需要設定密碼，只要在該文章的 markdown 檔案中將密碼填入 password: "" 即可，例如密碼為 123 就填入 password: "123" 。如果將密碼保持為 password: "" ，該文章則不需要密碼即可觀看。
修改 promptKey: "" 可以更換輸入密碼的提示詞，預設 "" 表示直接使用翻譯檔案中預設的翻譯鍵值。假設要修改提示詞為 本文章不公開 ，則填入 promptKey: "本文章不公開" 即可。
結語
心血來潮查資料並製作、修改出可以將文章上鎖的功能。一開始以為這沒什麼用，使用後發現這功能真是越用越方便，推薦一定要試試！
運行環境
- Hugo 0.144.2
- LoveIt 主題（2025 年 2 月 21 日 Github 上的版本）
參考資料
授權
以上文章部分內容經參考資料中原作者 Stilig 同意並授權重製、改編與轉發，其餘內容均為原創。
以上文章部分內容經參考資料中原作者 Stilig 同意並授權重製、改編與轉發。授權圖片。
