相关文章推荐：
- 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"
