首页 hexo

本篇文章主要记录一些本人在根据 shoya 主题教程自定义配置的过程中遇到的教程尚未记录的要点，如果有的问题我没有提到一般是因为主题的那部分默认配置我没有修改。但以后如果我继续修改的话会在这里继续更新的

有关于 shoya 主题配置教程，请前往霜月琉璃大佬的博客查看

# 基本设置

# 网页在浏览器标签页的显示

文件位于 ./themes/shoka/languages 目录下对应的语言文件，例如站点配置文件在先前的配置中选择的是 zh-CN ，则进入 zh-CN.yml 修改 favicon 即可

原配置：

favicon:
  show: （●´3｀●）やれやれだぜ
  hide: (´Д｀)大変だ！

# 主页菜单自定义

修改 ./themes/shoka/languages 目录下对应语言文件的 menu

修改 ./themes/shoka/_config.yml 文件中的 menu

例如：

menu:
  home: 首页
  posts: 文章
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  friends: 友链
  favorites: 收藏
menu:
  home: / || home
  about: /about/ || user
  posts:
    default: / || feather
    archives: /archives/ || list-alt
    categories: /categories/ || th
    tags: /tags/ || tags
  friends: /friends/ || heart
  favorites: /favorites/ || star

但是在实际过程中也有发现也可以直接在 ./themes/shoka/_config.yml 文件中以中文修改 menu 下元素也有效，不过还是建议采用上述方法

# 主页搜索栏相关设置

# 搜索配置

algolia 官网链接：https://www.algolia.com/

  • 注册登陆后点击 Setting ，点击 API Keys 进入页面，在 All API Keys 下选择 New API Keys

  • 完成后，在 Hexo 根目录下修改 _config.yml 文件，具体为增加如下内容：

    algolia:
    appId: #你的 Application ID
    apiKey: #All API Keys 下新建的 API Key 的代码
    adminApiKey: #你的 Admin API Key
    chunkSize: 5000
    indexName: #新建 API Key 中填写的 Indices 内容
    fields:
      - title #必须配置
      - path #必须配置
      - categories #推荐配置
      - content:strip:truncate,0,2000
      - gallery
      - photos
      - tags

  • 完成后依次输入 hexo clean 、 hexo g 、 hexo algolia 即可

  • 每次发布新文章后都需要重新输入 hexo g 、 hexo algolia

# 搜索背景设置

  • 搜索背景可以在 ./source/_data/images 文件夹下（没有的新建一个）增加自己的 search.png 覆盖掉 ./themes/shoka/source/images/ 文件夹下的同名文件，原理与教程中替换头像等图片一致

  • 修改背景图片位置在 ./themes/shoka/source/css/_common/components/third-party/ 文件夹下的 search.styl 文件中约 74 行处：

    background: var(--grey-1-a7) url(../images/search.png) no-repeat bottom right;

    其中 bottom right 即图片位于右下角，可根据需要自行修改为 center 中央或 top 顶部等

# 图片设置

# 图片

主要的图片都在 ./themes/shoka/source/images 文件下了，可以直接在这里替换，也可以在 ./source/_data/ 文件夹下新建 images 文件夹存放同名文件替换

# 图床

# 方法一

我用的是使用图床网站进行托管的方法，这里贴两个我用过的图床网站

SM.MS图床

有名的图片免费托管网站

Gimhoy图床

基于微博图床的免费图床

使用方法也很简单，直接登录上传图片获取链接就可以，不过第一个有空间限制，免费用户只有 5G 的存储空间。而第二个基于微博，需要微博登录，同时上传的图片也会同步到登录的微博账号上，账号的水印可以在微博设置里关闭

# 方法二

这个方法是利用 GitHub 作托管功能，理论上可以有无限的空间来存放，我曾经用过，但是由于大家懂得都懂的原因，这个方法下的图床确实很卡，但是在免费大容量且不用担心图床跑路的特点下，还是一个可选的选择。

  • 首先在 GitHub 上新建一个仓库并设置为公开，名字无所谓，我曾经的叫 CDN
  • 点击 右上角头像 进入 setting ，点击 development setting 选择 personal access tokens 下的 tokens(classic) ，点击 generate new token 获取，选项只选 repo 即可
  • 随后获得的 token 记得复制保存，因为这个只能看一次
  • 上述操作完成后，下载 PicGo 安装
  • 图床设置中找到 GitHub 图床，进行相关配置，自定义域名通常为 https://cdn.jsdelivr.net/gh/Github用户名/Github仓库名@master

据个人使用经验，建议使用此方法时图片尽可能一张一张的上传，因为有时候多选图片上传会因为 GitHub 自身连接原因会出现部分图片上传失败导致上传不全

# 写在最后

当然还是有很多问题我没有写，主要还是因为我配置的过程中并没有做修改或者没有遇到，并且其中可能还有等待缓存刷新等玄学问题，就比如有时候我替换掉标签页图标或者是打开文章字数统计等等功能时，不论是本地测试还是推送至 GitHub 都没有变化，图片还是原来的图片，字数统计也不显示，后来过了几天才替换上去。总之 Hexo 确实很好用，但有时候总会出一些莫名其妙的问题，这个时候还是先耐心等待吧。

更新于