如何在自擁有的網站加入 LikeCoin button?
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
如何在 Hexo 開發環境的文章中加入 LikeCoin button
感謝用戶 只是個打字的 的教學範本。
安裝讚賞鍵以前,請先 註冊 Liker ID。
在 themes/next/layout/_custom/
目錄下新增一檔案 like_coin.ejs
並貼上下列程式碼,並將 [LikerID] 更改為你的 Liker ID。
打開 themes/next/layout/_macro/post.swig
在合適的位置把 like_coin.ejs
放置好
如果您沒有開啟相關文章的話,則加在往上幾行的 {{ post.content }}
後方
完成後就可以看到讚賞鍵出現在文章中。
如何在 ghost 文章中加入 LikeCoin button
感謝用戶 STANLEY TSAU 的教學範本,留意 ghost 是需要付費加入會員方可使用。
安裝讚賞鍵以前,請先 註冊 Liker ID。
將 IFrame 代碼加入 post.hbs
並將 [LikerID] 更改為你的 Liker ID
增加以下代碼到 css
完成。
如何在 Hugo 開發環境的文章中加入 LikeCoin button
感謝用戶 Wancat 的教學範本。
安裝讚賞鍵以前,請先 註冊 Liker ID。
先為你的網站選擇一個主題,以下採用 CleanWhite 這套主題作例子。
Hugo 可以使用自訂 Layout 的方式,在不改變主題的情況下改變網站設計,用戶可透過這個方式在每篇文章下放置讚賞鍵。
首先覆蓋文章的模板,將 theme
的 layouts
資料夾複製到專案目錄下
Hugo 中的 Partial Templates 可以讓你建立小模板,嵌入在頁面中。在 layouts
的 partials
資料夾建立 likecoin.html
,寫入以下內容。你也可以在這裡以 HTML 格式加上想給讀者看的說明文字
接下來在 config.toml
中加入以下程式碼,並將 [LikerID] 更改為你的 Liker ID
接著編輯文章使用的模板,通常位處於 _default/single.html
。這就是一個 Go Template,在你想要的地方插入,建議插在 {{ .Content }}
後面,這樣 LikeCoin button 就會接續出現文章下面
這樣 Hugo 就會將 LikeCoin 這個 partial render 到你的文章中了。記得加上 “.",沒有的話,LikeCoin 的模板讀不到資料。留意整個過程都不需要修改 theme 的原始程式
最後執行 hugo server
預覽你的網站。
如何在 Jekyll 開發環境的文章中加入 LikeCoin button
先在 _config.yml
加入 liker_id
鍵值,並將 [LikerID] 更改為你的 Liker ID
宣告在_config.yml
的變數可以從物件 site 中取得,也就是 {{site.liker_id}}
先建立讚賞鍵的 HTML 片段
用 if 檢查 liker_id
是否存在。接著要在 post 樣板裡加入剛才的片段,找個接近區段結束的地方寫上 {% include likeco.html %}
建置一次,文章末端已經可以看到讚賞鍵,不過大小還要調整。讚賞鍵的元件會自行適應以維持長寬比,其長寬約為 485px*240px。使用以下程式碼把它置中自動縮放並隱藏卷軸。
如何在 mdBook 開發環境的文章中加入 LikeCoin button
放入 mdBook 產出的 HTML 靜態文件的重點是需要使用 Javascript 來動態產生下面 HTML 片段於瀏覽器之中。
likebutton.js
編輯 book.toml
的 output.html
段落加入 js 與 css
最後就是看那一頁 md 裡面要加上按鈕就新增一個 div 後用 class 為 LikeCoin button 來綁住輸出。
上面寫在 md 內的 div 在經過 mdbook build 轉化成為 HTML 後即能出現讚賞鍵。
目前只能限制一個 Liker ID 使用,如要提供多用戶可以用 getElementsByClassName(LikerIDFoo) 來實做。
感謝用戶 的教學範本。
安裝讚賞鍵以前,請先 。
感謝用戶 的教學範本。
安裝讚賞鍵以前,請先 。
客製 mdBook 先新增 likebutton.js
於 book.toml
旁,也可以使用 的 sdk.js
原理類似。
並複製 成為 likebutton.css
如何在任何自架網站加入 LikeCoin button?
你可使用 LikeCoin API,在任何網站和 app 加入 LikeCoin button,詳情請參閱(英文)。 或參考: