hexo个人博客优化魔改非插件实现为博客增加安全跳转中台页面
🙂前言
网络安全的问题这些年越来越被关注,所以各大平台网站例如微博,微信,qq,网易等,都在这几年为自家的网络产品添加了一个安全跳转的中台页面,甚至微博对于跳转链接必须是企业认证才能进入微博的安全白名单,可以说是把安全做到了极致(真是可恶啊,草根博主的博客那就别想加入到微博的白名单中…)
当然除了安全问题,对于 SEO 也是必要的一项加分操作。例如早年小波博客的好友链接转卖后,被用于不好的产品推广网站,而小波未能从博客上及时去掉,这样就会连累自己的博客很容易被搜索引擎拉入黑名单中,就算及时处理,也可能在外链的权重上或多或少受到波及。
加了安全跳转中台以后,这样可以让自己的产品主域名成功与外链间接通过中台串联,而不是直接关系。
最后的最后,当然所有的功能初衷都是以人为本,之所以网络安全问题愈发被关注,也是因为网络带来了很多好处,同时也带来不好的影响,所以增加安全跳转中台页面也间接提升了网络产品的用户体验。
😍廿壴博客安全跳转中台页面成品效果
gitee仓库地址:safeGo
🧐仓库文件说明
go.html
安全跳转中台html页面
因为小波个人有分享素材提供下载,所以除了支持作为安全跳转中台,也是提供下载相关操作的功能页面。
配置说明 config
键名 | 描述 | 值 |
---|---|---|
title | 标题 | string |
iconFavicon | 地址栏图标 | string |
mpImgSrc | 二维码图片地址 | string |
blogName | 博客名称 | string |
blogDescription | 博客描述 | string |
safeUrl | 白名单 | array |
tipsTextError | 错误提示文案 | string |
tipsTextDownload | 下载提示文案 | string |
tipsTextDanger | 不在安全范围的文案 | string |
tipsTextSuccess | 安全范围的文案 | string |
textDanger | 不在安全范围的跳转提示文案 | string |
textSuccess | 安全范围的跳转提示文案 | string |
wpValidate | 下载功能的验证码 | string |
go.js
博客调用的跳转方法
代码说明
1 |
|
提示
NzcheckLink
方法:
小波设计博客和中台的跳转链接约定:如果是下载则方法给跳转地址后补上
type=goDown
,所以页面的超链接 a 标签需要增加属性data-download="goDown"
eg:
1
<a href="https://pan.baidu.com/s/1jShRisVX9H9_LHqch_V_lQ?pwd=mfsq" target="_blank" rel="noopener external nofollow noreferrer" data-download="goDown">点我去廿壴博客的百度云下载</a>
排除规则如果小波代码默认条件的不能全面覆盖你的站点超链接类型,请自己根据情况补充(PS: 这里小波偷懒了没有搞成方法的参数传入…嘎嘎)
NzcheckLocalSite
方法:
- 把
safeUrls
域名改成自己博客的
🤔博客如何调用
首先把仓库文件复制贴入hexo博客
source
文件夹下非hexo博客则贴入博客的根目录
增加调用代码
① 不采用引入 js 文件,减少1次请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14// 通常是 layout.ejs 在 </body> 前贴入以下代码
<script>
// 把 go.js 中代码贴入
const safeGoFun = {
NzcheckLink: () => {},
NzcheckLocalSite: () => {}
}
document.addEventListener("DOMContentLoaded", function () {
safeGoFun.NzcheckLink(
".post-content a:not(.social-share-icon):not(.fancybox):not(.not-check-link)"
);
});
</script>代码解释:页面 dom 加载完成后,文章页不是分享按钮,不是图片灯箱,
class
类名不含有not-check-link
执行调用,所以.post-content
根据自己的博客修改,可改成body
的class
类名,则全局覆盖not-check-link
是小波自己设计的约定类名class
,用来统一排除不调用跳转方法的链接1
2
3
4
5
6
7// 如果只给文章页添加,则需要判断只在文章页调用
// fluid主题 栗子🌰:
<% if(is_post()) { %>
<script>
... 同上
</script>
<% } %>② 直接引用 js 文件 推荐
1
2
3// 通常是 layout.ejs 在 </body> 前贴入以下代码
<script src="/go.js"></script>注意
go.js 文件:
.NzcheckLink(".post-content a:not(.social-share-icon):not(.fancybox):not(.not-check-link)"
的.post-content
同 ① 手动一样,根据自己博客文章页或整站body
的class
名字修改文章标题等超链接不需要被调用的统一+个
class
<a class="not-check-link"></a>
,如果本来有class
则里面追加safeUrls
域名改成自己博客的
go.html 文件:
config
根据自己博客文案修改,添加友链白名单
提示
如果你的博客也是 fluid 并使用 waline 评论,则还需要在
waline.init(options)
后再为 waline 评论补上调用,因为 fluid 主题这里采用了懒加载1
2
3
4
5
6
7
8
9// fluid主题 栗子🌰:
...
waline.init(options);
// 监控滚动到留言板执行回调 -- 添加外链跳转页面
Fluid.utils.waitElementVisible('#waline .wl-cards .wl-item', () => {
setTimeout(() => {
window.NzcheckLink("#waline .wl-cards .wl-item a");
}, 1500);
});代码解释:因为 waline 的初始方法异步,所以需要自己监控判断 waline 的评论 dom 显示以后再执行调用
😚未来扩展
- 可以充分利用
github
或者vercel
,把安全跳转中台页面部署上去,这样可作为独立的安全中台站点使用,更灵活、更易后期扩展。 - 下载的安全验证码可扩展为通过其他后端服务返回。
- 安全白名单参考微博等网络产品,通过数据库维护而非前端页面维护。
😊hexo同类产品插件
一开始小波也想找 hexo
的插件,例如 hexo-external-link
但是发现都集成太多,太重了,像超链接末尾增加小图标尾巴,很早小波就写了文章用css即实现。
考虑对于我自己来讲需求不太对口,所以最后选择自己开发写了一个页面。
😊来自小波的 bilibili 视频教程
🙂相关参考资料链接
『旅行者』,帮小波关注一波公众号吧。
小波需要100位关注者才能申请红包封面设计资格,万分感谢!
关注后可微信小波,前66的童鞋可以申请专属红包封面设计。
微信
支付宝