返回

Hugo Stack主题配置与使用

又换主题了,这回使用的是hugo-theme-stack,无意发现这款主题,正合我意,够简单,最重要的是支持本地搜索,再不用弄哪个Alogia了。

下载主题&更新主题

  1. 下载主题
git init
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
  1. 更新主题
git submodule update --remote

查看主题版本号

git show 查看当前版本
----------------------------------------------------------------
git tag 列出所有版本号
git checkout +某版本号 (你当前文件夹下的源码会变成这个版本号的源码)

config.yaml配置文件

baseurl: /
languageCode: zh-CN
theme: hugo-theme-stack
paginate: 10
title: Bore's Notes

# Change it to your Disqus shortname before using
# disqusShortname: 

# GA Tracking ID
googleAnalytics:

# Theme i18n support
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, es, de, nl, it
DefaultContentLanguage: zh-cn

permalinks:
    post: /archives/:slug/
    page: /:slug/
    
# whether to use emoji code
enableEmoji: true

params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon: /img/favicon.png

    footer:
        since: 2020
        customText:

    dateFormat:
        published: 2006-01-02
        lastUpdated: 2006-01-02

    sidebar:
        emoji: 🍥
        subtitle: 博观而约取,厚积而薄发
        avatar:
            enabled: false
            local: true
            src: img/avatar.jpg

    article:
        math: false
        toc: true
        readingTime: false 
        license:
            enabled: false
            default: Licensed under CC BY-NC-SA 4.0
        edit:
            enabled: true

    comments:
        enabled: true
        provider: waline

        utterances:
            repo: iwyang/comments
            issueTerm: title
            label: utterances
            theme: dark-orange

        remark42:
            host:
            site:
            locale:

        vssue:
            platform:
            owner:
            repo:
            clientId:
            clientSecret:
            autoCreateIssue: false

        # Waline client configuration see: https://waline.js.org/en/reference/client.html
        waline:
            serverURL: https://m.bore.vip/
            lang: zh-CN
            visitor: false
            avatar: mp
            emoji:
                - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
            requiredMeta:
                - nick
                - mail
            placeholder: 欢迎评论(昵称、邮箱必填,网址选填)
            locale:
                admin: 博主
   
        twikoo:
            envId: https://twikoo-lake.vercel.app
            region:
            path:
            lang:

    widgets:
        enabled:
            - search
            - categories
            - tag-cloud
            - archives
           
        archives:
            limit: 10000

        tagCloud:
            limit: 10000
            
        categoriesCloud:
            limit: 10000

    opengraph:
        twitter:
            # Your Twitter username
            site:

            # Available values: summary, summary_large_image
            card: summary_large_image

    defaultImage:
        opengraph:
            enabled: false
            local: false
            src:

    colorScheme:
        # Display toggle
        toggle: true

        # Available values: auto, light, dark
        default: auto

    imageProcessing:
        cover:
            enabled: true
        content:
            enabled: true

### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
    main:
        - identifier: home
          name: 首页
          url: /
          weight: -100
          pre: home
          params:
            ### For demonstration purpose, the home link will be open in a new tab
            newTab: false

related:
    includeNewer: true
    threshold: 60
    toLower: false
    indices:
        - name: tags
          weight: 100

        - name: categories
          weight: 200

markup:
    tableOfContents:
        endLevel: 4
        ordered: true
        startLevel: 2
    highlight:
        noClasses: false

archetypes默认模板

title: "{{ replace .TranslationBaseName "-" " " | title }}"
slug: ""
description: ""
date: {{ .Date }}
lastmod: {{ .Date }}
draft: false
toc: true
weight: false
image: ""
categories: [""]
tags: [""]

显示右侧工具栏分类目录

参考 https://github.com/CaiJimmy/hugo-theme-stack/issues/169

  1. Create categories.html in layouts/partials/widget
<section class="widget tagCloud">
  <div class="widget-icon">
      {{ partial "helper/icon" "categories" }}
  </div>
  <h2 class="widget-title section-title">{{ T "widget.categoriesCloud.title" }}</h2>

  <div class="tagCloud-tags">
      {{ range first .Site.Params.widgets.categoriesCloud.limit .Site.Taxonomies.categories.ByCount }}
          <a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">
              {{ .Page.Title }}
          </a>
      {{ end }}
  </div>
