本站网页统计从2023年8月9日开始，之前的统计数据已全部清除。目前没有找回计划。算是作为一个新的开始吧。 之前看了一下网站的网络响应，可以说busuanzi占用了50%多的时间，busuanzi不蒜子太慢太卡，而很多静态博客都是用的busuanzi。毕竟公益免费。但是速度实在是太慢了，严重拖垮了网站速度。所以我放弃了数百万的数据，还是自搭建比较香，博客速度提升一大截。 看到杜老师开的公益项目，自搭建了一个busuanzi。所以说如果你想直接白嫖的话可以用一下杜老师提供的服务。使用杜老师服务就不需要再看下去啦～ 杜老师自建国内不蒜子统计平台 请勿使用本文示例的busuanzi地址，因为有域名限制，仅限我使用 因为我个人习惯对于数据要求有掌控能力，并且对于用户隐私有一些方面的考量，所以这个文章就是具体介绍如何自己搭建busuanzi服务。相比于项目的官方文档，这个博客文章会更加细致的介绍，并对文档一些错误内容进行修正。 Github项目地址 项目作者 需要你需要拥有一台服务器，拥有docker环境并支持docker-compose。宝塔环境。 添加站点我们来添加一个站点，例如我添 ...

受到林木木的好物界面影响，制作了一个装备界面，你可以非常方便的分享你正在使用的商品和设备，算是朋友之间推荐的一种吧。也避免了大家询问“你用的是什么电脑啊”，“博主用的是什么好东西啊”这种情况。我经常写一些文章来介绍产品的使用体验，通过这个功能也能很方便的链接到文章。所以我认为这个功能可以和博客无缝配合。我认为博客的一切功能都是尽可能展示文章，而这个功能肯定能明显提升陈旧文章的访问。所以这也是为什么我跟随林木木而写这个功能的原因。 至于为什么是装备推荐而没有软件推荐，主要是因为软件推荐不太适合这种橱窗或者一句话的展示形式，而是需要更加深度的的展示和更加丰富的预览图。目前还没有这方面的计划（也许未来会有？）。 下面就写一下教程吧，步骤过程非常简单。 样式预览 预览地址：点击访问 此教程不包含顶部图片与评论功能。 创建pug页面文件创建themes/butterfly/layout/includes/page/equipment.pug 123456789101112131415161718192021#equipment if site.data.equipment each i ...

好久没有写魔改了，这次写一个提升网页体验的魔改教程吧！因为比较喜欢打开APP的感觉，但是为了博客做一个app显然是大材小用了。毕竟也不是社交媒体社区之类的。所以一个简单的类似应用内一样的app是最好的。看到了爱发电的iOS版本用的就是添加网页到桌面的方式，但是没开启pwa，所以我就尝试一下复刻。 这里展示的是Hexo的Butterfly主题的修改方法。其他网页的修改方法大同小异，无非是head标签里面添加一些meta和link代码。 至于为什么不用原生的PWA，主要还是bug太多了，要做的兼容性适配太多了。 废话不多说，我们开始吧！ 修改head文件themes/butterfly/layout/includes/head.pug 1234567891011121314151617181920212223242526272829303132333435//- pwameta(name='apple-mobile-web-app-capable', content='yes')meta(name=' ...

最近研究AI在博客和文章领域的应用，发现AI摘要是一个很不错的方向，研究了很久给搞出来了。在这篇文章中，我将帮助大家如何让你的博客接入TianliGPT。 访问项目Github仓库 随机访问已经支持TianliGPT的网站 效果预览 什么是TianliGPTTianliGPT是一个专业的文字摘要生成工具，你可以将需要提取摘要的文本内容发送给TianliGPT，稍等一会他就可以给你发送一个基于这段文本内容的摘要。 实时生成的摘要 自动生成，无需人工干预 一次生成，再次生成无需消耗key 包含文字审核过滤，适用于中国大陆 支持中国大陆访问 如何部署TianliGPT我们可以通过在网页中嵌入TianliGPT的服务支持，让TianliGPT能够获取到你需要提交的内容。 在博客靠后的位置位置引入js和css（需要在文章之后） 123456<link rel="stylesheet" href="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.11/tianli_gpt.css">& ...

