academic主题

主题介绍

academic是一个特别适合搭建内容相对比较丰富的网站的主题，如果我们hugo网站的内容不仅仅是博客，还有其他好几种样式的内容，那么academic会是一个很不错的选择。此外，academic主题简洁大方，也适合作为一个稍有规模的正式网站。

准备工作

git仓库准备

以建立skyao.io这个网站为例，fork github项目：

备注：实际证明，academic的版本变化非常大，fork出来之后，再修改，到升级版本时到处是冲突，极易出错，很难正确处理。最后还是不得不从头来过：取到最新版本，然后手工将原有的改动重新再做一遍。

kickstart 项目就没有必要再fork了，hugo-academic 还是需要 fork 的。

本地仓库准备

clone下来 kickstart 的仓库到本地：

  1. # 本地准备好academic主题仓库
  2. git clone https://github.com/skyao/hugo-academic.git
  3. # 直接获取kickstart的内容作为建站的基础
  4. git clone https://github.com/sourcethemes/academic-kickstart.git skyao.io
  5. cd skyao.io/
  6. rm -rf .git .gitmodules
  7. rm -r themes/academic/

修改.gitignore文件内容如下：

  1. .*
  2. !.gitignore
  3. public/
  4. themes/

修改update_academic.sh文件内容如下：

  1. #!/bin/bash
  3. if [ ! -d "themes" ];then
  4.   echo "No themes directory, create it"
  5.   mkdir themes
  6. fi
  8. if [ -d "themes/academic" ];then
  9.   echo 'Find directoy "themes/academic", update by "git pull"'
  10.   cd themes/academic
  11.   git pull
  12.   cd ../../
  13. else
  14.   echo 'Directoy "themes/academic" not found, do "ln -s"'
  15.   cd themes
  16.   ln -s ../../hugo-academic academic
  17.   cd ../
  18. fi

执行命令 sh update_academic.sh 获取 academic 主题文件(实际是一个ln过程)。此时themes/academic是我们订制的主题内容，此时两个git仓库都可以分别提交内容，而且实时生效，非常方便本地修改。

创建网站

使用 exampleSite 初始化

删除｀skyao.io｀目录下的config.toml文件和content/static目录，然后从｀themes/academic/exampleSite｀下的这三个文件和目录复制到｀skyao.io｀目录下。执行hugo server命令，就可以通过浏览器访问 http://localhost:1313/ 看到示例站点。

我们从这个基础开始进行修改和订制。

修改配置

注意新版本的hugo将原来的单个config.toml配置文件拆分为多个配置文件，这些配置文件在 config/_default 目录下。

修改config.toml文件

  1. title = "敖小剑的博客"
  2. copyright = "skyao.io © 2019"
  3. googleAnalytics = "17048c9d4209e5d08a9ae5b0b4160808"
  5. # 修改默认语言，需要对应的在languages.toml添加中文
  6. defaultContentLanguage = "zh"
  7. hasCJKLanguage = true
  9. paginate = 20

修改languages.toml

先只替换默认语言为中文，暂时不启用多语言版本。

  1. # 注释掉en
  2. #[en]
  3. #  languageCode = "en-us"
  5. # 添加中文
  6. [zh]
  7.   languageCode = "zh-Hans"

如果要调整页面上的字眼，需要修改主题文件中的 i18n 文件，如themes/academic/i18n/zh.yaml。

如果要修改 publication_types 的显示，需要参考 themes/academic/layouts/partials 下 pub_types.html 的内容，在 themes/academic/i18n/zh.yaml 文件中加入对应的内容：

  1. - id: pub_uncat
  2.   translation: 未分组
  3. - id: pub_conf
  4.   translation: 会议记录
  5. - id: pub_journal
  6.   translation: 期刊文章
  7. - id: pub_manuscript
  8.   translation: 手稿
  9. - id: pub_report
  10.   translation: 技术报告
  11. - id: pub_book
  12.   translation: 书籍
  13. - id: pub_book_section
  14.   translation: 书籍摘抄

