相关文章推荐：

• shoka 主题功能介绍补充点
• shoka 主题进阶玩法

# 修改主页标签名

打开 themes\shoka\languages 路径下的 zh-CN.yml 文件，找到 favicon 板块，修改 show 和 hide

favicon:

  show: Jiankychen

  hide: Jiankychen

本博客根目录 _config.yml 中的语言设置为 language: zh-CN ，所以这里是修改 zh-CN.yml 文件。若根目录 _config.yml 中的语言设置为 language: en ，则应修改 en.yml 文件

# 修改加载动画

实现步骤：

• 打开 themes\shoka\source\css\_common\components\third-party 路径下的 loading.styl 文件，将第 9 行（ $bgColor = var(--grey-1) ）及以后的内容全部删除，新增以下内容：

  	+mobile() {
  	width: 20px;
  	height: 20px;
  	}
  	+tablet() {
  	width: 30px;
  	height: 30px;
  	}
  	.container {
  	height: 100vh;
  	width: 100vw;
  	font-family: Helvetica;
  	}
  	.loader {
  	height: 20px;
  	width: 250px;
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	margin: auto;
  	}
  	.loader--dot {
  	animation-name: loader;
  	animation-timing-function: ease-in-out;
  	animation-duration: 3s;
  	animation-iteration-count: infinite;
  	height: 20px;
  	width: 20px;
  	border-radius: 100%;
  	background-color: black;
  	position: absolute;
  	border: 2px solid white;
  	}
  	.loader--dot:first-child {
  	background-color: #8cc759;
  	animation-delay: 0.5s;
  	}
  	.loader--dot:nth-child(2) {
  	background-color: #8c6daf;
  	animation-delay: 0.4s;
  	}
  	.loader--dot:nth-child(3) {
  	background-color: #ef5d74;
  	animation-delay: 0.3s;
  	}
  	.loader--dot:nth-child(4) {
  	background-color: #f9a74b;
  	animation-delay: 0.2s;
  	}
  	.loader--dot:nth-child(5) {
  	background-color: #60beeb;
  	animation-delay: 0.1s;
  	}
  	.loader--dot:nth-child(6) {
  	background-color: #fbef5a;
  	animation-delay: 0s;
  	}
  	.loader--text {
  	position: absolute;
  	top: 200%;
  	left: 0;
  	right: 0;
  	width: 4rem;
  	margin: auto;
  	}
  	.loader--text:after {
  	content: "Loading";
  	font-weight: bold;
  	animation-name: loading-text;
  	animation-duration: 2.5s;
  	animation-iteration-count: infinite;
  	}
  	@keyframes loader {
  	15% {
  	transform: translateX(0);
  	}
  	45% {
  	transform: translateX(230px);
  	}
  	65% {
  	transform: translateX(230px);
  	}
  	95% {
  	transform: translateX(0);
  	}
  	}
  	@keyframes loading-text {
  	0% {
  	content: "Loading";
  	}
  	25% {
  	content: "Loading.";
  	}
  	50% {
  	content: "Loading..";
  	}
  	75% {
  	content: "Loading...";
  	}
  	}

• 打开 themes\shoka\layout\_partials 路径下的 layout.njk 文件，将第 14 行（即 <div class="cat"> ）至第 29 行（即 </div> ）之间的内容（包括第 14 行和第 29 行）替换为

  	<div class='container'>
  	<div class='loader'>
  	<div class='loader--dot'></div>
  	<div class='loader--dot'></div>
  	<div class='loader--dot'></div>
  	<div class='loader--dot'></div>
  	<div class='loader--dot'></div>
  	<div class='loader--dot'></div>
  	<div class='loader--text'></div>
  	</div>
  	</div>

• 为适配移动端显示，需修改 themes\shoka\source\css\_common\outline 路径下的 outline.styl 文件：将

  	.cat {
  	margin-top: 10rem;
  	}

  替换为

  	.loader {
  	margin-top: 15rem;
  	justify-content: center;
  	}

效果预览：

See the Pen Untitled by Jiankychen (@jiankychen) on CodePen.

加载动画列表：

