使用Hexo+Shoka主题搭建个人博客 - 博客 - 教程 | 花园仓鼠的博客 = = 记录一些个人笔记,踩坑记录等

# 前言

折腾了几天，终于把这个 blog 搭起来了，主要用来记录一些平时的学习笔记，或者踩坑记录等
这里写几篇文章浅尝一下新博客，顺便记录一下这个博客搭建的过程，给想要搭建博客的萌新一点思路

# 框架

这个博客使用的是 Hexo 这个框架进行搭建的
博客主题使用的是 shoka，这个主题是一个叫霜月琉璃的姐姐写出来的，究竟是什么样的佬才能同时兼顾计算机和医学这两个领域？想想就让人觉得害怕
左下角的看板娘是另外加上去的，项目地址：live2d-widget，或者也可以用我的魔改后的版本：live2d-web
在开始搭建博客之前可以先简单看看这些文档

# 开发环境

开发机器的系统是 Win10
开发工具用的是 Visual Studio Code，初次使用可以安装一下中文语言包， Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
最新版本的 Node.js，安装时确保勾选 Add to PATH 选项（默认已勾选）
最新版本的 git

# 创建项目

创建一个文件夹存放博客项目，然后用 vscode 打开这个文件夹，本教程以 D:\project\Demo 为例
然后在 vscode 中打开终端，确保当前路径为 D:\project\Demo ，大多数命令都需要在这个根目录下执行

# 安装 Hexo

# 初始化 Hexo

	# 安装 hexo 脚手架
	npm install -g hexo-cli

	# 在根目录下生成博客相关文件
	hexo init

执行后目录如下

继续执行以下命令，然后在浏览器中打开 http://localhost:4000 后可以看到初步效果

	hexo clean
	hexo generate
	hexo server

# 配置 Hexo

根据自己的需要修改根目录下的_config.yml，这里贴一下我的修改

	# Site
	title: 花园仓鼠的博客
	subtitle: 花园仓鼠的博客
	description: 花园仓鼠的博客
	keywords: 博客，笔记
	author: Garden Hamster
	language: zh-CN
	timezone: 'Asia/Shanghai'

	# 文章链接地址配置
	url: http://gardencavy.site
	root: /
	permalink: :title/
	permalink_defaults:
	pretty_urls:
	trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
	trailing_html: true # Set to false to remove trailing '.html' from permalinks

	# 为 /scource/_posts/ 下的目录配置分类名称
	default_category: uncategorized
	category_map:
	教程: course
	博客: blog
	文档: doc
	笔记: note
	Java: java
	其他: other

比如我的 category_map 对应为

# 配置主题

在 Hexo 的主题页面中有多主题，找到合适自己的主题，然后按照文档部署就行
这里以 Shoka 主题为例，文档地址：https://shoka.lostyu.me/computer-science/note/theme-shoka-doc

# 下载主题

使用 git 或者 GitHub Desktop 等可视化工具将主题项目克隆到 themes 目录下

	# 在你的博客项目根目录下执行命令
	git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

执行后 themes 目录如下

其中 example 是示例文件夹， _config.yml 是这个主题的配置文件

一般不建议直接修改这个主题文件夹 shoka 里面的内容，避免以后 git pull 更新主题的时候会出现内容冲突的问题，~~虽然作者距离本人写这篇文章为止已经有一年多没有更新了~~
对应做法是在跟目录下创建一个名为 _config.shoka.yml 的文件，然后复制 /themes/shoka/_config.yml 中需要定制的内容到里面进行修改，在 hexo generate 后两个配置文件将会合并
同理如果想要修改主题的图片，比如头像 /themes/shoka/source/images/avatar.jpg 时，可以在 /source/_data/images 中放入同名为 avatar.jpg 的自己的头像图

# 安装主题依赖插件

首先卸载 hexo 原有的 markdown 文件渲染器

	# 文档：https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/dependents/#% E5% AE%89% E8% A3%85
	npm un hexo-renderer-marked --save

然后安装所有依赖

	npm i hexo-renderer-multi-markdown-it --save --ignore-scripts
	npm i hexo-autoprefixer --save
	npm i hexo-algoliasearch --save
	npm i hexo-symbols-count-time --save
	npm i hexo-feed --save

如果下载太慢可以配置一下 npm 的镜像地，参考 https://blog.csdn.net/vohext/article/details/126296840

# 使用主题

修改根目录下的配置文件 <root>/_config.yml ，把 Hexo 的主题改为 shoka

theme: shoka

将主题插件的相关配置复制到根目录的 _config.yml 下面

	# 文档：https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/dependents/#% E9%85%8D% E7% BD% AE
	markdown:
	render: # 渲染器设置
	html: false # 过滤 HTML 标签
	xhtmlOut: true # 使用 '/' 来闭合单标签（比如 <br />）。
	breaks: true # 转换段落里的 '\n' 到 <br>。
	linkify: true # 将类似 URL 的文本自动转换为链接。
	typographer:
	quotes: '“”‘’'
	plugins: # markdown-it 插件设置
	- plugin:
	name: markdown-it-toc-and-anchor
	enable: true
	options: # 文章目录以及锚点应用的 class 名称，shoka 主题必须设置成这样
	tocClassName: 'toc'
	anchorClassName: 'anchor'
	- plugin:
	name: markdown-it-multimd-table
	enable: true
	options:
	multiline: true
	rowspan: true
	headerless: true
	- plugin:
	name: ./markdown-it-furigana
	enable: true
	options:
	fallbackParens: "()"
	- plugin:
	name: ./markdown-it-spoiler
	enable: true
	options:
	title: "你知道得太多了"

	minify:
	html:
	enable: true
	stamp: false
	exclude:
	- '**/json.ejs'
	- '**/atom.ejs'
	- '**/rss.ejs'
	css:
	enable: true
	stamp: false
	exclude:
	- '*/.min.css'
	js:
	enable: true
	stamp: false
	mangle:
	toplevel: true
	output:
	compress:
	exclude:
	- '*/.min.js'

	# algolia:
	# appId:
	# apiKey:
	# adminApiKey:
	# chunkSize: 5000
	# indexName:
	# fields:
	# - title #必须配置
	# - path #必须配置
	# - categories #推荐配置
	# - content:strip:truncate，0，4000
	# - gallery
	# - photos
	# - tags

	feed:
	limit: 20
	order_by: "-date"
	tag_dir: false
	category_dir: false
	rss:
	enable: true
	template: "themes/shoka/layout/_alternate/rss.ejs"
	output: "rss.xml"
	atom:
	enable: true
	template: "themes/shoka/layout/_alternate/atom.ejs"
	output: "atom.xml"
	jsonFeed:
	enable: true
	template: "themes/shoka/layout/_alternate/json.ejs"
	output: "feed.json"