修改params.toml

  1. color_theme = "1950s"
  3. description = "敖小剑的个人技术博客网站，主要关注服务网格,serverless,kubernetes,微服务等云原生技术。"
  5. # 这个还不知道该如何设置
  6. sharing_image = ""
  8. twitter = "SkyAoXiaojian"
  10. date_format = "2006-01-02"
  11. time_format = "15:04"
  13. email = "aoxiaojian@hotmail.com"
  14. phone = ""
  15. address = "广州市天河区广电平云广场B塔15楼"
  16. office_hours = ""
  18. contact_links = [
  19.   {icon = "twitter", icon_pack = "fab", name = "DM Me", link = "https://twitter.com/SkyAoXiaojian"},
  20.   # {icon = "skype", icon_pack = "fab", name = "Skype Me", link = "skype:echo123?call"},
  21.   # {icon = "keybase", icon_pack = "fab", name = "Chat on Keybase", link = "https://keybase.io/"},
  22.   # {icon = "comments", icon_pack = "fas", name = "Discuss on Forum", link = "https://discourse.gohugo.io"},
  23.   # {icon = "telegram", icon_pack = "fab", name = "Telegram Me", link = "https://telegram.me/@Telegram"},
  24.   ]
  26.   reading_time = false
  27.   comment_count = false
  29.   [publications]
  30.   date_format = "2006-01-02"

修改menus.toml

  1. [[main]]
  2.   name = "首页"
  3.   url = "#about"
  4.   weight = 1
  6. [[main]]
  7.   name = "演讲分享"
  8.   url = "/talk/"
  9.   weight = 2
  11. [[main]]
  12.   name = "出版作品"
  13.   url = "/publication/"
  14.   weight = 3
  16. [[main]]
  17.   name = "技术博客"
  18.   url = "/post/"
  19.   weight = 4
  21. [[main]]
  22.   name = "开源项目"
  23.   url = "#projects"
  24.   weight = 5
  26. [[main]]
  27.   name = "学习笔记"
  28.   url = "/learning/"
  29.   weight = 6
  31. [[main]]
  32.   name = "内容标签"
  33.   url = "#tags"
  34.   weight = 7
  36. [[main]]
  37.   name = "和我联系"
  38.   url = "#contact"
  39.   weight = 8

订制首页

需要修改的文件在 content/home 目录下。

关闭部分不需要的内容（设置active = false）：

  • accomplishments.md
  • experience.md
  • skills.md
  • teaching.md

about.md

  1. title = "简介"

然后修改 author/admin 下的文件，如替换头像，修改_index.md:

  1. name = "敖小剑"
  2. role = "中年码农"
  3. organizations = [ { name = "Dreamfly.io", url = "https://dreamfly.io" } ]
  4. bio = "我目前研究的方向主要在微服务/Microservice、服务网格/Servicemesh、无服务器架构/Serverless等和云原生/Cloud Native相关的领域，欢迎交流和指导"
  5. email = "aoxiaojian@hotmail.com"
  6. interests = [
  7.     "微服务/Micro Service",
  8.     "服务网格/Service Mesh",
  9.     "无服务器架构/Serverless",
  10.     "云原生/Cloud Native",
  11.     "敏捷/DevOps"
  12. ]
  14. [[education.courses]] # 删除
  16. ## 图标的代码需要在 https://fontawesome.com 网站上查找
  17. [[social]]
  18.   icon = "envelope"
  19.   icon_pack = "fas"
  20.   link = "mailto:aoxiaojian@hotmail.com"  # For a direct email link, use "mailto:test@example.org".
  22. [[social]]
  23.   icon = "twitter"
  24.   icon_pack = "fab"
  25.   link = "https://twitter.com/SkyAoXiaojian"
  27. [[social]]
  28.   icon = "github"
  29.   icon_pack = "fab"
  30.   link = "https://github.com/skyao"
  32. [[social]]
  33.   icon = "git"
  34.   icon_pack = "fab"
  35.   link = "//legacy.gitbook.com/@skyao"
  37. [[social]]
  38.   icon = "weibo"
  39.   icon_pack = "fab"
  40.   link = "//weibo.com/aoxiaojian"
  42. [[social]]
  43.   icon = "youtube"
  44.   icon_pack = "fab"
  45.   link = "//www.youtube.com/channel/UCKeIYzzIeOtVR1iSfAdRBqQ"
  48. 增加个人简介

hero.md

暂时 禁用，后面再来设置

  1. title = "SOFAMesh"
  2. overlay_img = "projects/sofamesh-wide.jpg" # 记得把图片放到static/img/下
  4. # 其他内容酌情修改

hero_carousel.md 是另一个版本的hero，横屏，可以多个话题滑动，效果更好的感觉。后面再整理。

posts.md

  1. title = "技术博客"
  2. count = 10
  4. view = 2

修改 content/posts/_index.md 文件：

  1. title = "技术博客"
  2. view = 3

publications.md

  1. title = "出版作品"
  2. count = 5
  3. weight = 30
  5. view = 3
  6. exclude_featured = true

