hugo stack 主题美化

修改字体

这里使用了Shimoko的鸿蒙字体CDN

在博客根目录/layouts/partials/head/custom.html文件内写入如下内容

没有该文件夹的话直接将主题目录下的layouts文件夹复制过来即可（为了方便后期维护，不建议直接在主题目录下修改）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<style>
    :root {
        /* 在style中优先调用HarmonyOS_Sans_SC_Medium */
        --sys-font-family: "HarmonyOS_Sans_SC_Medium", Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
        --code-font-family: "JetBrainsMono Regular", Menlo, Monaco, Consolas, "Courier New";
        --article-font-family: "HarmonyOS_Sans_SC_Medium", var(--base-font-family);
    }
</style>

<script>
    (function () {
        const customFont = document.createElement('link');
        customFont.href = "https://img.shimoko.com/fonts/font.css";
        customFont.type = "text/css";
        customFont.rel = "stylesheet";
        document.head.appendChild(customFont);
    }());
</script>

效果对比

双排友链

在博客根目录/assets/scss下创建custom.scss文件，写入如下内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


//友情链接双栏
@media (min-width: 1024px) {
  .article-list--compact.links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: none;
    box-shadow: none;

    article {
      background: var(--card-background);
      border: none;
      box-shadow: var(--shadow-l2);
      margin-bottom: 8px;
      border-radius: 10px;
      &:nth-child(odd) {
        margin-right: 8px;
      }
    }
  }
}

效果对比

添加站点统计信息与i18n

期望展示格式：

中文：

本博客已稳定运行 x 天 y 小时 z 分钟
共发表 x 篇文章 · 总计 y k 字
本站总访问量x次

英文：

This blog has been running stably for x day, y hours and z minutes
Published x articles in total · totaling y k words
The total number of visits to this site is x times

其中访问量使用不蒜子实现

在根目录/layouts/partials/footer/footer.html文件内添加如下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


<section class="count_info">
        <div>
            {{ T "footer.runtime1" }}
            <span id="ds" class="running-days"></span>
            {{ T "footer.runtime2" }}
            <span id="hs" class="running-days"></span>
            {{ T "footer.runtime3" }}
            <span id="ms" class="running-days"></span>
            {{ T "footer.runtime4" }}
        </div>
        <div>
            {{$scratch := newScratch}}
            {{ range (where .Site.Pages "Kind" "page" )}}
            {{$scratch.Add "total" .WordCount}}
            {{ end }}
            {{ T "footer.count1" }} {{ len (where .Site.RegularPages "Section" "post") }} {{ T "footer.count2" }} {{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }} k {{ T "footer.count3" }}
        </div>
        <div>
            <span id="busuanzi_container_site_pv">{{ T "footer.pv1" }}<span id="busuanzi_value_site_pv"></span>{{ T "footer.pv2" }}</span>
        </div>
</section>

<!-- Add blog running time -->
<script>
    let s1 = '2023-6-18'; //website start date
    s1 = new Date(s1.replace(/-/g, "/"));
    let s2 = new Date();
    let timeDifference = s2.getTime() - s1.getTime();

    let days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
    let hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
    document.getElementById('ds').innerHTML = days;
    document.getElementById('hs').innerHTML = hours;
    document.getElementById('ms').innerHTML = minutes;

</script>

在主题目录/i18n下找到对应语言的文件，在属性footer下添加相应字段,结果如下

zh-cn.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


footer:
    # 本博客已稳定运行1天2小时3分钟
    runtime1:
        other: 本博客已稳定运行
    runtime2:
        other: 天
    runtime3:
        other: 小时
    runtime4:
        other: 分钟

    # 共发表x篇文章，总计y k字
    count1:
        other: 共发表
    count2:
        other: 篇文章 · 总计
    count3:
        other: 字

    # 本站总访问量X次
    pv1:
        other: 本站总访问量
    pv2:
        other: 次

en.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25



footer:
    # This blog has been running stably for 1 day, 2 hours and 3 minutes
    runtime1:
        other: This blog has been running stably for
    runtime2:
        other: day,
    runtime3:
        other: hours and
    runtime4:
        other: minutes

    # Published x articles in total, totaling y words
    count1:
        other: Published
    count2:
        other: articles in total · totaling
    count3:
        other: words

    # The total number of visits to this site is X times
    pv1:
        other: The total number of visits to this site is
    pv2:
        other: times

其他语言同理

效果展示

添加访客地图

使用clustrmaps实现

在根目录/layouts/partials/sidebar/right.html内添加script即可，添加后完整代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{{- $scope := default "homepage" .Scope -}}
{{- $context := .Context -}}
{{- with (index .Context.Site.Params.widgets $scope) -}}
    <aside class="sidebar right-sidebar sticky">
        {{ range $widget := . }}
            {{ if templates.Exists (printf "partials/widget/%s.html" .type) }}
                {{ partial (printf "widget/%s" .type) (dict "Context" $context "Params" .params) }}
            {{ else }}
                {{ warnf "Widget %s not found" .type }}
            {{ end }}
        {{ end }}
        <div style="height: 30%;width: 30%">
            <script type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=xxxxx"></script>
        </div>
    </aside>
{{ end }}

效果展示