Hugo主题配置记录

1.引入busuanzi插件进行字数、访问量统计。

\layouts\partials\footer

footer文件中

增加以下代码

<!-- 卜算子统计信息 -->
    <section class="count_info">
    <!-- 1运行时间 -->
        <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>

    <!-- 2文章个数和字数 -->
        <div>
            {{ $scratch := newScratch }}
            {{ range (where .Site.Pages "Kind" "page") }}
                {{ $scratch.Add "total" .WordCount }}
            {{ end }} 
             <!-- 转换为整数 -->
         {{ $total := $scratch.Get "total" | int }} 
            <!-- 转换为浮点数 -->
      {{ $totalFloat := $total | float }} 
            {{ T "footer.count1" }} {{ len (where .Site.RegularPages "Section" "post") }} {{ T "footer.count2" }} {{ div $totalFloat 1000.0 | lang.FormatNumber 2 }} k {{ T "footer.count3" }}
        </div> 

    <!-- 3本站访问量 -->
        <div>
            <span id="busuanzi_container_site_pv">{{ T "footer.pv1" }}<span id="busuanzi_value_site_pv"></span>{{ T "footer.pv2" }}</span>
        </div>

    </section>

<!-- 卜算子js脚本 -->
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

(1)运行时间


<!-- 1运行时间 -->
<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>

(2)文章个数和字数

使用 Hugo 的Scratch 存储器计算总字数。range (where .Site.Pages “Kind” “page”)遍历所有页面类型为 page 的页面。
{{ $scratch.Add “total” .WordCount }} 将每个页面的字数累加到total。转化为整数和浮点数，
{{ len (where .Site.RegularPages “Section” “post”) }}计算文章数量。
{{ div $totalFloat 1000.0 | lang.FormatNumber 2 }} k将总字数除以 1000 格式化为两位小数。
Hugo 的T函数插入翻译文本

(3)本站访问量

使用js脚本

不蒜子 - 极简网页计数器 (ibruce.info)

复制js代码即可。

2.删除网站语言切换

config.yaml中删除默认语言设置

主题最新的配置文件可以在 exampleSite/config.yaml

配置主题 | Hugo 主题 Stack (stack-docs.netlify.app)

<--删除自己的配置即可-->

3.更改社交图标样式、间距

\assets\scss\custom.scss

中修改即可

.menu-social{
    gap: 15px;
    margin-top: 25px;
  }

4.增加返回顶部按钮、样式替换

\layouts\partials\widget

增加如下代码

{{ $topImg := resources.Get ("icons/back-to-top.svg") }}
<a id="back-to-top" href="#">
    {{$topImg.Content | safeHTML}}
</a>

resources.Get获取svg文件到$topImg

a标签属性链接href="#“实现返回顶部，插入svg内容进行渲染。

\assets\scss\custom.scss

$hover: 0.2s ease-in-out;
#back-to-top {
    position: fixed;  
    margin-left: 150px;
    bottom: 60px;
    display: none;
    border: 0;
    transition: transform $hover;
    &:hover {
      transform: translateY(-10px);
    }
}

ease-in-out过渡，#back-to-top 定义了 ID 为 back-to-top 的元素的样式规则。

\assets\icons

iconfont-阿里巴巴矢量图标库下载svg格式的图标，然后记住颜色代码，编辑搜索将颜色代码替换为currentColor就能实现颜色随暗色模式切换变化。

Hugo主题配置记录-7月21日博客更新日志