​ 此篇更新已结束,遇到什么问题欢迎留言

​ 有关主题功能基本介绍的详情,请前往→優萌初華主页查看

​ 此篇文章主要补充了 shoka 主题博主主页教程中不够详细的部分要点

注意事项(推荐配置前先阅读)

# 音乐、评论功能无效的问题

​ 刚开始搭建 shoka 主题时,推荐 ./themes/shoka/_config.yml 文件中的 statics 参数设为 / 。倘若不是,当 CDN 加速链接缓冲未完成时会产生此问题。此外,强力推荐当未完全配置完主页功能时将 statics 参数配置为 / ,配置完后再改成 CDN 加速链接。

info
关于 音乐播放 功能,倘若你的音乐配置引用的是 国外 链接,在国内使用时,由于网络问题, 可能 会出现无法播放的情况 (依据是你的国外音乐链接官网 ip 地址是否被墙);倘若你的音乐配置引用的是 国内 的链接,在国外使用时也 存在 由于网络问题而导致无法播放的情况
关于 评论功能 无效的问题,一是由于 ./themes/shoka/_config.yml 文件里的 valine 设置参数没有正确配置好;二是由于 LeanCloud 不同版本对应的服务政策不同,比如:倘若你是用 LeanCloud国际版 ,在国内使用时会出现评论区消失的问题;倘若你是用 LeanCloud华北\华东版 ,在国外使用时, 存在 会出现评论区消失的问题 (与自身网络问题有关)

# 因主题 statics 参数配置而出现的问题 (待试验是否为个别例子)

​ 刚开始搭建 shoka 主题时,倘若一开始就设置 ./themes/shoka/_config.yml 文件中的 statics 参数设为 CDN 链接,会出现头像移位 (位置从左边移动到右边),评论功能区域以及音乐功能区域无法正常显示的错误。

主页标签的文字提示

# 主页标签名的页内及页外的替换

原样式:

  • 页内 (show): (●´3`●)やれやれだぜ

  • 页外 (hide): (´Д`)大変だ!

对应文件位置: ./themes/shoka/languages 目录中对应语言中的 favicon 元素

加载动画

# 加载动画替换

对应的 CSS 样式文件: ./themes/shoka/source/css/_common/components/third-party/loading.styl 文件

对应的 HTML 文件: ./themes/shoka/layout/_partials/layout.njk 文件

//css 
// 保留下面这几行,其余删除后写入新样式 
#loading {
  @extend $fix-fullscreen;
  background-color: var(--grey-1);
  if(!hexo-config('loader.start')) {
    display: none;
  }
}
//
// 填入你的 CSS 样式代码
//
<!--HTML-->
<body itemscope itemtype="https://schema.org/WebPage">
  <div id="loading">
		<!-- 删除此处内容并重新写入 css 样式对应的 html 代码 -->
  </div>
  <div id="container">
菜单按钮

# 主页菜单按钮名称添加

添加 名称 的对应修改文件位置: ./themes/shoka/languages 目录中对应语言文件中的 menu 元素

添加 按钮 的对应修改文件位置: ./themes/shoka/_config.yml 文件中的 menu 元素

#添加按钮英文对应的中文名称
#./themes/shoka/language/zh-CN.yml
menu:
  home: 首页
  posts: 文章
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  friend-links: 友链
  books: 书架
  deeplearning-books: 人工智能
  computer-books: PC端技能
  phone-books: MD端技能
#主页顶部 menu 部分按钮添加
#./themes/shoka/_config.yml
menu:
  home: / || home
  about: /about/ || user
  posts:
     default: / || feather
     archives: /archives/ || list-alt
     categories: /categories/ || th
     tags: /tags/ || tags
  friend-links: /friend-links/ || heart
  books:
     default: / || clipboard
     deeplearning-books: /books/deeplearning-books/ || fedora
     computer-books: /books/computer-books/ || opera
     phone-books: /books/phone-books/ || android

网页底部注释

# 主页底部注释的增添

对应的 HTML 文件: ./themes/shoka/layout/_partials/footer.njk 文件

搜索功能的详细介绍

  • 官网完成注册后进入到 welcome 页面,点击 API keys 进入页面,在 All API Keys 页面处点击 New API key 并填写相关信息

  • 新建好 API key 之后,在 hexo 根目录的 _config.yml 文件中配置 algolia 相关参数 (可在 Algolia 官网 API Keys 页面的 Your API Keys 页面中查看)

    algolia:
       appId: "Application ID对应码"
       apiKey: "API Keys页面的All API Keys中刚刚新建的API key的对应码"
       adminApiKey: "Admin API Key对应码"
       chunkSize: 5000
       indexName: "你填写的Indices部分"
       fields:
         - title 
         - path
         - categories
         - content: strip:truncate,0,4000
         - gallery
         - photos
         - tags
  • 配置好后,在 hexo 根目录右键点击 Git Bash Here ,输入 hexo clean && hexo g && hexo algolia 即可

  • 注意 ,每次有新文章发布,都需输入 hexo g与hexo algolia 指令