修改 content/publications/_index.md 文件：

  1. title = "出版作品"
  2. view = 3
  1. title = "特别推荐"

tags.md

  1. title = "内容标签"

projects.md

  1. title = "开源项目"

contact.md

  1. title = "和我联系"

talks.md

  1. title = "演讲分享"
  2. count = 5
  3. weight = 20

修改talks_selected.md:

  1. title = "下一站"
  2. subtitle = "近期活动，欢迎关注"

修改post

修改 content/posts/_index.md

  1. title = "技术博客"
  3. # 在页面 http://localhost:1313/post/ 显示一张图片
  4. [header]
  5. image = ""
  6. caption = ""

修改project

project没有要修改的内容。

修改publications

修改 content/publication/_index.md

  1. title = "最近发表"
  2. [header]
  3. image = ""
  4. caption = ""

增加 learning

新版本提供了 content/tutorials 的实例，不过没有挂在首页，不容易发现。

官方说明是适合用于：

  • 项目或者软件文档
  • 在线课程
  • 教程
    我这次用它来记录我的学习笔记，因为数量繁多不好整理，一直都没有放在个人网站上。

具体修改内容如下：

  • 重命名 content/tutorials 为 content/learning，通过 http://localhost:1313/learning/ 可以访问

  • 由于目录被改名，所以左边的菜单报错，修改修改example.md中

  1. [menu.learning] # 将menu.tutorial修改为menu.learning
  2.   parent = "Example Topic"
  3.   weight = 1

修改_index.md:

  1. [menu.learning] # 将menu.tutorial修改为menu.learning
  2.   name = "Overview"
  3.   weight = 1

菜单恢复正常

  • 在顶部的导航条中增加链接

修改config.toml，增加菜单：

  1. [[menu.main]]
  2.   name = "学习笔记"
  3.   url = "/learning/"
  4.   weight = 5
  • 修改themes/academic/layouts/partials/docs_layout.html，注释掉一下内容：
  1. <!--
  2. <div class="body-footer">
  3. {{ i18n "last_updated" }} {{ $.Lastmod.Format $.Site.Params.date_format }}
  4. </div>
  5. -->

不直接显示最后修改时间在页面上，这样界面清爽一些。

slides功能

在content/slides下发现一个 example-slides.md 文件，用浏览器打开下面的地址：

http://localhost:1313/slides/example-slides/

发现原来是一个用markdown书写slides的功能，很有意思，稍后研究。

图标和其他文件设置

复制 icon.png / icon-192.png 到 static/img 目录下。

复制 baiduverify××××.html 和 google××××.html 到 static 目录下。

优化

关闭google地图

首页的google地图现实，太影响页面打开速度。最后选择关闭。修改config.toml:

  1.   map = 0 # 最后还是决定关闭地图现实，太影响页面打开速度

去掉github项目的star显示

在hero页面上，默认设置会去取github项目的star数量，同样非常的拖累整体速度。还是去掉吧，修改文件content/home，删除以下内容：

  1.   <a id="academic-release" href="https://github.com/alipay/sofa-mesh/releases" data-repo="alipay/sofa-mesh">
  2.   Latest release <!-- V -->
  3.   </a>
  4. <div class="mt-3">
  5.   Star
  6. </div>
  7. <script async defer src="/local/buttons.github.io/buttons.js"></script>

改google analytics为百度统计

