前言
Hexo-shoka因为作者大大的忙碌,已超过四年未进行维护与更新,推荐使用Hexo-shokax获得更好的体验,本站已切换至Shokax
-
Hexo-shokax:
- 此项目是shoka的一个二次开发版(算精神续作),致力于提高性能和优化魔改体验.网址链接
-
主要使用差异:
- Shoka的评论系统配置更为简单和便捷,Shokax的安全性更高和易于管理,但现在基本需要域名或者💸
文章同步更新于优快云和博客FuFan = FuFan’s Blog (fyfan.cn)
流程
- Hexo框架的安装
- 搭建个人仓库
- 配置Hexo载入Shoka主题
Hexo框架的安装
- 安装之前请确保以安装Node.js
# 查看版本
Node -v
# 安装Hexo框架
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server #查看是否运行正常
Node.js下载:
nodejs-release安装包下载_开源镜像站-阿里云 (aliyun.com)
个人仓库的搭建
使用Github来搭建博客
- 注册Github账号
- 创建仓库,仓库名选择 github名称.github.io
- 下载Git
- 使用Git绑定自己的Github账号
- Hexo 绑定仓库
Git下载:
Git配置
基本配置
git config --global user.name "Name"
git config --global user.email "Email"
生成密钥
ssh-keygen -t rsa -C "Email"
密钥txt一般在[C盘/用户/user/.ssh]中,我们需要的是 id_ras.pub文件。
密钥用于绑定Github
- 在Settings-SSH and GPG keys中,将 id_ras.pub文件的内容复制黏贴进后保存
检测连接
ssh -T git@github.com
#连接成功会显示用户名
Hexo 绑定仓库
在根目录下的_config.yml
中修改
deploy:
type: 'git'
repo: 你的github仓库地址
branch: main #你的分支名称
修改完成后使用hexo d
进行推送,如果正常则输入 你的名字.github.io 访问查看是否成功
Shoka的安装
在根目录下也就是blog
目录下右键选择用 Git Bash 打开文件夹
输入命令,等待安装完成
git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka
安装完成后修改站点配置文件/_config.yml
,把主题改为shoka
theme: shoka
_config.yml配置:
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'
Shoka启用需要安装渲染插件才可以正常显示:
安装后输入hexo三件套
查看网页显示是否正常
hexo cl
hexo g
hexo s
因为某博的外链已不能使用会无法正常显示图片,查看下面的链接获得解决办法
Shokax的安装
相较于Shoka,Shokax的安装则更为方便和快速;
安装 ShokaX-CLI:
# hexo init
npm install shokax-cli --location=global
# cd your_blog
SXC install shokaX
安装完成后修改站点配置文件/_config.yml
,把主题改为shokax
theme: shokax
_config.yml配置:
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: "你知道得太多了"
autoprefixer:
exclude:
- "*.min.css"
Hexo基本配置
设置博客主页语言为中文
将<root>/thems/Shoka/example/source/_data/languages.yml
中的zh-CN部分复制
在<root>/source/
中新建_data
文件夹在里面新建一个languages.yml
文件,将刚复制的内容黏贴进去然后保存
打开根目录的配置文件<root>/_config.yml
将language
改为 zh-CN
新建笔记
在根目录下右键用git bash
打开输入
hexo new ‘你的笔记名字’
然后将写好的markdown笔记复制进<root>/source/_post/‘你的笔记名字.md
中保存
最后使用hexo三件套
查看效果
设置Live2d
注:Live2d会占用带宽资源拖慢网页加载速度!
- 下载基本服务
npm install --save hexo-helper-live2d
- 下载喜欢的模型
- 安装
npm install live2d-widget-model-haru #举例
- _config.yml配置
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: false
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录 (相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
#scriptFrom: xxx/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式,是否仅替换 live2d tag 标签而非插入到所有页面中
debug: false # 调试,是否在控制台输出日志
model:
use: live2d-widget-model-haru # 使用的 Live2d 模型名称
# use: xxx/assets/koharu.model.json # 你的自定义 url
display:
position: right #显示位置
width: 150
height: 300
mobile:
show: true # 手机中是否展示
主题版本更新
注:Shoka主题已停止更新,仅适用Shokax主题,目前最高版本为Shokax v0.4.11
使用npm-check-updates
- 安装
npm install -g npm-check-updates
- 使用
#检测更新
ncu
#更新
ncu -u
特别注意!!!
如果没有关闭代码高光或者渲染器版本不是最新会出现 代码块 显示不全的问题
由于框架版本不同关闭方式也不同,需先查看版本
hexo version
V7.0.0及以下:
prismjs:
enable: false
prismjs:
enable: false
V7.0.0以上:
syntax_highlighter: false