博客 | 熟悉你的博客

非教程，一切定位/文件途径均以本博客当前的情况为准。

原本想说这些内容不是和《手册》的内容重合了吗，后来想了想，还是先别管《手册》了，就让它放在那吧，以后再去决定要保留什么内容。

本站目前在使用的主题是stack。

写文章

如何写文章

Hugo其实有一套自己独特的写文章方式，具体如下

在根目录里右键点击Git Bash Here
输入hugo new posts/文章标题.md
按下回车键
按\hugo\content\posts这个路径打开文件夹，你会发现里面有一个新的Markdown源文件
用Markdown编辑器打开，然后就可以编辑了

但是呢，由于我开始使用Obsidian写东西的时间，比开始写博客的时间要早得多，并且Obisidian文章文件的格式也是.markdown，那这就很直接了，直接在Obsidian上写。

写完了再把文件复制粘贴到博客的根目录底下（添加新的文章）；或是用VSCode打开博客根目录那边需要更新的文章，再打开Obisidian这边更新了的文章，把后者的内容Ctrl+A、Ctrl+C，然后到前者的界面Ctrl+A、Ctrl+V（更新旧文章）。

FrontMatter

Hugo文档里的frontmatter部分

stack的config文件是yaml格式的，front matter靠最开头的两行---来识别

标题（title），
文章描述（description），
文章写作日期（date），
文章最后更新日期（lastmod），
是否为草稿（draft，设置为true时，文章就相当于没发出去，不存在于博客上），
是否隐藏（hidden，设置为true，文章相当于发出去，存在于博客上，但被隐藏了起来——一般来说需要输入正确的网址的才能查看）
slug（文章页面url的末尾部分），
cayegories（文章分类），
tags（文章标签）

这是一个例子。注意，除了categories和tags，其余每一项所带的英文引号的后面都【空了一格】。

---
title: "这是标题"//（Hugo文档里，yaml的例子中，标题其实没带双引号，不过我所有文章都带了……习惯了。好像也没啥影响，不改了）
description: "这是描述"//（同上，其实不用带引号但我习惯了……）
date: "2022-07-22"//（Hugo文档里，yaml的例子中，日期是带了双引号的——然而我都没带，草！怎么回事，真就反着来是吧……）
lastmod: "2023-07-22"
draft: false
hidden: true
slug: "the-title"
categories:
  - 仓库施工日志
tags:
  - Hugo
  - Blog
---

文章格式，与各种效果

然后是说在前面，文章格式这部分涉及的内容有很多，比如说字体效果（粗体，斜体，粗斜体，删除线，下划线……）；首行缩进，空格，空行；目录；任务列表；表格

标题；目录ToC(Table of Content)

井号（#）的多少代表目录等级的高低，越少等级越高。最高级是1。

段落缩进

Markdown官方教程的段落语法

“不要用空格（spaces）或制表符（ tabs）缩进段落。”

换行

Markdown官方教程的换行语法

看了看，感觉在行尾添加<br>比较好。空两个空格的方式……“很难在编辑器中直接看到空格”这倒是没说错。

字体效果

这是**粗体**的部分，效果：这是粗体的部分

这是*斜体*的部分，效果：这是斜体的部分

这是***粗斜体***的部分，效果：这是粗斜体的部分

这是~~删除线~~的部分，效果：这是~~删除线~~的部分

引用

Markdown官方教程的引用语法

在段前加一个（>）

（>）这个符号和文本之间要不要空格，好像都可以？感觉习惯性地空一格会比较好。

注意，在加（>）的引用块中，部分Markdown元素还是会生效。这种引用方法拿来引用文字会比较好。引用代码的话还是规规矩矩地头尾两行分别带三个反引号吧。

关于引用，这里还有一个问题，（>）引用块和头尾两行三个反引号中间的代码块，在我这博客上的效果一模一样啊，都是代码块的样子。搞不懂。

stack魔改版的内容

{< quote >}
这是引用部分
{< /quote >}

PS：实际用的时候，首行与尾行都有两层大括号
PPS：这个引用代码在stack主题下渲染出来的效果确实只有一个左引号（but why），不要担心。

这是引用部分

代码

Markdown官方教程的代码语法

插入行内代码，即插入一个单词或者一句代码，在需要插入的部分前后使用一个反引号 `
插入多行代码，分别在头尾两行放三个反引号 `

列表

普通列表

