版本问题

huo是使用go语言写的，它构建环境搭建相当简单，只需要下载安装程序，其实不需要按装，就是一个二进制文件而已，只需要把它添加到系统的环境变量，就可以开干了。 这里有一个坑，就是一定要下载扩展版本(extended version)，否则编译构建scss文件会报错!

一些简单命令:

  • hugo version:查看版本
  • hugo new site myBlog:创建一个全新的blog，根目录是myBlog
  • hugo new posts/my-first-post.md:在content目录下中的子目录posts下新建一个名为my-first-post的博文
  • hugo server:运行hugo，默认情况下，端口是1313

具体得基本配置请参考官网的Hugo Quick Start ,非常简单！

主题选择

hugo的主题没有hexo那么多，但是质量都非常不错!当然了，选来选去，还是那几款比较好，本人都使用过。推荐几个不错的主题：

  • hugo-theme-even
  • hugo-theme-loveit
  • hugo-theme-mixedpaper
  • hugo-theme-terminal

之前使用的是hugo-theme-mixedpaper，现在使用的是最后一个hugo-theme-terminal。每一款主题都可能不完美，某些地方不符合自己的口味，没关系，直接修改便是!

代码高亮和行号问题

hugo自带markdown代码高亮和行号，还可以选择风格，只需要在config.toml配置文件中加入一下配置，不需要引入任何第三方文件。

 1[markup]
 2	[markup.highlight]
 3		codeFences = true
 4		guessSyntax = true
 5		hl_Lines = ""
 6		lineNoStart = 1
 7		lineNos = true
 8		lineNumbersInTable = false
 9		noClasses = true
10		style = "monokai"
11		tabWidth = 4

代码块复制功能

没有代码块复制按钮是很不方便的，很多主题自带了这个功能，比较省事，我使用的这个Terminal主题没有此功能，所以我就折腾一下。

在网上找了很多资料，发现有2个问题：

  1. 需要引入第三方库
  2. 复制代码时连带行号一起复制了

感觉不理想，参考了网上的资料，简单修改了一下，搞定！

js代码：

 1// code copy button
 2/***************** clipboard start ***************/
 3function addCopyButtons(clipboard) {
 4    document.querySelectorAll('pre > code').forEach(function (codeBlock) {
 5        var button = document.createElement('button');
 6        button.className = 'copy-code-button';
 7        button.type = 'button';
 8        button.innerText = 'Copy';
 9
10        button.addEventListener('click', function () {
11            clipboard.writeText(removeLineNumber(codeBlock.innerText)).then(function () {
12                /* Chrome doesn't seem to blur automatically,
13                   leaving the button in a focused state. */
14                button.blur();
15
16                button.innerText = 'Copied!';
17
18                setTimeout(function () {
19                    button.innerText = 'Copy';
20                }, 2000);
21            }, function (error) {
22                button.innerText = 'Error';
23            });
24        });
25
26        var pre = codeBlock.parentNode;
27        if (pre.parentNode.classList.contains('highlight')) {
28            var highlight = pre.parentNode;
29            highlight.parentNode.insertBefore(button, highlight);
30        } else {
31            pre.parentNode.insertBefore(button, pre);
32        }
33    });
34}
35function removeLineNumber(copyText) {
36	var result = '';
37	var lines = copyText.split('\n');
38	for (var i = 0; i < lines.length; i++) {
39		if (i < 10) {
40			lines[i] = lines[i].substr(2);
41		} else {
42			lines[i] = lines[i].substr(2);
43		}
44	}
45	return lines.join('\n')
46}
47if (navigator && navigator.clipboard) {
48    addCopyButtons(navigator.clipboard);
49} else {
50    var script = document.createElement('script');
51    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard \
52                  -polyfill.promise.js';
53    script.integrity = 'sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=';
54    script.crossOrigin = 'anonymous';
55    script.onload = function() {
56        addCopyButtons(clipboard);
57    };
58
59    document.body.appendChild(script);
60}
61/***************** clipboard end ***************/

css样式代码：

 1.copy-code-button {
 2    color: #272822;
 3    background-color: #6d5b59;
 4    border-color: #272822;
 5    border: 2px solid;
 6    border-radius: 3px 3px 0px 0px;
 7
 8    /* right-align */
 9    display: block;
10    margin-left: auto;
11    margin-right: 0;
12
13    margin-bottom: -5px;
14    padding: 3px 8px;
15    font-size: 0.8em;
16}
17
18.copy-code-button:hover {
19    cursor: pointer;
20    background-color: #6d5b59;
21}
22
23.copy-code-button:focus {
24    /* Avoid an ugly focus outline on click in Chrome,
25       but darken the button for accessibility.
26       See https://stackoverflow.com/a/25298082/1481479 */
27    background-color: #E6E6E6;
28    outline: 0;
29}
30
31.copy-code-button:active {
32    background-color: #D9D9D9;
33}
34
35.highlight pre {
36    /* Avoid pushing up the copy buttons. */
37    margin: 0;
38}

站内搜索功能

这部分本人单独记录在如何给hugo添加站内搜索功能 这篇文章中。

文章归档页面

如果主题带了archives文章归档页面，就直接使用，如果主题里面没有的话，可以自己写一个，也非常简单！只需要在主题的layouts_default目录下新建一个archives.html模板文件，然后 新建一篇post，在文章的frontmatter中设置layout为archives就行啦。

归档页面的url为http://localhost:1313/archives/

archives.html

 1{{ define "header" }}
 2  {{ partial "masthead.html" . }}
 3{{ end }}
 4{{ define "main" }}
 5  <header>
 6    <h1>{{ .Title }}</h1>
 7  </header>
 8
 9  <section>
10    {{ $prev := 3000}}
11    {{range .Site.RegularPages}}
12      {{if .Date}}
13      {{if gt $prev (.Date.Format "2006")}}
14      {{ if ne $prev 3000}}
15        </table>
16      {{ end }}
17      <h2>{{ .Date.Format "2006" }}</h2>
18      <table class="all-posts">
19      {{end}}
20      <tr>
21        <td style="width:35%">{{.Date.Format "2006-01-02"}}</td>
22        <td><a class="no-underline" style="text-decoration: none;" href="{{.Permalink}}">
23            {{.Title}}</a></td>
24      </tr>
25      {{ $prev = .Date.Format "2006"}}
26      {{end}}
27    {{end}}
28  </table>
29  </section>
30
31{{ end }}
32{{ define "footer" }}
33  {{ partial "footer.html" . }}
34{{ end }}

archives.md

1+++
2title = "Archives"
3date = "2019-01-25"
4author = "Radek"
5layout = "archives"
6+++

hugo文章添加密码

Hugo给文章加密没有hexo那么简单，Hexo里面可以通过安装插件来搞定，Hugo相对麻烦一些，比较好的方法是使用hugo_encryptor。这个工具是用Python写的，需要搭建好Python3环境， 然后在主题内新建一个hugo_encryptor的shortcode，在文章中引用。然后在在hugo生成静态文件后对静态页面进行加密。本地进行加密没有什么难度，麻烦的地方是自动化部署 的时候进行文章加密，将会在文章加密的部分说明这个问题。

hugo的自动化部署方案

至于hugo的部署方案，我记录在这边折腾的文章中。请参考 hugo给文章加密与自动化部署方案