修改 academic/layouts/partials/header.html，将下面原来用于google analytics的内容：

  1.   {{ if not .Site.IsServer }}
  2.   {{ if .Site.GoogleAnalytics }}
  3.     <script>
  4.       window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  5.       ga('create', '{{ .Site.GoogleAnalytics }}', 'auto');
  6.       {{ if .Site.Params.privacy_pack }}ga('set', 'anonymizeIp', true);{{ end }}
  7.       ga('require', 'eventTracker');
  8.       ga('require', 'outboundLinkTracker');
  9.       ga('require', 'urlChangeTracker');
  10.       ga('send', 'pageview');
  11.     </script>
  12.     <script async src="//www.google-analytics.com/analytics.js"></script>
  13.     {{ if ($scr.Get "use_cdn") }}
  14.     {{ printf "<script async src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.autotrack.url $js.autotrack.version) $js.autotrack.sri | safeHTML }}
  15.     {{ end }}
  16.   {{ end }}
  17.   {{ end }}

修改为百度统计的内容：

  1.   {{ if not .Site.IsServer }}
  2.   {{ if .Site.GoogleAnalytics }}
  3.     <script>
  4.     var _hmt = _hmt || [];
  5.     (function() {
  6.       var hm = document.createElement("script");
  7.       hm.src = "https://hm.baidu.com/hm.js?{{ .Site.GoogleAnalytics }}";
  8.       var s = document.getElementsByTagName("script")[0];
  9.       s.parentNode.insertBefore(hm, s);
  10.     })();
  11.     </script>
  12.   {{ end }}
  13.   {{ end }}

本地文件加速

使用中，发现网页装载速度不是很好，而且有时无法访问。检查后发现问题出现在页面上的一些静态文件下载上，使用的路径居然是https://cdnjs.cloudflare.com/××。

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw==" crossorigin="anonymous">

cloudflare网站是在国外，访问速度慢，而且非常不稳定：经常被墙。导致页面加载的速度慢，有时还会出现无法打开页面的问题（被墙）。解决的方式就是将这些文件放在网站本地，从而避开这个问题。

具体做法：

主题模板调整

0.54 版本的 academic 主题，在 post、publication、talk 等几个列表显示时，都不再提供图片显示，效果和之前版本差别好大，因此考虑修改模板。

academic/layouts/partials/widgets

talk

修改 themes/academic/layouts/partials/talk_li_card.html 文件。

下面的内容，只显示日期，不显示具体时间。然后显示publication信息

  1.   <div class="talk-metadata" itemprop="startDate">
  2.     {{ $date := .Params.time_start | default .Date }}
  3.     {{ (time $date).Format $.Site.Params.date_format }} @ {{ .Params.publication }}
  4.   </div>

原有的这段内容删除，非常难看：

  1. {{ (time $date).Format $.Site.Params.date_format }}
  2.     {{ if not .Params.all_day }}
  3.       {{ (time $date).Format ($.Site.Params.time_format | default "3:04 PM") }}
  4.       {{ with .Params.time_end }}
  5.         &mdash; {{ (time .).Format ($.Site.Params.time_format | default "3:04 PM") }}
  6.       {{ end }}
  7.     {{ end }}

删除一下内容，新版本的 featured image 的显示丑的没法忍：

  1.   {{ $resource := (.Resources.ByType "image").GetMatch "*featured*" }}
  2.   {{ $anchor := .Params.image.focal_point | default "Smart" }}
  3.   {{ with $resource }}
  4.   {{ $image := .Fill (printf "918x517 q90 %s" $anchor) }}
  5.   <div>
  6.     <a href="{{ $.RelPermalink }}">
  7.       <img src="{{ $image.RelPermalink }}" class="article-banner" itemprop="image" alt="">
  8.     </a>
  9.   </div>
  10.   {{end}}

将旧版本的横幅图片显示搬回来，在上面位置加入如下内容：

  1.   {{ if .Params.image_preview }}
  2.     {{ .Scratch.Set "image" .Params.image_preview }}
  3.   {{ else if .Params.header.image }}
  4.     {{ .Scratch.Set "image" .Params.header.image }}
  5.   {{ end }}
  6.   {{ if .Scratch.Get "image" }}
  7.   <div>
  8.     <a href="{{ .RelPermalink }}">
  9.       {{ $img_src := urls.Parse (.Scratch.Get "image") }}
  10.       {{ if $img_src.Scheme }}
  11.         <img src="{{ .Scratch.Get "image" }}" class="article-banner" itemprop="image">
  12.       {{ else }}
  13.         <img src="{{ "/img/" | relURL }}{{ .Scratch.Get "image" }}" class="article-banner" itemprop="image">
  14.       {{ end }}
  15.     </a>
  16.   </div>
  17.   {{ end }}

publication

修改 themes/academic/layouts/partials/publication_li_card.html 文件。

同样去掉featured images的代码，也同样将原来的横幅图片显示搬回来。

然后作者信息在最上面，有些不好看，将这行移动到下面一点的位置：

  1. {{ partial "page_metadata" (dict "content" $ "is_list" 1) }}

post

修改 themes/academic/layouts/partials/post_li_card.html 文件。

同样去掉featured images的代码，也同样将原来的横幅图片显示搬回来。

project

暂时还不清楚如何设置，后面再弄。

leanging

学习笔记中，0.54 版本不再显示 header images了，改回来。

需要修改 themes/academic/layouts/partials/doc_layout.html 文件 ，加入

{{ partial "header_image.html" . }} 这一行代码：

  1.       <article class="article" itemscope itemtype="http://schema.org/Article">
  3.         {{ partial "header_image.html" . }}
  5.         <div class="docs-article-container">

然后将老版本的 header_image.html 文件复制到 themes/academic/layouts/partials/ 目录下。