如何在 Hugo 部落格首頁加上 TypeIt 打字效果

前言
#

如果想要為 Hugo 部落格的首頁文字加上有趣的打字效果，可以輕鬆地做到！TypeIt 是一個非常受歡迎的 JavaScript 函式庫，它可以創建出打字的效果，讓你的文字更具動感與吸引力。以下是完成實作這個效果的步驟。

環境
#

主題：blowfish
目標頁面：your-blog-folder_path/layouts/partials/home/background.html
目標參數：your-blog-folder_path/config/_default/languages.zh-tw.toml

步驟 1：引入 TypeIt 函式庫
#

首先，需要將 TypeIt 函式庫加入到你的 Hugo 網站中。在 head 區域之前加入以下程式碼來引入 TypeIt：

<!-- background.html，在head之前加上-->
<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>


<head>
...其他內容
</head>

這段程式碼會載入 TypeIt 函式庫，讓你能在頁面中使用它的打字效果。

步驟 2：在首頁新增目標區塊
#

接著，在首頁的 HTML 中，需要添加一個標籤，例如

<p></p>

或是

<h2></h2>

這些標籤將會顯示打字文字。在想要顯示打字效果的地方，加入以下 HTML 程式碼：

<!-- background.html-->
<p class="multipleStrings"></p>

假設使用 p , 而這個 p 標籤將會是 TypeIt 應用打字效果的目標元素。

步驟 3：設定 TypeIt 打字效果
#

現在，來設定 TypeIt 函式庫的選項，這樣它就會根據我們的需求顯示不同的文字。以下的程式碼會在頁面載入時，看到打字效果。

<!-- background.html-->

<script>
new TypeIt(".multipleStrings", {
    strings: ["這是一個很棒的文字效果。", "但這裡有更棒的效果。"], // 可以自訂要顯示的文字
    breakLines: false, // 讓文字不換行
    loop: true,        // 讓打字效果循環播放
    speed: 50          // 設定打字的速度
}).go();
</script>

步驟 4：從 Hugo 設定檔案中讀取文字(可選）
#

如果你希望文字能夠從 Hugo 的 languages.toml 檔案中讀取，這樣就可以讓不同語言的網站顯示不同的打字效果。請在 languages.toml 中加入以下設定：

headline = "today is a good day"

接著，在你的首頁 HTML 檔案中，將這段程式碼加入頁面的適當位置，這樣文字就能動態地載入並顯示：

{{ with .Site.Author.headline }}
<h2 class="multipleStrings mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300" style="white-space: nowrap;"></h2>
<script>
    new TypeIt(".multipleStrings", {
        strings: [{{ . }}],  // 使用 Markdown 格式輸出
        breakLines: false,    // 確保文字不換行
        loop: true,           // 讓文字循環打字
        speed: 70             // 設定打字速度
    }).go();
</script>
{{ end }}