使用Hugo框架搭建博客的過程 - 頁面模板

本文轉載自查看原文 2021-01-16 14:36 346

前言

最初在制作友鏈界面時，沒有學習Hugo框架，一頭霧水。網上有關的教程甚少，只能去學一遍Hugo。

在學習Hugo的過程中，了解了列表模板，分類模板。開發了幾個功能頁面，如：留言板，友鏈，記憶分類等。

本文介紹這些功能頁面。

里程碑頁面

首先需要了解頭部參數type，通過type指定文章使用的模板類型，默認為page類型。
要注意特殊模板的文章放在一般content根目錄下，模板放在layouts目錄下。
里程碑界面依據themes\LoveIt\layouts\posts\single.html修改，刪除贊賞，相關文章推薦等功能。

{{- define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end -}}

{{- define "content" -}}

{{- .Scratch.Delete "this" -}}

    {{- $params := .Scratch.Get "params" -}}

    {{- $toc := $params.toc -}}
    {{- if eq $toc true -}}
        {{- $toc = .Site.Params.page.toc | default dict -}}
    {{- else if eq $toc false -}}
        {{- $toc = dict "enable" false -}}
    {{- end -}}

    {{- /* Auto TOC */ -}}
    {{- if ne $toc.enable false -}}
        <div class="toc" id="toc-auto">
            <h2 class="toc-title">{{ T "contents" }}</h2>
            <div class="toc-content{{ if eq $toc.auto false }} always-active{{ end }}" id="toc-content-auto"></div>
        </div>
    {{- end -}}

    <article class="page single special">
        {{- /* Title */ -}}
        <h1 class="single-title animated flipInX">
            <i class="fas fa-monument fa-fw"></i>&nbsp;{{ .Title }}
        </h1>

        {{- /* Static TOC */ -}}
        {{- if ne $toc.enable false -}}
            <div class="details toc" id="toc-static"  kept="{{ if $toc.keepStatic }}true{{ end }}">
                <div class="details-summary toc-title">
                    <span>{{ T "contents" }}</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static">
                     {{- dict "Content" .TableOfContents "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
                </div>
            </div>
        {{- end -}}

        {{- /* Content */ -}}
        <div class="content" id="content">
            {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
        </div>
        <div id="post-footer"></div>
        
        {{- /* Comment */ -}}
        {{- partial "comment.html" . -}}
    </article>
{{- end -}}

這個模板也可以制作“愛情故事”。

關於頁面

相對里程碑界面，關於界面又刪除了目錄。

{{- define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end -}}

{{- define "content" -}}
    {{- $params := .Scratch.Get "params" -}}

    <article class="page single special">
        {{- /* Title */ -}}
        <h1 class="single-title animated flipInX">{{ .Title }}</h1>

        {{- /* Content */ -}}
        <div class="content" id="content">
            {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}

            <!-- 這里的版權聲明是根據文章內容添加的，可刪除 -->
            {{- /*copyright*/ -}}
            {{- $prestr := printf `<a href="%v" target="_blank" title="CC BY-NC-ND 4.0">%v</a>` .Site.Params.footer.license ( T "license" ) -}}
            {{- $laststr := printf `<a href="%v" target="_blank">%v</a>` ($.Site.Author.link | default .Site.Home.RelPermalink) ( T "penname" ) -}}
        {{- dict "preCopyRight" $prestr "afterCopyRight" $laststr | T "copyRightMsg" | safeHTML }}

        </div>

        {{- /* Comment */ -}}
        {{- partial "comment.html" . -}}
    </article>
{{- end -}}

類似的留言板頁面可以使用默認的"page"類型。如果頁面中有標題，同時不希望有目錄，“關於”頁面的模板更合適。或者使用頭部參數toc: false禁用目錄。

列表模板

列表頁面是在文章的頭部自定義參數，在模板中渲染。例如友鏈模板，參考LoveIt-extend/content/links/index.zh-cn.md。
頭部參數需要按照yml文件的格式，注意不能用tab縮進。

links: 
  me: 
    name: 我 
    weight: 1
    people: 
      - name: 朤堯
        url: https://www.xiaodejiyi.com/
        avatar: https://www.gravatar.com/avatar/ae94c8d8ca3d56eb035a3e62c2595150?s=240&d=mp
        description: just do sth i should do.
  friends: 
    name: 朋友 
    weight: 2 
    people:

links模板為：

<!-- links按照weight排序，排序后改變了原來的數組結構，相當於weight變為key值，其他數據組成value -->
{{- range $weight, $website := sort .Params.links "weight" -}}
    <h3 id="{{ $website.name }}" tabindex="-1" style="outline: none;"><a href="#{{ $website.name }}"></a>{{ $website.name }}</h3>
    <ul style="list-style: none;" id="firendLink">
        {{- range $website.people -}}
            <li>
                <div class="box">
                    <div class="media">
                        <div class="media-left"><img src="{{ .avatar }}" width="55"></div>
                        <div class="media-content">
                            <i class="fa fa-user-ninja fa-fw"></i>
                            <!-- . 是 當前作用域 -->
                            {{ .name }}&nbsp;<i class="fa fa-link fa-fw"></i>
                            <a href="{{ .url }}" target="_blank">{{ .url }}</a>
                            <p>{{ .description }}</p>
                        </div>
                    </div>
                </div>
            </li>
        {{- end -}}
    </ul>
{{- end -}}

不過這里有一個Bug，content\links\index.zh-cn.md正文部分不能使用Markdown的標題標簽或h1,h2...標簽，否則前端目錄代碼會報錯。

原因： links數組與文檔內容分為兩個部分，模板代碼中，我只考慮了links數組，未考慮文中的h標簽。生成的目錄應只有links數組的標題，如果文章中出現標題，結果是：正常渲染，頁面目錄數組溢出。
如果你准備修復這個問題，可以參考：Table of Contents。然后修改layouts\links\single.html模板文件中的目錄代碼。

生成目錄的代碼：

<!-- 修改前的側邊目錄 -->
<div class="details toc" id="toc-static"  kept="{{ if $toc.keepStatic }}true{{ end }}">
    <div class="details-summary toc-title">
        <span>{{ T "contents" }}</span>
        <span><i class="details-icon fas fa-angle-right"></i></span>
    </div>
    <div class="details-content toc-content" id="toc-content-static">
        {{- dict "Content" .TableOfContents "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
    </div>
</div>

<!-- 修改后links的目錄 -->
<div class="details toc" id="toc-static"  kept="{{ if $toc.keepStatic }}true{{ end }}">
    <div class="details-summary toc-title">
        <span>{{ T "contents" }}</span>
        <span><i class="details-icon fas fa-angle-right"></i></span>
    </div>
    <div class="details-content toc-content" id="toc-content-static">
        <nav id="TableOfContents">
            <ul>
            {{- /* modify director */ -}}
            {{- range $weight, $website := sort .Params.links "weight" -}}
                {{- $groupName := dict "Content" $website.name "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
                <li><a href="#{{ $groupName }}">{{ $groupName }}</a></li>
            {{- end -}}
            </ul>
        </nav>
    </div>
</div>

問題不大，還能用。同理，可以使用列表模板制作說說，相冊，視頻頁面，只是樣式設計上不同。

分類模板

分類模板，需要考慮模板的渲染順序，這個順序很長，參考Hugo's Lookup Order，而且需要其他背景知識，如type的詳細分類等等。
不過，按照以下步驟，你不需要深入研究這個復雜的順序。

在config.toml中配置分類
categories和tags為默認分類

[taxonomies]
    # 左邊單數，右邊復數形式
    category = "categories"
    tag = "tags"
    booklist = "booklist"

創建樣例文章
在文章的頭部參數中添加分類，注意要有中括號：

categories:		["demo1"]
tags:			["demo2"]
booklist:       ["demo3"]

創建分類模板
首先要覆蓋主題默認的分類模板，分析默認模板themes\LoveIt\layouts\taxonomy\list.html的代碼：

...
{{- $taxonomy := .Data.Singular -}}
{{- if eq $taxonomy "category" -}}
    <i class="far fa-folder-open fa-fw"></i>&nbsp;{{ .Title }}
{{- else if eq $taxonomy "tag" -}}
    <i class="fas fa-tag fa-fw"></i>&nbsp;{{ .Title }}
{{- else -}}
    {{- printf "%v - %v" (T $taxonomy | default $taxonomy) .Title -}}
{{- end -}}
...

可以發現，默認模板中包含了category,tag和其他，這三種模板。
所以覆蓋需要將這個模板拆開，復制到博客的layouts目錄下，分別命名為：categories,tags,taxonomy。內容上可以不修改，也可以將if語句剪枝。例如layouts\categories\list.html：

<h2 class="single-title animated pulse faster">
    {{- $taxonomy := .Data.Singular -}}
    {{- if eq $taxonomy "category" -}}
        <i class="far fa-folder-open fa-fw"></i>&nbsp;{{ .Title }}
    {{- end -}}
</h2>

覆蓋之后，創建booklist分類的模板，復制categories分類的模板，修改為：

<h2 class="single-title animated pulse faster">
    {{- $taxonomy := .Data.Singular -}}
    {{- if eq $taxonomy "booklist" -}}
        <i class="far fa-folder-open fa-fw"></i>&nbsp;{{ .Title }}
    {{- end -}}
</h2>

是的，將if判斷的category改為booklist，再換個Font Awesome圖標。不要忘了還有layouts\booklist\terms.html也要改，同樣修改if判斷，改標題，改圖標。
刷新界面，看看booklist分類有沒有demo3的文章。如果沒有，hugo server重新啟動，現在應該有了。Hugo在這方面不能實時刷新。

首頁文章增加分類
回到首頁，你會發現，文章只有categories和tags的分類：demo1和demo2。添加demo3需要在themes\LoveIt\layouts\_default\summary.html中加入新的分類。

{{- $booklist := slice -}}
{{- range .Params.booklist -}}
    {{- $category := partialCached "function/path.html" . . | printf "/booklist/%v" | $.Site.GetPage -}}
    {{- $booklist = $booklist | append (printf `<a href="%v"><i class="fas fa-file-alt fa-fw"></i>%v</a>` $category.RelPermalink $category.Title) -}}
{{- end -}}
{{- with delimit $booklist "&nbsp;" -}}
    &nbsp;<span class="post-category">
        {{- . | safeHTML -}}
    </span>
{{- end -}}

繼續加其他分類，只需要再復制一段，用編輯器Ctrl+H替換代碼中的booklist。

筆記頁面

博客最初的設計是Hugo寫文章，VuePress記筆記。在寫這篇教程的過程中發現，如果把OneNote記的筆記放到VuePress上，再寫文章，這會消耗大量時間。
不過VuePress能給文章加上一個背景知識。權衡之后放棄了VuePress。

如果你需要搭建一個筆記網站，可以考慮VuePress和Hugo的learn主題。

VuePress搭建過程可以參考B站教程和VuePress 中文文檔。

搭建時需要注意這兩點：

Auto Sidebar插件自動生成側邊導航欄，如果沒有這個插件，VuePress會繁瑣得不想再用。
內置搜索只為頁面的標題、h2、h3以及tags構建搜索索引。docsearch只支持技術文檔，不支持博客索引和商業內容。Algolia搜索的方法可行，但是配置Algolia步驟很麻煩。

最后

博客搭建教程結束，如果你想要添加更多的功能，更靈活的開發自己的博客，那么學習Hugo框架吧！只是這需要投入一些成本，學習Hugo花了11個小時，開發又用了95個小時。或許你還需要了解下自媒體以及公眾號，知乎等其他寫作平台，這消耗了28個小時。（番茄工作法統計得出）

專心於博客的內容創作或許是更好的選擇，希望這篇教程可以幫到你。

如果想學習Hugo，那么Hugo論壇是一個不錯的地方。

我為什么要搭博客呢？把知識留下來！

參考

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用Hugo框架搭建博客的過程 - 主題配置使用Hugo框架搭建博客的過程 - 功能拓展 Ubuntu搭建hugo博客 hugo搭建個人博客使用Hugo，只需5分鍾，輕松搭建一個自己的博客 Windows下搭建Hugo博客用Node.JS+MongoDB搭建個人博客（頁面模板）（五）（結束）從0開始搭建屬於自己的博客(使用hexo博客框架搭建，並部署到github) 使用 Hugo + Github Pages 創建靜態網站博客基於hugo + github 建立個人博客