大多数站长其实比较喜欢在自己的页面上悬浮显示自己的公众号二维码，我其实一直对这种行为非常排斥。因为二维码这种东西在我看来并不好看。即使你做了美化，那结果其实就是屎上雕花而已。所以我从一开始设计关注公众号挂件时，就避免用户直接看到二维码。 那么如何才能显示二维码呢？一般来说，要么是通过鼠标hover悬浮，要么通过跳转。悬浮显示二维码很常见，但是对于移动端的适配很不友好。毕竟手机端根本没悬浮嘛。做兼容性做成点击也可以，就是麻烦。跳转可以说是最简单最容易生成的方法了。 之前是直接跳转一个二维码图片url，后来感觉这个方式太不优雅了，于是写了一个简单的html单页用来展示公众号关注二维码。 效果预览预览网站 就是非常简单的一个单页面，方便展示二维码。你可以通过修改代码和图片自定义你想要的信息。 开源仓库Wechat-Official-Account-Web

看到安知鱼写的独立的音乐，感觉很不错，突发奇想想要给自己写一个音乐播放器，用于iPad挂墙上的时候放音乐显示歌词。虽然Apple Music的界面我非常喜欢，奈何中文曲库还有待完善。其他音乐app界面都太丑了，所以写了一个静态网页。 效果预览 HeoMusic - 用音乐感染人心 特性多设备兼容性支持 清晰的歌词展示 较好的性能 部署你可以直接fork或者下载HeoMusic仓库，然后直接上传到你的服务器或者使用vercel、githubpage等在线服务将仓库在线部署。这里不过多赘述。 基本操作Space空格键：暂停/播放音乐 上/下方向键：增加/减少音量 左/右方向键：上一曲/下一曲 修改歌单ID歌单的id，可以从音乐歌单分享的链接中获取，例如https://y.qq.com/n/ryqq/playlist/8668419170中，id为8668419170 Server歌单的服务商，例如netease（网易云音乐）,tencent（腾讯）,kugou（酷狗）,xiami（小米音乐）,baidu（百度音乐） 使用URL参数（推荐）HeoMusic支持U ...

近期有个项目，我的设计稿中用到了一些宋体，但是作为移动端H5页面大多都只有系统默认的字体，偏黑体更多一些。但是纯黑体表现的更多是简洁、严肃、理性。但是如果想表达更加感性的东西时，我们可能更多的是需要宋体来突出文化底蕴。 虽然文字比较少，但是使用图片的方法一个是体积太大，一个是不容易编辑，再一个就是不清晰。 我这里使用的是font-spider来进行字体压缩。在此之前我也测试了一波fontmin等，很多都是兼容性较差，上古软件不适配新版字体。所以这个文章的方法是我目前用起来可用性最高的。 让第三方字体仅包含用到的文字，可以有效减少引入的字体大小。 安装font-spider使用终端（或者cmd）输入下面的代码回车 1npm install font-spider -g 创建一个html文件首先我们创建一个文件夹，里面要包含 一个空白html文件index.html 一个字体文件font.ttf html文件中我们插入下面的代码 123456789101112131415<p>每日打卡活动须知赞助商积分排名精彩投稿领奖机构</p><style> @ ...

友链朋友圈已经是一个历史悠久的项目了，这次yyyz开发了全新版本为这个老项目焕发生机。 部署项目我个人用的方案是：Docker+Sqlite 使用这个方案你需要一个服务器。没有服务器的小伙伴请看更多部署方式。 预览我的部署效果 后端部署后端部署非常容易。你需要有python3.8即以上和机器安装docker，之后的部分按照文档中来就可以。 首先进入宝塔新建一个网站，然后在进ssh，cd进网站目录中，例如我的文件地址是/www/wwwroot/moments.zhheo.com我就在ssh中输入： 1cd /www/wwwroot/moments.zhheo.com 然后下载仓库： 1git clone https://github.com/Rock-Candy-Tea/hexo-circle-of-friends 如果你的服务器无法直连GitHub，那就需要手动去GitHub下载文件，然后将压缩包放在网站目录中，点击解压。 然后进入解压后的文件夹 1cd /www/wwwroot/ ...

