Hugo | Hugo-Cactus-theme-mod

2022-10-31

2413字

甘普基本变形定律

Hugo

修改主题的时候没有想过公开，很多地方改得很乱，见笑——能用就行！

Github仓库地址：Mantyke/hugo-theme-cactus-mod

原主题为hugo-theme-cactus，这个仓库是由Mantyke修改的魔改版本

预览：Demo站

使用方式

从零建立博客：Fork仓库到自己账号下，用Github 注册 Vercel，依次点击Overview → New Project → import刚刚Fork的仓库，设置FRAMEWORK PRESET为Hugo → 点击Environment Variables，设置NAME为HUGO_VERSION，Value为Hugo版本号（如0.89.0） → 点击Add → 点击Deploy，稍等十来秒即可部署完成。下载仓库到本地后使用Github Desktop更新文章。（注，本地预览需安装Hugo，具体请参照Hugo | 一起动手搭建个人博客吧相关内容）

旧博客更换主题：不同主题方式不同，推荐只保留原博客的content文件夹，迁移到本仓库content文件夹后再按情况调整。

注意：Vercel 已在国内被 GFW 封锁，如需要在国内地区访问，推荐自购域名绑定至 Vercel，或者使用 Github/Netlify 等类似服务。
具体步骤可以参考Hugo | 一起动手搭建个人博客吧中的 “Q：我觉得 Vercel 分配的域名太丑了”/“Q：我不想花钱，但还是觉得 Vercel 分配的域名太丑了”两条问答。

魔改内容

删除原仓库中部分代码，优化了在国内地区的访问速度。
修改菜单栏，可以将不同类型的文章分开放置（即Weekly/Other两个页面），并各自独立归档。
About页面显示个人标签墙（by Mengru）
书影游墙，点击About页面-偶尔读书/有时电影/抽空游戏三个Tag打开（同步workflow by怡红公子，页面代码by林木木，稍有修改）
随机访问友链（by Mengru）
内置Waline评论，需要自己配置serverURL
单图首页页面布局
根据个人喜好修改了一部分CSS

部分使用说明

基础配置

博客名称、描述等修改根目录下config.toml文件

title = "Hugo-Cactus-theme-mod" //引号内写博客名称
description = "Hugo-cactus-mod by 塔塔" //引号内写描述内容，会出现在首页

配色修改

mod默认使用主题中提供的classic配色方案，如需修改标题颜色/菜单栏颜色，修改assets/scss/colors/classic.scss文件中的$color-accent-1: #000000;一行。

修改加粗字体颜色，修改assets/scss/colors/classic.scss文件中

strong {
  font-weight: bold;
  color: #000000;
}

Weekly/Other

新建文章命令：（以新建到Weekly页面为例）使用hugo new weekly/2022/文章名称.md，2022是年份名，用于在文件中整理文件，可以忽略。

修改页面名称与路径：根目录下打开config.toml文件

[[menu.main]]
name = "Weekly"
url = "/weekly"
weight = 2

[[menu.main]]
name = "Others"
url = "/posts"
weight = 3

标签墙

标签墙修改：/layouts/_default/tags-wall.html，如果要给Tag带链接，链接中所有的/均需要写成/，否则链接无法正常访问。同样地，不规定标签大小时（随机大小），也需要把中间的一个/写成/
页面标题/路径修改：content文件夹下tags-wall.md

另外注意：如果使用书影游墙，请一定记得替换相应Tag的网址。

书影游墙

数据放在/data/douban文件夹book.csv/game.csv/movie.csv三个文件中，修改后可以通过http://localhost:1313/books/等地址预览效果。

页面标题/路径修改：content文件夹下book.md、movies.md、games.md

数据同步、表格填写及其他定制参考：Blog | 主题重新施工，和书影游展示墙

随机友链

使用方式：建立一个公开的Github Repo，在Repo中新建一个Issues，名字可以随意，填入以下内容后提交：

{
personal: {
name: '个人网站',
items: [
'https://mengru.space/',
'https://mantyke.icu/',
],
}
}

复制链接，在前面加上api.，例如，复制下来的链接是https://github.com/你的ID/friend-link/issues/1，把它修改为https://api.github.com/你的ID/friend-link/issues/1，将修改后的链接写入content/friends/index.html中

fetch('填入链接地址')
  .then(res => res.json())
  .then(data =>
    toObject(
      data.body.replace(/`/g, '').replace(/\n/g, '')  
  )
  .then(data => {
    init(data)
  })

修改“全部友链”页面：content/friendslink/index.md

评论（使用Waline）

相关配置位置：layouts/partials/comments/cactus_comments.html
根据官方文档配置完leancloud和Vercel后，打开cactus_comments.html，将域名填入serverURL: '',。
修改了一些css，配置了blobcat表情包，默认头像为monsterid。

首页布局设置

更换首页图片：layouts/index.html，修改图片链接：

<div>
  <img id="feiyu" src="">
</div>

设置博客头像

位置：/static/img，请将头像命名为avatar.png，替换原头像文件

修改页尾信息

站点名称及建站时间请修改以下代码

站点名称及链接：

#位置：/layouts/partials/footer.html

    <section class="copyright">
        &copy; 
        {{ if and (.Site.Params.footer.since) (ne .Site.Params.footer.since (int (now.Format "2006"))) }}
            {{ .Site.Params.footer.since }} - 
        {{ end }}
        {{ now.Format "2006" }} <a href="https://stack-theme-mod.vercel.app/">Example Site</a>·<i class="fas fa-bell"></i> <a id="days">0</a>Days<br>
      {{$var :=  $scratch.Get "total"}}{{$var = div $var 100.0}}{{$var = math.Ceil $var}}{{$var = div $var 10.0}}共书写了{{$var}}k字·共 {{ len (where .Site.RegularPages "Section" "post") }}篇文章</br><span><p>
    </section>

#位置：/layouts/partials/footer.html

var s1 = '2022-02-13';//设置为建站时间
s1 = new Date(s1.replace(/-/g, "/"));
s2 = new Date();
var days = s2.getTime() - s1.getTime();
var number_of_days = parseInt(days / (1000 * 60 * 60 * 24));
document.getElementById('days').innerHTML = number_of_days;