我也来折腾一下

本博客参考了网友教程，使用Hugo+Vercel搭建，并使用MemE主题。修改过程中也参考了这位朋友的装修过程。

2022-01-10

修改图标

第一件事就是来修改站点图标，在这里挑选了比较可爱的免费图标，转换为ico格式后在static文件夹下替换了favicon.ico文件，但是发现只有在电脑浏览器上改好了，手机浏览器上还是那个朴素的默认图标，急得我到处乱翻💦

搜了半天发现可以修改config.toml，Ctrl+F搜了下"icon"，翻着翻着看见下面这几行，这可真是踏破铁鞋无觅处，得来全不费工夫啊！

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


 	# 说明：前往 https://realfavicongenerator.net/
	#      生成相关图标和文件，下载后解压，仅保留
    #      android-chrome-512x512.png、
    #      apple-touch-icon.png、
    #      mstile-150x150.png、
    #      safari-pinned-tab.svg、favicon.ico、
    #      site.webmanifest 这些文件，删除其余。
    #      然后将这些文件移动到 ~/blog/static/icons/
    #      目录下，再将 favicon.ico、site.webmanifest
    #      移动到 ~/blog/static/ 目录下，
    #      最后将 site.webmanifest 重命名为
    #      manifest.json，并检查和修改相关内容
    #      （图标的路径）。

于是就按照这个改了一下，提交修改后很快就好了！

归档

按照MemE作者教程加入了“归档”页面，等有东西放上去的时候再来仔细研究一下。

添加文章目录

采用Typora自带的toc发现不能正常显示，在config.toml中修改

1
2


[params]
    toc = true

以上修改参考了这里。

修改Taxonomy页面标题

发现“分类”和“标签”页面显示的标题都是英文，看了半天也没看懂要在哪个文件里修改页面标题，于是想了个特偷懒的办法，照抄之前的归档教程，在content文件夹下创建categories和tags文件夹，直接把archives文件夹里的_index.md复制过来，把里面的内容分别改成“分类”和“标签”。~~也太能偷懒了吧！~~

添加永久链接

参考了这个教程。

使用盘古之白

感谢作者拯救强迫症

修改layouts\partials\footer.html即可。

修改默认文本编辑器为Typora

1
2
3


# ```hugo new``` 新建文章自动打开的文本编辑器
# newContentEditor = "D:\Program Files\Typora\Typora.exe"
newContentEditor = "D:\\Program Files\\Typora\\Typora.exe"

第一种写法报错，"\"在字符串中为转义字符，需要再加一次转义。

尝试文字高亮

这是可以的吗

1

<span style="background-color: #FAFAD2; color: #F08080;">test</span>

参考了这里的代码和这里的颜色值。

尝试黑幕

黑幕测试。

参考了Re:萌娘百科上的黑幕。

修改assets/scss/custom/_custom.scss，然后使用以下HTML代码。

1

<span class="heimu" title="非常非常黑">黑幕测试</span>

本来有点困惑要在哪里引入_custom.scss，~~毕竟本人对css可以说是一窍不通~~ ，最后发现main.scss里就引入了，好耶！

使用图床

图为水豚在吃南瓜。

参考：Hugo中Markdown图片资源存放几种方式

暂时使用了SM.MS图床，也许未来还会尝试其他的方式 ❄️

2022-01-11

PicGo+Github+Typora图床

参考了Typora配置picgo+github解决图片上传问题的详细过程和问题解决方法！

从github取得token后在PicGo中配置图床，然后在Typora的图像偏好中设置搭配PicGo使用。

遇到的问题：

1.提示StatusCodeError: 404

解决办法：搜索了各种偏方但毫无效果，然而最后神秘地就好了，这里来说一些注意事项。

仓库名要填成用户名/仓库名。
分支请按实际情况填写，一些教程里使用master，但github现在已经改用main。
实在不行就多重启几次，~~相信玄学~~。

2.上传之后无法在站点中查看图片。除非科学上网。

解决方法：使用CDN加速。

设置自定义域名为

https://gcore.jsdelivr.net/gh/用户名/仓库名

然后就可以正常访问了。

对于CDN的工作原理还不是很了解，等有时间的时候去看一下 🤔

设置CSS模糊效果

效果测试

BLUR 1

BLUR 2

BLUR 3

