看到很多魔改的小伙伴都自定义了右键菜单，例如糖果屋的saoUI右键菜单、volantis的右键菜单等等。最近发现DoraKika写了个右键菜单，风格简洁，看起来难度不大，所以修改了个样式就移植过来了。 原版链接本文魔改根据这个教程进行的二次修改。想要魔改的小伙伴可以参考这篇文章的教程来。 本站样式 ...

本文以butterfly主题举例，其他主题自行适配 好久都没写魔改教程了，上次写的时候还是在上次。有一说一，近期的魔改基本上都是针对页面的变化。最近刚适配的1500px宽度，大宽度带来的视觉沉浸感非常棒，但是会带来很多问题，例如之前的主题横向元素过少，以至于在横屏比较宽的场景下元素都会被拉伸得很 ...

我的博客右下角有一个小Guli的形象，他一直在看左上方的文章。这个是当初设计这个元素的原因，也是在边缘视觉给予用户的焦点暗示。当用户出现分心的时候，因为人类对眼球的视觉捕捉一般都是最快（即便是guli这个形象眼睛与人类相比很奇怪），所以人们在分心的时候看到Guli后很容易拉回视觉焦点到文章上。 情 ...

因为点击超链接是个特别麻烦的事情，需要鼠标移动到指定的标题才可以（这真的是太累了）。所以博客的文章卡片、分类页面都是不需要鼠标移动到标题就可以点击进入跳转页面的。我是通过给父级元素添加onclick的方式来添加跳转。但是这就出现了一个问题，点击标签的时候会从子元素的事件触发一遍，然后再触发父元素事件 ...

最近主题的更新是想让页面更加丰富起来，因为之前为了界面清爽删掉了很多功能，虽然一种程度上算是简约，但是对于个人博客来说不想只包含文章，还应该多一些信仰之力。所以为了高大上的逼格（狗头）所以分析了一下Butterfly主题的打字机效果。 Butterfly用的是typed.js来做的打字机效果。开箱即 ...

之前公告显示的是微信公众号的关注，但是因为微信的诸多限制和微信的生态以至于我不是很想再做公众号相关的东西了。因为我的作者组件完全替代了公告的功能，所以我将公告移除了。但是这带来了一点问题，就是在显示的时候总是缺点什么。那么就来做个新的组件吧！ 之前已经做过诗词放在页脚，但是新版页脚为了布局整洁给移除 ...

404页面是在文件不存在的时候产生的。设想一个场景，用户急于寻找问题的答案，那么当用户通过例如搜索引擎和错误的内链进入到404网页时，用户可能下意识就会关闭网站。如何在404页面留住用户呢？ 在无法判断用户的来源和目标的情况下，最好的还是做主动推荐。所以我在404页面的下方添加了最近的文章列表，使用 ...

想要在隐私协议里面添加展示用户自己会被暴露的信息，研究了一个获取用户信息并展示的方法，利用了ipip.net来获取用户的ip和地理信息。 DemoDemo 安装方式页面引入js 1<script src="https://cdn1.tianli0.top/gh/zhheo/JS-H ...

在研究二维码生成的时候发现一个好多年前的qrocde项QRCode.js然后就想用这个js直接生成该页面的二维码。 不过生成二维码在chrome浏览器中已经支持右键单击直接生成了，但是很多人不知道，也不清楚怎么用。我加一个二维码功能只是为了丰富页面，提醒分享，并方便手机查看。 Demo 安装方式页面 ...

魔改了一下Twikoo的样式，拿出来分享一下，喜欢的可以搞一手。推荐用官方的。 查看样式 魔改内容 先输入评论再输入个人信息 信息整合，让结构更有条理 将工具放入输入框，更符合直觉 删除了我个人不需要的按钮 如何装配 使用魔改版可能会有更新和不兼容风险，请须知。魔改js随缘更新，可能与最新版不同步 ...

之前关于哔哔的教程写的都很乱，并且因为哔哔和Twikoo可能造成的冲突问题导致很多都访问不了，经常出现缓存和无法加载的情况。最终还是用json加载的方式来做bb了。这篇教程可以作为最终版的哔哔教程了。（再也不想折腾这个东西了） 这篇教程不再采用外链形式，一篇搞定全部。本功能已经基本完成，不再添加新 ...