然后可以执行 clean generate server 命令看一下效果

# 自定义样式

首先删除根目录下原有的 _config.landscape.yml ，然后在根目录下另外新建一个 _config.shoka.yml 文件，用于指定我们自己的主题样式
将需要修改的内容从 /themes/shoka/_config.yml 中复制过来，然后再进行修改

下面贴一下我的配置和说明

	# 你的名字
	alternate: Garden Hamster

	# 这里一般不改，如果想将 css，js，图片这些静态资源放在自己的 git 上通过 cdn 加速访问的话可以将后面的注释打开
	statics: / #//cdn.jsdelivr.net/gh/username/RepositoryName@latest/
	css: css
	js: js
	images: images

	# 是否显示页面加载动画 loading-cat
	loader:
	start: true # 当初次打开页面时，显示加载动画
	switch: false # tab 切换到其他页面时，显示加载动画

	# 自定义菜单列表，friends 需要在 source 目录下建立对应的文件夹 about 和 link 同理，可以参考 /themes/shoka/example/source/friends 下的结构
	# 文档地址：https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/config/#% E8%8F%9C% E5%8D%95% E4% B8%8E% E7% A4% BE% E4% BA% A4% E6%8C%89% E9%92% AE
	menu:
	home: / \|\| home
	posts: /archives/ \|\| list-alt
	categories: /categories/ \|\| th
	tags: /tags/ \|\| tags
	friends: /friends/ \|\| heart

	# 头像下面的小图标，点击可以跳转到相关平台的个人主页
	social:
	github: https://github.com/GardenHamster \|\| github \|\| "#191717"

	# 侧边栏配置
	sidebar:
	position: left #侧边栏位置，right 会将头像和菜单移到右边
	avatar: avatar.jpg #头像文件名

	# 页脚配置
	footer:
	since: 2022 #你的博客的创建年份
	icon:
	name: garden hamster
	# Change the color of icon， using Hex Code.
	color: "#ffc0cb"
	# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
	count: true
	powered: true

	post:
	# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
	count: true

	# 文章底部的打赏
	reward:
	enable: false #我这里把它关掉了
	account:
	wechatpay: /wechatpay.png
	alipay: /alipay.png
	paypal: /paypal.png

	# bgm
	audio:
	- title: 列表1
	list:
	- https://music.163.com/#/playlist?id=2943811283
	- https://music.163.com/#/playlist?id=2297706586
	- title: 列表2
	list:
	- https://music.163.com/#/playlist?id=2031842656

# 配置插件

# 配置 algolia 搜索插件

首先到 https://www.algolia.com 中注册一个账号
然后创建一个名为 shoka 的 Application
接着在左下角小图标 Data Sources-->Indices-->Create Index 中创建一个名为 shoka 的 Index
最后在左下角小图标 Settings-->API Keys 中复制自己的 API Keys 到跟目录下_config.yml 的 algolia 配置中

	algolia:
	appId: #Application ID
	apiKey: #Search-Only API Key
	adminApiKey: #Admin API Key
	chunkSize: 5000
	indexName: "shoka"
	fields:
	- title
	- path
	- categories
	- content:strip:truncate，0，2000
	- gallery
	- photos
	- tags

然后在目录下执行命令生成索引提交到 algolia

	hexo generate
	hexo algolia

最后执行 clean generate server 命令，点击博客右上角的搜索按钮查看效果

# 配置 valine 评论插件

首先到 Leancloud 官网中注册一个账号，注意注册界面左上角不要选国际版
然后在 Leancloud 中创建一个应用，计价方案选择开发版就行
进入应用，选择数据存储 --> 结构化数据 --> 创建 Class，分别创建 Comment 和 Counter 两个 Class 分别存放我们的评论和阅读量数据，权限和数据结构先默认就行

然后在设置 --> 应用凭证中将 AppID ， AppKey ， REST API 服务器地址 复制到 _config.shoka.yml 的 valine 配置中

	valine:
	appId: #AppID
	appKey: #AppKey
	placeholder: ヽ(○´∀`)ﾉ♪ # Comment box placeholder
	avatar: mp # Gravatar style : mp， identicon， monsterid， wavatar， robohash， retro
	pageSize: 10 # Pagination size
	lang: en
	visitor: true # Article reading statistic
	NoRecordIP: false # Whether to record the commenter IP
	serverURLs: # REST API 服务器地址
	powerMode: true
	tagMeta:
	visitor: 新朋友
	master: 主人
	friend: 小伙伴
	tagColor:
	master: "var(--color-orange)"
	friend: "var(--color-aqua)"
	tagMember:
	master:
	# - hash of [email protected]
	# - hash of [email protected]
	friend:
	# - hash of [email protected]
	# - hash of [email protected]