• codepen
• uiverse

本加载动画源自于 Dave McCarthy

参考：

• 替换加载动画
• 修改加载动画

# 使用外链头像

在采用 Jsdelivr 静态缓存的情况下，由于某种未知原因，博客侧边栏的头像经常无法显示，现考虑使用外部链接的图片作为头像

实现步骤：

• 打开 themes\shoka\layout\_partials\post 路径下的 post.njk 文件，将

  	<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
  	<meta itemprop="image" content="{{ url_for(theme.statics + theme.images + '/' + theme.sidebar.avatar) }}">
  	<meta itemprop="name" content="{{ author }}">
  	<meta itemprop="description" content="{{ subtitle }}, {{ description }}">
  	</span>

  替换为

  	<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
  	{%- if 'http' in theme.sidebar.avatar %}
  	<meta itemprop="image" content="{{ url_for(theme.sidebar.avatar) }}">
  	{%- else %}
  	<meta itemprop="image" content="{{ url_for(theme.statics + theme.images + '/' + theme.sidebar.avatar) }}">
  	{%- endif %}
  	<meta itemprop="name" content="{{ author }}">
  	<meta itemprop="description" content="{{ subtitle }}, {{ description }}">
  	</span>

• 打开 themes\shoka\layout\_partials\sidebar 路径下的 overview.njk 文件，将

  	<div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  	<img class="image" itemprop="image" alt="{{ author }}"
  	data-src="{{ url_for(theme.statics + theme.images + '/'+ theme.sidebar.avatar) }}">
  	<p class="name" itemprop="name">{{ author }}</p>
  	<div class="description" itemprop="description">{{ description }}</div>
  	</div>

  替换为

  	<div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  	<img class="image" itemprop="image" alt="{{ author }}"
  	{%- if 'http' in theme.sidebar.avatar %}
  	data-src="{{ url_for(theme.sidebar.avatar) }}"
  	{%- else %}
  	data-src="{{ url_for(theme.statics + theme.images + '/'+ theme.sidebar.avatar) }}"
  	{%- endif %}
  	>
  	<p class="name" itemprop="name">{{ author }}</p>
  	<div class="description" itemprop="description">{{ description }}</div>
  	</div>

• 打开主题 _config.yml 文件，找到 sidebar 板块，将 avatar 值设为外部链接，例如

  avatar: https://s2.loli.net/2023/01/01/hnmYMxBAwF9QelU.jpg

# 去除首页 subtitle 两侧的 = 号

首页 subtitle 两侧会显示出一个 = 号，这里考虑将其去除

实现方式：

打开 themes\shoka\layout\_partials 路径下的 layout.njk 文件，将第 42 行（ <p class="meta" itemprop="description">= {{ subtitle }} =</p> ）替换为

<p class="meta" itemprop="description">{{ subtitle }}</p>

效果对比：

• 去除前
  

• 去除后
  

也可以将 = 号替换成其他字符或图标，例如：

<p class="meta" itemprop="description">~~~ {{ subtitle }} ~~~</p>

效果：

# 添加页脚：站点运行时长

实现步骤：

• 打开 themes\shoka\languages 路径下的 zh-CN.yml 文件，找到 footer 板块，添加以下内容：

  	timing: 本站已运行
  	days: 天
  	hours: 时
  	minutes: 分
  	seconds: 秒

