使用Hugo部署博客以及Stack主题的美化
编辑闲得无聊 玩玩静态博客,Hexo没什么我中意的主题,还要安装Nodejs,而Nodejs很容易让我想到一些不好的回忆…
(喜欢我Nodejs吗)
那就用Hugo吧,东看看西看看最后决定主题就用Stack吧
本来是打算使用PaperMod的,但是我这前端笨蛋倒腾半天灯箱也没搞出来,只好作罢🫠
需要准备什么?🤔
安装 Visual Studio Code
Download Visual Studio Code - Mac, Linux, Windows
无脑下一步就好
毕竟静态博客涉及不少前端嘛,不过还是自己习惯哪个IDE用哪个比较好
安装Git
参考Git的文档
安装Hugo
从Hugo的releases页面下载带有extended
的安装包,解压得到Hugo.exe
将其放在一个不会被你意外删除的文件夹
例如我放置在
D:\repo\Hugo Blog
打开Windows的搜索,搜索环境变量
选择 编辑环境变量
编辑你的电脑账户的环境变量Path
,新建一个环境变量,内容填写刚刚我们将Hugo.exe
存放位置的完整路径
然后连按三个确定,打开PowerShell
(或CMD
)输入以下命令来验证我们操作无误
hugo version
若输出了Hugo的版本号+extended
就代表我们成功啦😀
因为我这里使用的主题是Stack,所以必须使用带有
+extended
的Hugo🧐
Github添加ssh key与创建仓库
生成与添加ssh key可参考Github官方文档,毕竟这也不是什么难事😶
开始部署啦😆
生成站点
找一个不会被你删掉的文件夹存储Hugo生成的博客文件,在此处打开PowerShell
(或是CMD
)输入下面这段命令来生成一个叫做Blog
的站点
hugo new site Blog
然后Hugo就会在我们当前所处的位置生成文件夹Blog
,文件夹内就是我们站点的基础框架啦
添加主题
在这里我以主题Stack为例进行演示😋
先进入到我们刚刚生成的文件夹,然后打开Git bash
输入下面这段命令以git子模块的模式来添加Stack
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
如果输出报错
fatal: not a git repository (or any of the parent directories): .git
请先输入
git init
后再次输入此段命令
拉取完毕后,打开博客文件夹内的theme/hugo-theme-stack/exampleSite
,将文件夹内的config.yaml
复制到站点根目录下,同时删除原有的Hugo.toml
然后输入hugo server
在本机地址http://127.0.0.1:1313
预览一下博客长什么样吧😎
个性化主题🧐
基础设置
下面是一些基础设置的说明🤔:
-
baseurl
博客的URL -
languageCode
语言代码,例如zh-cn
-
paginate
每页显示的文章数量 -
title
网站名称 -
copyright
网站底部的个性化说明 -
languages
多语言设置,如不需要只需要把别的多余的语言删除即可 -
googleAnalytics
Google分析代码 -
DefaultContentLanguage
默认显示的语言 -
since
创建博客的年份 -
emoji
侧栏头像旁显示的Emoji -
subtitle
博客副标题,同时显示在侧栏的头像下 -
avatar
侧栏头像 下方是关于此设置的说明 -
favicon
站点logo
enabled
是否启用
local
是否储存在本地,如果要储存在本地,请把图片移动到博客根目录下的 assets\img\ 文件夹内(没有img文件夹就新建一个啦🙃)
src
图片本地链接或URL
配置Waline评论系统
首先要修改评论系统为Waline,在你的网站文件夹根目录的config.yaml
的第67行启用评论系统,并将默认评论系统修改为waline
comments:
enabled: true
provider: waline
然后在94~105行可以看到与Waline有关的设置
# Waline client configuration see: https://waline.js.org/en/reference/component.html
waline:
serverURL:
lang:
pageview:
emoji:
- https://unpkg.com/@waline/[email protected]/weibo
requiredMeta:
- name
- email
- url
locale:
admin: Admin
placeholder:
修改参数即可
修改侧栏个人社交信息
在网站文件夹根目录的config.yaml
的192行找到memu
,修改配置
如果感觉Stack内置的图标不好看,或又是没有你要用到的图标,那么我们就自己动手来添加图标吧
打开 Tabler Icons ,搜索自己想要的图标,然后将 Size
拉到 24px
,再将 Stroke
拉到 2px
然后单击所需要的图标,网站会会自动复制下这个图标的svg
代码,然后在网站根目录下的assets/icons/
文件夹内创建一个.svg
文件,文件名起一个你能记得住的
比如我的就是这样子的
- identifier: mail
name: Mail
url: mailto:[email protected]
weight: 1
params:
icon: mail
- identifier: github
name: Github
url: https://github.com/V-UwU
weight: 2
params:
icon: brand-github
- identifier: bilibili
name: BiliBili
url: https://space.bilibili.com/1722765856
weight: 3
params:
icon: bilibili
- identifier: twitter
name: twitter
url: https://twitter.com/V_Official_233
weight: 4
params:
icon: brand-twitter
- identifier: rss
name: RSS
url: https://hugo.vofficial233.com/index.xml
weight: 5
params:
icon: rss
weight
越小联系方式越靠前哦~
侧栏菜单配置
侧栏同样在网站根目录下的assets/icons/
的第192行进行修改即可,图标仍需要从Tabler Icons并放置在assets/icons/
内
- identifier: xxxx #侧栏标识符
name: XX #显示名称
url: https://xxxxxx.com or /xxxx/ #外部链接或是网站内链接
weight: -70
params:
### For demonstration purpose, the home link will be open in a new tab
newTab: false #是否在新页面打开
icon: planet #svg文件名称
添加友链页面
这里参考了这篇文章
创建友链layout
在网站的根目录的layouts
文件夹内新建文件夹page
,在page
中新建links.html
填入以下内容:
{{ define "body-class" }}article-page keep-sidebar{{ end }}
{{ define "main" }}
{{ partial "article/article.html" . }}
<div class="article-list--compact links">
{{ $siteResources := resources }}
{{ range $i, $link := $.Site.Data.links }}
<article>
<a href="{{ $link.website }}" target="_blank" rel="noopener">
<div class="article-details">
<h2 class="article-title">
{{- $link.title -}}
</h2>
{{ with $link.description }}
<footer class="article-time">
{{ . }}
</footer>
{{ end }}
{{ with $link.notes }}
<footer class="article-link">
{{ . }}
</footer>
{{ end }}
</div>
{{ with $link.image }}
<div class="article-image">
<img src="{{ . }}" loading="lazy">
</div>
{{ end }}
</a>
</article>
{{ end }}
</div>
{{ if not (eq .Params.comments false) }}
{{ partial "comments/include" . }}
{{ end }}
{{ partialCached "footer/footer" . }}
{{ end }}
添加友链数据
在根目录的data
文件夹内新建文件links.json
,这个文件负责存储友链数据
[
{
"title": "Github",
"website": "http://github.com",
"image": "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
"description": "Something",
"notes": "我的备注"
}
]
原文中似乎提到了使用本地文件存储友链logo,但我这边全是URL外链,所以就不搞了😴
添加双栏样式
在网站根目录的assets/scss/
目录下新建文件custom.scss
//友情链接双栏
@media (min-width: 1024px) {
.article-list--compact.links {
display: grid;
grid-template-columns: 1fr 1fr;
background: none;
box-shadow: none;
article {
background: var(--card-background);
border: none;
box-shadow: var(--shadow-l2);
margin-bottom: 8px;
border-radius: 10px;
&:nth-child(odd) {
margin-right: 8px;
}
}
}
}
设置友链md文件
然后在网站根目录的content
内新建一个与友链有关的md文件
例如我的存放在
/content/page/friends/index.md
---
title: 友链
slug: "friends"
layout: "links"
---
调整备注格式
在网站根目录的assets/scss/partials/
文件夹下新建article.scss
// .article-list--compact
.article-time {
font-size: 1.4rem;
}
.article-link {
color: var(--emphasize-text-color);
font-size: 1.3rem;
font-style: italic;
}
增加休眠区并改为三栏
添加冷冻舱数据
在网站根目录的data
文件夹下新建文件frozenlinks.json
,内容填写
[
{
"title": "",
"website": "",
"image": "/link-img/some_picture.png",
"description": "",
"notes": "沉睡的博客们会被放在这里喔~"
},
{
"title": "Github",
"website": "http://github.com",
"image": "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
"description": "Something",
"notes": "我的备注"
}
]
如果要在本地储存图片,请把图片放置在网站根目录的文件夹
static
内
添加三栏样式
再次修改assets/scss/custom.scss
,加入三栏代码
/* Extra compact style article list for frozen links */
.article-list--extra-compact {
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
background-color: var(--card-background);
--image-size: 50px;
@include respond(md) {
--image-size: 60px;
}
article {
& > a {
display: flex;
align-items: center;
padding: var(--small-card-padding);
gap: 15px;
}
&:not(:last-of-type) {
border-bottom: 1.5px solid var(--card-separator-color);
}
.article-details {
flex-grow: 1;
padding: 0;
min-height: var(--image-size);
gap: 10px;
}
.article-title {
margin: 0;
font-size: 1.4rem;
@include respond(md) {
font-size: 1.6rem;
}
}
.article-image {
img {
width: var(--image-size);
height: var(--image-size);
object-fit: cover;
}
}
.article-time {
font-size: 1.3rem;
}
.article-link {
color: var(--emphasize-text-color);
font-size: 1.3rem;
font-style: italic;
}
}
}
/* 冷冻舱友情链接修改为三栏 */
@media (min-width: 1024px) {
.article-list--extra-compact.links {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background: none;
box-shadow: none;
gap: 1rem;
article {
background: var(--card-background);
border: none;
box-shadow: var(--shadow-l2);
margin-bottom: 8px;
border-radius: var(--card-border-radius);
&:nth-child(odd) {
margin-right: 8px;
}
}
}
}
修改友链layout
回到layouts/page/links.html
,新增三栏代码
<!-- 添加三栏冷冻休眠仓 -->
<h3>冷冻休眠舱</h3>
<div class="article-list--extra-compact links">
{{ $siteResources := resources }}
{{ range $i, $link := $.Site.Data.frozenlinks }}
<article>
<a href="{{ $link.website }}" target="_blank" rel="noopener">
<div class="article-details">
<h2 class="article-title">
{{- $link.title -}}
</h2>
{{ with $link.description }}
<footer class="article-time">
{{ . }}
</footer>
{{ end }}
{{ with $link.notes }}
<footer class="article-link">
{{ . }}
</footer>
{{ end }}
</div>
{{ with $link.image }}
<div class="article-image">
<img src="{{ . }}" loading="lazy">
</div>
{{ end }}
</a>
</article>
{{ end }}
</div>
这段代码要添加到下方这段代码之前🧐
{{ if not (eq .Params.comments false) }} {{ partial "comments/include" . }} {{ end }} {{ partialCached "footer/footer" . }} {{ end }}
添加归档页和搜索页
直接将主题文件夹下的exampleSite/content/page
内的所有文件全部复制到网站根目录从/content/page
内即可
记得自己改一下源文件哦,如果使用单语言仅保留
index.md
即可
文章右侧不显示目录
在网站根目录config.yaml的第292行,修改
startLevel: 1
在归档页增加标签
在网站根目录layouts/_default/
内新建archives.html
{{ define "body-class" }}template-archives{{ end }}
{{ define "main" }}
<header>
{{- $taxonomy := $.Site.GetPage "taxonomyTerm" "categories" -}}
{{- $terms := $taxonomy.Pages -}}
{{ if $terms }}
<h2 class="section-title">{{ $taxonomy.Title }}</h2>
<div class="subsection-list">
<div class="article-list--tile">
{{ range $terms }}
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
{{ end }}
</div>
</div>
{{ end }}
</header>
{{- $taxonomy := $.Site.GetPage "taxonomyTerm" "tags" -}}
{{- $terms := $taxonomy.Pages -}}
{{ if $terms }}
<section class="widget tagCloud">
<h2 class="section-title">{{ $taxonomy.Title }}</h2>
<div class="tagCloud-tags">
{{ if ne (len $.Site.Taxonomies.tags) 0 }}
{{ range $name, $taxonomy := $.Site.Taxonomies.tags }}
{{ $tagCount := len $taxonomy.Pages }}
<a href="{{ "/tags/" | relURL }}{{ $name | urlize }}" class="tagCloud-tags">
{{ $name }}<span class="tagCloud-count">{{ $tagCount }}</span>
</a>
{{ end }}
{{ end }}
</div>
<section>
{{ end }}
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
{{ $filtered := ($pages | intersect $notHidden) }}
{{ range $filtered.GroupByDate "2006" }}
{{ $id := lower (replace .Key " " "-") }}
<div class="archives-group" id="{{ $id }}">
<h2 class="archives-date section-title"><a href="{{ $.RelPermalink }}#{{ $id }}">{{ .Key }}</a></h2>
<div class="article-list--compact">
{{ range .Pages }}
{{ partial "article-list/compact" . }}
{{ end }}
</div>
</div>
{{ end }}
{{ partialCached "footer/footer" . }}
{{ end }}
在网站根目录assets/scss/partials/
内新建widgets.scss
.widget {
display: flex;
flex-direction: column;
.widget-icon {
svg {
width: 32px;
height: 32px;
stroke-width: 1.6;
color: var(--body-text-color);
}
}
}
/* Tag cloud widget */
.tagCloud {
.tagCloud-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
a {
background: var(--card-background);
box-shadow: var(--shadow-l1);
border-radius: var(--tag-border-radius);
padding: 8px 20px;
color: var(--card-text-color-main);
font-size: 1.4rem;
transition: box-shadow 0.3s ease;
&:hover {
box-shadow: var(--shadow-l2);
}
}
}
}
/* Archives widget */
.widget.archives {
.widget-archive--list {
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
background-color: var(--card-background);
}
.archives-year {
&:not(:last-of-type) {
border-bottom: 1.5px solid var(--card-separator-color);
}
a {
font-size: 1.4rem;
padding: 18px 25px;
display: flex;
span.year {
flex: 1;
color: var(--card-text-color-main);
font-weight: bold;
}
span.count {
color: var(--card-text-color-tertiary);
}
}
}
}
.tagCloud {
.tagCloud-count {
color: var(--body-text-color);
}
}
在归档列表里面显示文章副标题/简介
在网站根目录的assets/scss/partials/
新建article.scss
并将主题同目录下的同名文件内的内容全部复制粘贴进此文件夹,找到.article-list--compact
,在里面添加如下内容:
.article-subtitle {
margin-top: -5px;
font-size: 1.5rem;
@include respond(md) {
font-size: 1.6rem;
}
}
再在layouts/partials/article-list/
中新建compact.html
填入如下内容:
<article>
<a href="{{ .RelPermalink }}">
<div class="article-details">
<h2 class="article-title">
{{- .Title -}}
</h2>
{{ with .Params.description }}
<div class="article-subtitle">
{{ . }}
</div>
{{ end }}
<footer class="article-time">
<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
{{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
</time>
</footer>
</div>
{{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" -}}
{{ if $image.exists }}
<div class="article-image">
{{ if $image.resource }}
{{- $Permalink := $image.resource.RelPermalink -}}
{{- $Width := $image.resource.Width -}}
{{- $Height := $image.resource.Height -}}
{{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
{{- $thumbnail := $image.resource.Fill "120x120" -}}
{{- $Permalink = $thumbnail.RelPermalink -}}
{{- $Width = $thumbnail.Width -}}
{{- $Height = $thumbnail.Height -}}
{{- end -}}
<img src="{{ $Permalink }}"
width="{{ $Width }}"
height="{{ $Height }}"
alt="{{ .Title }}"
loading="lazy">
{{ else }}
<img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
{{ end }}
</div>
{{ end }}
</a>
</article>
外部链接后面会显示跳转图标
在网站根目录layouts/_default/_markup/
新建render-link.html
,并填入
<a class="link" href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"
{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"
{{ end }}>{{ .Text | safeHTML }}</a>
{{ if strings.HasPrefix .Destination "http" }}
<span style="white-space: nowrap;"><svg width=".7em"
height=".7em" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
<path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z" fill="currentColor" />
<path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"
fill="currentColor">
</svg></span>
{{ end }}
在文章中这样使用
[Summer](https://vofficial233.com)
缩小代码块的字体大小
默认的在移动端UA下看起来实在是太大了😨,还是小一点比较好看😋
在网站根目录的assets/scss/partials/
内新建article.scss
并将主题同目录下的同名文件内的内容全部复制粘贴进此文件夹,在文件最后加入以下内容
code {
border-radius: var(--tag-border-radius);
font-size: 14px; // Add font size setting for code block
font-family: var(--code-font-family);
}
修改切换深色模式图标
Stack默认的切换深色模式是和Walker默认相同的胶囊形状,但是我个人并不喜欢这种,好难看的😨
再打开上文我们使用过的 Tabler Icons ,搜索自己想要的图标,然后将 Size
拉到 24px
,再将 Stroke
拉到 2px
然后单击所需要的图标,网站会会自动复制下这个图标的svg
代码,然后在网站根目录下的assets\icons\
文件夹内创建一个.svg
文件,文件名起一个你能记得住的
然后在博客根目录assets/scss/partials/
内新建sidebar.scss
并将主题同目录下的同名文件内的内容全部复制粘贴进此文件夹,找到第154行的[data-scheme="dark"] {
将内容修改为:
[data-scheme="dark"] {
#dark-mode-toggle {
color: var(--accent-color);
font-weight: 700;
.icon-tabler-sun-high {
display: none;
}
.icon-tabler-moon-stars {
display: unset;
}
}
}
#dark-mode-toggle {
margin-top: auto;
color: var(--body-text-color);
display: flex;
align-items: center;
cursor: pointer;
gap: var(--menu-icon-separation);
.icon-tabler-moon-stars {
display: none;
}
}
layouts/partials/sidebar/left.html
与sidebar.scss
操作一致
找到第91行,修改为
{{ if (default false .Site.Params.colorScheme.toggle) }}
<li id="dark-mode-toggle">
{{ partial "helper/icon" "浅色模式svg文件名称" }}
{{ partial "helper/icon" "深色模式svg文件名称" }}
<span>{{ T "darkMode" }}</span>
</li>
{{ end }}
使用Fancybox作为灯箱放大图片
为什么不使用Stack自带的PhotoSwipe呢?因为PhotoSwipe只支持内部存储的图片,一旦图片是外链就无法放大了😨(不方便跑路换框架😉)
首先打开博客根目录的config.yaml,在第34行找到params
,加入以下内容
params:
fancybox: true
首先来更改render-image.html
在博客根目录的/layouts/_default/_markup/
内新建render-image.html
填写以下内容:
{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- $Permalink := .Destination | relURL | safeURL -}}
{{- $alt := .PlainText | safeHTML -}}
{{- $Width := 0 -}}
{{- $Height := 0 -}}
{{- $Srcset := "" -}}
{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
{{- $galleryImage := false -}}
{{- if $image -}}
{{- $notSVG := ne (path.Ext .Destination) ".svg" -}}
{{- $Permalink = $image.RelPermalink -}}
{{- if $notSVG -}}
{{- $Width = $image.Width -}}
{{- $Height = $image.Height -}}
{{- $galleryImage = true -}}
{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
{{- $small := $image.Resize `480x` -}}
{{- $big := $image.Resize `1024x` -}}
{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{if .Page.Site.Params.fancybox }}
<div class="post-img-view">
<a data-fancybox="gallery" href="{{ .Destination | safeURL }}">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</a>
</div>
{{ end }}
然后更改custom.html
在博客根目录的layouts/partials/hand/
内新建custom.html
并将主题同目录下的同名文件内的内容全部复制粘贴进此文件,并新增以下内容:
{{if .Page.Site.Params.fancybox }}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
{{ end }}
解决部分静态资源在大陆地区访问过慢问题
像是前面我们添加的Waline,又或是Fancybox,都使用到了 jsdelivr.net 和 unpkg.com ,但是他们在国内因为某个众所周知的原因,访问实在是太慢啦😵💫
不过我们可以通过把使用到这两个站点的静态文件下载后,存储到博客根目录的static
文件夹内,然后将引用文件的URL改为本地路径
例如我们修改Fancybox的资源
修改前:
{{if .Page.Site.Params.fancybox }}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
{{ end }}
修改后:
{{if .Page.Site.Params.fancybox }}
<script src=" https://npm.elemecdn.com/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="/Fancybox/jquery.fancybox.min.css" />
<script src="/Fancybox/jquery.fancybox.min.js"></script>
{{ end }}
我将这两个文件储存在了
/static/Fancybox
内
本文所参考的文章🤔
- 7
- 2
-
分享