【Hugo】主题美化教程

Sat, 19 Oct 2024 00:00:00 +0000

修改站点背景颜色

在"assets/scss/variables.scss"中找到

`1`	`--body-background: #f6f6f6;`

或在"assets/scss/customs.scss"中找到

`1`	`--body-background: #f6f6f6;`

参考自：Hugo | Hugo-stack-theme 主题魔改版

友链的添加

在"content/page/links"的 index.md 中有详细解释，图标可通过图床或者本地渲染，模仿格式即可，或可直接把文件内容换为

---
title: 友情链接
links:
  - title: 爱吃鱼的小林 - linsk
    description: 一个大三程序员,博客讲述了hugo中许多美化stack的主题的教程、前端领域知识以及其他
    website: https://linsk27.github.io/
    image: fish.png
menu:
  main:
    weight: -50
    params:
      icon: link

comments: false
---

显示文章更新时间

手动添加更新时间

hugo 默认位置为 archetypes/default.md 或者主题下目录下 xx 主题/archetypes/posts.md，加lastmod字段，在创建文章模板里添加以下一行，创建时会以主题目录下的模板来创建。

`1`	`lastmod: { { .Date } }`

添加lastmod，有个好处就是可自由修改这个字段的时间。

在 “config.toml/yaml/json/” 中写明调整这里顺序即可

`1`	`frontmatter: lastmod = [":git", "lastmod", ":fileModTime", ":defalut"]`

自动添加更新时间

记得在"config.toml/yaml/json"开启 gitinfo

1
2

#获取git信息
enableGitInfo = true #设为true

这样就提交代码时，就会去读取 git 时间，来更新文章的更新时间!

但是后面我发现了一个问题：每次重新 git push 之后所有文件最近更新时间 mtime 都变成推送的时刻，这是 git 的一个部署配置问题,因此我搜索了许多博客，终于在hugo github action|vecel 部署后文章更新时间异常修复这篇文章找到了解决方法，总的来说：

在 “.github/workflows/xx.yml”,新增以下配置，主要是quotePath，默认情况下，文件名包含中文时，git 会使用引号吧文件名括起来，这会导致 action 中无法读取:GitInfo 变量，所以要设置Disable quotePath

- name: Git Configuration
        run: |
          git config --global core.quotePath false
          git config --global core.autocrlf false
          git config --global core.safecrlf true
          git config --global core.ignorecase false

使用checkout的话 fetch-depth 需要设为 0，depth默认是为 1，默认只拉取分支最近一次 commit，可能会导致一些文章的 GitInfo 变量无法获取，设为 0 代表拉去所有分支所有提交。

1
2
3

uses: actions/checkout@v4
with:
  fetch-depth: 0 #设为0

以下是我的最终的 yml 配置文件,大家可以参考

name: deploy

# 代码提交到main分支时触发github action
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Shanghai # 添加正确的时区
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Git Configuration
        run: |
          git config --global core.quotePath false
          git config --global core.autocrlf false
          git config --global core.safecrlf true
          git config --global core.ignorecase false

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: "latest"
          extended: true

      - name: Build Web
        run: hugo -D

      - name: Deploy Web
        uses: peaceiris/actions-gh-pages@v4
        with:
          PERSONAL_TOKEN: ${{ secrets.TOKEN }}
          EXTERNAL_REPOSITORY: linsk27/linsk27.github.io
          PUBLISH_BRANCH: main
          PUBLISH_DIR: ./public
          commit_message: auto deploy

更新时间显示在卡片

stack 主题的文章更新时间在文章底部
若想在文章开头就显示更新时间，修改 “layouts/partials/article/components/detail.html”，在指定位置引入以下代码

<div class="article-details">
  ...
  <footer class="article-time">
    ...
    <!-- 更新时间 -->
    {{- if ne .Lastmod .Date -}}
    <div class="article-lastmod">
      {{ partial "helper/icon" "clock" }}
      <time>
        {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02,
        2006 15:04 MST" ) }}
      </time>
    </div>
    {{- end -}} ....
  </footer>
  ...
</div>

这样就会文章开头显示修改时间

显示文章字数统计

在"config.toml/yaml/json"的.params.article中，添加

`1`	`wordCount: true #打开字数统计`

注意的是默认 WordCount 是不统计中文字数的，你需要在"config.toml/yaml/json"中添加

`1`	`hasCJKLanguage: true`

在"layouts/partials/article/components/details.html"中的 <footer class="article-time">内，打开本地 hugo 静态调试，按照位置添加

1
2

<i class="fa fa-regular fa-message" style="color: #ff8e2d;"></i>
本文有 {{ .WordCount }} 个字

效果如图

修改分类标签的颜色

在"content/categories"创建与分类同名的文件夹，并且在文件夹中创建"_index.md"文件并添加下面的内容,文件内会有一个 Test 的例子，可以模仿 Test 文件夹里面的内容

----
title: 这里写分类名称
description: 分类简介，不需要可以删了
image: "categories.png" // 分类的题图
style:
    background: "#80aba9" //分类标签底色
    color: "#fff"
----

背景脚本放置位置

dev\themes\hugo-theme-stack\layouts\partials\footer

【Nexus】桌面美化教程

Tue, 15 Oct 2024 00:00:00 +0000

nexus 下载安装
nuxes 下载链接

链接：https://pan.baidu.com/s/1M-cotx78rZfoPAqLzMquGA
提取码：ogh0

1.点击.exe 文件进行安装后显示 2.任务栏透明（可以都去实现）

方式一：安装 translucenTtb 插件

方式二：在设置设置任务栏自动隐藏图标

将桌面的图标都隐藏

进行 nexus 配置（不做过多的图片解释，可以自己一边调试一边研究，找出自己最爱的风格）
1.点击 nexus 任务栏的 nexus 打开软件

2.点击位置将停靠设置在底部，并且根据自己的喜好进行偏移参数调整后点击应用

3.点击“行为”,打开 dock 透明度，将 dock 透明度拉满

4.点击“效果”，把悬浮之类的效果都可以设置为弹跳，同时设置水波纹效果等

5. 点击“一般”，勾选隐藏系统任务栏(可勾可不勾)，勾选右下角操作栏消失

图标的添加
1.右键 nuxes 的自带图标，将没用的图标删除

2.右键 nexes 的自带 win 图标，点击创建 dock 项目

3.点击查找，获取对应需要的软件 exe 文件后会自动完善信息，点击确定即可

4.配置完成

添加音频条和时钟组件

日后出更新以及教程噢~~

恭喜你完成本文教程，最终配置效果如封面图，可以通过 wallpaper 找个动态壁纸，制作属于自己好看的桌面！

美化 on 404_@林达

【Hugo】主题美化教程

修改站点背景颜色

友链的添加

显示文章更新时间

手动添加更新时间

自动添加更新时间

更新时间显示在卡片

显示文章字数统计

修改分类标签的颜色

背景脚本放置位置

【Nexus】桌面美化教程

nexus 下载安装

进行 nexus 配置（不做过多的图片解释，可以自己一边调试一边研究，找出自己最爱的风格）

图标的添加

添加音频条和时钟组件

恭喜你完成本文教程，最终配置效果如封面图，可以通过 wallpaper 找个动态壁纸，制作属于自己好看的桌面！