主题插件替换思路与案例
  • 此处不包括 valine 插件,替换链接案例为 unpkg.com 链接

  • 由于 jsdelivr 的加速链接中有便捷的组合链接 (即 /cdn.jsdelivr.net/combine/npm_url1,npm_url2,.. ),并且其只发送一次请求,但这就提升了更换其他加速链接的难度。以此来看,无论是修改 js 的请求代码还是直接添加多个 js 标签,都是发送同等数量的请求,为此,这里就直接选择了最简单的做法

  • (step.1) 修改主题插件链接前缀

修改文件:hexo 根目录 ./themes/shoka/_config.yml 文件

此处将 fancybox 拆分了

#页面滑倒最后,将原来的 vendors 元素所有内容注释 (鼠标全选后,按快捷键 ctrl+k)
#参考 unpkg 的加速链接格式:unpkg.com/:package@:version/:file
#此外,这里的 comment 与 valine 表示本地路径
vendors:
  css:
    katex: unpkg.com/katex@0.12.0/dist/katex.min.css
    comment: css/comment.css
    fancybox: unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css
    justifiedGallery: unpkg.com/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css
  js:
    pace: unpkg.com/pace-js@1.0.2/pace.min.js
    pjax: unpkg.com/pjax@0.2.8/pjax.min.js
    fetch: unpkg.com/whatwg-fetch@3.4.0/dist/fetch.umd.js
    anime: unpkg.com/animejs@3.2.0/lib/anime.min.js
    algolia: unpkg.com/algoliasearch@4/dist/algoliasearch-lite.umd.js
    instantsearch: unpkg.com/instantsearch.js@4/dist/instantsearch.production.min.js
    lazyload: unpkg.com/lozad@1/dist/lozad.min.js
    quicklink: unpkg.com/quicklink@2/dist/quicklink.umd.js
    jquery: unpkg.com/jquery@3.5.1/dist/jquery.min.js
    fancyapps: unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js
    justifiedGallery: unpkg.com/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js
    valine: js/MiniValine.min.js
    copy_tex: unpkg.com/katex@0.12.0/dist/contrib/copy-tex.min.js
    chart: unpkg.com/frappe-charts@1.5.0/dist/frappe-charts.min.iife.js
  • (step.2) 注释掉 shoka 主题的 jsdelivr 加速组合链接的代码

修改文件:hexo 根目录 ./themes/shoka/scripts/helpers/assert.js 文件

(第 42~67 行左右,全选之后按 ctrl+k 键加 ctrl+c 键即可注释)

  • (step.3) 修改页面索引插件链接返回值的代码

修改文件:hexo 根目录 ./themes/shoka/source/js/_app/utils.js 文件 (第 25~39 行左右)

/*
此处要注意下 str.indexof 的唯一检索要求,
---
倘若搜查的插件为 `js/MiniValine.min.js`,
代码编写为
if (str.indexof ('js'>-1))
	return "/xxx.example.com/" + str
这表明凡是插件字符串有 js 字符的链接都会返回,
这显然不符合要求,可通过将值 - 1 改为 1 解决,
但要是其他插件的名字中有 js 呢?
---
倘若搜查的插件为 `unpkg.com/lozad@1/dist/lozad.min.js`,
代码编写为
if (str.indexof ('unpkg.com'>-1))
	return "https://" + str
这为正确案例,因为 `unpkg.com` 字符只出现一次
*/
// 不含 jsdelivr 的插件
const assetUrl = function(asset, type) {
  var str = CONFIG[asset][type]
  // if(str.indexOf('npm')>-1||str.indexOf('gh')>-1||str.indexOf('combine')>-1)
  //   return "//cdn.jsdelivr.net/" + str
  
  if(str.indexOf('unpkg.com')>-1)
    return "https://" + str
  if(str.indexOf('http')>-1)
    return str
  return statics + str;
}
// 含有部分 jsdelivr 的插件
const assetUrl = function(asset, type) {
  var str = CONFIG[asset][type]
  if(str.indexOf('npm')>-1||str.indexOf('gh')>-1||str.indexOf('combine')>-1)
     return "//cdn.jsdelivr.net/" + str
  
  if(str.indexOf('unpkg.com')>-1)
    return "https://" + str
  if(str.indexOf('http')>-1)
    return str
  return statics + str;
}
  • (step.4) 手动添加 js插件 对应的 script标签

修改文件:hexo 根目录 ./themes/shoka/layout/_partials/layout.njk 文件 (最后面 </body> 标签的前几行)

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>
<script src="https://unpkg.com/pace-js@1.0.2/pace.min.js"></script>
<script src="https://unpkg.com/pjax@0.2.8/pjax.min.js"></script>
<script src="https://unpkg.com/whatwg-fetch@3.4.0/dist/fetch.umd.js"></script>
<script src="https://unpkg.com/animejs@3.2.0/lib/anime.min.js"></script>
<script src="https://unpkg.com/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
<script src="https://unpkg.com/instantsearch.js@4/dist/instantsearch.production.min.js"></script>
<script src="https://unpkg.com/lozad@1/dist/lozad.min.js"></script>
<script src="https://unpkg.com/quicklink@2/dist/quicklink.umd.js"></script>