使用主题
我选了一个stack的魔改的主题,感谢作者!(已给星星)
https://github.com/Mantyke/Hugo-stack-theme-mod
下载下来直接和github连接并使用即可,这里的hugo版本是hugo v0.89.2-63E3A5EB+extended
基础配置
对根目录的config.yaml进行配置:
baseurl: https://proben1.github.io/
title: 茄子的养殖场
emoji:
# 推荐一个emoji查询的网站:https://www.emojiall.com/zh-hans
# 如果难看可以注释掉emoji
subtitle: 完成一个名为大学的作品
网站图标
根目录下新建static文件夹,把中意图标的ioc拖进去,命名favicon.ico
头像
修改img/avatar.png
短代码
直接效果演示吧:
文字居左
文字居中
文字居右
notice-warning
notice-info
notice-note
notice-tip
To see a world in a grain of sand. And a heaven in a wild flower. Hold infinity in the palm of your hand. And eternity in an hour.
修改「行内代码」样式
效果
修改「键盘标签」样式
Ctrl
添加友链
在~\data\links.json里添加友链就可以了;image放在~\assets\link-img\里
[
{
"title": "小球飞鱼",
"website": "https://mantyke.icu/",
"image": "mantyke.png",
"description": "我们会一起遇见鲸鱼吗?"
},
{
"title": "友情链接2",
"website": "",
"image": "",
"description": ""
}
]
代码块
首先,是代码高亮设置
打开项目根目录下的 config.yaml
,在highlight中加入
style : autumn # 样式参考https://xyproto.github.io/splash/docs/all.html
我很喜欢白天用perldoc夜间用dracula,现在有个问题是怎么能做到切换。由于暂时无法解决我先一直用着dracula。
然后是这个大块块不太顺眼,直白白的边框实在是难看hhh。在F:\ProbeN1\myblog\assets\scss\custom.scss里添加css代码进行修改,这里我加了一个灰色的边框:
早就看这个代码块不太顺眼,那个直白白的边框实在是难看hhh。在F:\ProbeN1\myblog\themes\hugo-theme-stack\assets\scss\custom.scss里添加css代码进行修改
//代码块
.highlight pre {
font-family: Consolas;
border-style: solid;
border-width: 2px;
border-color: (255,255,0);
}
设置分栏
分成两栏显示:
在assets\scss\custom.scss里添加:
/* 归档页面两栏 */
@media (min-width: 1024px) {
.article-list--compact {
display: grid;
grid-template-columns: 1fr 1fr;
background: none;
box-shadow: none;
gap: 1rem;
article {
background: var(--card-background);
border: none;
box-shadow: var(--shadow-l2);
margin-bottom: 8px;
border-radius: 16px;
}
}
}