置顶文章
精选分类
HEXO
CG
SHOKA
JAVA
文章列表
Shoka主题:修改标签页显示效果
修改标签页显示效果 # 前言 本标签页面参考 HEO 大佬的标签页面,实现标签的美化以及右上角标签对应文章数量的显示 本标签页右上角显示文章数量参考 Eurkon 大佬的文章:Butterfly 标签云增加文章数上下标 # 实现 # 主题 yml 文件 找到主题配置文件 themes\shoka\_config.yml ; 找到 tagcloud : # TagCloud settings for tags page.tagcloud: # All values below are same as default, change them by yourself. min: 16...
more...Shoka主题:修改页面滚动视差效果
修改页面滚动视差效果 # 前言 实现页面滚动时背景图随滚动发生位移的视差效果 # 实现 # 修改 Js 找到 themes\shoka\source\js\_app\global.js ; 大概 20 行左右新增: var imgMover = $('#imgs'); // 新增位置参考: const sideBar = $('#sidebar');const siteBrand = $('#brand');var toolBtn = $('#tool'), toolPlayer, backToTop,...
more...Shoka主题:修改首页文章摘要hover效果
修改首页文章摘要 hover 效果 # 前言 想法来自于 HEO 大佬首页文章效果,实现首页文章摘要的 hover 显示效果 # 实现 # 修改 Stylus 找到 themes\shoka\source\css\_common\components\pages\home.styl ; 大概 260 行左右,找到 &:hover 代码部分,修改如下: 修改鼠标悬浮后图片变暗效果,增加 brightness 属性: &:hover { box-shadow: 0 0 2rem var(--box-bg-shadow); .cover...
more...Shoka主题:修改夜间模式切换动画
修改夜间模式切换动画 # 前言 仍然想要折腾下主题默认的夜间模式切换动画 # 实现 # 修改 Js 找到 themes\shoka\source\js\_app\global.js ; 找到 var neko = BODY.createChild 的位置,修改 js 添加 html 块的代码: var neko = BODY.createChild('div', { id: 'neko', innerHTML: '<div class="planet"><div...
more...Shoka主题:修改加载动画
修改主题加载动画 # 前言 主题默认加载动画是旋转的猫猫(ha),鉴于个人想要折腾的想法,修改成其他喜爱的加载动画 主题的加载动画实际上就是一个单独的播放循环动画的网页 div 块( <div id="loading"> ),页面最开始显示这个 div 块,加载完成后设置隐藏,即 <div id="loading" style="opacity: 0; display: none;"> # 实现 # 修改 nunjucks...
more...Shoka主题:新增博客新年灯笼
新增:博客页面右上角新年灯笼 # 前言 本文参考:知更鸟:过年啦,挂灯笼! (原作者) 之前的 wordpress 主题也搞过这个灯笼,还是挺简单的,临近农历新年,在这个主题再搞一下 # 实现 # 新增主题设置 在主题的 yml 文件中,找到 footer ,下面新增 latern 选项,如下: footer: # Specify the date when the site was setup. If not defined, current year will be used. since: 2020 # …………(省略) count: true powered: true # 新增...
more...Shoka主题:新增博客访问统计页面
新增页面:新增博客访问统计页面 # 前言 参考文章: Hexo 博客实时访问统计图 基于 Butterfly 主题的首页置顶 gitcalendar 本教程将会泄漏属于百度统计的 站点 ID 和百度统计 AccessToken ,请先前往 百度统计用户手册了解,介意者请谨慎部署。 可能有时会出现跨域请求的问题 开通前条件:链接:https://tongji.baidu.com/web/help/article?id=123 需要自有网站昨日 PV 数大于 100 # 实现 # 加入百度统计 进入百度统计,注册或者登录,新增站点,填入信息; 获取统计代码:在管理 ->...
more...Shoka主题:新增文章统计页面
新增页面:新增文章统计页面 # 前言 最开始参考的 matery 主题的统计页面,后来看到 Eurkon 大佬的文章,因此,本文章根据大佬的 Hexo 博客文章统计图适配本主题而成,改进了一些地方(pjax 问题、明暗模式问题),还留存一点 bug(黑暗模式刷新后字体会变成日间模式的颜色,未解决) 参考文章:Hexo 博客文章统计图 # 实现 # 新建页面 hexo new page statistics 在根目录下的 source 下新建文件夹,命名为 statistics ,并在该目录下新建文件: index.md ,填入以下内容: ---title: 文章统计date:...
more...Shoka主题:实现自定义网站字体
实现网站自定义的字体 # 前言 可以看见,我的网站全局使用了鸿蒙字体; 网站的字体默认是从 google font 的 api 里加载的; 谷歌的字体库中文字体少的可怜,没有自己喜欢的; 如果想要修改自己喜欢的字体,那就继续看这篇文章吧! # 实现 # 寻找字体 网络上有很多字体网站,如 100font、字由或者其他渠道的字体; 找到自己喜欢的,下载下来,格式一般为 ttf # 转换字体格式 web 中字体可能会用 woff 、 woff2 、 eot 等其他格式,所以需要转换下 这里推荐一个好用的字体转换网站:Online @font-face generator —...
more...