• 打开 themes\shoka\layout\_partials 路径下的 footer.njk 文件，在 </div> 与 {%- if theme.footer.count %} 之间插入以下内容：

  	<div class="timing">
  	<span id="RunTime"></span>
  	<script>
  	var BootDate = new Date("2021/10/24 23:00:00"); {# 站点起始时间 #}
  	function ShowRunTime(id) {
  	var NowDate = new Date();
  	var RunDateM = parseInt(NowDate - BootDate);
  	var RunDays = Math.floor(RunDateM/(24*3600*1000));
  	var RunHours = Math.floor(RunDateM%(24*3600*1000)/(3600*1000));
  	var RunMinutes = Math.floor(RunDateM%(24*3600*1000)%(3600*1000)/(60*1000));
  	var RunSeconds = Math.round(RunDateM%(24*3600*1000)%(3600*1000)%(60*1000)/1000);
  	var RunTime = RunDays + " {{ __('footer.days') }} " + RunHours + " {{ __('footer.hours') }} " + RunMinutes + " {{ __('footer.minutes') }} " + RunSeconds + " {{ __('footer.seconds') }}";
  	document.getElementById(id).innerHTML = "{{ __('footer.timing') }} " + RunTime;
  	}
  	setInterval("ShowRunTime('RunTime')", 1000);
  	</script>
  	</div>

效果：

# 添加页脚：站点访问量

可以通过 busuanzi 将 站点 / 某个页面的访客数量 添加到 页脚

实现步骤：

• 打开 themes\shoka\languages 路径下的 zh-CN.yml 文件，找到 footer 板块，添加以下内容

  	views: 次
  	visitors: 人

• 打开 themes\shoka\layout\_partials 路径下的 footer.njk 文件，将 {%- if theme.footer.count %} 至 {%- endif %} 之间的内容替换为

  	{%- if theme.footer.count %}
  	<script async src="https://cdn.jsdelivr.net/gh/jiankychen/jiankychen.github.io@master/js/busuanzi.pure.min.js"></script>
  	<div class="count">
  	<span title="{{ __('symbols_count_time.count_total') }}">
  	<span class="post-meta-item-icon">
  	<i class="ic i-file" aria-hidden="true"></i>
  	</span>
  	<span class="text">{{ symbolsCountTotal(site) }} {{__('symbols_count_time.word')}}</span>
  	</span>
  	<span class="post-meta-divider">|</span>
  	<span title="{{ __('footer.total_visitors') }}">
  	<span class="post-meta-item-icon">
  	<i class="ic i-person" aria-hidden="true"></i>
  	</span>
  	<span class="views">
  	<span id="busuanzi_value_site_uv"></span> {{ __('footer.visitors') }}
  	</span>
  	</span>
  	<span class="post-meta-divider">|</span>
  	<span title="{{ __('footer.total_views') }}">
  	<span class="post-meta-item-icon">
  	<i class="ic i-eye" aria-hidden="true"></i>
  	</span>
  	<span class="visitors">
  	<span id="busuanzi_value_site_pv"></span> {{ __('footer.views') }}
  	</span>
  	</span>
  	<span class="post-meta-divider">|</span>
  	<span title="{{ __('symbols_count_time.time_total') }}">
  	<span class="post-meta-item-icon">
  	<i class="ic i-clock" aria-hidden="true"></i>
  	</span>
  	<span class="text">{{ symbolsTimeTotal(site, config.symbols_count_time.awl, config.symbols_count_time.wpm, __('symbols_count_time.time_minutes')) }}</span>
  	</span>
  	</div>
  	{%- endif %}

参考：

• 添加网站浏览量统计功能
• busuanzi 使用教程

# 新增页面：访问统计与文章统计

# 添加访问统计页面

按照 Lavender 的文章 Shoka 主题：新增博客访问统计页面 做相应配置

其中，百度商业账号和百度账号的调用方法存在差异，普通用户按照 百度账号接口说明 进行操作，以获取 API Key、Secret Key、Refresh Token、Acess_Token、Site_ID 等信息

一旦 Acess_Token 过期，可根据以下请求更换新的 Acess_Token 和 Refresh_Token ：

http://openapi.baidu.com/oauth/2.0/token?grant_type=refresh_token&refresh_token={REFRESH_TOKEN}&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}

其中：

• {REFRESH_TOKEN} 填写 Refresh Token

• {CLIENT_ID} 填写 API Key

• {CLIENT_SECRET} 填写 Secret Key

参考：

• Shoka 主题：新增博客访问统计页面
• Hexo 博客实时访问统计图

# 添加文章统计功能

具体可参考 Shoka 主题：新增文章统计页面、Hexo 博客文章统计图

# 主题 vendors 链接替换 - 拆分 Jsdelivr

参考：Hexo-Shoka 主题功能介绍补充点：主题插件链接替换思路与案例

另一种方案：shoka 主题速度优化 - 拆分 jsdelivr

# 修改主题配置文件

打开主题配置文件 _config.shoka.yml ，找到文件最后的 vendors 板块，将其注释，并在其下方新增以下内容

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

    fancybox: 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

    echarts: unpkg.com/echarts@5.2.2/dist/echarts.min.js

与原始版本相比，有以下改动：

• 除了 comment 和 valine 依然使用本地文件外，其余 vendors 元素的链接前缀均修改为 unpkg.com
• fancybox 元素被拆分成 fancybox 和 justifiedGallery
• 新增个人所需的 echarts （用于实现博客统计页面中的图表）

# 修改 utils.js

打开 themes\shoka\source\js\_app\utils.js ，找到 const assetUrl = function (asset, type) {} （文件第 25~39 行左右），将其替换为

const assetUrl = function (asset, type) {

  var str = CONFIG[asset][type]

    if(str.indexOf('unpkg.com')>-1)

      return "https://" + str;

    if(str.indexOf('http')>-1)

      return str;

    return statics + str;

}

# 修改 asset.js

打开 themes\shoka\scripts\helpers\asset.js ，找到 hexo.extend.helper.register('_vendor_js', () => {}) （第 41~63 行左右），将其替换为

hexo.extend.helper.register('_vendor_js', () => {

  const config = hexo.theme.config.vendors.js;

  if (!config) return '';

  //Get a font list from config

  let vendorJs = ['pace', 'pjax', 'fetch', 'anime', 'algolia', 'instantsearch', 'lazyload', 'quicklink'].map(item => {

    if (config[item]) {

      return config[item];

    }

    return '';

  });

  return vendorJs.map(url => { 

    if(item !== ''){

      return htmlTag('script', { src: `https://${url}` }, '');

    }

  }).join('');

});

# 修改 script.js

打开 themes\shoka\scripts\generaters\script.js ，找到 js 和 css 索引代码（第 23~38 行左右），将其替换为

js: {

  valine: theme.vendors.js.valine,

  chart: theme.vendors.js.chart,

  copy_tex: theme.vendors.js.copy_tex,

  jquery: theme.vendors.js.jquery,

  fancybox: theme.vendors.js.fancybox,

  justifiedGallery: theme.vendors.js.justifiedGallery,

  echarts: theme.vendors.js.echarts

},

css: {

  valine: theme.css + "/comment.css",

  katex: theme.vendors.css.katex,

  mermaid: theme.css + "/mermaid.css",

  fancybox: theme.vendors.css.fancybox,

  justifiedGallery: theme.vendors.css.justifiedGallery

},

// ...

# 修改 page.js

打开 themes\shoka\source\js\_app\page.js ，找到 const postFancybox = function(p) {} 中的 vendorCss 和 vendorJs （第 72~79 行左右），将其替换为

const postFancybox = function(p) {

  if($(p + ' .md img')) {

    vendorCss('justifiedGallery');

    vendorJs('justifiedGallery');

    vendorCss('fancybox');

    vendorJs('jquery','fancybox', function() {

      // ...

# tab 标签卡的红色线条

tab 标签卡中的标签名称下方没有显示红色线条

为显示下画线，可按以下步骤修改：

• 打开 shoka\source\css\_common\components\tags\tabs.styl

• 删掉第 6 行的 overflow: hidden;

效果：

.nav {

    overflow: hidden;

    border-bottom: .0625rem solid var(--grey-1-a7);

    height: 2.6875rem;

    // ...

  }

.nav {

    border-bottom: .0625rem solid var(--grey-1-a7);

    height: 2.6875rem;

    // ...

  }

# 调整代码块的高度

修改代码块折叠的阈值为 10 （即，超过 10 行代码即进行折叠），并将代码块（不包括 figcaption）的高度调整为 200px

• 打开 themes\shoka\source\js\_app\page.js

• 将 code_container && code_container.find("tr").length > 15 中的 15 替换为 10

• 将 code_container.style.maxHeight = "300px"; 中的 "300px" 替换为 "200px"