# 前言

  • 折腾了几天,终于把这个 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

执行后目录如下

image

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

hexo clean
hexo generate
hexo server

image

# 配置 Hexo

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

l
# Site
title: 花园仓鼠的博客
subtitle: 花园仓鼠的博客
description: 花园仓鼠的博客
keywords: 博客,笔记
author: Garden Hamster
language: zh-CN
timezone: 'Asia/Shanghai'
l
# 文章链接地址配置
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 对应为

image

# 配置主题

  • 在 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 目录如下

image

其中 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 命令看一下效果

image

# 自定义样式

首先删除根目录下原有的 _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 配置中
l
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
h
hexo generate
hexo algolia
  • 最后执行 clean generate server 命令,点击博客右上角的搜索按钮查看效果

image

# 配置 valine 评论插件

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

image

  • 然后在设置 --> 应用凭证中将 AppIDAppKeyREST API 服务器地址 复制到 _config.shoka.yml 的 valine 配置中
l
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 master@email.com
      # - hash of master2@email.com
    friend:
      # - hash of friend@email.com
      # - hash of friend2@email.com
  • 重新 clean generate server 刷新页面后,可以在文章底部看见评论区了

image

  • 用自己的邮箱给自己先发一条评论,然后重新回到 Leancloud 官网中,回到数据存储 --> 结构化数据 -->Comment,刷新页面,可以看见表结构已经创建好了

image

  • mailMd5 中的值复制到 valine 配置的 master 下面,这样在评论区我们自己就会显示成 主人
tagMember:
    master:
      - b8b4a3bf29fe001be51ec9e639b480d7
    friend:
      # - hash of friend@email.com
      # - hash of friend2@email.com
  • 接着点击权限,修改一下 Class 访问权限列权限

image

image

  • 接着在设置 --> 安全中心 -->Web 安全域名中配置一下自己的博客地址,避免出现 403 等问题

image

# 配置个人头像

  • 在打开 Gravatar 官网,用刚才评论的邮箱注册登录,然后 Add a new image

image

image

  • 使用 Email Hash 可以组合自己的头像链接,比如:https://gravatar.loli.net/avatar/b8b4a3bf29fe001be51ec9e639b480d7?size=80&d=mp
  • 最后等几分钟后刷新评论区,就可以看见自己的头像了,前提是评论时需要使用同一个邮箱才行
阅读次数