</section>
  1. 修改 config.yaml
widgets:
        enabled:
            - categories
        
        categoriesCloud:
            limit: 20
  1. 网站根目录新建\i18n\zh-CN.yaml
widget:
    categoriesCloud:
        title: 
            other: 分类
  1. Download categories.svg paste to assets/icons, from here

注意:可以按需删除图标。

文章底部添加在 GitHub 上编辑此页

  1. 拷贝主题目录/layouts/partials/article/components/footer.html到网站根目录,修改为:
<footer class="article-footer">
    {{ partial "article/components/tags" . }}

    {{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
    <section class="article-copyright">
        {{ partial "helper/icon" "copyright" }}
        <span>{{ default .Site.Params.article.license.default .Params.license | markdownify }}</span>
    </section>
    {{ end }}
	
	{{ if and (.Site.Params.article.edit.enabled) (not (eq .Params.edit false)) }}
    <section class="article-edit">
        {{ partial "helper/icon" "external-link" }}
        <span><a style="color: inherit;" href="https://github.com/iwyang/iwyang.github.io/edit/develop/content/{{ replace .File.Path "\\" "/" }}" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a></span>
    </section>
    {{ end }}

    {{- if ne .Lastmod .Date -}}
    <section class="article-lastmod">
        {{ partial "helper/icon" "clock" }}
        <span>
            {{ T "article.lastUpdatedOn" }} {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
        </span>
    </section>
    {{- end -}}
</footer>
  1. 编辑config.yaml
    article:
        math: false
        toc: true
        readingTime: true 
        license:
            enabled: false
            default: Licensed under CC BY-NC-SA 4.0
        edit:
            enabled: true

以后只要在Frontmatter添加edit: false来关闭。

  1. 拷贝external-link.svg图标到网站根目录/assets/icons下。图标地址:点击直达

添加友情链接 shortcodes

  1. 网站根目录新建文件layouts\page\links.html

    {{ define "body-class" }}article-page keep-sidebar{{ end }}
    {{ define "main" }}
        {{ partial "article/article.html" . }}
    
        <div class="article-list--compact links">
            {{ $siteResources := resources }}
            {{ range $i, $link :=  $.Site.Data.links }}
                <article>
                    <a href="{{ $link.website }}" target="_blank" rel="noopener">
                        <div class="article-details">
                            <h2 class="article-title">
                                {{- $link.title -}}
                            </h2>
                            <footer class="article-time">
                                {{ with $link.description }}
                                    {{ . }}
                                {{ else }}
                                    {{ $link.website }}
                                {{ end }}
                            </footer>
                        </div>
    
                        {{ if $link.image }}
                            {{ $image := $siteResources.Get (delimit (slice "link-img/" $link.image) "") | resources.Fingerprint "md5" }}
                            {{ $imageResized := $image.Resize "120x120" }}
                            <div class="article-image">
                                <img src="{{ $imageResized.RelPermalink }}" width="{{ $imageResized.Width }}" height="{{ $imageResized.Height }}"
                                    loading="lazy" data-key="links-{{ $link.website }}" data-hash="{{ $image.Data.Integrity }}">
                            </div>
                        {{ end }}
                    </a>
                </article>
            {{ end }}
        </div>
    
        {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}} 
            {{ partial "comments/include" . }}
        {{ end }}
    
        {{ partialCached "footer/footer" . }}
    
        {{ partialCached "article/components/photoswipe" . }}
    {{ end }}
    
  2. 网站根目录新建文件\layouts\shortcodes\link.html

    {{$URL := .Get 0}}
    {{ with .Site.GetPage $URL }}
    <div class="post-preview">
      <div class="post-preview--meta" style="width:100%;">
        <div class="post-preview--middle">
          <h4 class="post-preview--title">
            <a target="_blank" href="{{ .Permalink }}">{{ .Title }}</a>
          </h4>
          <time class="post-preview--date">{{ .Date.Format ( default "2006-01-02") }}</time>
          {{ if .Params.tags }}
          <small>{{ range .Params.tags }}#{{ . }}&nbsp;{{ end }}</small>
          {{ end }}
          <section style="max-height:105px;overflow:hidden;" class="post-preview--excerpt">
            {{ .Summary | plainify}}
          </section>
        </div>
      </div>
    </div>
    {{ end }}
    
    1. 网站图像放在网站根目录\assets\link-img\文件夹下。
    2. 网站根目录新建文件\data\links.json
    [
        {
            "title": "Upptime",
            "website": "https://iwyang.github.io/check",
            "image": "upptime.jpg",
         "description": "利用Github Actions查看网站运行状态。"
        },
    	{
            "title": "ConstOwn",
            "website": "https://blog.juanertu.com",
            "image": "constown.jpg",
         "description": "能与你一起成长,我荣幸之至。"
        },
        {
            "title": "小丁的个人博客",
            "website": "https://tding.top",
            "image": "ding.jpg",
         "description": "世间所有的相遇,都是久别重逢。"
        },
        {
            "title": "Xu's Blog",
            "website": "https://hasaik.com",
            "image": "xu.jpg",
         "description": "简单不先于复杂,而是在复杂之后。"
        },
        {
            "title": "知行志",
            "website": "https://baozi.fun",
            "image": "zhi.jpg",
         "description": "Halo Theme Xue作者。"
        },
        {
            "title": "Takagi",
            "website": "https://lixingyong.com",
            "image": "takagi.jpg",
         "description": "Takagi是啥呀??当然是最喜欢的Takagi了吖ヾ(≧∇≦*)ゝ"
        },
        {
            "title": "千与千寻",
            "website": "https://www.chihiro.org.cn",
            "image": "qian.jpg",
         "description": "所以,看不到光,算是不幸吗?需要光才是真正的不幸吧。"
        },
        {
            "title": "Bill Yang's Blog",
            "website": "https://blog.bill.moe",
            "image": "bill.jpg",
         "description": "这辈子都不可能更新的 。"
        },
        {
            "title": "Sanarous's Blog",
            "website": "https://bestzuo.cn",
            "image": "sanarous.jpg",
         "description": "Dream it possible, make it possible"
        },
         {
            "title": "JACK小桔子的小屋",
            "website": "https://jackxjz.top/",
            "image": "jack.jpg",
         "description": "一个分享科技/日常的网站。"
        },
    	{
            "title": "若只如初见",
            "website": "https://joyli.net.cn/",
            "image": "ruo.jpg",
         "description": "世间所有的相遇,都是久别重逢。"
        },
         {
            "title": "大大的小蜗牛",
            "website": "https://eallion.com/",
            "image": "eallion.jpg",
         "description": "机会总是垂青于有准备的人。"
        }
    ]
    

更改分类、标签、页面显示中文

  1. content目录下新建categories\_index.md:
---
title: "分类"
---
  1. content目录下新建tags\_index.md:
---
title: "标签"
---
  1. 根目录\i18n\zh-CN.yaml输入:
list:
    page:
        one: "{{ .Count }} 页面"
        other: "{{ .Count }} 页面"

最终根目录\i18n\zh-CN.yaml

list:
    page:
        one: "{{ .Count }} 页面"
        other: "{{ .Count }} 页面"

widget:
    categoriesCloud:
        title: 
            other: 分类

附:使用Git Submodule管理Hugo主题

  • 如果克隆库的时候要初始化子模块,请加上 --recursive 参数,如:
git clone -b develop git@github.com:iwyang/iwyang.github.io.git blog --recursive
  • 如果已经克隆了主库但没初始化子模块,则用:
git submodule update --init --recursive
  • 如果已经克隆并初始化子模块,而需要从子模块的源更新这个子模块,则:
git submodule update --recursive --remote

更新之后主库的 git 差异中会显示新的 SHA 码,把这个差异选中提交即可。


  • 其他命令:在主仓库更新所有子模块:git submodule foreach git pull origin master

参考链接

Built with Hugo
Theme Stack designed by Jimmy