Hugo Cactus|给主题来场 makeover
我也不知道我怎么这么莽,主打一个自信(?)……脑子空空什么也没看就开始改了,刚开始甚至不知道打开本地预览,但一边搜索一边问 AI ,加上自己读文档看教程,学会了用网页检查器和翻别的主题的代码,摸索着竟然也改出来了还不错的样子。从摸不着头脑哐哐撞大墙到明明白白搞定的过程中学到了不少东西,感到十分满足。
不知道改主题装修存不存在什么 best practice 之类的,我是把主题原文件改的面目全非了,但用着还行。(AI 无数次建议我还是搞不定的话去看 readme 文档,不过 cactus 的 readme 实在没什么用……)
原主题仓库链接:Hugo-theme-cactus
以下是我敲敲打打添加的一些页面,参考能想得起来的已全部附上。
注:不会代码,只会读单词,代码基本是复制粘贴,标准是能用就行!(向 AI 深深鞠躬,我用的是国产 Kimi chat ,比较流畅)
添加 Waline 评论
根据 官方文档 完成配置(Waline 的文档写的真是十分清楚明白详尽……),复制粘贴了 塔塔仓库 的代码,另外:增加了 小豆泥表情包 ,修改了评论框内默认显示的内容(placeholder),设置昵称与邮箱为 必填项 ,并根据主题配色修改了一些 css。
Waline({
el: '#waline',
serverURL: 'Vercel分配或自定义的域名',
emoji:['https://cdn.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs','https://cdn.jsdelivr.net/gh/Saidosi/azuki-emoji-for-waline@1.0/azukisan'],
avatar: 'monsterid',
placeholder:"欢迎留言!(^-^)/(但会删除不友善发言)\n*无需登录,邮箱可接收回复提示",
requiredMeta:['nick','mail'], <!-- 设置必填项 -->
}
);
不知道为什么 monsterid 没起作用,还在用同一个蓝色头像(头大
评论区隐私保护
根据 Waline文档
补充配置了环境变量,在 Vercel -> Settings -> Environment Variables 添加两个 KEY:DISABLE_USERAGENT
和 DISABLE_REGION
,Value 都填 TRUE
,隐藏评论者的 UA (访问时的客户端信息)和归属地。
粗略看了一下,Waline 还可以设置用户头衔,文章反应功能什么的……(先加入 to do
添加 About 关于页面
哇……这一部分真的摸索了好久!完全卡住,去 Youtube 上看 新建主题的教程 稍微明白了一些 Hugo 主题的逻辑和语言,知道从零开始怎么做主题还是有些帮助……anyway 痛苦的撞墙过程不再赘述!
- 在
config.toml
中添加:
[[menu.main]]
name = "About"
url = "/about"
weight = 4
- 在
/content
目录下新建about/index.md
,名称一定要是index,front matter 输入:
---
title: About
layout: about #指定套用的模板
---
- 在
/layouts/default
目录下新建about.html
(因为我要使用单独的布局),去其他模板里搬一搬通用的部分,中间插进去内容和评论区,最后再用<style>
标签微调一下样式!
<main>
<div class="article"> <!-- 后面好稍微修改一下样式 -->
{{ $aboutPage := .Page.GetPage "about/index" }} <!-- 引入index.md的内容 -->
{{ .Content }}
</div>
<div class="container comment-waline">
{{ partial "comments.html" . }}
</div>
</main>
添加 Archives 归档页面
归档页面是做的最晚的一个,已经相对比较熟练了。一开始直接把 posts 文件夹名改成 archives,菜单就可以跳转了,新建博文测试时猛然发现这样不行,只是改了菜单标题并没有实现归档功能。
第二天再战,去啃了一点官方文档,翻了翻 stack 主题
的代码,年份分组可以用 groupby
功能;cactus 主题原本的列表样式我很喜欢,简单的一列标题,所以直接从 index.html
里面剪出来用;主页原本的标签云会根据数量改变大小,从 仓库的 issue
中抄来代码修改。好,开动!
重复和 about 一样的步骤, archives.html
代码如下。思路是左边收纳盒 left-sidebar
放文章列表,右边收纳盒 right-sidebar
上层是分类下层是标签。(嗯文章还没有几篇但已经安排好了)
{{ partial "header.html" . }}
<div class="a-layouts">
<div class="left-sidebar">
<section id="a-posts">
{{ $allposts:= where site.RegularPages "Type" "in" site.Params.mainSections}}
{{ $groupedPosts := $allposts.GroupByDate "2006" }} <!-- 分组 -->
{{ range $group := $groupedPosts }}
<span class="ah3">{{ $group.Key }}</span> <!-- ah3是我自定义的标题样式,给h3换了个颜色 -->
<ul class="allpost-list">
{{ range $pagebyyear := $group.Pages }}
<li class="post-item">
<div class="meta">
<time datetime="{{ $pagebyyear.Date }}" itemprop="datePublished">{{ $pagebyyear.Date.Format "2006-01-02" }}</time></div>
<span><a href="{{ $pagebyyear.Permalink }}">{{ $pagebyyear.Title }}</a></span>
</li>
{{ end }}
</ul>
{{ end }}
</section>
</div>
<!-- 下面是右侧的分类和标签 -->
<div class="right-sidebar">
<section id="a-categories">
<span class="h2">Categories</span>
<ul class="category-list">
{{ range $name,$taxo := .Site.Taxonomies.categories }}
<li><a href="{{ $taxo.Page.Permalink }}">
{{ $name | humanize }}</a>
</li>
{{end}}
</ul>
</section>
<section id="a-tags">
<span class="h2">Tags</span>
<ul class="tag-list">
{{ range $key,$value := .Site.Taxonomies.tags }}
<li>
<a href="{{ $value.Page.Permalink }}">
#{{ $key | humanize }}</a> [{{ len $value.Pages }}] <!-- 效果:#tag [1] -->
</li>
{{end}}
</ul>
</section>
</div>
</div>
{{ partial "footer.html" . }}
</div>
<link rel="stylesheet" href={{ "archive.scss" | relURL}}> <!-- 引入样式 -->
因为我还新建了一个 /content/monthly
单独放月小结,所以要在 config.toml
中添加 mainSections = ["posts","monthly"]
,这样 {{ site.Params.mainSections }}
才能遍历所有的文章。
收纳盒组装好了,在 css 中安排位置。AI 给的 flex
值是 2 和 1,我想要左边再宽一点就改了比例。
.a-layouts {
display: flex;
justify-content: wrap;
}
.left-sidebar {
flex: 7; /* 左侧栏占据较大可用空间 */
padding:0 10px 0 0;
margin-right: 20px;
}
.right-sidebar {
flex: 3; /* 右侧栏占据更少可用空间 */
padding: 0 10px;
}
调整移动端显示顺序
网页版看起来 ok 了,虽然不怎么用移动端,但想要移动端是 categories 和 tags 在上,横向展示分类名和标签名,文章列表在最下面,问了 AI 后在 css 样式中设置:
@media (max-width: 480px) {
.a-layouts {
flex-direction: column;
}
.left-sidebar {
order:2; /* 数字大的会显示在后面,让文章列表靠下显示 */
}
.right-sidebar {
order:1;
}
.category-list,
.tag-list {
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
}
.category-list li,
.tag-list li {
flex:auto;
white-space: nowrap;
align-self:center;
display: inline-block; /*横向展示*/
}
添加 Friends 友链页面
本来放在主页最下面的,改完归档看着三个菜单项有点空就放它独立了!友链内容放在 /data/friends.yaml
中,格式为:
- name: "这是一个没有指向的友链"
url: "https://example.com"
desc:
friends.html
如下,上面是纯文本,下面引入 {{ .Site.Data.friends }}
,内容很少所以直接在 html 中调整了 css 样式,desc 还没想好怎么摆先不写了。
<section id="friendspagedesc">
<div class="pagedesc" >
<p><img src="https://www.nyan.cat/cats/original.gif" alt="nyancat" width="45"></p> <!-- 突然想加个彩虹猫 -->
<p>这里还空空如也(´❛-❛`)请和我交换友链吧!</p>
<p>目前使用的样式非常简单,只需要博客名字和网址就可以</p>
<p><del>如果哪天换了样式我会自己去翻简介的!</del></p>
</div>
</section>
<hr style="border: 0; height: 1px; background-color: #ccc; margin: 20px auto; width:50%"/> <!--设置正文与评论区分割线为浅灰色-->
<section id="friends">
<ul class="friends-list">
{{ range $friend := $.Site.Data.friends }} <!-- /data目录下的文件 -->
<li class="friends-item">
<a href="{{ $friend.url }}"target="_blank" rel="noopener">{{ $friend.name }}</a>
{{ $friend.desc }}
</li>
{{ end }}
</ul>
</section>
<style>
.pagedesc{
margin: 20px;
padding:0 10px;
color:$color-text;
line-height: 1rem;
}
.pagedesc p{
text-align: center; <!-- 段落居中 -->
}
#friends{
margin: 10px 20px;
padding:0 10px;
}
.friends-list {
list-style: none;
display: flex;
justify-content:center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.friends-list li {
padding:0 20px; /* 项目之间的间距 */
display: inline-block;
font-size: 1em;
line-height: 2rem;
}
.friends-list li a {
text-decoration: none; /* 不显示链接的下划线 */
color:$color-link;
}
</style>
文章页面导航栏
因为在 single.html
的样式里去掉了 header,导航栏没有了不太方便,原主题的 footer 右下角有导航栏,拿过来起个新名字 nav-single.html
放在页面最上方,微调一下样式。不想要折叠的导航栏和分享按钮,把原主题的 page_nav.html
删掉,适配移动端的部分也删掉。
Footer 的统计信息
在 footer.html
中直接复制粘贴了 塔塔的代码
,微调了文字,加个表情(颜文字爱好者
结束!大锤八十,我锤八十小时
夸张了,没有八十小时。
爬着开始,改哪里都没能直奔着去,学习一些框架和基础内容加上修改细节,常常不知不觉就过去几个小时,看起来很努力,写下来竟也不过如此…… (要不趁着还记得写个 101 吧(不行,写不了
比较明显的大改动差不多都记在这里了,都是常规页面没有什么好玩的呢……跟车聊天问我进度怎么样了,我说一边在砸墙一边在软装,像装修二手房。
软装的部分放到下一篇吧!博文太空了多水一篇(理直气壮