This page looks best with JavaScript enabled

Hugo使用Tips

 ·  ☕ 9 min read  ·  🔮 Yu · 👀... views

Hugo主题zzo中的代码块

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

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

高亮代码

对比一下:

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 >}}

甚至标签套娃

Windows section

1
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.

MacOS section

Hello world!

Ubuntu section

Great!

对应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>

为了能使嵌入视频自适应,我参考这篇博客4,对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,并且有全文搜索。目前已经向它们的共同作者提交issue5,期望能新增功能。

若不行,计划尝试

添加评论系统

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

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

调查后,有以下可选方案:

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

Hugo官方给出了更多的方案6

使用非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"
另外注意有个小bug,就是我这里直接将头像放到’root/static/images/whoami/avatar.(png|jpg|svg)',如果指定在bioImageUrl中指定别的头像路径,页面底部还是会使用忧郁猫的头像。

修改网站标题

修改文件/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

标题

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

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

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

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

一些浏览器可能回因为缓存等原因,使得logo不会立即刷新,可以清一下缓存或者换别的浏览器或者一直等

修改网站图标

按照zzo的官方文档7

使用图标生成器:

  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 ..
    

    但是目前该文件还不能正常运行

    参考博客8,得知首次在计算机上启动 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会出错

参考文献:

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


  1. zzo主题代码高亮演示 访问日期-2020年2月3日 https://themes.gohugo.io//theme/hugo-theme-zzo/en/posts/markdown-syntax/#code-block-with-hugos-internal-highlight-shortcode ↩︎

  2. Blog养成记(3) Hugo的语法高亮配置 访问日期-2020年2月3日 https://orianna-zzo.github.io/sci-tech/2018-01/blog%E5%85%BB%E6%88%90%E8%AE%B03-hugo%E7%9A%84%E8%AF%AD%E6%B3%95%E9%AB%98%E4%BA%AE%E9%85%8D%E7%BD%AE/ ↩︎

  3. Syntax Highlighting|Hugo 访问日期-2020年2月3日 https://gohugo.io/content-management/syntax-highlighting/ ↩︎

  4. 【前端笔记】使用iframe嵌入等比缩放的哔哩哔哩视频 访问日期-2020年2月3日 https://www.potatofield.cn/%E3%80%90%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0%E3%80%91%E4%BD%BF%E7%94%A8iframe%E5%B5%8C%E5%85%A5%E7%AD%89%E6%AF%94%E7%BC%A9%E6%94%BE%E7%9A%84%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E8%A7%86%E9%A2%91/ ↩︎

  5. feature request: full text search · Issue #140 · zzossig/hugo-theme-zzo 访问日期-2020年2月3日
    https://github.com/zzossig/hugo-theme-zzo/issues/140 ↩︎

  6. Comments | Hugo 中文文档教程 访问日期-2020年2月3日
    https://s0gohugo0io.icopy.site/content-management/comments/ ↩︎

  7. Favicon – Zzo 访问日期-2020年2月3日
    https://zzodocs.netlify.com/docs/configuration/favicon/ ↩︎

  8. PowerShell因为在此系统中禁止执行脚本解决方法 - Asharp - 博客园 访问日期-2020年2月3日
    https://www.cnblogs.com/zhaozhan/archive/2012/06/01/2529384.html ↩︎


Yu
WRITTEN BY
Yu
🎓 College Students 📐Physics 💾 Programmer