hugo主题stack

hugo 内容维护

本地调试

./hugo server --disableFastRender

发布到互联网

  • 清空本地public
  • 运行hugo 重新生成
  • 清空远程服务器内容
  • 上传本地public内容

写文章

Markdown 文件头

  • slug 日期开头可以防止url重复,文章slug生成的url, hugo会处理成小写
  • 文章头的key: value 值,冒号后要有空格
  • 文章头的key: value 值,值如果是数组,需要用空格
  • tags 组织内容比分类更有效,文章tag需要作为数组提供 [tag1,tag2]
  • image 可以使用互联网url
---
title: hugo主题stack
date: 2022-09-09T13:15:59+08:00
slug: 20220909_hugo_theme_stack
tags: [stack主题,rankment]
image: https://cn.bing.com/th?id=OHR.BHNMBelize_ZH-CN9422261941_1920x1200.jpg&rf=LaDigue_1920x1200.jpg
---

字体

  • 字体大小,颜色:规定文本的尺寸大小,取值范围为1~7 ,浏览器默认值是 3。注意,size=50也是可以显示的,但与7的字体大小一样
> <center><font size=7 color="blue">人类从根本上是感性的动物,图像比文字更有表现力。</font></center>

效果:

人类从根本上是感性的动物,图像比文字更有表现力。

安装部署维护

需要使用hugo的 hugo_extended版本: https://github.com/gohugoio/hugo/releases

创建博客: hugo new site myblog

主题官网: https://github.com/CaiJimmy/hugo-theme-stack

fork 版本(2022年9月9日版本): https://github.com/rankment/hugo-theme-stack

copy exampleSite 下的 config.yaml 到myblog 下并修改

avatar头像、favicon

请把头像图片、favicon.ico 文件放在站点根目录的 static 文件夹下, 例如static/avatar.png, 本地测试需要重启hugo. 不要问我为啥配置这么诡异:

        avatar:
            enabled: true
            local: false
            src: /avatar.png

右边栏

    widgets:
        homepage:
            - type: search
            # - type: archives
            #   params:
            #       limit: 5
            # - type: categories
            #   params:
            #       limit: 10
            - type: tag-cloud
              params:
                  limit: 100

左边栏菜单

参考: https://docs.stack.jimmycai.com/configuration/custom-menu.html

建议使用方式:在 config.yaml 的底部可以找到菜单的配置,默认的内容如下:

menu:
    main:
        - identifier: home
          name: Home
          url: /
          weight: -100
          params:
            icon: home
            newTab: true
  • identifier:ID
  • name: 显示文字
  • url: 链接
  • weight:权重
  • params
  • icon: 用于显示图标
  • newTab: 在新标签页打开链接

配置图标: 主题自带的 SVG 图标来自 Tabler Icons,存放在主题的 assets/icons 目录下。

你可以在站点根目录下新建同名文件夹,并下载更多的图标(参考:修改主题)

主题使用了 params.icon 字段来指定菜单项目的图标。params.icon: "archive" 会输出 assets/icons/archive.svg 图标。

menu:
    main: #[]
        - identifier: home
          name: 首页
          url: /
          weight: 10
          params:
            icon: home
            newTab: false
        - identifier: about
          name: 关于
          url: /p/about/
          weight: 20
          params:
            icon: user
            newTab: false
        - identifier: search
          name: 搜索
          url: /search/
          weight: 30
          params:
            icon: search
            newTab: false
        - identifier: archives
          name: 归档
          url: /archives/
          weight: 40
          params:
            icon: archives
            newTab: false
        - identifier: archives
          name: 归档
          url: /archives/
          weight: 40
          params:
            icon: archives
            newTab: false
        - identifier: links
          name: 链接
          url: /links/
          weight: 50
          params:
            icon: link
            newTab: false

需要保留page目录下 archives, search 两个文件夹,但可以删除其中文件内容的menu相关配置

数学公式:KaTex

浏览器客户端js负责渲染,Katex支持的函数参考: https://katex.org/docs/supported.html

