配置 #
配置文件：config.xoml
命令 #
新建文章 #
hugo new minimal_categories/xxx.md
- 为了找到对应的原型模板，以最底层的分类为创建目录
Makefile #
run:
# 复制图片
cp -r /Users/jz/Library/Mobile\ Documents/iCloud~md~obsidian/Documents/ZJ\'s\ vault/img/Users/jz/blog_hugo/static/
cp -r /Users/jz/Library/Mobile\Documents/iCloud~md~obsidian/Documents/ZJ\'s\ vault/img /Users/jz/blog_hugo/
hugo
hugo server
git:
hugo; cd public; git add .; git commit -m 'update'; git push origin master;
- 注意：hugo server -D 是指包含草稿（draft）的本地预览
文章分类 categories #
- 由于 font matter 繁琐但是重要，所以每篇文章都应该自动化写好 font matter
- font matter 中对应的 categories 反应了文章分类
可以利用 archetypes 原型模板来实现这一点：
当新建文件时，Hugo 会自动判断文章的原型模板，没找到对应的会使用 default。
hugo new sec/xxx.md
但是，Hugo 不能识别多层目录：
hugo new posts/sec/xxx.md
# 找不到对应原型，会使用 default
所以，content 中的文章内容是以最底层的分类为一个文件夹：
但是，font matter中可以设置多个 categories，实现类似树状的分类（多层分类），虽然本地 content文件夹中内容的呈现较乱一些，没有多层，但是网页文章真正分类的逻辑上还是可以呈现树状，记得每次 hugo new 创建新文章使用原型模板时，要以最底层的分类为创建目录即可。
- 另外，当创建
cs/xxx.md时，我设定的原型中的 categories 是categories = ['CS', 'others']，感觉这样的逻辑是很好的，保证不会有零散的文章直接出现在一级分类之下。所有属于一级分类且没有进一步对应二级分类的文章应该全部归档到相应一级分类的 others 这个类别之下。
参考 #
添加图片 #
配置 #
# 保存本地图片的真实目录
static/img
# 自动生成的网页的图片目录
public/img
# 仅是为了便于在obsidian编辑文章时能够查看图片额外设置的目录
img
原理 #
Hugo 在执行 hugo 命令时，将根目录下的 static 文件夹中的内容直接复制到 public 文件夹。对于网页来说 public 就是根目录，所以我们在 static 中 创建一个 img 放图片，对应网页应该访问：
在此基础上，由于 obsidian 在使用绝对路径时，生成的地址如下：
- 因为开头缺少一个
/，Hugo无法找到图片
所以决定改成相对路径，这样在原来 obsidian 的仓库中写的文章可以直接迁移到新的用于发博客的仓库，不用修改图片地址。
但是，由于本地图片实际位置是在 static/img，所以为了能在发博客的（obsidian）仓库中也能正常预览图片，我们在博客仓库根目录也复制一个 img 文件夹，至此问题解决。
- 原仓库的附件也同一放在根目录的 img 文件夹，这样地址是天然正确的
从已经写好的仓库中迁移文章到博客仓库的工作流就是：
bugo new posts/xxx.md- 复制原仓库 img文件夹 到 博客仓库的 static/img 和 img 文件夹
- 直接复制文章
- git 推上去
参考 #
修改网站图标 #
选一个图片，通过 Favicon Generator for perfect icons on all browsers 生成图标相关文件。
保留以下文件：
将这些文件移动到 ~/blog/static/icons/目录下，再将 favicon.ico、site.webmanifest
移动到 ~/blog/static/ 目录下。
最后将 site.webmanifest 重命名为 manifest.json，并修改：
{
"name": "Jolly",
"short_name": "Jolly",
"icons": [
{
"src": "./icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
- 要等一会才会生效
参考 #
giscus 评论 #
所有分类的文章都需要放在 content/posts 下，不然无法套用 layouts 里面的 page.html 这个模板
首字下沉 #
建议在 font matter 中设置 dropCap，不要全局设置。
## 首字下沉
# 是否开启（全局设置）
enableDropCap = false
# 说明：文章的 Front Matter 中的 `dropCap`
# 的优先级高于此处
菜单栏字号大小 #
在主题文件夹下的 assets/scss/custom/_custom.scss 自定义样式：
.nav {
font-size: 1.5em;
margin-top: 0em;
}
添加备案号 #
- 首先进入
../../themes/xxx/layouts/partials这个相对目录 - 打开
footer.html文件 - 在
copyright-year这个span下面添加如下的代码
<span class="icp">
<a class="icp" target="_blank" href="https://beian.miit.gov.cn/">浙ICP备19052076号</a>
</span>
优化链接 #
我原本的默认的 default.md 里面的 frontmater 是 toml 格式的 +++，现在改成 yaml 格式的 --- 。
在 archetypes/default.md 中加入：
---
# 其他
slug: {{ substr (md5 (printf "%s%s" .Date (replace .TranslationBaseName "-" " " | title))) 4 8 }}
---
config.toml 中加入：
# URL 结构
[permalinks]
# 其他
posts = "/posts/:slug"
用 sections 分区 作为categories #
######################################
# 分类方式
# MemE 主题支持以下两种分类方式：
# 1. sections 分区
# 2. categories 部类
# 其中，分区是基于站点的 content 目录下的
# 文件夹和子文件夹；部类是基于文章的 Front
# Matter。分类即树状分类，Hexo 是基于文章
# 的 Front Matter，Hugo 则是基于文件系统
# 的结构。由于设计理念的不同，导致了 Hexo
# 与 Hugo 的这个差异，故在此设计这个选项，
# 以对从 Hexo 过来的用户友好。但是请注意：
# Hugo 中无法完全实现基于 Front Matter
# 的树状分类，故如需保留树状分类，建议适应
# Hugo 的设计理念——分区。
categoryBy = "sections"
新建文章 hugo new posts/xxx/xxx.md 放置指定文件夹，public 中也会整理成对于文件结构。
还要改：
mainSections = ["posts"]
- 添加 about 等会报错，报错的大致意思是说 about 文件夹下没有实际的 pages，也确实。原作者这个 mainSections 是博客的文章分类，因为原作者是直接把 posts 中的具体分类写到 contents 下的，极简，没有 about 和 categories 。
问题记录：改了 sections 之后，categories页面只显示顶层分类 #
如果要使 posts 下的每一个子文件夹也被视为分区，需要在每个子文件夹中添加 _index.md 文件：
