编写自己的 Hugo 主题

页面

使用 hugo new theme paladin 直接创建一个新的主题,然后可以在当前博客中(已经完成了多篇文章,但是还想自己定义一个主题)或者在新主题中增加测试用的项目。

目前所实现的大概样式如下:

创建之后,在 themes 目录下可以看到整个项目结构:

themes/paladin
├── LICENSE
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   └── partials
│       ├── footer.html
│       └── header.html
├── readme.md
├── static
│   └── css
│       └── stylesheet.css
└── theme.toml
6 directories, 12 files

可以看到目录下有一些已经创建好的 html 目录,有几个需要编辑的,分别是 single.htmlindex.html404.htmlfooter.htmlheader.html 这几个文件。

_default

这里放的,是主要几个网站模板,用来提交一些默认的配置的。

  • single.html

这个是用来渲染生成的单页文章的,主要是 content/ 下的内容,可以用来渲染页面的名称、作者、时间和文章的具体内容。

  • list.html

这个是用来渲染生成的列表页的,包括文章列表页或者是标签列表和分类列表页。

partials

这个目录下主要是放需要利用的代码片断,通过 partial 方法调用。

  • header.html

这里主要定义 <head> 标签和导航栏 <nav> 相关内容。

  • footer.html

这里定义了网页脚标位置的相关内容。

实现

主题参照了 hugo-theme-hiruko 的样式,去掉了一些用不到的功能。

主要使用了bootstrap4,其中的一些图标来源自阿里巴巴的矢量库,用起来方便快捷。

当文章过多时,可以使用连续页面的样式,如果不想使用,可以用上一页下一页的方式。通过参数 paginateOriginalStyle 来控制,如果为 true 则是上一页下一页的样子,如果是 false 则如下图:

将社交链接和logo放到到 about.html 页面中,可以方便的看到作者的相关内容。

如果想修改logo的话,需要修改主题目录下的 static/media/zlogo.png 文件即可。

Author
Tags
总结(3) Emacs(2) org mode(4) 年度清单(2) 读书清单(2) 电影清单(2) 电视清单(2) Python(3) 学习计划(1) 子弹笔记(1) 手帐体系(1) 时间管理(1) 时间使用效率(1) 形意拳(1) 知识管理(1) 简历(1) 技能水平(1) 生活(1) 减法生活(1) 阅读(1) 阅读分组(1) org(1) docx(1) markdown(2) cmder(1) 图床(1) jsdelivr(1) github(1) 安卓系统(1) 手动更新手机系统(1) post link(1) post path(1) hexo(2) hugo(2) GitHub Pages(1) travis(1) 自动部署博客(1) presentation(1) gcc(1) g++(1) 默认表格(1) 复杂表格(1) multimd table(1) google adsense(1) evil(1) surround(1) librime(2) emacs-rime(1) liberime(1) dot(1) graphviz(1) use-sub-superscripts(1) ditaa(1) Evil Multiple cursors(1) turn evil mode off(1) modifier keys(1) keymap(1) super(1) hyper(1) install Emacs(1) Mac OS(1) keybinds(1) clocktable(1) coding system(1) image library(1) keybind(1) spacemacs(1) org babel(1) homebrew(1) dd(1) diskutil(1) tmux(1) xcode(1) xcrun(1) node-gyp(1) tar(1) tree(1) pacman(1) plantuml(1) find(1) grep(2) du(1) apt-get(1) apt(1) regex(1) wildcard(1) zsh(1) gdb(1) lsof(1) netstat(1) rebase(2) workflow(1) 工作流(1) .gitignore(1) postbuffer(1) hung up(1) merge(1) cache(1) reset(1) Git(1) command(1) submodule(1) GitHub Pull Request(1) pr(1) Matplotlib(1) beautifusoup(1) 下载小说(1) SOLID(1) Leetcode(2) 透视表(1) read_excel()(1) pandas(1) conda(1) django(1) markdown-deux(1) mysql(1) oracle(1) 模糊查询(1) logging level(1) reflex(1) Field(1) Maven(1) Selenium(1) 下拉框(1) select into(1) insert into select(1) CAST(1) CONVERT(1) timestamp(1) concat(1) concat_ws(1) group_concat(1) union(1) grant privileges(1) 重置 root 密码(1) 报错 10060(1) 清理连接数(1) create user(1) set password(1) exists(1) in(1) markdown-it(1) emoji(1) tasks(1) valine(1) Code 504(1) Hugo(1) theme(1) substring(1) indexOf(1) RegExp(1) 定位节点(1) 正则匹配(1) async(1) 异步请求(1) css(2) layui(1) 滚动条(1) JavaScript(1)