搭建个人博客是早有预谋但一直未行动的计划，大概是去年来到长毛象之后看了象友的博客，才发现这东西的好。我也想有个地方来有规整地记录那些生活经历和想法，尽管自己的表达能力够差，对写出完整的文章这件事多少有点惶恐，迟迟不敢动手。

不过我目前是处在焦虑待机又无所事事状态的毕业生，刚换了台新电脑，就想捣鼓些新东西，那就开搞吧。

建站起步

博客搭建

方案是静态博客Hugo+vercel托管

博客选择+安装部署一条龙，全靠象友的入门指南：Hugo | 一起动手搭建个人博客吧

教程非常详细，不出意外的话可以迅速搭完，感恩！

本人在中途出了一个小插曲，不知为何使用绑定了gmail的github账号去注册vercel，还是喜提“This user account is blocked.”提示。不过给官方邮箱发邮件，两天后得到回应解封了。

主题选择

在hugo主题页看了一圈，又到github上看了一圈，最终考虑到自己是个什么都不懂的新手，还是选择这个使用者比较多的stack模版。下载之后重命名为hugo-theme-stack，贴到hugo的themes文件夹下，再将主题里的content文件夹、archetypes文件夹和config.yaml复制粘贴到博客根目录下，删除原先的config.toml，运行测试成功。

博客装修

嗯…嗯…官方教程换新，怎么找不到中文了？没理清主题的层级结构，还是先看看配置文件吧。 无从下手的时候看到了这篇博客：博客切换到stack-主题 ,看到博客里对配置文件的改动和加入一些功能的方式，恍然醒悟原来配置文件是这样用的，里头的注释是给人看的(在说什么)

看完仿照着做了一些简单的修改，彩虹背景也是从这篇文章得来：

• 左侧边栏（头像简介）：

1
2
3
4
5
6

   sidebar:
           subtitle: 水平浅见底,脸却厚十米。
           avatar:
               enabled: true
               local: true
               src: img/avatar.jpg

• 中文语言：

1
2

    DefaultContentLanguage: zh-cn
    hasCJKLanguage: true

• 自定义社交链接(但实在是没什么好写的)：

  icon在\themes\hugo-theme-stack\assets\icons路径下，更换图标在iconfont里翻翻

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

  menu:
    main: []

    social:
        - identifier: github
          name: GitHub
          url: https://github.com/kaito-77
          params:
              icon: brand-github

        - identifier: tumblr
          name: tumblr
          url: https://www.tumblr.com/blog/kururu0-0
          params:
              icon: brand_tumblr

添加评论区

config里已经提供了几个评论区选项，那么就是个人把评论区相关的工具准备好，必要信息填到配置文件里就可以了。

使用utterances好像很容易，直接用github issue来存储评论。

操作步骤：

• 在github上新建一个仓库，设为public，用来存放评论。

• 打开utterances官网，在github上直接点击install安装应用程序，安装完成后界面会产生变化，点击右上角configure填上评论区仓库：

  

• 在本地博客的config.yaml文件中，在comment栏填好要用哪一款评论区，再填上路径

1
2
3
4
5
6
7
8

  comments:
        enabled: true
        provider: utterances

        utterances:
            repo: kaito-77/blogComments
            issueTerm: pathname
            label: none

结束，看看效果：

添加画廊

今年lofter不再安逸后，我尝试搬家，但不得不说找个合适的地方很难，微博、汤不热这些可以发，却很难起到集中收藏的作用，总不能用一辈子QQ空间吧，那我直接在博客里搞个相册，应该是可以的？

昨天想到了就尝试搜了搜，果然有，这是一个创建图库的hugo组件：hugo-shortcode-gallery 下载之后还是放到themes的文件夹下，和stack主题并列。 在配置文件中写一下，将"hugo-shortcode-gallery"插件添加到主题"hugo-theme-stack"中,并设置从EXIF数据加载图片说明。因为是yaml，和官网的教程不太一样：

1
2
3
4
5
6
7

theme: 
  - hugo-theme-stack
  - hugo-shortcode-gallery

imaging:
    exif:
        includeFields: ".*"

我想将这个相册的入口在侧边菜单展示出来，所以在\hugo\content\page\路径下创建gallery文件夹，和archives、search这些文件夹平级。

gallery文件夹中创建一个.md文件做博客的界面，再创建一个images文件夹(存储要展示的图片和它的exif文件)，在.md文件中调整它在侧边菜单的位置：

1
2
3
4
5
6
7
8
9

title: Gallery
description: 放置近几年认为值得的画作orz
date: 2023-6-24
layout: Gallery
menu:
    main: 
        weight: -90
        params:
            icon: drawing

把短代码写在.md中，应该就可以使用了！：

1

gallery match="images/*" sortOrder="desc" rowHeight="270" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur"  embedPreview=true loadJQuery=true thumbnailHoverEffect="enlarge" storeSelectedFilterInUrl=true filterOptions="[{label: 'All', tags: '.*'}, {label: '2022', tags: '2022'}, {label: '2023', tags: '2023'}]" 

用组件的时候遇到过一些问题，都可以通过修改gallery的参数解决。贴一下个人理解的一些参数用途：

• loadJQuery：如果原本的主题没有提供jQuery，就写上loadJQuery=true来导入该主题组件的 jQuery，否则这个组件不生效。
• showExif：给图片配了exif文件之后，在网页上打开图片可以展示exif文件中的信息（比如图片的标题之类）。这个配套的exif文件就是参照xxx.jpg新建一个文件改名为xxx.jpg.meta,右键记事本写上标签标题之类的内容

1
2
3
4
5
6

   {
   "Tags": ["macro","insect"],
   "Title": "Maya the Bee",
   "ColorLabels": "RG",
   "Rating": 3
   }

• previewType：控制预览，blur的话就是刚打开界面会对没加载出来的图片进行模糊处理
• thumbnailHoverEffect：选择“enlarge”的话，鼠标触碰预览图有放大效果。
• filterOptions：筛选功能，label是展示在网页上的文字，和tags有映射关系，这里tags的筛选是按照EXIF里的tags来的，对应填就可以。
• storeSelectedFilterInUrl：和filterOptions配套使用。

展示一下成功后的界面：

暂时先搞这么多！时间还长，以后可以慢慢研究。