Hugo模板应用实例–Academic模板样例

缘起

需要一个个人网站的模板，在搜索一番后发觉Academic很是强大，文档也较为完善，更新也很勤奋。

下载及安装

下载网站：Academic官方网站 Academic通常会使用最新版本的Hugo，因此在使用之前最好下载最新版的Hugo否则很有可能运行报错。 另外由于Academic更新是如此的频繁，因此建议也关心一下这个模板的版本，查看的方法是查看 academic/data 文件夹下的 academic.toml 除了使用Hugo的 new site 来安装，然后使用 themse 下的 exampleSite 来创建初始站点外。也可以完全从Academic上下载一个叫 kickstart 的站点来初始化一个站点。

修改配置文件

以下说明的情况都是在2019年4月21日，使用hugo 0.55.2，Academic 4.2.5

从Hugo 0.53版本之后，Hugo的配置文件支持多个文件，即可以将原来根目录下的 config.toml 拆分。Acadmic用的就是这种模式。原来单一的 config.toml 依然是支持的。

配置文件的拆分的好处是特定功能的配置可以以单个文件的形式存在，减少了文件的行数，应该是大势所趋。在个 config/_default 文件夹下，有 config.toml languages.toml menus.toml params.toml 四个配置文件，根据文件名大概可以猜出这几个文件的功能。

以下对于常用的几个配置作下说明。

config.toml

Academic模板有一个很大优点就是说明比较详细，通过查看对于每个配置的解释基本可以了解到作用，再加上尝试配置后，看看效果，不难摸索出配置的方法。对于简单的不再说明。

有一个需要注意的地方是kickstart里并没有关于链接的设置，需要自己添加

[permalinks]
  post = "post/:year/:month/:filename/"

另外Acdemic有一个推荐的设置

[permalinks]
    post = "/:year/:month/:day/:slug"

这里的 slug 默认是文件名，也可以通过修改每篇文章的slug来自定义

menu.toml

这个是网站主菜单的配置，也就是网站生成后最上面的一条导航菜单。需要注意的是这和首页的“小工具”是有区别的，尽管很多名字是相同的。 三个参数：

1. name：菜单的显示名称。
2. url：可以有三种形式。
   • 直接链接到首页的“小工具”，相当于在首页内跳转。模式是 # 加 小工具名，如 #contact
   • 网站内的文件夹， content 文件夹下某一个目录，如 /post/ ；或是 static 目录下的某个文件，如： cv.pdf
   • 最后就是直接一个链接地址了
3. weight：退出显示的顺序。

pama.toml

从名字上可以看出，对于一些参数的调整。

1. color_theme：主题调整。
2. day_night：是否允许用户调整白天、夜间主题。
3. logo：可以在网站左上角显示一个logo图片。
4. date_format和time_format：日期和时间格式的调整，是可以使用中文的，如： 2012年6月19日 。
5. email等联系方式。
6. 社交媒体账号的联系方式。
7. menu_align_right：定义导航菜单的对齐模式
8. 对于首页小工具的配置
9. 网站搜索功能的配置

其它个性化个性

网站图标

在 static/img/ 下放 icon.png (32x32 pixels) 和 icon-192.png (192x192 pixels

修改网页底部网站备案号

编辑 .\themes\academic\layouts\partials\footer_section.html 找到 <p class"powered-by">= 在这个p标签下加入： 网站名称 <a href="http://www.miitbeian.gov.cn" target="_blank" rel="noopener">沪ICP12345678号</a>

修改配图说明文字的对齐方式

如下图片上有如下的参数： #+caption: 图片标题 ，则“图片标题” 这四个字会在图片的下方显示，但是是以左对齐的方式。如里改为居中，则需要修改 .\themes\academic\layouts\partials\css\academic.css 。找到 figcaption 增加： text-align: center; = 同时顺便增加了 =font-style: italic; 和 font-size: 0.9em;

修改默认CSS

在网站要目录下建立 assets\css 文件夹，将css文件放入，如css文件名为： custom.css 则在 para.toml 寻找 plugins_css = ["custom"]

修改网站语言

修改 config.toml 中的 defaultContentLanguage = "zh" 将 themes/academic/i18n/zh.yaml 复制到 i18n/zh.yaml 具体的翻译可以自己编辑 在修改成中文之后，在搜索中对于中文的支持好了很多，但这个这依然有问题。

组织内容

小工具的配置

Widgets，小工具，就是在首页显示的一个个小栏目，具体的配置在 content\home 目录下。这个目录下的每一个 .md 文件就是一个小工具。

可以通过配置 active = true 或者 false 来显示或隐藏这个小工具。

不同的小工具会有不同的参数，都有说明，并不复杂。

文章的组织

需要发布的文章可以放在 content 目录下，可以多个目录。

文章中可以用到的参数

每个文章的参数即这个文章的 front matter 具体的文档可以参见：Academic文档中关于front matter的介绍。以下说几个用到的front matter

1. title： 文章的标题
2. subtile: 副标题
3. date：发表日期，使用orgmode第一次导出md文件的日期
4. lastmod：最后修改日期，再次导出md的日期
5. draft：如 draft=true 则不会生成网页

文章列表显示的图片

这个模板对于如果在summary中有图片，也是在 <!--more--> 之前如果有图片，并且使用page bundle之后的支持并不好。使用自带的featured图片功能可以变相实现，操作的方法是将想作为list的显示图片更名为 featured.jpg 即可。