最开始打造低成本博客的时候，使用的是GitHub转七牛云图床上的。当时流量小，加上七牛云有无限期10G免费额度，所以就用着了。后来因为转HTTPS，再因为自己域名服务器都在腾讯云，所以也将七牛云转到腾讯云上了。还有一个原因就是腾讯COS比七牛云便宜。 转移图床得益于转移过程非常的简单，也加速了我用腾讯云COS的过程。 过程非常简单，也不需要什么基础，也很快就转移完了。修改好域名配置好设置，整个数据迁移过程就结束了。 接下来说说我是如何将cos加入到我的博客写作流程的。 数据万象配置因为需要将图片添加水印，之前是使用七牛云进行添加的。在腾讯云上这个是使用数据万象服务进行添加。 配置方法也比较简单，设置好图片参数再设置图片样式即可。 比如我的图片链接格式。 红色部分是分隔符，用于区分链接和图片样式参数；蓝色部分是具体图片要更改成什么样子。 我设置了几种常见的图片参数 一种用于图片封面展示：图片质量要求高，图片尺寸不会很大。无水印。 一种用于文章内部图片展示：图片质量要求低，图片尺寸要于文章页面显示尺寸接近。有水印。 一种用于文章点开大图的样式展示：图片质量要求中等偏高，图片尺寸较大。 ...

想要做一个相册功能，一开始考虑改造butterfly，但是考虑到博客真的太臃肿了，并且即刻短文一定程度与这个功能有重复性，再加上每次部署都要等待很久，所以目前还是打算将相册站独立出来。 找了很多主题，发现Time主题非常适合我所期望的，简单展示图片的需求，而且开源免费。所以这就是我选择这个主题的原因。 （主要感觉主题要是花钱的话还不如我自己来写，也费不了多少事） 但是原作者已经两年没有更新仓库了，再加上原作者已经转战wordpress，我有理由怀疑Typecho版本已经停更了。 至于为什么选择Typecho。。。主要是sqlite搭建比较香。 主题预览 引用站外地址，不保证站点的可用性和安全性 张洪Heo图集 张洪Heo 项目地址Github 安装使用教程GitHubWiki TimePlus由我开始维护既然原作者高可能性已经不打算维护，我提交pr估计无论是从审核、调试速度上来说都不方便。所以就另开炉灶。 Plus寓意着这个主 ...

一般来说我都会做个宣传图来汇报一下近期的博客改动。近期改动比较多，是时候介绍一下了。

今天定制了一下邮件的回复样式，之前Twikoo默认的比较简洁，我做了一个和我博客比较相近的样式。定制了一下。 有需要的小伙伴可以自取。 邮件样式 其实也是比较偏简洁的那种吧。 兼容移动端和电脑端。 移动端样式： 电脑端样式： 代码1<div class="page flex-col"><div class="box_3 flex-col" style=" display: flex; position: relative; width: 100%; height: 206px; background: #ef859d2e; top: 0; left: 0; justify-content: center;"><div class="section_1 flex-col" style=" background-image: url(&quot;这里更改为你的网站图标&quot;); position: absolute; wid ...

我发现很多人的网站并没有对Safari进行一个适配，导致使用iOS的小伙伴在收藏这些网站或者将这些网站添加到桌面时会有一个比较奇怪的展示样式。 样式对比左侧为不兼容safari的书签栏，右侧为兼容 左侧为不兼容iOS添加到桌面，显示较长的名称和网页截图作为图标。 右侧为兼容iOS添加到桌面，显示自定义的名称和图标。 添加方法添加方法非常简单，Safari提供了自定义的方案。下面这个链接是官方文档。 引用站外地址，不保证站点的可用性和安全性 Configuring Web Applications Apple 只需要在head标签中插入相关代码即可。 如果你使用的是Hexo的Butterfly主题，可以直接在配置文件的inject的head中添加相关代码。 1234- <link rel="apple-touch-icon" href="/apple-touc ...

