自定义字体 参考1 参考2 本文操作步骤为 anzhiyu 主题 操作步骤 本文操作步骤以 DingTalk-JinBuTi 为例 在\themes\anzhiyu\source中创建fonts文件夹，并将字体文件复制进去。 在source\css下新建一个font.css文件 1234567891011121314@font-face { /* 为载入的字体取名字(随意) */ font-family: 'DingTalk-JinBuTi'; /* 字体文件地址(相对或者绝对路径都可以) */ src: url('../../fonts/DingTalk-JinBuTi.woff2') format('woff2'), /* 提供 WOFF2 格式(建议格式) */ url('../../fonts/DingTalk-JinBuTi.woff') format('woff'), /* 提供 WOFF 格式 */ url(& ...
侧边栏个性定位欢迎信息 参考1 参考2 本文操作步骤为 anzhiyu 主题 基于青桔气球的教程进行修改，主要改进如下 🔐 增加IP地址模糊效果 🔄 添加网络异常刷新重试 🔍 增加是否允许访问位置信息 🎨 添加加载动画和错误提示样式 💾 添加本地缓存机制,减少API调用 🏠 添加是否首页显示,开启后其它页面将不会显示这个容器 申请API密钥 首先需要在 https://api.nsmao.net/ 申请一个API密钥 操作步骤 获取自己的经纬度信息 创建welcome.js文件,并修改文件顶部配置信息 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311 ...
首页图片渐进式加载一图流 本文操作步骤为 anzhiyu 主题 渐进式加载是一种优化网页性能和用户体验的技术，它可以让图片在加载过程中逐渐显示出清晰度，从而避免了图片加载缓慢或失败时出现的空白或占位符。这个方法同样适用于一图流的博客背景，因此我们只需要更改部分代码即可实现本站首页效果。 把首页的顶图配置启用，为了加一张背景图整个博客的加载速度都受到了影响，不仅访问体验不流畅，甚至一点都不美观（特别是图片资源卡住的时候）。以下为一个调整图片加载的方案。按照原文章提供的部分代码做出调整，适配了pjax以及增加了手机端的设备判断，最终得出了本博客使用的效果。原理是先加载小图文件并进行高斯模糊处理，在大图加载完成后再对大图进行加载。 reference: Butterfly主题优化首页大图加载效果 - 假想国 1.首页背景图渐进式加载，解决卡顿难题 2.Hexo美化：自适应切换渐进式加载首页图 3.Kouseki式首页背景图渐进式加载 · 改 anzhiyu主题一图流 (source/js/imgloaded.js 改图) 操作步骤 新建文件source/js/imgloaded.j ...
宠物挂件 参考1 参考2 顶部挂件 安知鱼主题直接替换themes\anzhiyu\layout\includes\bbTimeList.pug文件就行了 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141if site.data.essay each i in site.data.essay if i.home_essay - let onclick_value = theme.pjax.en ...
blog
未读博客添加待办清单界面 参考1 参考2 修改页面：\layout\includes\page\todolist.pug 修改内容：\source\_data\todolist.yml 该内容需修改主题文件，本文操作步骤为 anzhiyu 主题 耽误太多时间，事情可就做不完了。一份清单页有助于检视自己的目标，动态化的待办清单或许更加方便，我往上写的待办事项没有太多,就用了静态的方案。 样式预览 待办清单TODOList 1.修改文件 在\themes\anzhiyu\layout\page.pug中新增以下内容 123456 when 'music' include includes/page/music.pug+ when 'todolist'+ include includes/page/todolist.pug default include includes/page/default-page.pug 2、新建文件 在\themes\anzhiyu\layout ...
主页文章卡片擦亮动画效果 参考 该方法通过外部引入，无需修改主题源文件 1.新增css内容 新建文件source/css/home.css或在已引入的css中新增以下内容 123456789101112131415#recent-posts > .recent-post-item:not(a)::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 200%; background: linear-gradient(to right, transparent, white, transparent); transform: translateX(-200%); transition: transform 0.5s linear; z-index: 1;}#recent-posts > .recent-post-item:not(a):hover::before { transform: tra ...
石蒜模拟器 function initSakanaWidget() { new SakanaWidget().mount('#sakana-widget'); } b站视频适配 樱花飘落效果 1<script async src="https://npm.elemecdn.com/tzy-blog/lib/js/other/sakura.js"></script>
游戏卡片
