配置/美化
bug
- 把你的网站名/themes/hugo-theme-stack/exampleSite/目录下的config.yaml复制到网站根目录(也就是你的网站名这个目录)
- 删除网站根目录的config.toml stack主题不需要这个配置文件
- 打开网站根目录下的config.yaml进行填空
- 博主头像放在/themes/hugo-theme-stack/assets/img/下 关于那个头像下的emoji,如果你不想加上，emoji那一行留空就好
- config.yaml操作细节
- 修改你网站根目录下的config.yaml
- 文章位置
- 你的文章是在网站根目录/content/posts/下
- 你的"分类"在网站根目录/content/categories下
- 文章不显示
params:
mainSections:
- posts
# 如果一个博文的发布时间比 Hugo 构建当前站点的时间还要晚，也就是 Hugo 认为博文的发布时间在未来，就不会渲染该篇博文。前面没有写时区的博文，就是被 Hugo 认为发布时间还未到，所以没有渲染出来。
# draft 草稿，若为真，则不现实 将 draft:true 改为 false 即可
- 评论区配置
comments:
enabled: true
provider: gitalk
gitalk:
owner: 你的GitHub用户名
admin: 你的GitHub用户名
repo: 你的GitHub仓库名
clientID:
clientSecret:
- ClientID和ClientSecret获取方法: 去GitHub开发者设置里新建一个OAuth App
Applicaton Name:随便起个名字
Homepage URL:你博客的url
Application description:描述，随便写
Authorization callback URL:你博客url
Enable Device Flow 不勾选
保存后就可以获得ClientID，在它的下面(Client Secret框里)点击Generate a new client secret
然后记得保存好，因为Client Secret你只能看到一次
---
title: "文章标题"
description: "简介"
date: 2022-01-29T02:02:45-05:00
image: "你同目录下的封面图片名字(带后缀并且是相对路径)"
draft: flase
categories:
- 分类1
- 分类2
tags:
- 标签1
- 标签2
---
- 2 修改并优化主题
- 自定义图标
- 更改stack主题菜单的样式
- 找到stack主题根目录下的assets/scss/partial/menu.scss 修改最后一项定义.social-menu
.social-menu {
list-style: none;
padding: 0%;
display: flex;
flex-direction: row;
gap: 0px;
a {
border-radius:50%;
display:-moz-inline-stack;
display:inline-block;
vertical-align:middle;
*vertical-align:auto;
zoom:1;
*display:inline;
margin:0 8px 15px 8px;
transition:0.3s;
text-align: center;
color: #fff;
opacity: 0.7;
width: 28px;
height: 28px;
line-height: 26px;
&:hover {
opacity:1
}
}
a.weibo {
background: #aaaaff;
border:1px solid #aaaaff;
&:hover {
border:1px solid #aaaaff;
}
}
a.segmentfault {
background: #009a61;
border:1px solid #009a61;
&:hover {
border:1px solid #009a61;
}
}
a.rss {
background: #ef7522;
border:1px solid #ef7522;
&:hover {
border:1px solid #cf5d0f;
}
}
a.github {
background: #afb6ca;
border:1px solid #afb6ca;
&:hover {
border:1px solid #909ab6;
}
}
a.gitee {
background: #c8171e;
border:1px solid #c8171e;
&:hover {
border:1px solid #c8171e;
}
}
a.facebook {
background: #3b5998;
border:1px solid #3b5998;
&:hover {
border:1px solid #2d4373;
}
}
a.google {
background: #4086f4;
border:1px solid #4086f4;
&:hover {
border:1px solid #4086f4;
}
}
a.twitter {
background: #55cff8;
border:1px solid #55cff8;
&:hover {
border:1px solid #24c1f6;
}
}
a.linkedin {
background: #005a87;
border:1px solid #005a87;
&:hover {
border:1px solid #006b98;
}
}
a.acfun {
background: #fd4c5d;
border:1px solid #fd4c5d;
&:hover {
border:1px solid #fd4c5d;
}
}
a.bilibili {
background: #e15280;
border:1px solid #e15280;
&:hover {
border:1px solid #e15280;
}
}
a.zhihu {
background: #0078d8;
border:1px solid #0078d8;
&:hover {
border:1px solid #0078d8;
}
}
a.douban {
background: #06c611;
border:1px solid #06c611;
&:hover {
border:1px solid #06c611;
}
}
a.mail {
background: #005a87;
border:1px solid #005a87;
&:hover {
border:1px solid #006b98;
}
}
a.jianshu {
background: #ff5722;
border:1px solid #ff5722;
&:hover {
border:1px solid #ff5722;
}
}
a.weixin {
background: #4caf50;
border:1px solid #4caf50;
&:hover {
border:1px solid #4caf50;
}
}
a.qq {
background: #34baad;
border:1px solid #34baad;
&:hover {
border:1px solid #34baad;
}
}
a.psn {
background: #086ef6;
border:1px solid #086ef6;
&:hover {
border:1px solid #086ef6;
}
}
}
- 3 添加字符索引。该字体的字符索引将作为stack主题中的可定制样式文件中作为用户自定义样式。前往yilia-plus主题的GitHub仓库https://github.com/JoeyBling/hexo-theme-yilia-plus，下载其中的source-src/css/fonts.scss文件，将其中的内容全部复制到stack主题根目录下的assets/scss/custom.scss文件内。
- 4 打开stack主题根目录下的layouts/partials/sidebar/left.html文件，找到{{- with .Site.Menus.social -}} 修改其下整个
<ol>标签
<ol class="social-menu">
{{ range . }}
<li>
<a
class="{{ .Identifier }}" href="{{ .URL }}"
{{ with .Name }}title="{{ . }}"{{ end }}
{{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
>
<i class="icon-{{ .Params.Icon }}"></i>
</a>
</li>
{{ end }}
</ol>
