# 导航栏

# 前言

紧接上文，介绍了如何安装使用 Hexo，但页面还是太朴素了，作为一个优秀的博客框架，它当然支持多种主题和插件啦，去这里找一个自己喜欢的主题吧 Hexo-Themes。本站基于 Shoka 主题开发，因此会详细介绍 Shoka 的安装与使用，当然，你也可以选择其他主题或者自建主题去美化自己的博客，由于不同主题的使用的插件和配置都各有不同，那么就需要你自己去研究啦～

前排再次感谢 Ruri Shimotsuki 大佬的 Shoka 主题，太好看啦，给大佬递茶🍵~

Ruri Shimotsuki

Shoka主题作者

# 安装与使用

# 快速开始

首先，上大佬的链接：快速开始

# 安装 shoka 主题

打开博客根目录，在根目录下打开控制台，执行以下命令，下载 shoka 主题

git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

# 安装依赖插件

详细文档：依赖插件

安装 hexo-renderer-multi-markdown-it

	# 卸载 hexo 默认的 markdown 渲染器
	npm un hexo-renderer-marked --save
	# 安装 hexo-renderer-multi-markdown-it
	npm i hexo-renderer-multi-markdown-it --save

puppeteer 报错，若出现以下错误，执行 npm i puppeteer --save 重新下载，或者使用 npm i hexo-renderer-multi-markdown-it --save --ignore-scripts 命令忽略报错，避免安装失败

安装 hexo-autoprefixer

npm i hexo-autoprefixer --save

添加 markdown 和 autoprefixer 配置建议
打开 <root>/_config.yml 文件，在末尾添加以下配置

	# 加入 markdown 配置，用来渲染 md 文件
	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 配置，压缩 css/js/html
	minify:
	html:
	enable: true
	exclude: # 排除 hexo-feed 用到的模板文件
	- '**/json.ejs'
	- '**/atom.ejs'
	- '**/rss.ejs'
	css:
	enable: true
	exclude:
	- '*/.min.css'
	js:
	enable: true
	mangle:
	toplevel: true
	output:
	compress:
	exclude:
	- '*/.min.js'

	# 缺少这个插件，首页卡片翻转效果在部分浏览器中无法正确显示。
	autoprefixer:
	exclude:
	- '*.min.css'

必要的插件和配置都已经完成了，剩余的一些插件可以参考上方依赖插件文档进行安装。

# 修改站点主题

将 <root>/_config.yml 里的 theme 的值改为 shoka

好的，即然主题都安装好了，那就 hexo s 一下去看看效果吧！！！

若运行 hexo 服务时出现 Error: Cannot find module 'pangu' 错误，请执行 npm install pangu --save 后再次运行服务

# 基础使用和配置

# Shoka 配置和功能介绍

由于大佬在文章中有过详细的介绍了，直接看大佬的文章吧～

传送门：基本配置、页面规则、Markdown 显示

# 创建一篇博客

在根目录打开控制台，输入以下命令，即可在 <root>/source/_posts/ 下生成对应 xxx.md 文件

hexo new <xxx> #博客名称

打开 md 文件，以 markdown 格式尽情发挥你的创作吧～（文章支持基础 markdown 写法，也支持一些特殊的表现，具体请参考上方传送门 Markdown显示 ）
运行 hexo 服务，就可以欣赏你的杰作啦！！！

博客搭建