Hugo 笔记
这里是我记录 Hugo 这个框架笔记的方法, 方便我以后忘记的时候能回来查看. 本 blog 会持续更新
当然这里很多笔记也会是基于 stack 这个主题, 不过 hugo 大部分语法应该是通用的. 应该也有一定的参考价值.
如何使用 hugo 框架快速搭建一个自己的博客.
安装 hugo
请根据自己的系统版本进入官网的安装链接安装 hugo.安装 git
git 是一个版本控制工具, 如果你还不会使用, 建议先花点时间学习 git 的使用.
这里提供一个 github 的 git 入门文档.
这里是 git 安装的文档链接.
检查 hugo 和 git 是否安装.
hugo version
git --version
如果成功显示了版本号, 则说明安装成功.
顺着官网的文档建立你的第一个本地服务的博客
- 最后一次修改完博客并保存之后, 最好再运行一下"hugo -D"来刷新一下静态文件
- 当你最后最后一次修改完博客之后, 你需要提交你的修改. 具体过程参照教程
将你的本地 git 仓库 push 到 github
- 创建一个公共仓库, 并将其命名为"<你的用户名>.github.io".
- 在 pubulic 静态网页文件夹下打开终端, 然后初始化一个新的 git 仓库.
- 提交你的第一个 commit.
- 然后连接你刚刚创建的远程仓库: “git remote add origin <你的远程仓库链接>”. 链接可以在刚刚创建仓库的地方找到.
- 创建主分支: “git branch main”.
- 最后将你的修改推送到远程仓库: “git push -u origin main”.
大工告成, 快去查看你的第一个博客吧.
直接在浏览器中输入"<你的用户名>.github.io"然后回车即可访问你的博客.
创建新的博客
hugo new content/post/<博客名>.md
hugo new content/post/daliy_blog$(date +%Y-%m-%d).md
# 这个方法适用于日常博客的发表, 博客名会基于当前的日期创建
hugo new content/post/daliy_blog$(date +%Y-%m-%d)/index.md
# 这样可以创建博客文件夹, 文件夹下可以放图片等内容
cp static/images/default.jpg content/post/daily_blog$(date +%Y-%m-%d)/
刷新静态文件
hugo
# 这个指令会在你的静态文件目录下生成静态文件, 然后你就可以在你的服务器上部署了
hugo server -D
# 这个指令会打开本地hugo服务, 并在你有修改的时候自动刷新静态文件
md 语法
- 插入一张图片
“”
- 插入油管视频(如果需要添加b站视频参考这篇博客)
“{{<youtube ZFL09qhKi5I>}}”
stack 主题设置
b 站有个 up 已经发了 stack 主题比较详细的配置教程了, 所以我都在这个视频中学习
widgets
配置文件下的这个部分是控制博客主页右侧的一些小组件的, 我觉得视频中的音乐播放器挺不错.
博客的标题显示格式定义
add links
To use this feature, add links section to frontmatter.
This page’s frontmatter:
links:
- title: GitHub
description: GitHub is the world's largest software development platform.
website: https://github.com
image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
- title: TypeScript
description: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
website: https://www.typescriptlang.org
image: ts-logo-128.jpg
image field accepts both local and external images.
TODO
- 配置评论区, 方案链接
- [ ] widgets 添加音乐播放器, 方案链接 - 添加博客更新记录
- 添加 macos 版本代码框, 参考博客. 圆框使用 AI 修改.
- 代码框自动折叠功能,参考. 在原有的基础上修改了一下样式, 更加美观.
- 修复字体问题, 已完成. 教程
- 返回顶部按钮
- 防止爬虫(https://blog.lufei.de/p/215/)
- [ ] 博客最底部显示不正确. - html 代码框显示不正常
- 添加四种注释样式, 参考博客
- 博客和 widget 按钮圆角设置
- 添加 TODOwidgets
- 添加通过标签和分类筛选博客, 将搜索框和归档结合在一起.
- 删除代码框的行号
- 添加 hugo 对 mermaid 思维导图解析的能力
返回顶部按钮
失败案例:
按照这个部分的操作发现按钮并不能正确的显示出来.几番操作无果之后转向 AI 求助. 最好 AI 给出了一个相对合理的替代方案.
通过 js 直接画出返回顶部的图标
只需要在layouts/partials/footer/custom.html下将下面的代码粘贴进去即可
<style>
#backTopBtn {
display: none;
position: fixed;
bottom: 30px;
right: 375px;
z-index: 99;
cursor: pointer;
width: 30px;
height: 30px;
background-color: #666;
border-radius: 8px;
color: white;
text-align: center;
line-height: 30px;
font-size: 20px;
}
</style>
<script>
/**
* 滚动回顶部初始化
*/
function initScrollTop() {
let rightSideBar = document.querySelector(".right-sidebar");
if (!rightSideBar) {
return;
}
// 添加返回顶部按钮到右侧边栏
let btn = document.createElement("div");
btn.id = "backTopBtn";
btn.innerHTML = "↑";
btn.onclick = backToTop;
rightSideBar.appendChild(btn);
// 滚动监听
window.onscroll = function () {
// 当网页向下滑动 20px 出现"返回顶部" 按钮
if (
document.body.scrollTop > 500 ||
document.documentElement.scrollTop > 500
) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
}
/**
* 返回顶部
*/
function backToTop() {
window.scrollTo({ top: 0, behavior: "smooth" });
}
initScrollTop();
</script>