第2章-Hexo博客美化 | shkoa的配置范例

第2章-博客的美化Hexo主题shoka的配置

引言: 我们已经初始化个人博客并将代码发布至github,如果不懂可以查阅: 第1章-零基础使用HEXO搭建个人博客之HEXO及其初始化,接下来我们需要对个人博客进行美化~

下载依赖

首先我们进入自己博客所在的文件夹里,在此处打开Git bash,然后使用npm下载依赖

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

接着,我们在bash里去下载shoka这一款主题,由于代码存放于github所以下载主题的时间可能会很长,请耐心等待喔…

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

下载成功后,我们可以看到多了一个shoka的文件夹

修改配置文件

这里推荐几篇shoka作者的博客

• 基本配置: https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/config/
• 页面配置: https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/display/
• 依赖插件: https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/dependents/

我们打开shoka文件夹,找到里面_config.yml文件,这个文件是主题配置文件,使用vscode打开编辑配置如图,vscode下载地址: https://code.visualstudio.com/

点击此处了解如何获取AppID和Appkey

接下来我们修改全局配置文件_config.yml注意这个文件名和主题的文件名是一样的别修改错文件了

这些代码直接复制粘贴到全局配置文件即可这里会使用到搜索功能因此需要appId和apikey,这里有一篇博客能够帮助大家获取到appId和apikey: 为Hexo增加algolia搜索功能

# edit for Theme.shoka
autoprefixer:
  exclude:
    - '*.min.css'

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: #这里填上你的appId
  apiKey: #这里填上你的apiKey
  adminApiKey:  #这里填上你的adminApiKey
  chunkSize: 5000
  indexName: #填入自己的index name
  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"

另外需要注意的是你的每一篇博客都需要开头加入下述代码,这样表面这是一篇博客:

---
title: 文章的标题
date: 文章发布是年/月/日 时/分/秒
categories:
- [博客的分类]
tags:
---
# 这里开始使用Markdown书写博客正文

举个栗子:

---
title: Markdown使用指南
date: 2020/12/24 12:10:45
categories:
- [Markdown使用指南]
tags:
---
# MarkdownNote

common grammar--MarkdownNote

推荐markdown软件[Typora](https://www.typora.io/)
后文略...

tips:这里只列出了大致需要修改的地方,其他地方你可以阅读主题作者的博客获得更多配置信息

修改图片

进入到shoka文件夹里的source文件夹,再进入images文件夹在这里你可以更改为自己喜欢的图片,注意图片要和原来的文件名字一模一样否则会加载出错

tips:这里只列出了大致需要修改的地方,其他地方你可以阅读主题作者的原文获得更多配置信息
接下来只需要将博客部署到个人服务器上就好啦，快去试试吧
个人博客：honshen.xyz
如何部署? 了解linux常用命令–https://blog.csdn.net/BetrayVirginia/article/details/113704288