Katex参考资料:

stack主题全局设置:

    article:
        math: true

块公式示例:

$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$

$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$

$行内公式示例:y=x^2$

$行内公式示例:y=x^2$

emoji

全局设置:

enableEmoji: true

emoji cheet sheet: https://www.webfx.com/tools/emoji-cheat-sheet/

emoji测试: :cupid: :smiling_imp:

在站点根目录新建文件 layouts/partials/head/custom.html,在head部分添加代码, 内容如下:

<style>
.emoji {
    font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
  }
</style>

emoji 字体支持,参考:

评论系统:utterances

不需要登录的评论系统不是好系统,容易造成垃圾评论泛滥。

github issue 可以email通知

    comments:
        enabled: true
        provider: utterances

        utterances:
            repo: rankment/utterances
            issueTerm: url
            label: utterances
            theme: preferred-color-scheme

html

  • 支持在 Hugo 的 Markdown 里直接使用 HTML: 直接配置 goldmark: unsafe: true 即可
  • url 以 .html结尾: uglyurls: true # url 以 .html结尾

修改 stack 主题

图片和 Markdown文档放在一起,解决图像路径自动生成问题

主题设置

assetDir: "content"

编辑主题文件

编辑 themes\stack\layouts\_default\_markup\render-image.html

该文件原始内容:


{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- $Permalink := .Destination | relURL | safeURL -}}
{{- $alt := .PlainText | safeHTML -}}
{{- $Width := 0 -}}
{{- $Height := 0 -}}
{{- $Srcset := "" -}}

{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
{{- $galleryImage := false -}}

{{- if $image -}}
    {{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
    {{- $Permalink = $image.RelPermalink -}}

    {{- if $notSVG -}}
        {{- $Width = $image.Width -}}
        {{- $Height = $image.Height -}}
        {{- $galleryImage = true -}}

        {{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
            {{- $small := $image.Resize `480x` -}}
            {{- $big := $image.Resize `1024x` -}}
            {{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
        {{- end -}}
    {{- end -}}
{{- end -}}

<img src="{{ $Permalink }}"
    {{ with $Width }}width="{{ . }}"{{ end }}
    {{ with $Height }}height="{{ . }}"{{ end }}
    {{ with $Srcset }}srcset="{{ . }}"{{ end }}
    loading="lazy"
    {{ with $alt }}
        alt="{{ . }}"
    {{ end }}
    {{ if $galleryImage }}
        class="gallery-image" 
        data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
        data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
    {{ end }}
>

第二行 {{- $Permalink := .Destination | relURL | safeURL -}} 替换为:

{{- $Permalink := path.Join .Page.File.Dir .Destination | relURL | safeURL -}}

删除loading="lazy",貌似保留的话加载图片有时候有问题。最后一段添加对外部图片的处理逻辑:

{{ if eq (substr .Destination 0 4) "http" }}
    <img src="{{ .Destination }}"  
        {{ with $alt }}
            alt="{{ . }}"
        {{ end }}
    >
{{ else }}
    <img src="{{ $Permalink }}"
    {{ with $Width }}width="{{ . }}"{{ end }}
    {{ with $Height }}height="{{ . }}"{{ end }}
    {{ with $Srcset }}srcset="{{ . }}"{{ end }}

    {{ with $alt }}
        alt="{{ . }}"
    {{ end }}
    {{ if $galleryImage }}
        class="gallery-image" 
        data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
        data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
    {{ end }}
    >
{{ end }}

调整图像显示,麻烦的是你需要找足够清晰的图:

themes\hugo-theme-stack\assets\scss\style.scss 添加如下代码:

img{
    position: relative;
    left: 50%;
    top: 50%;
}

参考:

测试

外部图片测试:

hugo主题stack

副作用

这会导致拼图/相册失效。

搜索

搜索提示:

您要提交的信息不安全
由于正在提交的表单使用的连接不安全,其他人可以看到你的信息。

baseurl 修改为https: baseurl: https://rankment.com

参考

评论(没有评论)