Hugo主题zzo中的代码块

起因是zzo主题示例网站中的post,Markdown-syntax引起了我的注意，因为其可以实现文本高亮，显示、切换代码种类的效果¹。

根据这篇博客²Hugo似乎内建了Highlight Shortcode来进行代码高亮。Hugo官网给出的文献在这里³。

高亮代码

对比一下：

using Yao, YaoExtensions
# number of qubits and circuit depth
n, d = 16, 100
circuit = dispatch!(variational_circuit(n, d),:random)

h = heisenberg(n)

for i in 1:100
 _, grad = expect'(h, zero_state(n) => circuit)
 dispatch!(-, circuit, 1e-1 * grad)
 println("Step $i, energy = $(real.(expect(h, zero_state(n)=>circuit)))")
end

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

using Yao, YaoExtensions
# number of qubits and circuit depth
n, d = 16, 100
circuit = dispatch!(variational_circuit(n, d),:random)

h = heisenberg(n)

for i in 1:100
 _, grad = expect'(h, zero_state(n) => circuit)
 dispatch!(-, circuit, 1e-1 * grad)
 println("Step $i, energy = $(real.(expect(h, zero_state(n)=>circuit)))")
end

虽然此处的文本高亮未必符合Julia语言，但后续应该可以自行编辑规则。并且还有行号显示，着实美观不少。

标签

1

System.out.println('Hello World!');

1

console.log('Hello World!');

对应Code:

{{< codes java javascript >}}
  {{< code >}}
  ```java
  System.out.println('Hello World!');
  ```
  {{< /code >}}
  {{< code >}}
  ```javascript
  console.log('Hello World!');
  ```
  {{< /code >}}
{{< /codes >}}

甚至标签套娃

1

console.log('Hello World!');

对应Code：

{{< tabs Windows MacOS Ubuntu >}}
  {{< tab >}}

  ### Windows section

  ```javascript
  console.log('Hello World!');
  ```

  ⚠️Becareful that the content in the tab should be different from each other. The tab makes unique id hashes depending on the tab contents. So, If you just copy-paste the tabs with multiple times, since it has the same contents, the tab will not work.

  {{< /tab >}}
  {{< tab >}}

  ### MacOS section

  Hello world!
  {{< /tab >}}
  {{< tab >}}

  ### Ubuntu section

  Great!
  {{< /tab >}}
{{< /tabs >}}

嵌入B站视频

对于Hugo，更好的嵌入方法我单独写在了这里

我们从拷贝一个B站分享链接中的嵌入代码。

1

<iframe src="//player.bilibili.com/player.html?aid=9953207&cid=32633421&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

先添加协议https，不然似乎会以file://协议传输？

1

<iframe src="https://player.bilibili.com/player.html?aid=9953207&cid=32633421&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

为了能使嵌入视频自适应，我参考这篇博客⁴，对Hugo的zzo主题下文件夹zzo/assets/sass/main.scss文件末尾添加如下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
  }
  
.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

然后给’iframe’套上对应的’div'，顺便加个居中，直接写在blog的md文件中就行了。

1
2
3

<div align=center class="aspect-ratio">
<iframe src="https://player.bilibili.com/player.html?aid=9953207&cid=32633421&page=1c" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

添加全文搜索

我注意到zzo的说明文档也是使用hugo的主题zdoc，并且有全文搜索。目前已经向它们的共同作者提交issue⁵，期望能新增功能。

若不行，计划尝试

• 使用 Elasticsearch2.1 实现博客站内搜索 - hugo - ITeye博客
  https://www.iteye.com/blog/hugoren-2270229
• Xuanzang —— 一款开箱即用的全文搜索引擎
  https://xuanwo.io/2018/05/01/xuanzang-intro/

添加评论系统

感觉一个好的评论系统还是必要的。大家有什么问题建议都可以交流，我希望评论系统能有以下特定：

• 最好可以不要登录，输入email、webit、name什么的就好了，注册什么的很烦
• 最好开源并且可以自托管，第三方不一定靠得住还有广告
• 能输Markdown是起码的，最好还能输入公式
• 尽量美观

调查后，有以下可选方案：

• valine：zzo内置，很美观，搭建简单，但是第三方闭源
• isso：zzo内置，基于python，开源自托管，不知道有无公式支持，界面有点老旧
• talkyarrd：非zzo内置，需要自己根据zzo主题调整，因此使用的示例有点奇怪，不知道不用登录是什么样子的，支持公式，开源自托管
• commento：zzo内置，开源自托管
• remark：非zzo内置，开源自托管（docker支持）

Hugo官方给出了更多的方案⁶。

使用非zzo内置评论系统出现问题的可能性更大，自己修复捣鼓可能需要学学HTML、CSS、JS什么的。故本计划还是暂时搁置。

zzo写作规范

为规范起见，本博客暂时使用下列来作为post基本写作模板：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

---
title: "Hugo使用Tips"
date: 2020-02-02T18:30:27+08:00
draft: false
description: 本文为记录安装、配置、使用Hugo以及其主题zzo而作
author: Yu
authorEmoji: 🔮
hideToc: false
enableToc: true
enableTocContent: true
tags:
- markdown
- hugo
- code
- zzo
categories:
- hugo
- zzo
series:
- hugo
image: mate_image/Hugo's_Tips/hugo-logo-wide.svg
---

Markdown Text


有参考：
-------------------------------------------------
**点击链接末尾的回车符可以跳转回引用处~**

