先前在設定檔裡面發現這個部落格主題可以開啟留言的功能,這邊簡單介紹一下其背後所使用的Gitalk以及如何設定它。
Gitalk
Gitalk是一個使用GitHub issue來當作留言板的工具,讓使用者們可以簡單的在他們的網頁上面安插一些javascript就可以做到留言板的效果,還可以支援Markdown語法,可以看官方的demo來感受成品大概長什麼樣子。
套用在部落格上
在jekyll的主題,jekyll-TeXt-theme裡面,已經有內建好可以搭配Gitalk使用,只是需要一些前置步驟並修改一下設定。
建立GitHub Application
為了要讓Gitalk可以直接在GitHub上面幫你留言,我們需要建立一個GitHub Application,讓Gitalk以OAuth的方式代替你去GitHub上的issue留言,創建一個Application可以點這邊。
- Application name:應用程式的名字,可以隨意取
- Homepage URL:應用程式的首頁,以GitHub page的部落格而言,我是填GitHub page的網址
- Application description:非必填
- Authorization callback URL:同上面的Homepage URL
在建立好GitHub Application以後,網頁上應該會出現client id和client secret,在後面的設定會使用到,值得一提的是,client secret只會顯示這麼一次,記得要好好的保存起來。
修改_config.yml
在_config.yml裡面可以找到有關comment設定的部分,需要修改的地方有兩塊,一個是需要把provider
改成gitalk,另一個是在底下gitalk
的區塊要把列出來的資訊填好,而設定中的repository
是將來儲存comment的repo,未來comment會儲存在該repo的issue裡面,必須要是public的,這個repo可以跟存放網頁的repo不同,一個修改過後的範例貼在底下,記得要將client id和client secret改掉。
comments:
provider: gitalk # false (default), "disqus", "gitalk", "valine", "custom"
# Disqus
disqus:
shortname: # the Disqus shortname for the site
## Gitalk
# please refer to https://github.com/gitalk/gitalk for more info.
gitalk:
clientID : ENV_CLIENT_ID # GitHub Application Client ID
clientSecret: ENV_CLIENT_SECRET # GitHub Application Client Secret
repository : "wjohn1483.github.io" # GitHub repo
owner : "wjohn1483" # GitHub repo owner
admin: # GitHub repo owner and collaborators, only these guys can initialize GitHub issues, IT IS A LIST.
- "wjohn1483"
# - your GitHub Id
proxy: https://netnr-proxy.cloudno.de/https://github.com/login/oauth/access_token
# Valine
# please refer to https://valine.js.org/en/ for more info.
valine:
app_id : # LeanCloud App id
app_key : # LeanCloud App key
placeholder : # Prompt information
visitor : # false (default)
meta : # "[nick, mail, link]" (default) nickname, E-mail, Personal-site
值得一提的是,原本預設的proxy好像開始限定流量了,所以如果用預設的proxy會無法使用,範例中參考了Gitalk issue中的解法,改掉預設的proxy。
在文章當中加入key
為了要讓Gitalk知道那篇文章對應到那個issue,我們需要給每一篇文章獨一無二的id,並寫在文章的front matter裡面。
---
layout: article
title: Document - Writing Posts
mathjax: true
key: your-article-id
---
這個id在front matter裡面稱作key
,它的命名規則可以參考這裡。
在設定好以後,在本機執行編譯的指令,應該就能在每篇文章底下找到留言板了。
JEKYLL_ENV=production bundle exec jekyll build
直接使用在靜態網頁上
如果想要直接使用在單個html上面,不想跟jekyll主題綁在一起的話,可以參考Gitalk文件當中的方式,使用起來相當的簡單。
只需要在你的html裡面<head>
的地方,多引入Gitalk的javascript。
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
</head>
並在<body>
裡面新增<script type="text/javascript">
,把相關的變數設定好,client id和client secret的取得可以參考文章上面的建立GitHub Application。
const gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo', // The repository of store comments,
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id: location.pathname, // Ensure uniqueness and length less than 50
distractionFreeMode: false, // Facebook-like distraction free mode
proxy: 'https://netnr-proxy.cloudno.de/https://github.com/login/oauth/access_token'
})
gitalk.render('gitalk-container')
這邊有帶入Gitalk issue裡面所提到的,其他人所提供的proxy,如果想用原本預設的proxy,直接將proxy的設定拿掉就行。
最後在想要插入Gitalk的地方放個<div>
就可以了。
<div id="gitalk-container"></div>