mdBook
如何在 mdBook 開發環境的文章中加入 LikeCoin button
感謝用戶 道場除草機 的教學範本。
安裝讚賞鍵以前,請先 註冊 Liker ID
放入 mdBook 產出的 HTML 靜態文件的重點是需要使用 Javascript 來動態產生下面 HTML 片段於瀏覽器之中。
1
<div class="likecoin-embed likecoin-button">
2
<div></div>
3
<iframe scrolling="no" frameborder="0"
4
src="https://button.like.co/in/embed/LikerID/button?referrer=http://yourhost/foo/page.html">
5
</iframe>
6
</div>
Copied!
客製 mdBook 先新增 likebutton.jsbook.toml 旁,也可以使用 likecoin/likecoin-button-sdksdk.js 原理類似。
likebutton.js
1
const LIKER_ID = "dltdojo";//記得換成自己的
2
let likeurl = `https://button.like.co/in/embed/${LikerID}/button?referrer=${encodeURI(window.location.href)}`;
3
let el = document.getElementsByClassName("likebutton")[0];
4
if(el){
5
el.innerHTML = `<div class="likecoin-embed likecoin-button">
6
<div></div>
7
<iframe scrolling="no" frameborder="0" src="${likeurl}"></iframe>
8
</div>`;
9
}
Copied!
並複製 LikeCoinButton-integration/style.css 成為 likebutton.css
1
.likecoin-button {
2
position: relative;
3
width: 100%;
4
max-width: 485px;
5
max-height: 240px;
6
margin: 0 auto;
7
}
8
.likecoin-button > div {
9
padding-top: 49.48454%;
10
}
11
.likecoin-button > iframe {
12
position: absolute;
13
top: 0;
14
left: 0;
15
width: 100%;
16
height: 100%;
17
}
Copied!
編輯 book.tomloutput.html 段落加入 js 與 css
1
[output.html]
2
default-theme = "coal"
3
mathjax-support = true
4
additional-js = ["likebutton.js"]
5
additional-css = ["likebutton.css"]
Copied!
最後就是看那一頁 md 裡面要加上按鈕就新增一個 div 後用 class 為 LikeCoin button 來綁住輸出。
1
<div class="likebutton"/>
Copied!
上面寫在 md 內的 div 在經過 mdbook build 轉化成為 HTML 後即能出現讚賞鍵。
目前只能限制一個 Liker ID 使用,如要提供多用戶可以用 getElementsByClassName(LikerIDFoo) 來實做。

參考文章

Last modified 8mo ago
Export as PDF
Copy link
Contents
參考文章