Markdown官方教程的列表语法

任务列表

MarkDown的任务列表是带复选框的，好高级（第一次见到的东西对我来说都很高级）。操作如下：

- [ ] 任务

注意：
-与[]之间有一个空格，[]中间也有一个空格。←很重要！！！我总是忘记orz
如果要进行勾选，把[]中的空格换成x，即
- [x]任务

打出来的效果如下：

任务
任务

表格

似乎只有横向的表格（意思是标题只能是横向的顶行，而不能是纵向的最左边一行）。

| 这是标题1 | 这是标题2 | 这是标题3 |
| :---   |  :----:  |  ---: |
| 内容1.1 | 内容2.1 | 内容3.1 |
| 内容1.2 | 内容2.2 | 内容3.2 |
| 内容1.3 | 内容2.3 | 内容3.3 |
| 内容1.4 | 内容2.4 | 内容3.4 |

代码里的第一行是表格行标题的内容；代码的第二行是标题行，在这一行，横线左边加（:）表示这列的正文左对齐，横线两边都加（:）表示居中对齐，横线右边加（:）表示右对齐。

代码第二行里的连字符（-）是有数量要求的，需要三个或三个以上。

管道（|）对不齐也没有关系。

这是标题1	这是标题2	这是标题3
内容1.1	内容2.1	内容3.1
内容1.2	内容2.2	内容3.2
内容1.3	内容2.3	内容3.3
内容1.4	内容2.4	内容3.4

链接

Markdown官方教程的链接语法

“不同的 Markdown 应用程序处理URL中间的空格方式不一样。为了兼容性，请尽量使用%20代替空格。”

最后这条值得注意。

stack主题魔改版装修

config可修改内容一览

单页显示文章数，定位到paginate:

博客名称，定位到title:

博客名称下的描述，定位到subtitle:

博客头像，定位到avatar:

博客底部内容

例子：【本博客】【共写了】100【k字·共】10【篇文章】

【】内的为可自定义文本。

位置为根目录\layouts\partials\footer，打开footer.html

访问统计功能
博客起始时间，共建站天数，

博客起始时间1（第一处），打开config.yaml，定位到footer:（上属params:），修改since:后的内容

博客起始时间2（第二处），位置为根目录\layouts\partials\footer，打开footer.html

博客头像

设置博客头像

位置：/assets/img

将头像命名为avatar.png，替换原头像文件

删除博客头像

位置：/layouts/partials/sidebar/left.html，注释或删去以下部分：

        {{ with .Site.Params.sidebar.avatar }}
            {{ if (default true .enabled) }}
            <figure class="site-avatar">
                <a href="{{ .Site.BaseURL | relLangURL }}">
                {{ if not .local }}
                    <img src="{{ .src }}" width="300" height="300" class="site-logo" loading="lazy" alt="Avatar">
                {{ else }}
                    {{ $avatar := resources.Get (.src) }}
                    
                    {{ if $avatar }}
                        {{ $avatarResized := $avatar.Resize "300x" }}
                        <img src="{{ $avatarResized.RelPermalink }}" width="{{ $avatarResized.Width }}"
                            height="{{ $avatarResized.Height }}" class="site-logo" loading="lazy" alt="Avatar">
                    {{ else }}
                        {{ errorf "Failed loading avatar from %q" . }}
                    {{ end }}
                {{ end }}
                </a>
                {{ with $.Site.Params.sidebar.emoji }}
                    <span class="emoji">{{ . }}</span>
                {{ end }}
            </figure>
            {{ end }}
        {{ end }}

配置各类图标

图标放在：/assets/icons，svg格式

指定首页分类标签颜色

位置：content\categories

创建与分类同名的文件夹后，在文件夹内创建 _index.md文件，写入如下的frontmatter

title: "分类名称"
description: "描述，可有可无，不需要的话可以删掉"
image: "图片名.图片格式"//分类题图，不需要的话也可以删掉
style:
    background: "#80aba9" //分类标签底色
    color: "#fff"
---

shortcodes短代码

位置：\layouts\shortcodes

参考文章：Hugo框架中文文档短代码，来写一些好玩的 Hugo 短代码吧

其他重要定位

位置：assets\scss\variables.scss

可调项：Global style、Card style、Article content font settings、Article content style、Shadow style

修改博客背景颜色 --body-background: #f6f6f6;

修改卡片背景颜色定位到Card style