BLUR 4

BLUR 5

BLUR

HTML:

1
2
3
4
5
6


<div class="blur1">BLUR 1</div>
<div class="blur2">BLUR 2</div>
<div class="blur3">BLUR 3</div>
<div class="blur4">BLUR 4</div>
<div class="blur5">BLUR 5</div>
<div class="blur">BLUR</div>

CSS:

 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


/*模糊效果*/
.blur1,.blur2,.blur3,.blur4,.blur5{
   font-size:10px;
   color:rgba(0,0,0,0);
}
.blur1{
   text-shadow:0 0 0 rgb(0, 162, 255);
}
.blur2{
   text-shadow:0 0 2px rgb(0, 255, 98);
}
.blur3{
   text-shadow:0 0 4px rgb(25, 0, 255);
}
.blur4{
   text-shadow:0 0 6px rgb(255, 0, 255);
}
.blur5{
   text-shadow:0 0 8px rgba(255,0,0,1);
}  
.blur{
  color: transparent;
  text-shadow:0 0 8px rgba(0,0,0,0.5);
}
.blur:hover{
  color: transparent;
  text-shadow: 0 0 0px rgba(0,0,0,1);
}

参考：

CSS 模糊效果，也可以根据这个修改字体大小和颜色。

以及这里的文本显示样式。

设置文字一半高亮

下面

上面

CSS:

1
2
3
4


.half_background {
  font-weight: bold;
  background-image: linear-gradient(to top, var(--bot) 50%, var(--top) 50%);
}

HTML:

1
2


<span class="half_background" style="--top: transparent; --bot: green;">下面</span>
<span class="half_background" style="--top: yellow; --bot: transparent;">上面</span>

参考

调节品牌栏

在config.toml中搜索header，不知道怎么调高度，因为默认太窄了，我也没做可以放上去的矢量图，最后发现把字体大小改一下就可以了？

设置siteBrandFontSize=1.5，在电脑上看着还算舒服，不过还想换一下字体。

更换品牌栏标题字体

从站酷字库挑选了想要的字体（也可以去别的地方看看，免费字体还挺多的），并在cloudconvert转换为.woff2格式。

放入\static\fonts文件夹，修改自定义css。

1
2
3
4
5
6
7
8


