首页shoka

# 前言

Hexo-shoka 因为作者大大的忙碌，已超过四年未进行维护与更新，推荐使用 Hexo-shokax 获得更好的体验，本站已切换至 Shokax

  • Hexo-shokax：

    • 此项目是 shoka 的一个二次开发版 (算精神续作), 致力于提高性能和优化魔改体验. 网址链接

  • 主要使用差异：

    • Shoka 的评论系统配置更为简单和便捷，Shokax 的安全性更高和易于管理，但现在基本需要域名或者💸

    文章同步更新于 CSDN 和博客 FuFan = FuFan's Blog (fyfan.cn)

# 流程

  1. Hexo 框架的安装
  2. 搭建个人仓库
  3. 配置 Hexo 载入 Shoka 主题

# Hexo 框架的安装

  • 安装之前请确保以安装 Node.js
# 查看版本
Node -v
# 安装 Hexo 框架
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server #查看是否运行正常

Node.js 下载：

下载 | Node.js 中文网 (nodejs.cn)

nodejs-release 安装包下载_开源镜像站 - 阿里云 (aliyun.com)

Npm 镜像更换:

npm config set registry xxx
#淘宝
https://registry.npmmirror.com
#阿里云
https://npm.aliyun.com
#腾讯云 NPM 镜像
https://mirrors.cloud.tencent.com/npm/
#华为云 NPM 镜像
https://mirrors.huaweicloud.com/repository/npm/
#网易 NPM 镜像：
https://mirrors.163.com/npm/
#中国科学技术大学开源镜像站：
http://mirrors.ustc.edu.cn/
#清华大学开源镜像站：
https://mirrors.tuna.tsinghua.edu.cn/

# 个人仓库的搭建

使用 Github 来搭建博客

  1. 注册 Github 账号
  2. 创建仓库，仓库名选择 github 名称.github.io
  3. 下载 Git
  4. 使用 Git 绑定自己的 Github 账号
  5. Hexo 绑定仓库

Git 下载：

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 启用需要安装渲染插件才可以正常显示:

依赖插件安装 (lostyu.me)

安装后输入 hexo三件套 查看网页显示是否正常

hexo cl
hexo g
hexo s

因为某博的外链已不能使用会无法正常显示图片，查看下面的链接获得解决办法

Shoka 使用自己的图床

# 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"
# 优化加载速度


现在主题的 _config.yml 中基本都有或者类型的代码，我们可以通过加速根目录访问速度来达到加快网页的目的


statics: "/" # 静态文件根目录
assets: "assets"
css: "css"
js: "js"
在这里我推荐一个 jsdeliver 镜像站



​	相较于传统的 Jsdelivr 加速，避免了 CDN 污染且是国内的服务器，速度更快，目前也稳定。


使用方法：


statics: "https://cdn.jsdmirror.com/gh/user/repo@version/file" #镜像站 
		 "https://cdn.jsdelivr.net/gh/user/repo@version/file"  #传统 jsdeliver 加速


# 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三件套 查看效果


新建页面


hexo page 名字
# 设置 Live2d


注：Live2d 会占用带宽资源拖慢网页加载速度！


    

  1. 下载基本服务
    2. 



npm install --save hexo-helper-live2d
    

  1. 下载喜欢的模型
    2. 



预览：模型预览_看板娘模型预览 - CSDN 博客


    

  1. 安装
    2. 



npm install live2d-widget-model-haru #举例
    

  1. _config.yml 配置
    2. 



# 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
#安装
npm install


# 特别注意！！！


如果没有关闭代码高光或者渲染器版本不是最新会出现 代码块 显示不全的问题


由于框架版本不同关闭方式也不同，需先查看版本


hexo version
V7.0.0 及以下:


prismjs:
  enable: false
  
prismjs:
  enable: false
V7.0.0 以上:


syntax_highlighter: false