Hugo on ttz.pw

hugo插件之代码块拷贝插件

Wed, 22 Mar 2023 23:42:13 +0800

1. 添加按钮

我们通过检查博客内容页面发现，hugo生成的每个代码块格式如下：

没有语法突出显示的代码块具有相同的结构，但周围没有 <div class=highlight> 。为了考虑到这两种情况，我选择了作为<pre>元素下面的<code>子元素。

copy-to-clipboard.css：

 1.highlight {
 2  position: relative;
 3}
 4
 5.highlight pre {
 6  padding-right: 75px;
 7  /* background-color: #f8f8f8 !important; */
 8}
 9
10.highlight-copy-btn {
11  position: absolute;
12  top: 7px;
13  right: 7px;
14  border: 0;
15  border-radius: 4px;
16  padding: 1px;
17  font-size: 0.8em;
18  line-height: 1.8;
19  color: #fff;
20  background-color: #777;
21  min-width: 55px;
22  text-align: center;
23}
24
25.highlight-copy-btn:hover {
26  background-color: #666;
27}

2. 与剪切板交互

按钮有了，接下来就是怎么使用JavaScript拷贝代码到剪切板，废话少说，直接上代码：

 1(function () {
 2  "use strict";
 3
 4  if (!document.queryCommandSupported("copy")) {
 5    return;
 6  }
 7
 8  function flashCopyMessage(el, msg) {
 9    el.textContent = msg;
10    setTimeout(function () {
11      el.textContent = "复制";
12    }, 1000);
13  }
14
15  function selectText(node) {
16    var selection = window.getSelection();
17    var range = document.createRange();
18    range.selectNodeContents(node);
19    selection.removeAllRanges();
20    selection.addRange(range);
21    return selection;
22  }
23
24  function addCopyButton(containerEl) {
25    var copyBtn = document.createElement("button");
26    copyBtn.className = "highlight-copy-btn";
27    copyBtn.textContent = "复制";
28
29    var codeEl = containerEl.firstElementChild;
30    copyBtn.addEventListener("click", function () {
31      try {
32        var selection = selectText(codeEl);
33        document.execCommand("copy");
34        selection.removeAllRanges();
35
36        flashCopyMessage(copyBtn, "已复制!");
37      } catch (e) {
38        console && console.log(e);
39        flashCopyMessage(copyBtn, "Failed :'(");
40      }
41    });
42
43    containerEl.appendChild(copyBtn);
44  }
45
46  // Add copy button to code blocks
47  var highlightBlocks = document.getElementsByClassName("highlight");
48  Array.prototype.forEach.call(highlightBlocks, addCopyButton);
49})();

3. 修改主题

将copy-to-clipboard.css和copy-to-clipboard.js分别放到static/css和static/js目录下

然后在页面引用这两个文件

1.修改config.toml添加自定义css

1custom_css = ["/css/copy-to-clipboard.css"]

2.修改主题文件下的layouts/partials/footer.html

在结尾加上下面这一句，之前测试在config.toml下面添加，不生效

1<script src="/js/copy-to-clipboard.js"></script>

4. 运行hugo

最终的效果如下：

给Hugo添加字数统计和阅读时间功能

Wed, 22 Mar 2023 23:12:30 +0800

1. 修改页面

经常逛别人的博客时发现"共XXX字，阅读大约需要XXX分钟"，发现这个功能比较牛X，然后网上搜索了一下，发现hugo有函数支持这个需求的。

1. 修改页面

博客详情页：layouts/_default/single.html

修改single.html代码

找到标题下面的区块,我的是这样子的

 1<h2 class="subheading">{{ .Params.subtitle  }}</h2>
 2    <span class="meta">
 3            Posted by
 4            {{ if .Params.author  }}
 5                    {{ .Params.author  }}
 6            {{ else  }}
 7                    {{ .Site.Title  }}
 8            {{ end  }}
 9            on
10            {{ .Date.Format "Monday, January 2, 2006"  }}
11            {{ if .Site.Params.page_view_conter  }}
12                    {{ partial "page_view_counter.html" .  }}
13            {{ end  }}
14            <!-- Don't show "Last Modified on" if update happened on the same day. -->
15            {{ if (and (not .Lastmod.IsZero) (not (eq (dateFormat "2006-01-02" .Lastmod) (dateFormat "2006-01-02" .Date))))  }}
16            <br>Last Modified on {{ dateFormat "Monday, January 2, 2006" .Params.LastMod  }}
17            {{ end  }}
18    </span>