腾讯云已经跑路了，挂在腾讯云函数的twikoo已经私有部署了，还剩下一个即刻短文还跑在腾讯云开发的服务上。 找了黑石原来的leancloud方案，主要黑石的公众号是订阅号不是服务号，发起来很麻烦，没有开源无法私有部署。 难道真的要像木木学习魔改Twikoo？ 在改友链的时候突然想到为什么不能用与butterfly相同的yml生成方式呢？ 这个文章就简单发一下生成逻辑和代码。 本教程仅作为开源使用，需要有一定魔改基础。具体参考哔哔 即刻短文静态部署版测试中，本文可能会不定时更新。 什么是即刻短文相比发博客文章需要考虑选题、编写详细的内容，即刻短文可以提供一个快捷的短文字解决方案，避免博客短文章过多造成的整站文章质量下降。 与黑石哔哔有何不同？有一个表格介绍一下 不同之处 黑石哔哔 即刻短文（静态部署版） 即刻短文（旧版） 部署服务 leancloud动态部署 静态部署 腾讯云动态部署 费用 免费 免费 首月免费 服务位置 ✅leancloud ✅本地 腾讯云 发表方式 指定公众号绑定后发布 修改本地yml文件发布 ✅get请求 加载速度 js请求leanclo ...

提到随机网页跳转，大家就想到hexo-generator-random，我之前也是使用这个插件来做随机网页，这个插件的原理是生成一个html，只要访问这个html就可以进入随机的文章，但是这种方法有问题。 开启pjax的小伙伴由于random.html不支持pjax，导致中间页会重新加载两次 进入随机页面之后无法使用后退回到上个页面。 看了@JAYHRN的教程Hexo 博客实现页面随机跳转之后，他是使用Hexo函数直接生成，那么为什么不能用这种方法生成js直接通过函数跳转呢？ 说干就干。 创建文件创建themes/butterfly/scripts/helpers/random.js文件 1234567891011hexo.extend.generator.register('random', function (locals) { const config = hexo.config.random || {} const posts = [] for (const post of locals.posts.dat ...

博客有很多引用链接的方式，但是一直使用超链接的样式不是很优雅，而且无法引起注意。所以还是用外置标签准备写一个超链接网址卡片。 外置标签的编写方式从Akilar中学得： 引用站外地址，不保证站点的可用性和安全性 DIY外置标签的简单写法与应用 Akilar 你也可以看到这个全新的网址卡片样式就像上面这样。 效果预览 引用站外地址，不保证站点的可用性和安全性 获取网站的Favicon图标并显示在你的网页上 owen0o0 1{% link 获取网站的Favicon图标并显示在你的网页上,owen0o0,https://github.com/owen0o0/getFavicon %} 添加外置标签新建文件themes/butterfly/scripts/ ...

之前自己的网页pjax时灵时不灵，真的是奇了怪了。研究了一下pjax的文档，发现很多东西都是用的有问题，因为最开始魔改页面的时候都没注意过pjax，所以留下了大量屎山代码。 这个文章可以更好的帮助你去魔改页面，并且保留pjax。 页面跳转pjax的element是用来告诉pjax，点击这个东西就要触发pjax啦！使用butterfly的小伙伴可以发现，pjax.pug文件中是对所有a标签进行了注册。但是有的时候我们是使用onclick进行页面跳转的，而这个元素并不是a标签。 1#bber-talk.swiper-wrapper(onclick=`window.open('/essay/','_self')`) 这种方式打开的链接不符合注册条件，所以点击之后不可能是pjax的跳转。 我们可以使用pjax文档的pjax.loadUrl("/your-url")来进行跳转 1#bber-talk.swiper-wrapper(onclick=`pjax.loadUrl(&qu ...

腾讯云有一个类似于语雀的性能监控平台，每天50万的额度，这篇文章介绍Butterfly主题如何引用这个插件。 开启插件首先进入腾讯云，进入插件中心，打开服务。 在应用列表中，新建接入。 选择使用腾讯云cdn加速的域名，然后下一步 复制上报ID备用 插入代码进入themes/butterfly/layout/includes/head/analytics.pug文件，任意位置添加：（注意缩进） 12345678910if theme.tencentcloud_analytics script(src=`https://cdn-go.cn/aegis/aegis-sdk/latest/aegis.min.js`) script. const aegis = new Aegis({ id: '!{theme.tencentcloud_analytics}', // 上报 id reportApiSpee ...

我们设计网页通常使用栅格来做屏幕的自适应，我们在sketch上设计虽然不支持自适应画板，但是我们一般都是先完成pc端的画板布局。 工具栏我们需要创建栅格需要通过工具栏的显示组件，如果你没有这个组件需要手动来添加。 如果没有的话右键单击工具栏，选择「自定义工具栏」。将百分比缩放组件拖拽到工具栏中，记得把「显示/隐藏布局按钮也拖拽上去」。 创建你的画板sketch预置了非常多的网页画板，选择一个适合的即可。 设置你的栅格 我们选择布局设置。 通常来说我们可以按照下面来设置。 你需要更改的是 总宽度pc网页设计的话，总宽度推荐1200px，按照bootcssv3文档我们可以看到。推荐的大桌面显示器宽度就是1200px。 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 ...

我似乎从来都没有说过这方面的理论，只说过一些局部功能的设计原因和魔改。在网上大多也都是组件的魔改。这篇文章我想写一个纯理论的文章，以我现在的博客为例子，引申出博客的设计思考。 相信通过这篇文章，能够给想要修改自己博客的小伙伴一些方向性的建议，而不是盲目使用网上的组件，看见一个好就直接扒下来。 这篇文章也只是阐述我的理解，可能有个人的主观偏好。 做博客是为了什么？这个是每个人一开始搭建博客的原因，而且会随着时间慢慢去改变。说起我最初想要将自己遇到的问题都写在博客里，这样下次自己再次遇到的时候，不会因为相隔的时间过长而找不到。 所以我们可以看到，我的最初目标就是「通过搜索关键词来快速找到曾经写过的文章，方便找到解决方案」。 所以我的博客首先最重要的就是优化搜索。 曾经在butterfly版本比较低的时候，因为文章比较多，加载本地搜索索引耗费的时间非常长，所以当时首先采用algolia。两年前我记得当时还没几个人在用这个，但是我知道我需要这个，所以即使配置比较麻烦，还是首先选择了algolia。 这就是设计目标，你的每一个功能，都需要有需求来支撑。 你没必要为了并不需要的功能花费时间，而是需 ...

使用错误的cdn会导致博客服务无法访问，访问速度过慢的问题。因为众所周知的原因jsdelivr无法使用了，但是替换cdn不知道替换成什么比较好。使用新版butterfly的用户可以切换成本地模式，但是如果是旧版butterfly用户的话或者新版想要提升速度就需要第三方的cdn了。 在我的友情链接里对于4秒内完成加载和图片加载的站点给了流畅标签，期望大家都能够加快自己的博客访问速度来提升友链整体的访问体验。 如果你觉得我的静态站访问速度还算不错（特别是第一次访问），可以试试替换为下面的cdn。 替换方式更改博客配置文件themes/butterfly/_config.yml 新版butterfly更改cdn的option配置项 旧版butterfly直接更换cdn链接即可 链接我这里只列出我在用的cdn，我没有用到的cdn可以在评论中留言，有时间我会补充。 jquery1https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.mi ...

之前sticker-heo一直使用的是jsdelivr链接，但是因为近期jsdelivr已经彻底失效，近一个多月以来本项目已经换了三家cdn了。更换cdn确实提高了访问速度，但是旧版的sticker-heo表情仍然是不可访问的状态。 这里介绍一下如何更改旧表情链接地址方法，其他评论系统大同小异，这里只介绍twikoo。 下载数据库内容进入数据库页面在腾讯云云开发 -> 数据库里找到twikoo的comment。 导出所有数据我们点击导出按钮，导出所有数据，选择json格式。 替换掉之前的数据我们可以使用vscode打开这个json文件，使用替换功能来查找并替换掉下面的内容 123https://gcore.jsdelivr.net/gh/zhheo/Sticker-Heo@mainhttps://github-do.panbaidu.cn//https://raw.githubusercontent.com/zhheo/Sticker-Heo&#x ...

其实一切的一切来自于百度统计的一段话： 尊敬的百度统计用户你好，基础统计报告对于分析云站点最早查询时间将调整为2年，其余站点最早查询时间调整为1年，为避免数据丢失，建议你于2022.4.12前完成历史数据的下载或截图备份。如有疑问或更久的数据存储时长需求，你可发邮件至ext_tongji_reply@baidu.com 或 点击咨询 感觉说删就删让我产生了危机感，我其实对数据存储安全都非常敏感。一般我的文件都会保存三份以上的备份（比如微信聊天记录就存了三份，每周更新备份），这种说删就删让我感到一丝丝恐惧了。 所以百度统计我会继续用，但是要找个一起用的统计了。统计基本上都用过，cnzz界面感觉是上古时期的东西，谷歌速度堪忧，一个偶然的机遇让我看见了51la这个。初中的时候做论坛用过，后来就再也没碰过这个统计了。 界面界面来说算是现代的后台 ...

如果不清楚如何部署友链朋友圈可以看这篇文章：友链朋友圈5 - 我的部署历程与主题样式分享 我的友链页一般都属于来者不拒，加着加着面临几个问题，一个是友链太多看不过来，即使点进去又发现没更新。所以友链朋友圈成功解决了这个难题。在这个基础上看了一下友链朋友圈的api文档，寻找一些玩法。其中「钓鱼」功能就是根据radompost API来获取的，经过几轮测试和版本迭代，逐渐稳定不再更新，所以放出来。 钓鱼当人们有成片的文章列表时，人们趋近于去浏览他们。而当只有一个内容时，人们才会去仔细思考。 配置钓鱼功能配置非常简单，在需要的地方部署HTML代码： 1234567<div class="title-h2-a"> <div class="title-h2-a-left"> <h2 style="padding-top: 0;margin:0.6rem 0 0.6rem;">🎣 钓鱼</h2><a class="random-post-start" ...

此文章已更新：友链朋友圈5 - 我的部署历程与主题样式分享 冰老师很久很久以前做的友链朋友圈，功能很棒但是配置过程为了追求免费涵盖了特别特别多业务。之前部署成功过一起，但是后来担心GitHub action限额和leancloud的多个限制，在一次无法使用的情况下，彻底被我给移除了。 上周得知友链朋友圈已经支持服务器部署了，全程使用服务器不用第三方服务，那不得整一个？ 从功能性上一开始用的原装的，后来发现木木的功能更多一些，所以现在用的是木木的前端结构。这个文章只作为记录整个部署过程，不作为教程使用。 前端部署文档在前端部署用的木木的部署方式：立即访问文档 后端部署文档在后端部署用的官方文档：立即访问官方文档 在部署方式上使用的是最简单的server+sqlite方式，推荐有服务器的小伙伴使用这个方式。 部署后端因为用的宝塔面板，所以很轻松的安装了文档要求的python版本。 后来按照文档执行./server.sh时发现api进程始终无法运行。 后来与二猹探讨完后发现是因为没有安装aiohttp库，直接pip3 install aiohttp安装成功后就可以正常运行了。 友链适 ...

因为图床用的腾讯云cos，挂的cdn不支持外网访问（我也没打算支持），所以使用外网小伙伴无法访问任何图片，很多人以为是本站的图床挂了，然而可能是因为用户自己是用的外网。那么最好的方式就是告诉用户，你用的不是国内网进行访问。 如果你不需要外网访问你的网站，也可以利用这个js将网页跳转到其他页面或者其他操作。 效果预览 实现方式实现方式特别简单，首先引入判断国家ip的api： 1<script src="//geoip-js.com/js/apis/geoip2/v2.1/geoip2.js" type="text/javascript"></script> 然后再执行判断 1234567891011121314151617var foreignTips = (function () { var onSuccess = function (geoipResponse) { if (!geoipResponse.country.iso_code) { return;
...

看到很多魔改的小伙伴都自定义了右键菜单，例如糖果屋的saoUI右键菜单、volantis的右键菜单等等。最近发现DoraKika写了个右键菜单，风格简洁，看起来难度不大，所以修改了个样式就移植过来了。 原版链接本文魔改根据这个教程进行的二次修改。想要魔改的小伙伴可以参考这篇文章的教程来。 本站样式（Acrylic风格）因为还没来得及移植比较多的功能，所以就先上这三个功能了。以后可能将一些文章链接放在里面。 我做了什么？ 增加一个右键菜单的遮罩，防止在有菜单的情况下还能点击页面。 增加一个超链接样式 增加繁简切换功能 图标使用font awesome 样式兼容Acrylic 安装教程可以参考这个教程进行安装。本文只包含文件内容。 ...butterfly/layout/includes/dorakika/rightmenu.pug 123456789101112131415161718192021#rightMenu .rightMenu-group.rightMenu-small .rightMenu-item#menu-backward ...

本文以butterfly主题举例，其他主题自行适配 好久都没写魔改教程了，上次写的时候还是在上次。有一说一，近期的魔改基本上都是针对页面的变化。最近刚适配的1500px宽度，大宽度带来的视觉沉浸感非常棒，但是会带来很多问题，例如之前的主题横向元素过少，以至于在横屏比较宽的场景下元素都会被拉伸得很大。所以这几次版本的迭代都是为了增加横向的元素，减少被拉伸感。 偶尔逛过我的博客的小伙伴应该看到了我在置顶区域新增了一个小组件。 这个东西是由codepen的一个开发者制作的，我只是改了一点文字和样式，而整个移植过程非常快速。 使用iframe移植这里用到的是iframe。具体定义和用法可以搜一下，简单来说就是网页里面嵌入了一个网页。所以我们只要将喜欢的codepen项目做成一个单独的网页就可以轻松的嵌入了。你可以在你的博客中嵌入一个游戏，一个动画。可以嵌入到加载页面、侧边栏以及文章之中。 导出Codepen项目首先我们就需要将codepen项目导出为最基本的html、css、js。首先进入codepen挑一个公开项目。 我们在右下角的选项中选择导出。 导出需要编译一段时间，成功之后可 ...

我的博客右下角有一个小Guli的形象，他一直在看左上方的文章。这个是当初设计这个元素的原因，也是在边缘视觉给予用户的焦点暗示。当用户出现分心的时候，因为人类对眼球的视觉捕捉一般都是最快（即便是guli这个形象眼睛与人类相比很奇怪），所以人们在分心的时候看到Guli后很容易拉回视觉焦点到文章上。 情景但是感觉有点缺少灵魂，首先就是对于鼠标的交互太少了，最开始的时候只有一个css写的鼠标悬浮状态变小，感觉没有交互。后来发现可以通过js重新设置图片src地址来重置播放。 1document.getElementById('guli_gif').src = document.getElementById('guli_gif').src 那么就容易多了。 代码首先一个只播放一遍的Gif+触发事件重新播放的js。 我这里设置成了鼠标悬浮状态会触发 1234var gulitop=document.getElementById('guli_gif'); gulitop.onmouseover=function(){ docum ...

因为点击超链接是个特别麻烦的事情，需要鼠标移动到指定的标题才可以（这真的是太累了）。所以博客的文章卡片、分类页面都是不需要鼠标移动到标题就可以点击进入跳转页面的。我是通过给父级元素添加onclick的方式来添加跳转。但是这就出现了一个问题，点击标签的时候会从子元素的事件触发一遍，然后再触发父元素事件。也就是说点击标签的时候会跳转两个页面。 如何解决这个问题呢？ 添加事件给子元素添加下面的onclick事件： 1window.event.cancelBubble=true; 可以阻止子元素的点击事件触发父元素的事件。我们使用html的时候可以添加： 1onclick="window.event.cancelBubble=true;" 完整例子（子元素）： 1<a class="article-meta__tags" href="/tags/%E5%BF%85%E7%9C%8B/" event.cancelbubble="" onclick="window.event.cancelBubbl ...