LikeCoin
WebsiteDiscord GitHubSupport Us
中文
中文
  • LikeCoin - 去中心出版
  • Liker Land 答客問
  • 📕去中心出版
    • 去中心出版
    • Liker Land 書店 Affiliation Program
      • Stripe Connect Payout Account Status
    • 上架電子書的常見問題
    • 上架電子書
      • 上架 PDF 電子書
    • 管理電子書
      • 設定電子書套裝
      • 購買連結
      • 批量製作 QR Code 與短網址
      • 管理 Authz 授權
      • 補書上架
      • 修改已出版的電子書資料
      • 銷毁已出版的電子書
    • 購買電子書
      • 送贈電子書
      • 閱讀電子書
      • 匯入電子書檔到閱讀器
        • 匯入電子書檔到 Readmoo
        • 匯入電子書檔到 Kobo
      • 其他電子書平台
        • 端點出版
        • 董富記
        • BookForest
    • 註冊帳戶
      • 重設密碼
      • 保護你的 Liker ID
      • 管理登入裝置
      • 修改頭像及顯示名稱
      • 匯出錢包助記詞
      • 什麼是 Authcore?
    • Liker Land 功能介紹
      • 我的書架
      • 通知功能
      • 關注創作者
      • NFT 詳細資訊
    • 發送 NFT
      • 群發 NFT 紀念品給支持者
    • 其他 NFT 工具
    • Writing NFT 常見問題
    • 出版 Writing NFT
      • 電郵或社交登入
      • Keplr
      • Cosmostation
      • Cosmostation app
      • Matters
      • Liker Social
      • illustBuy
      • 以 ISCN ID 出版 NFT
    • 收藏 Writing NFT
      • 以桌機用 LIKE 購買 Writing NFT
      • 以手機用 LIKE 購買 Writing NFT
      • 一鍵收藏 Writing NFT
      • NFT 小部件
      • 動態定價
      • 二級市場
    • ISCN
      • ISCN 和 IPFS 的關係是什麼?
      • ISCN 的去中心特性對內容生態有什麼好處?
      • ISCN 支援什麼內容格式?
      • 如何註冊 ISCN
        • 電郵或社交登入
        • Keplr
        • Cosmostation
        • Cosmostation app
        • Matters
      • 如何大量註冊 ISCN
      • ISCN Browser
  • 🧭指南
    • 傳媒報導
    • 社群
      • #Community Call
      • #open-a-ticket
      • #faucet-testnet
      • #translate-wallet-prefix
      • LikeCoin Discord 錢包
      • LIKE this mesage
    • 水龍頭
    • 錢包
      • LIKE pay
      • Keplr 瀏覽器擴充功能
        • 安裝 Keplr 及註冊錢包
          • 以助記詞方式註冊新錢包
        • Keplr:存入及轉帳
        • Keplr + dao.like.co:提存、委託、治理
        • 在 Keplr 導入錢包
      • Keplr 手機錢包
        • 安裝 Keplr 手機錢包
        • Keplr Mobile:存入及轉帳
        • 在 Keplr Mobile 導入錢包
      • Cosmostation 瀏覽器擴充功能
        • 安裝 Cosmostation 瀏覽器擴充功能
        • Cosmostation:存入及轉帳
        • Comostation + dao.like.co:提存、委託、治理
        • 在 Cosmostation 導入錢包
      • Cosmostation 手機錢包
        • 安裝 Cosmostation app
        • Cosmostation app:存入及轉帳
        • 在 Cosmostation app 導入錢包
      • Leap 瀏覽器擴充功能
        • 安裝 Leap 瀏覽器擴充功能
        • Leap:存入及轉帳
        • 在 Leap 導入錢包
      • 多簽錢包
      • 錢包地址
      • 區塊瀏覽器
        • dao.like.co
        • Ping.pub
        • ATOMScan
      • 手續費
      • 新地址前綴 (like) 常見問題
      • 由 ERC-20 升級
        • 升級 LikeCoin ERC-20 到 LikeCoin chain
        • 升級 LikeCoin 的常見問題
    • 交易
      • 購買 LikeCoin
      • 在 Osmosis 交易
      • 註冊 DigiFinex 帳號
      • 在 DigiFinex 交易
      • 在 MyEthShop 交易
      • 場外交易
    • 流動性
      • Osmosis
    • 委託
      • 委託 LikeCoin
        • 以桌機委託 LikeCoin
        • 以手機委託 LikeCoin
      • 取回委託 LikeCoin
        • 以桌機取回委託
        • 以手機取回委託
      • 轉移委託 LikeCoin
        • 以桌機轉移委託
        • 以手機轉移委託
      • 因委託而產生的 LikeCoin 回報,錢從何來?
    • 治理
      • 社群治理會議
      • LikeCoin chain
      • 流動民主
      • 為議案存入保證金
      • 持份者直接投票
        • 以桌機投票
        • 以手機投票
      • 驗證人
        • 成為驗證人
        • 社群委託
        • 驗證人報表
      • 歷史議案
    • 去中心應用
      • LikeCoin app
        • 下載 LikeCoin app
        • Like — 化讚為賞
        • Super Like — 推文到宇宙
      • Liker ID
        • 以 Keplr 註冊 Liker ID
        • 綁定社交帳戶
      • 讚賞公民
        • 如何成為讚賞公民
        • 讚賞公民設定
        • 常見問題
        • 創作基金
        • 專屬優惠
        • 讚賞公民 Web3 報表
      • Web3Press
      • LikeCoin button 讚賞鍵
        • Matters
        • 其他自架網站
          • ghost
          • Hexo
          • Hugo
          • Jekyll
          • mdBook
          • October CMS
          • 其他
        • 其他寫作平台
          • 香港獨立媒體網
          • illustBuy
          • Tipga
          • Blink
          • Blogspot
          • SteemCN
          • Wix / Weebly
          • Write.as
      • 創作者工具
        • 查看讚賞成就
        • 每月創作進度
        • 創作基金排行榜
        • 奬勵發放時間
        • 未能收到獎勵?
        • 開發者簡介
      • Liker.Social
      • depub.space
        • 從 LikeCoin Discord 推文到 depub.space
        • 為 depub.space 增添頭像
      • 詞彙表
    • 品牌素材下載