接下来在page_view_conter处加上字数统计功能，修改后的结果如下：

 1<h2 class="subheading">{{ .Params.subtitle  }}</h2>
 2    <span class="meta">
 3            Posted by
 4            {{ if .Params.author  }}
 5                    {{ .Params.author  }}
 6            {{ else  }}
 7                    {{ .Site.Title  }}
 8            {{ end  }}
 9            on
10            {{ .Date.Format "Monday, January 2, 2006"  }}
11            {{ if .Site.Params.page_view_conter  }}
12                    <span id="busuanzi_container_page_pv">|<span id="busuanzi_value_page_pv"></span><span>
13                    {{ partial "page_view_counter.html" .  }}
14                    阅读 </span></span>|<span class="post-date">共{{ .WordCount  }}字</span>，阅读约<span class="more-meta"> {{ .ReadingTime  }} 分钟</span>
15            {{ end  }}
16            <!-- Don't show "Last Modified on" if update happened on the same day. -->
17            {{ if (and (not .Lastmod.IsZero) (not (eq (dateFormat "2006-01-02" .Lastmod) (dateFormat "2006-01-02" .Date))))  }}
18            <br>Last Modified on {{ dateFormat "Monday, January 2, 2006" .Params.LastMod  }}
19            {{ end  }}
20    </span>

修改配置文件修改config.toml配置文件，将page_view_conter的值修改为true。效果如下：

安装Hugo

Thu, 06 Oct 2022 22:30:48 +0800

快速开始

快速开始

安装Hugo

1. 二进制安装（推荐：简单、快速）

到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件（hugo或者hugo.exe）

Mac下直接使用Homebrew安装：

1brew install hugo

2. 源码安装

源码编译安装，首先安装好依赖的工具：

Git
Mercurial
Go 1.3+ (Go 1.4+ on Windows) 设置好GOPATH环境变量，获取源码并编译：

1$ export GOPATH=$HOME/go
2$ go get -v github.com/spf13/hugo

源码会下载到 $GOPATH/src 目录，二进制在$GOPATH/bin/

如果需要更新所有Hugo的依赖库，增加-u参数：

1$ go get -u -v github.com/spf13/hugo

生成站点

使用Hugo快速生成站点，比如希望生成到 /path/to/site 路径：

1$ hugo new site /path/to/site

这样就在/path/to/site目录里生成了初始站点，进去目录：

1$ cd /path/to/site

站点目录结构：

1  ▸ archetypes/
2  ▸ content/
3  ▸ layouts/
4  ▸ static/
5    config.toml

创建文章

创建一个 about 页面：

1hugo new about.md

about.md 自动生成到了content/about.md，打开about.md看下：

1+++
2date = "2015-10-25T08:36:54-07:00"
3draft = true
4title = "about"
5
6+++
7
8正文内容

内容是Markdown格式的，+++之间的内容是 TOML 格式的，根据你的喜好，你可以换成 YAML 格式（使用 --- 标记）或者 JSON 格式。

创建第一篇文章，放到post目录，方便之后生成聚合页面。

1hugo new post/first.md

打开编辑post/first.md：

 1---
 2date: "2015-10-25T08:36:54-07:00"
 3title: "first"
 4 
 5---
 6
 7### Hello Hugo
 8
 9 1. aaa
10 1. bbb
11 1. ccc

安装皮肤

到皮肤列表挑选一个心仪的皮肤，比如你觉得 Hyde 皮肤不错，找到相关的 GitHub 地址，创建目录 themes，在 themes 目录里把皮肤 git clone 下来：

1# 创建 themes 目录
2$ cd themes
3$ git clone https://github.com/spf13/hyde.git

运行Hugo

在你的站点根目录执行 Hugo 命令进行调试：

1$ hugo server --theme=hyde --buildDrafts

（注明：v0.15 版本之后，不再需要使用 –watch 参数了）

浏览器里打开： http://localhost:1313

部署

假设你需要部署在 GitHub Pages 上，首先在GitHub上创建一个Repository，命名为：xzeu.github.io（xzeu替换为你的github用户名）。

在站点根目录执行 Hugo 命令生成最终页面：

1$ hugo --theme=hyde --baseUrl="http://xzeu.github.io/"

（注意，以上命令并不会生成草稿页面，如果未生成任何文章，请去掉文章头部的 draft=true 再重新生成。）

如果一切顺利，所有静态页面都会生成到 public 目录，将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。

1$ cd public
2$ git init
3$ git remote add origin https://github.com/xzeu/xzeu.github.io.git
4$ git add -A
5$ git commit -m "first commit"
6$ git push -u origin master

浏览器里访问：http://xzeu.github.io/