博客的滚动条有个问题，就是点搜索的时候网页会有一定的偏移。这个问题是由于滚动条占用了DOM，导致当不能滚动的情况下，滚动条不显示导致整体网页会鬼畜一下。其实只要一条css就能搞定。 修正滚动条位置通过overlay可以将滚动条独立出来。 123html { overflow-y: ove ...

之前用的一直是图片画廊，感觉图片画廊的样式不是很好看，最近寻觅的时候发现了一个比较有趣的方形卡片的视差效果感觉很不错。所以就将原本的项目移植到了分类页面。整个移植是针对Hexo博客来的，不过应该是能通用更多的页面。 展示效果 Demo（目前采用非三维效果） 引用站外地址，不保证站点的可用性和 ...

列表如果都是统一的样式、高度未免有些过于单调和重重复。在一些关键性文章中加一些特殊的样式也是我们常用的举措，例如文章置顶。但是文章置顶多了就会看不见新文章，置顶折叠展示的力度又不够。所以对于有特殊意义的文章展示特殊的效果是非常必要的，丰富层次。 这个文章的核心思路就是给文章的markdown文件里添 ...

有些时候我们需要对不同地域的用户做一些限制，比如在北京的用户不能查看文章正文等。如何判断用户所在的地域并针对不同的地域做出限制呢？这里利用sohu的地域判断API。这篇文章用Butterfly的评论功能做地域限制为例子。 本文以pug代码为例，html代码在文章后面。 城市获取1234script( ...

本项目已经停止维护，但仍能正常使用，不再进行答疑。新版本项目入口 第一个写的测试版有几个问题，这个版本中使用冰老师那年今日同款Swiper来进行滚动，滚动更加丝滑，并且没有pjax的疯狂滚动问题。并且鉴于Swiper有更多的扩展性，这个功能还有更多发挥空间。 样式预览 相比旧版本相比旧版本增加特 ...

今天尝试分享自己网站到微信的时候发现微信的缩略图取得很奇怪。所以找了一下如何显示自定义内容的方法，发现常说的使用微信sdk的方式太麻烦了，对于只有一个前端的静态博客，简单化是最好的。 效果预览 添加代码首先准备一张300*300的图片作为缩略图。 在head头部添加一个div，包含img标签。 12 ...

合理的使用a标签的rel属性必不可少，在适合的场景下使用正确的rel标签可以提升网站的安全性和保持搜索引擎权重不会流失。有利于搜索引擎中的排名。 nofollow本意来自于搜索引擎对于垃圾广告评论的抓取，很多打广告的为了增加自己的搜索引擎权重，所以在非常多的网站上使用a标签来留言。 建议适用范围非 ...

本项目已经停止维护，但仍能正常使用，不再进行答疑。新版本项目入口 根据林木木的哔哔教程第二弹熟悉的味道，不一样配方中的首页展示滚动条进行魔改了一下，结合之前发布的Butterfly下自定义加载页底部滚动文字方法做成了现在的首页展示哔哔的样式。 效果预览 Demo 查看如何配置bbHexo的But ...

本项目已经停止维护，但仍能正常使用，不再进行答疑。新版本项目入口 本项目来自林木木发的「哔哔点啥」微信公众号 2.0做的Butterfly适配。可以通过动态发一些一句话几句话的动态而不是写一篇博客，减少水文，提升整站文章质量。类似朋友圈。 效果预览Demo 关于首页滚动哔哔可以参考本文 关于首 ...

这年头基金已经成为90后的社交工具了，今天涨了跌了，从一无所有到家破人亡（误。给朋友展示自己的基金组合是非常有趣的事情。（但不应该劝他人购买基金，如果一直跌就是感情破裂的开始，特别是新入场的一般都拿不住，跌了10个点就要卖了。 在这个背景下写了一个能够看自己的基金组合估值的小组件，作为交流的入口。感 ...

之前折腾表情的时候发现图片的url根本就打不开，导致所有的表情都无法预览，这是令人屎尿不及的。在打开我的图片url的时候提示： 1234567<Error><Code>NoSuchKey</Code><Message>The specifie ...

最近在用flex布局，每次用总是忘了flex的属性，还需要看一下。在这先转了这个我经常看的flex布局文章，省的每次还要去找了。 本文为转载文章，以下内容来源于 Flex 布局教程：语法篇 阮一峰 ...

关于webp格式的好处，我在很久之前转载过一篇文章：WebP 相对于 PNG、JPG 有什么优势？那个时候我的博客刚改成使用webp格式，不过后来出了一些问题导致我回滚了这个操作。 时隔近一年时间，我的博客再次重新支持webp格式了。这篇文章主要是介绍我的博客是如何判断浏览器是否支持webp格式并将 ...

再博客优化的过程中我们经常会嵌入很多第三方的js，第三方js提供更丰富的功能，但是却拖垮了网页的加载速度。这个时候我们可以使用async/defer来推迟js的加载。 在HTML5以前，script标签没有这两个属性，而浏览器单纯的按照顺序解析（解析）并执行，HTML5之后，我们可以在脚本 ...

最近经常会魔改一些博客上的样式，增加一个自己魔改的css，学到了css的选择器。css选择器可以定位对应的html标签、元素等。看到了一个css选择器的使用列表，在博客中粘贴出来。 本文为转载文章，以下内容来源于 CSS ...

空格的替代符号有以下几种： 名称 编号 描述 &nbsp; &\#160; 不断行的空白（1个字符宽度） &ensp; &\#8194; 半个空白（1个字符宽度） &emsp; &\#8195; 一个空白（2个字符宽度） &am ...

本文为转载文章，以下内容来源于 WebP 相对于 PNG、JPG 有什么优势？ 知乎 hexo如何采用webp格式。怎么做到的？ 如何使用 ...