hugo theme fiber

極簡主義者的雨果主題。 Fiber 使用最少的 JavaScript 和 CSS，以便您的網站加載速度更快！還擁有一個乾淨的用戶界面，非常適合眼睛！

目錄

• 安裝
  • 使用子模組
  • 直接下載主題
• 特徵
  • SEO 就緒
  • 簡碼
    • ASCII 線號
    • 我可以使用嗎
  • 點擊複製程式碼
  • 美麗的筆記
• 截圖
• 主題設定
  • 在主頁中列出內容
    • 部落格、筆記等列表
    • 列出自訂內容
  • 代碼高亮
  • 選單項目
  • 網站標題
• 寫作內容
  • 寫筆記
  • 前題

安裝

這個主題可以透過兩種方式與任何基於 Hugo 的網站一起使用。

1. 使用 Git 子模組（建議）
2. 直接下載主題到<hugo-site-root>/themes/

使用子模組

1. 使用hugo new site SITE_NAME建立您的網站
2. cd至SITE_NAME
3. 初始化 git 儲存庫： git init 。這是必要的，因為我們必須新增一個 git 子模組。
4. 透過運行git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber添加子模組
5. 現在，使用hugo serve在本地啟動Hugo伺服器

如果主題儲存庫中有更新，您可以使用git submodule update --remote拉取它們

直接下載主題

如果由於某種原因無法使用 Git，請使用此方法。

1. 下載此檔案並將其內容解壓縮到SITE_ROOT/themes/hugo-theme-fiber/ 。
2. 透過從終端執行hugo serve在本地啟動hugo。

特徵

SEO 就緒

該主題加載了基本的 SEO 以及來自 Schema.org 的最少 JSON-LD 數據

簡碼

除了開箱即用的短代碼之外，它確實還有一些其他有用的短代碼，這些短代碼有時會被證明是有用的。

ASCII 線號

嵌入 AsciiNema Cast。要使用的簡碼： {{< asciinema id="id of a public cast" >}}

我可以使用嗎

此短代碼顯示來自 caniuse.com 網站的最新數據。對於網頁開發人員有用。例子：

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

點擊複製程式碼

該網站的訪客只需單擊即可複製任何程式碼區塊的內容。這不會破壞程式碼縮排！

美麗的筆記

您在content/notes中放入的任何內容都會得到粗略的註釋。這使得從筆記中識別重要的事情變得更容易。

粗略註解使用strong 、 em和strikethrough等標籤進行控制。要產生新的notes條目，首先必須建立目錄content/notes 。然後使用hugo new notes/file-name.md產生一個Note。該文件將包含有關如何使用上述標籤註釋事物的資訊。

截圖

主題設定

在主頁中列出內容

主頁可以透過兩種不同的方式進行設定。您可以從content目錄中列出您最喜歡/最重要的部分。

或將自訂內容放入其中。

或者你可以兩者都做！確保建立一個檔案content/_index.md ，該檔案在 fromtmatter 中有一個屬性title 。此title屬性對於 SEO 很有用。例子：

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here --> 

部落格、筆記等列表

為了在主頁中建立內容列表，您需要在config.toml檔案中設定一個名為mainSections的變數。例子：

[ params ]
mainSections = [ " posts " ]

列出自訂內容

要列出自訂內容，只需將它們放在content/_index.md中並添加適當的 frontmatter 即可。

代碼高亮

預設情況下，Hugo 不會使用任何類別。但這不適用於該主題，因為某些功能依賴於該主題。

您需要運行程式碼區塊的類別。您可以這樣做：

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

選單項目

預設情況下，頂部選單中只有一個選單項目。要在其中新增更多項目，需要在config.toml中定義選單項目。以下是我網站的config.toml的範例：

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

網站標題

站點標題由config.toml中的以下參數控制：

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

寫作內容

寫筆記

Notes是這個主題中一種特殊的硬編碼。此類內容將得到粗略的註釋（這使得管理筆記更容易）。

使用指令hugo new notes/your-filename.md產生註解頁面，以了解如何在註解頁面中使用粗略註解。

包括註解的原型。

前題

該主題使用 frontmatter 處理自訂貼文描述和元圖像以進行 SEO。如果找不到meta.image和meta.description ，它將分別回退到/images/default-meta-image.png和.Summary 。

在 frontmatter 中使用這兩個字段，如下所示：

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->