为博客添加赞助按钮遇到的坑
最近在github上找到了一款比较合适的赞助页面 Kaiyuan/sponsor-page ，就想着将它添加到博客文章的底部。万万没想到，大坑正在等着我。
准备工作
其实我最早看中的是原版页面的Simple样式，为了更符合自己的需求，我做了一些调整工作：
- 去除Paypal以及bitcoin的按钮。
- 因调整页面的CSS居中赞助按钮。
- 调整github图标位置适配赞助按钮。
- Simple样式的背景图居中并调正。
- 替换Drinks样式的咖啡图标。
- 调整Drinks样式的模糊值。
- 添加站点图标及robots.txt文件。
- 制作成Docker镜像方便部署，镜像地址: kimi360/sponsor 。
去除Paypal以及bitcoin按钮主要考虑以下几个方面:
- Paypal的按钮为连接形式，点击后会页面跳转，体验上与其他按钮风格不一致。
- Paypal的按钮为连接形式，制作成Docker镜像启动时需要脚本处理替换连接信息。
- Paypal跳转后的连接中包含个人姓名及地区，会造成个人信息的泄露。
- Paypal及bitcoin在国内使用的也相对较少。
使用Docker进行部署后，就可以使用iframe嵌入到我们的博客中了。
嵌入页面
我们可以在写作每篇文章的最后加上我们的iframe，这是最简单的方式。更为稳妥的方式当然是将赞助按钮加入到我们博客主题的模板中。
Hexo 主题结构通常如下所示：
theme folder
├── languages // 多语言文件夹
├── layout // 页面文件
├── source // 资源文件
└── _config.yml // 主题配置文件
我们从页面文件开始入手
先在 themes\hexo-theme-aomori\layout\_partial\post 下新建 sponsor.ejs 文件。添加如下内容：
<% if (post.layout !== 'tweet') { %>
<div class="article-sponsor">
<iframe src="http[s]://赞助页地址" frameborder="0" scrolling="no"></iframe>
</div>
<% } %>
修改 themes\hexo-theme-aomori\layout\_partial 下的 article.ejs 文件。搜索关键字 post.content ，在下面新增代码引入 sponsor.ejs 文件。
<div class="article-entry post-inner-html hairline" itemprop="articleBody">
<%- post.content %>
<!--引入 `sponsor.ejs` 文件-->
<%- partial('post/sponsor') %>
</div>
接下来调整一下CSS
修改 themes\hexo-theme-aomori\source\stylesheets 下的 style.scss 文件，新增样式
.article-sponsor {
padding: 0;
position: relative;
iframe{
overflow-x:hidden;
overflow-y:hidden;
border:0px none #fff;
min-height:240px;
width:100%;
}
}
保存所有文件，hexo g 生成一下页面，预览……
遇到坑了
页面生成倒是没有什么问题，hexo server 预览一下…屁都没有，这是什么情况？
- F12检查一下页面元素，能够查看到 iframe 代码，那么文件引入应该没有问题。
- 清空
sponsor.ejs内容，只插入 iframe 代码，赞助按钮显示，问题也不在iframe代码上。 sponsor.ejs在只有 iframe 的基础上套上 div ，赞助按钮不显示。sponsor.ejs去除class="article-sponsor"，赞助按钮显示。class="article-sponsor"修改为class="article-copyright"，赞助按钮显示。
看起来是CSS的锅。
坑1
F12重新看看下载的CSS文件是否有问题，发现站点使用只使用了 build.css 和 custom.css 。研究了一番，原来 style.scss 是通过 gulp 压缩生成 custom.css。
进入主题目录，执行 npm install 后执行 gulp css 。 custom.css 顺利生成。
坑2
应该没问题了吧 hexo g 生成一下页面，预览……有毒有毒。
谷歌关键词 加上class后元素消失 后看到这篇文章：HTML页面元素消失问题 。
试着把我的 adguard 临时关闭，万万没想到按钮出来了。搞到最后是广告过滤器的锅。
问题解决
既然找到了原因,修改一下类名就好了。比如 class="article-donate" 。
问题反思
其实这个问题的原因在调整 div 的 class 的时候就应该想到的。这也告诉我们在排查问题的时候除了排查代码本身的问题外也不能忽视一些外部存在的因素。如果最开始的时候换成没有安装广告过滤插件的浏览器进行排查也有可能会更快的找到这个问题的原因。感谢看完这篇文章，喜欢的话可以 给作者一杯咖啡 。