“拍手讚賞鍵”安裝介紹

小編把英文原文重點整理後,翻譯成中文po上這裡讓大家參考~

如何將掌聲按鈕整合到 Ghost 主題中

掌聲按鈕是一個簡單但功能強大的工具，可讓讀者表達對您的內容的欣賞。 它為用戶提供了一種視覺和互動的方式來表達他們的支持，類似於Medium上流行的「拍手」功能。

 透過將掌聲按鈕整合到您的 Ghost 主題中，您可以為讀者創造一個積極參與您的貼文的機會，並增強您網站周圍的社群意識。

 您可以在 Scott Logic 部落格上查看該插件的運作情況。

¶•要將此功能新增至您的文章中，您必須在主題中包含掌聲按鈕 JavaScript 和樣式表，然後新增掌聲按鈕元素，然後您就可以開始了！

 *新增腳本和样式表。

 新增這些內容最簡單的方法是從 Ghost 管理設定 → 程式碼注入，新增以下內容：

<!-- add the button style & script -->

<link rel="stylesheet" href="https://unpkg.com/applause-button/dist/applause-button.css" />

<script src="https://unpkg.com/applause-button/dist/applause-button.js"></script>

*Add the <applause-

button> to your post

在此步驟中，您需要編輯 post.hbs 檔案並將按鈕放置在您希望其顯示的位置。 它可以位於標題旁邊、內容之前或內容之後，甚至可能位於多個位置。

 *這是代碼：

<applause-button style="width: 58px; height: 58px;">

</applause-button>

@上面的程式碼將為您的貼文呈現掌聲按鈕，高度和寬度均為 58px

™造型和配置

 首先，按鈕是響應式的，因此它的大小應該適應您的容器。 您可以變更的其他屬性：

 color - 您可以透過按鈕的顏色屬性來變更按鈕的顏色，例如 <applause-button color="red" />，或者您可以套用 CSS 來設定自訂顏色。

 multiclap - 預​​設情況下，使用者只能鼓掌一次。 如果您希望他們能夠新增多個“拍手”，請將 multiclap 屬性設為 true。

 url - 您可以透過 url 屬性明確指定 URL，例如 <掌聲按鈕 url="{{url}}" />

Example with the above configuration:例如

<applause-button

  url="{{url}}"

  multiclap="true"

  style="width: 58px; height: 58px;">

</applause-button>