@font-face {
    font-family: '[font-name]'; /*根据使用的字体命名*/
    font-display: swap;
    src: url('/fonts/[font-name].woff2') format('woff2-variations'),
         url('/fonts/[font-name].woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-style: normal;

最后在config.toml中设置

1

fontFamilySiteBrand="[font-name]"

2022-01-13

开启Mermaid画图

在config.toml中设置enableMermaid=true

根据hugo加入mermaid作图在layouts\partials\footer.html添加以下内容。

1
2
3
4


<script src="https://mermaidjs.github.io/scripts/mermaid.min.js"></script>
<script>
    mermaid.initialize({ startOnLoad: true });
</script>

具体使用方式可参照Mermaid画图教程。

示例：

flowchart LR A <--"狂爱"--> B B <--"讨厌"--> C

修改摘要显示内容

默认摘要内容为文章的前xx个字，但是感觉没起到摘要的作用，于是在Front-matter中加入summary。

效果如下图所示：

参考：[译]Hugo-Theme-PaperMod主题文档 Variables | Front Matter

本想为代码块添加折叠

一开始找到了一种折叠方法，但是展开之后我的代码样式没有了💦

搜了下"Hugo 折叠代码块"发现原来MemE作者就有写代码折叠如何开启，刚要复制代码就看到作者在后面说欸我们可以滚动，也不是非要折叠吧！我一想还挺有道理，毕竟我想折叠代码块也只是为了看着没那么头痛，这样也好，也好。

添加站点字数和文章数统计

最开始抄了Hugo 总文章数和总字数，总字数可以正常显示，但却显示文章数为0。

1

共 {{ len (where .Site.RegularPages "Section" "posts") }} 篇文章

在Connect Sections中看到

A Section is a collection of pages that gets defined based on the organization structure under the content/ directory.

一拍大腿想起我的归档页面叫archives，于是把"posts"改为"archives"，成了！

但觉得精确到个位的统计还是不太好看，于是参考了升级本站点字数统计。

最终修改layouts\partials\footer.html

1
2
3
4
5
6


{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
    {{$scratch.Add "total" .WordCount}}
{{ end }}
{{$var :=  $scratch.Get "total"}}{{$var = div $var 100.0}}{{$var = math.Ceil $var}}{{$var = div $var 10.0}}
<span>共 {{ len (where .Site.RegularPages "Section" "archives") }} 篇文章,总计 {{$var}} k字</span>

添加Disqus评论区

虽然没什么人会看也要添加评论区嗯嗯🤗

参考了Comments中的内容。

首先在Disqus注册账号，得到shortname。

在config.toml中修改

1
2
3


## Disqus
enableDisqus = true
disqusShortname = "yourdiscussshortname"

但这个还是要翻！（大哭）

鼓捣了一晚上ISSO但是没装上😓CentOs是一款我的创伤

2022-01-14

改用utterances评论区

在github中新建public仓库，用于存放评论内容。

在config.toml中设置

1
2


enableUtterances = true
utterancesRepo = "username/reponame"

访问这里，在github上安装utterances，大功告成！

参考：hugo博客使用 utterances 作为评论系统

2022-01-25

AutoHotkey+Typora|脚本+快捷键

TEST

启发是因为某天想到能不能在Typora中设置文字颜色，然后就看到Typora字体颜色设置的3种方案讲了怎么使用AutoHotkey脚本。

先试着设置了half_background的快捷键。这个人怎么又在抄代码了

示例：

#IfWinActive ahk_exe Typora.exe
{
	;Shift+Alt+C 浅蓝色
    +!c::addHalfBg("Cyan")

    ;Shift+Alt+A 薄荷绿
    +!a::addHalfBg("Aquamarine")

    ;Shift+Alt+G GreenYellow
    +!g::addHalfBg("GreenYellow")
}
addHalfBg(color){
    clipboard := "" ; 清空剪切板
    Send {ctrl down}c{ctrl up} ; 复制
    SendInput {TEXT}<span class="half_background" style="--top:transparent; --bot:%color%">
    SendInput {ctrl down}v{ctrl up} ; 粘贴
    If(clipboard = ""){
        SendInput {TEXT}</span> ; Typora 在这不会自动补充
    }else{
        SendInput {TEXT}</ ; Typora中自动补全标签
    }
}

之后也加入了其他常用样式。

其他参考：AutoHotkey官方教程（一）

添加页面顶部阅读进度条

CSS:

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


#content_progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-image: linear-gradient(to top right,  #2488D6 35%, #83B8FF, 60%, #C6CDFF 80%);
  background-position: 0 70px;
  background-size: 100% calc(100% - 100vh + 5px);
}

#content_progress::-webkit-progress-bar {
  background-color: transparent;
}

#content_progress::-webkit-progress-value {
  background-image: linear-gradient(to top right,  #2488D6 35%, #83B8FF, 60%, #C6CDFF 80%);
}

JS:

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


document.addEventListener('DOMContentLoaded', function () {
    var winHeight = window.innerHeight,
          docHeight = document.documentElement.scrollHeight,
          progressBar = document.querySelector('#content_progress');
    progressBar.max = docHeight - winHeight;
    progressBar.value = window.scrollY;

    document.addEventListener('scroll', function () {
          progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
          progressBar.value = window.scrollY;
    });
});

HTML：(放在header.html中，因为想只在文章页面显示，所以又改了下，放在了<header class="header">下面。)

1
2
3


{{ if .IsPage }}
	<progress id="content_progress" value="0"></progress>
{{ end }}

参数修改：

根据Page Varuables|Hugo

.IsPage

always true for regular content pages.

虽然对这些参数还是晕头转向不过总算摸索出来了。

参考：

超简单实现WEB页面顶部阅读进度条

纯css实现页面阅读进度条

2022-01-26

使用LoveIt主题的admonition样式

下载LoveIt主题

在自己主题的/i18n/zh.toml中加入

 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
30
31
32
33
34
35
36
37


# === shortcodes/admonition.html ===
[note]
other = "注意"

[abstract]
other = "摘要"

[info]
other = "信息"

[tip]
other = "技巧"

[success]
other = "成功"

[question]
other = "问题"

[warning]
other = "警告"

[failure]
other = "失败"

[danger]
other = "危险"

[bug]
other = "Bug"

[example]
other = "示例"

[quote]
other = "引用"
# === shortcodes/admonition.html ===

将layouts\shortcodes\admonition.html复制到自己的短代码文件夹中。

将assets\css\_partial\_single\admonition.scss复制到自己的_custom.scss所在路径下，并在开头加上

1

@import 'admonition';

将assets\css\_variables.scss中和admonition有关的内容复制到admonition.scss中。

效果：

注意

一个注意横幅

摘要

一个摘要横幅

信息

一个信息横幅

技巧

一个技巧横幅

成功

一个成功横幅

问题

一个问题横幅

警告

一个警告横幅

失败

一个失败横幅

危险

一个危险横幅

Bug

一个 Bug 横幅

示例

一个示例横幅

引用

一个引用横幅

参考：

在 Hugo 博客上实践 Shortcodes 短代码, 太强大了

LoveIt主题自带的admonition样式

2022-01-27

添加hugo-notice样式

This is error

This is tip

This is warning

This is success

完全照搬这个。

虽然觉得admonition样式比较多但是我还不会加图标，hugo-notice感觉还可以，也比较好扩展的样子呢🤔

2022-01-31

添加Algolia搜索

在Algolia注册账号->创建应用->创建索引，在API Keys中找到Application ID和Search-Only API Key。

修改config.toml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


# Hugo 的输出控制
[outputs]
    page = ["HTML"]
    home = ["HTML", "SectionsAtom", "SectionsRSS", "Algolia"]

# Algolia search

# 说明：需要开启 `Algolia` 的输出，且需要每
#      次将生成的 algolia.json 文件上传到
#      Algolia
enableAlgoliaSearch = true

algoliaAppId = ApplicationID
algoliaApiKey = Search-Only API Key
algoliaIndexName = YourIndex

[menu]
	## 菜单栏
	[[menu.main]]
        weight = 8
        identifier = "search"
        post = "search"

在\layouts\_default文件夹下创建

algolia.index.json

1
2
3
4
5
6
7
8
9


{{/* 生成Algolia搜索索引文件 */}}
{{- $.Scratch.Add "index" slice -}}
{{/* content/p目录下的博文才生成索引，这是我的博客 */}}
{{- range where (where .Site.Pages "Type" "in" (slice "archives")) "IsPage" true -}}
  {{- if not .Draft -}}
    {{- $.Scratch.Add "index" (dict "objectID" .File.UniqueID "url" .Permalink "content" (.Summary | plainify) "tags" .Params.Tags "lvl0" .Title "lvl1" .Params.Categories "lvl2" .Description) -}}
  {{- end -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

里面的archives需要根据使用的permalink格式自行修改，如post等。

搜索之前需要先本地执行hugo -D命令，直接部署的话似乎没有效果，我就是在这里卡了很久orz

参考内容：Hugo博客搭配Algolia实现站内搜索

至于自动上传还是以后再说。

2022-02-06

添加站点运行时间

修改\layouts\partials\footer.html

1
2


<div class="site-info">
                <span id="run-time"></span></br> 

修改custom.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


/* 站点运行时间 */
function runtime() {
	window.setTimeout("runtime()", 1000);
	/* 请修改这里的起始时间 */
    let startTime = new Date('07/12/2019 15:00:00');
    let endTime = new Date();
    let usedTime = endTime - startTime;
    let days = Math.floor(usedTime / (24 * 3600 * 1000));
    let leavel = usedTime % (24 * 3600 * 1000);
    let hours = Math.floor(leavel / (3600 * 1000));
    let leavel2 = leavel % (3600 * 1000);
    let minutes = Math.floor(leavel2 / (60 * 1000));
    let leavel3 = leavel2 % (60 * 1000);
    let seconds = Math.floor(leavel3 / (1000));
    let runbox = document.getElementById('run-time');
    runbox.innerHTML = '本站已运行<i class="far fa-clock fa-fw"></i> '
        + ((days < 10) ? '0' : '') + days + ' 天 '
        + ((hours < 10) ? '0' : '') + hours + ' 时 '
        + ((minutes < 10) ? '0' : '') + minutes + ' 分 '
        + ((seconds < 10) ? '0' : '') + seconds + ' 秒 ';
}
runtime();

参考：添加站点运行时间

我也来折腾一下

相关文章：