Powered by GitBook
On this page
Export as PDF
  1. 指南
  2. 去中心應用
  3. LikeCoin button 讚賞鍵
  4. 其他自架網站

mdBook

如何在 mdBook 開發環境的文章中加入 LikeCoin button

PreviousJekyllNextOctober CMS

Last updated 3 years ago

感謝用戶 的教學範本。

安裝讚賞鍵以前,請先 。

放入 mdBook 產出的 HTML 靜態文件的重點是需要使用 Javascript 來動態產生下面 HTML 片段於瀏覽器之中。

<div class="likecoin-embed likecoin-button">
  <div></div>
  <iframe scrolling="no" frameborder="0" 
    src="https://button.like.co/in/embed/LikerID/button?referrer=http://yourhost/foo/page.html">
  </iframe>
</div>

客製 mdBook 先新增 likebutton.js 於 book.toml 旁,也可以使用 的 sdk.js 原理類似。

likebutton.js

const LIKER_ID = "dltdojo";//記得換成自己的
let likeurl = `https://button.like.co/in/embed/${LikerID}/button?referrer=${encodeURI(window.location.href)}`;
let el = document.getElementsByClassName("likebutton")[0];
if(el){
    el.innerHTML = `<div class="likecoin-embed likecoin-button">
  <div></div>
  <iframe scrolling="no" frameborder="0" src="${likeurl}"></iframe>
</div>`;
}
.likecoin-button {
  position: relative;
  width: 100%;
  max-width: 485px;
  max-height: 240px;
  margin: 0 auto;
}
.likecoin-button > div {
  padding-top: 49.48454%;
}
.likecoin-button > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

編輯 book.toml 的 output.html 段落加入 js 與 css

[output.html]
default-theme = "coal"
mathjax-support = true
additional-js = ["likebutton.js"]
additional-css = ["likebutton.css"]

最後就是看那一頁 md 裡面要加上按鈕就新增一個 div 後用 class 為 LikeCoin button 來綁住輸出。

<div class="likebutton"/>

上面寫在 md 內的 div 在經過 mdbook build 轉化成為 HTML 後即能出現讚賞鍵。

目前只能限制一個 Liker ID 使用,如要提供多用戶可以用 getElementsByClassName(LikerIDFoo) 來實做。

參考文章

並複製 成為 likebutton.css

🧭
道場除草機
註冊 Liker ID
likecoin/likecoin-button-sdk
LikeCoinButton-integration/style.css
如何在 mdbook 的文章中加入讚賞鍵 Likecoin Button