下面是对一些内容的解释：以#标记，

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

---
title: "Hugo使用Tips" #显示标题，注意此处的title可以与文件名不同，文件名一般会直接在url中，所以尽量用中文；title可以用中文，显示在website中
date: 2020-02-02T18:30:27+08:00 #自动生成
draft: false #草稿标记，若为true使用'hugo'命令会被忽略，即不对这篇md文件进行转换，需要使用'hugo -D'才能
description: 本文为记录安装、配置、使用Hugo以及其主题zzo而作
author: Yu #显示的作者名
authorEmoji: 🔮 #显示在作者名前的符号
hideToc: false #隐藏目录
enableToc: true #启用右边的目录
enableTocContent: true #启用开头的目录
tags: #文章标签
- markdown
- hugo
- code
- zzo
categories: #文章所属分类
- hugo
- zzo
series: #文章所属系列
- hugo
image: mate_image/Hugo's_Tips/hugo-logo-wide.svg #website显示这篇博客的图标
---

Markdown Text


有参考：
-------------------------------------------------
**点击链接末尾的回车符可以跳转回引用处~**

“你”的博客~

修改网站作者信息

打开网站根目录下的/root/config/_default/params.toml修改对应信息即可

33
34
35
36
37
38
39
40
41

# whoami: usage - home page sidebar, single page bottom of post. all values can be empty
myname = "zzossig"
email = "zzossig@gmail.com"
whoami = "Web Developer"
bioImageUrl = "" # image url like http//... If not set, we find a avatar image in root/static/images/whoami/avatar.(png|jpg|svg)
useGravatar = false # we use this option highest priority
location = "Seoul, Korea"
organization = "Hugo"
link = "https://github.com/zzossig/hugo-theme-zzo"

修改网站标题

修改文件/root/config/_default/params.toml前两行就好

1
2

baseURL = "https://weimxi.github.io" # The URL of your site.
title = "Yu's Blog" # Title of your site

修改网站导航栏标题和logo

标题

修改文件/root/config/_default/params.toml第一行就好

1

logoText = "Zzo" # Logo text that appears in the site navigation bar.

logo

按照/themes/zoo/static文件下有logo.png、logo-192.png、logo-512.png

制作对应分辨率的logo放在文件root/static夹中即可。

修改网站图标

按照zzo的官方文档⁷：

使用图标生成器：

1. 如果您使用的是favicon genarator，则图标也可以在移动设备上正常工作。因此，建议。
2. 将useFaviconGenerator文件中的设置为trueroot/config/_default/params.toml
3. 在https://www.favicon-generator.org/网站上生成您的网站图标。
4. 在以下位置创建一个文件夹’root/static/favicon'，将生成的网站图标解压缩到该文件夹​​。

使用GitHub托管博客

username.github.io就是GitHub为我们保留的域名，我们可以使用Hugo生成静态内容然后上传至github对应仓库即可。步骤为：

1. 建仓库
   在GitHub上新建一个名为username.github.io的仓库，注意将username替换为你的用户名，开源协议的什么都不要写，否则后续第一次git push时会提示文件目录不对。

2. 第一次Push
   在你的Hugo网站根目录下，依次输入以下Shell命令，我是Win10，就是PowerShell，Mac、Linux可能路径符号不同，其余大致一样。期间要输入你的GitHub的用户名和密码，并注意替换命令中的username

   1 2 3 4 5 6 7

   Hugo cd ./public/ git init git add . git commit -m "first git my blog" git remote add origin https://github.com/username/usermane.github.io.git git push -u origin master

   然后出现 *[new branch] master -> master的字样，就代表第一次push成功了

3. 更新网站
   当我们写了新博客的时候，需要重新生成一下内容在Push到GitHub仓库，在PowerShell中依次键入下面命令即可

   1 2 3 4 5

   hugo cd ./public/ git add. git commit -m "update, you can change the msg" git push

4. 使用脚本自动更新网站
   当然了，每次挨个输入命令还是过于繁琐，因此我就写了个简单的PowerShell脚本，丢到Hugo.exe的文件夹下面，该文件夹事先已经添加到了Win10的环境变量中。命名为auto-push.ps1，其中写入

   1 2 3 4 5 6 7 8 9 10 11 12

   $commit_msg = Read-Host -Prompt 'input the commit msg' $web_path = ".\public" hugo cd $web_path Start-Sleep -Seconds 1.0 git add . git status $commit_msg = '"' + $commit_msg + '"' #为了commit_msg能简单键入"'"符号 Invoke-Expression "git commit -m $commit_msg" git push cd ..

   但是目前该文件还不能正常运行
   
   参考博客⁸，得知首次在计算机上启动 Windows PowerShell 时，现用执行策略很可能是 Restricted（默认设置）。Restricted 策略不允许任何脚本运行。若要了解计算机上的现用执行策略，请键入：get-executionpolicy
   若要在本地计算机上运行您编写的未签名脚本和来自其他用户的签名脚本，请使用以下命令将计算机上的执行策略更改为 RemoteSigned：set-executionpolicy remotesigned
   然后我们每次写完博客后只需在PowerShell输入auto-push.ps1即可（注意此时要在网站根目录下）

   另外Invoke-Expression "git commit -m $commit_msg"是为了能以命令执行对应的字符串git commit -m $commit_msg，直接写git commit -m $commit_msg会出错

有参考：

点击链接末尾的回车符可以跳转回引用处~