即使没有了XSLT，也不能让读者看到光秃秃的XML！

起因

在半年前，我写了一篇用XSLT美化博客XML文件的文章，自从那以后，每次我在浏览其他人博客的时候，都会看一眼对方博客有没有给自己的订阅文件做美化。不过就在前段时间，我在浏览某个博客的时候，发现他博客的订阅文件，甚至连最基本的XML文档树都没有显示出来。这时候我打开开发者工具看了一眼源代码，发现他也并没有使用xml-stylesheet之类的指令……而且控制台貌似报了些错，好像是出现了什么CSP错误……于是我就想，浏览器显示XML文档树的本质，会不会其实也是一种XSLT？之所以报错也有可能是浏览器在自动引用内置的XSLT时违反了CSP。所以我就问了问谷歌AI，结果似乎真的是这样，比如火狐浏览器就内置了一份XSLT文件，IE浏览器也有。正当我为XSLT的功能感到强大时，谷歌AI随后提到，Chrome浏览器决定弃用XSLT，所以以后不要再用XSLT了😰……
我给我的订阅文件加美化功能才半年，怎么就要不能用了？XSLT出现这么多年都还能用，结果等我加上就要废弃了？当时为了增加这个功能，还是费了不少劲的，怎么能让谷歌说没就没？于是我就开始对这件事进行了调查。

Google杀死了XSLT

从上面Chrome的弃用XSLT文档中，可以发现，这件事的始作俑者是Mason Freed，他在WHATWG中发起了一个Issue，因为XSLT用的人很少，以及实现XSLT的库很老而且容易出漏洞，所以建议把XSLT从Web标准中删除。在这个Issue中可以发现，有很多人表示不满，毕竟这个功能对想要给自己订阅做美化的博主来说还是很有用的。为了对抗谷歌，还有人做了个网站： https://xslt.rip 。
而且XSLT虽然用的人占比也许不高，但从总量上应该还是挺多的，除了用XSLT美化博客订阅的，甚至还有用XSLT作为博客框架的，另外还有一些人提出一部分政府网站也有使用XSLT。
不过Freed看起来对这件事早有准备，他做了一个Polyfill库，通过WASM的方式让XSLT可以正常工作，为了方便大家使用这个库，我顺手给CDNJS发了个PR，以后可以用CDN引用它了。不过使用这个库的前提是需要在订阅中加一段引用JS的代码，像我博客中的Atom订阅，用的是jekyll-feed插件，里面的格式都是写死的，就用不了了……
只不过现在已经没办法阻止谷歌了……而且其他浏览器也表示会跟进，看来我们唯一能做的就是去适应了。

没有XSLT之后的美化方案

纯CSS

虽然XSLT不能用，但不代表xml-stylesheet指令就不能用了，除了XSLT之外，xml-stylesheet同样可以引用CSS。只是似乎完全没见过用CSS美化订阅源的，也许是因为光用CSS能做到的事比较少吧，想用CSS给XML文档加链接之类的估计就做不到了。
但目前能选择的也不多了，既然大家都没写过用CSS美化订阅源，那就让我来写一个吧！然而我并不会写😅……那就只好让AI来写了，我把需求说清楚之后，AI就写出来了：feed.css。试了一下效果还挺不错的，我让AI写的这个版本无论是RSS还是Atom都可以使用，如果有人感兴趣可以拿去用。可惜我的Atom订阅因为用的是插件的原因用不了😭，只能加到用纯Liquid实现的RSS订阅上了。
但用纯CSS的缺点也很明显，没办法操作文档的内容，像修改日期格式的就做不了了，而且也不能添加超链接……XML的标签本身对浏览器来说并没有内建的语义，正常情况下也没法让浏览器把某个标签当作超链接。那难道就没办法了吗？

混合XHTML

如果完全不能修改XML内容，那确实就没有办法了，但如果能修改XML的内容那还是有办法的，简单来说就是混入XHTML，事实上Freed编写的Polyfill库原理上也是利用了XHTML，只要在能作为XHTML的标签中添加XHTML的命名空间，那么浏览器就可以理解它的语义并渲染，像刚刚用纯CSS美化的订阅没有链接，那就可以在根元素中添加命名空间：xmlns:xhtml="http://www.w3.org/1999/xhtml"，然后在合适的位置写：

<xhtml:a href="https://example.com">Read more -&gt;</xhtml:a>

就可以了。只是这样有个缺点，这样写的订阅文件不够“纯粹”，用验证器验证会显示“Misplaced XHTML content”警告。对有洁癖的人来说可能会有点难受😆。
不过如果能接受这种“不纯粹”，那么其实xml-stylesheet指令也没必要了，link标签一样可以用，包括script也是，所以有人写了一个不使用XSLT美化XML的库。
只不过这种方法和XSLT相比还是有一些缺陷，要知道XSLT的本质是转换，是把XML转换为HTML，也就是说转出来的文档本质是HTML，所有的DOM操作都和操作HTML是完全相同的，但是在XML里混入XHTML标签就不一样了，它的本质依然是XML文档，只是嵌入了XHTML命名空间下的元素，所以相应的DOM操作会有一些不同。如果是自己写的纯JS可能还好，如果是用了jQuery之类假定DOM为HTML的库就会出现问题了，因此这也就是那个Polyfill库的局限性，用正常的XSLT执行document.constructor会显示HTMLDocument，而用这个Polyfill库执行完则是显示XMLDocument。因此，直接套用为浏览器原生XSLT编写的旧样式文件，就有可能会出问题，但如果要考虑改XSLT的话那还不如重新写JS，然后用XHTML引入呢。

感想

虽然有一些技术会因为各种各样的原因消失，但这不代表我们就要妥协一些东西，总有一些不同的技术可以解决相同的问题，所以我们只需要用其他的技术去实现就好了。不过这也是没办法的事情，毕竟没人能改变浏览器厂商们的决策啊😂。

Pixiv 日榜

Butterfly 主题

1. 在themes\Butterfly\layout\includes\widget文件夹新建card_pixiv.pug文件，文件内容如下：

   .card-widget.card-pixiv  .card-content    .item-headline      i.fa.fa-image(aria-hidden="true")      span= _p('aside.card_pixiv')    iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:99%;height:380px;margin:0;")

   https://cloud.mokeyjay.com/pixiv使用的是超能小紫提供的服务，也可以自行搭建，搭建方式请看这里

2. 编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置插入以下代码：

   if theme.aside.card_pixiv  include ./card_pixiv.pug

3. 编辑butterfly.yml文件，在card_webinfo下面添加一行card_pixiv: true

4. 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择)，找到card_announcement: 公告, 在下面添加一行card_pixiv: Pixiv日榜Top50(后面的文本可自定义)

5. 如果不想显示，直接把butterfly.yml文件的card_pixiv: true改为card_pixiv: false即可

其他主题

将以下内容插入到需要显示的地方：

<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:100%;height:380px;margin:0;"></iframe>

访客地图

Butterfly 主题

1. 前往clustrmaps网站注册一个帐号

2. 找到Free Tools下面的Website Widget, 点击Get Map Widget

3. 输入你的博客网址，点击Next

4. 根据你自己的喜好选择样式Map widget或Globe Widget

5. 找到如下代码，记住 src(******的部分):

   <script type="text/javascript" id="clstr_globe" src="**********************">

6. 在themes\Butterfly\layout\includes\widget文件夹新建card_map.pug文件，文件内容如下：

   .card-widget.card-map  .card-content    .item-headline      i.fas.fa-globe-asia(aria-hidden="true")      span= _p('aside.card_map')    //- 下面这行适用于3D地图(Globe Widget)    script#clstr_globe(type="text/javascript" defer="defer" src="******************")    //- 下面这行适用于平面地图(Map Widget)    script#clustrmaps(type="text/javascript" defer="defer" src="******************")

   ******部分填写上面的 src, 3D 地图和平面地图任选一个，不用的把代码删掉

7. 编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置插入以下代码：

   if theme.aside.card_map  include ./card_map.pug

8. 编辑butterfly.yml文件，在card_webinfo下面添加一行card_map: true

9. 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择)，找到card_announcement: 公告, 在下面添加一行card_map: 访客地图(后面的文本可自定义)

10. 如果不想显示，直接把butterfly.yml文件的card_map: true改为card_map: false即可

其他主题

将上面第 5 步中的代码插入到需要显示的地方。

文章日历

1. 安装hexo-generator-calendar插件

   npm install --save git://github.com/howiefh/hexo-generator-calendar.git

2. 下载calendar.js和languages.js文件，保存到themes\Butterfly\source\js目录

   • calendar.js
   • languages.js

3. 编辑calendar.js文件，在文件最后}(jQuery));之前添加:

   $(document).ready(function () {    $('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择});

4. 编辑butterfly.yml文件, 以下两个你butterfly.yml文件里有哪个就用那个，不要都用！

   • 在CDN_USE->js下面添加如下内容：

   - /js/calendar.js- /js/languages.js

   • 在inject->bottom下面添加如下内容：

   - <script src="/js/calendar.js"></script>- <script src="/js/languages.js"></script>

5. 下载calendar.styl文件，保存到themes\Butterfly\source\css\_layout目录

6. 在themes\Butterfly\layout\includes\widget文件夹新建card_calendar.pug文件，文件内容如下：

   .card-widget.card-calendar  .card-content    .item-headline      i.far.fa-calendar-alt(aria-hidden="true")      span= _p('aside.card_calendar')    div.widget-wrap    div#calendar.widget

7. 编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置插入以下代码：

   if theme.aside.card_calendar  include ./card_calendar.pug

8. 编辑butterfly.yml文件，在card_webinfo下面添加一行card_calendar: true

9. 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择)，找到card_announcement: 公告, 在下面添加一行card_calendar: 文章日历(后面的文本可自定义)

10. 如果不想显示，直接把butterfly.yml文件的card_calendar: true改为card_calendar: false即可

投票系统

Butterfly 主题

1. 前往widgetpack注册账号

2. 登陆后在点击左侧侧边栏Rating->Install, 你会看到如下代码，记住id:

   <div id="wpac-rating"></div><script type="text/javascript">wpac_init = window.wpac_init || [];wpac_init.push({widget: 'Rating', id: *****});(function() {    if ('WIDGETPACK_LOADED' in window) return;    WIDGETPACK_LOADED = true;    var mc = document.createElement('script');    mc.type = 'text/javascript';    mc.async = true;    mc.src = 'https://embed.widgetpack.com/widget.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);})();</script><a href="https://widgetpack.com" class="wpac-cr">Star Rating WIDGET PACK</a>

3. 在博客根目录/themes/Butterfly/layout/includes/post/目录内新建文件rate.pug, 内容如下：

   #wpac-ratingscript.  wpac_init = window.wpac_init || [];  wpac_init.push({widget: 'Rating', id: #{theme.rate.id}});  (function() {    if ('WIDGETPACK_LOADED' in window) return;    WIDGETPACK_LOADED = true;    var mc = document.createElement('script');    mc.type = 'text/javascript';    mc.async = true;    mc.src = '//embed.widgetpack.com/widget.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);  })();style.  #wpac-rating {    margin-top: 20px;    text-align: center;  }

4. 编辑博客根目录/themes/Butterfly/layout/post.pug文件，在!=partial('includes/post/reward', {}, {cache:theme.fragment_cache})下方添加：

   if theme.rate.enable  include includes/post/rate.pug

   注意缩进if与上面的if对齐

5. 在Butterfly.yml文件内添加：

   rate:  enable: true  id: #上面记住的id

其他主题

将第 2 步生成的代码插入到需要显示的位置。

加载中动画

Butterfly 主题

更新到最新版即可。

其他主题

1. 将以下内容添加到<head></head>标签内：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/loading.min.css">

2. 将以下内容添加到<body>标签后面：

   <div id="loading-box">  <div class="loading-left-bg"></div>  <div class="loading-right-bg"></div>  <div class="spinner-box">    <div class="configure-border-1">      <div class="configure-core"></div>    </div>    <div class="configure-border-2">      <div class="configure-core"></div>    </div>    <div class="loading-word">加载中...</div>  </div></div>

3. 将以下内容添加到</body>标签前面：

   <script>  var endLoading = function () {    document.body.style.overflow = 'auto';    document.getElementById('loading-box').classList.add("loaded");  }  window.addEventListener('load',endLoading);</script>

页脚跳动的♥

Butterfly 主题

1. 编辑博客根目录/themes/Butterfly/layout/includes/footer.pug文件，将©${theme.since} - ${nowYear} By ${config.author}改为&copy;${theme.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}, 将©${nowYear} By ${config.author}改为&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

2. 编辑butterfly.yml文件, 以下两个你butterfly.yml文件里有哪个就用那个，不要都用！

   • 在CDN_USE->css下面添加如下内容：

   - https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css

   • 在inject->head下面添加如下内容：

   - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

其他主题

1. 将<i id="heartbeat" class="fa fas fa-heartbeat"></i>添加到需要显示的位置

2. 将以下内容添加到<head></head>标签内：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

页脚显示网站运行时间

Butterfly 主题

• 编辑博客根目录/themes/Butterfly/layout/includes/footer.pug文件，在最后span=theme.ICP.text下一行添加以下内容：

  #running-time    script.      setInterval(()=>{let create_time=Math.round(new Date('2020-01-03 00:00:00').getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);

其他主题

• 将以下内容添加到需要显示的位置

<div id="running-time"></div><script>setInterval(()=>{let create_time=Math.round(new Date('2020-01-03 00:00:00').getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);</script>

双评论系统

这里以同时使用Valine和Gitalk, 默认使用Valine为例。
请确认Valine和Gitalk已开启并正确配置。

1. 修改themes/Butterfly/layout/includes/comments/index.pug文件，将所有的else if改为if, 并在span= ' ' + _p('comment')下面添加：

   a#switch-comment(href="javascript:void(0);" title="切换为Gitalk" target="_self")  i.fa.fas.fa-toggle-off(aria-hidden="true")

   

2. 隐藏一个评论，保留一个默认评论

   • 隐藏valine: 修改themes/Butterfly/layout/includes/comments/valine.pug文件，在#vcomment.vcomment后面添加(style=‘display:none;’)
   • 隐藏gitalk: 修改themes/Butterfly/layout/includes/comments/gitalk.pug文件，在#gitalk-container后面添加(style=‘display:none;’)
   • 隐藏其他评论系统方法与上面类似

3. 在themes/Butterfly/source/js/third-party/目录新建switch_comments.js文件，内容如下：

   $('#switch-comment').click(function () {  switchComment()  return false})function switchComment () {  const title = $('#switch-comment').attr('title') === '切换为Gitalk' ? '切换为Valine' : '切换为Gitalk'  const i = $('#switch-comment>i')  if ($('#gitalk-container').css('display') === 'none') {    $('#vcomment').slideUp('normal', () => {      $('#gitalk-container').slideDown('normal', () => {        $('#switch-comment').attr('title', title)        i.hasClass('fa-toggle-off') ? i.removeClass('fa-toggle-off').addClass('fa-toggle-on') : i.removeClass('fa-toggle-on').addClass('fa-toggle-off')      })    })  } else {    $('#gitalk-container').slideUp('normal', () => {      $('#vcomment').slideDown('normal', () => {        $('#switch-comment').attr('title', title)        i.hasClass('fa-toggle-off') ? i.removeClass('fa-toggle-off').addClass('fa-toggle-on') : i.removeClass('fa-toggle-on').addClass('fa-toggle-off')      })    })  }}

4. 编辑butterfly.yml文件, 以下两个你butterfly.yml文件里有哪个就用那个，不要都用！

   • 在CDN_USE->js下面添加如下内容：

   - /js/third-party/switch_comments.js

   • 在inject->bottom下面添加如下内容：

   - <script src="/js/third-party/switch_comments.js"></script>

随机文章跳转

• 在博客根目录/scripts(没有请自行创建)下新建random.js文件，内容如下：

  hexo.extend.generator.register('random', function (locals) {  const config = hexo.config.random || {}  const posts = []  for (const post of locals.posts.data) {    if (post.random !== false) posts.push(post.path)  }  return {    path: config.path || 'random/index.html',    data: `<html><head><script>var posts=${JSON.stringify(posts)};window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self")</script></head></html>`  }})

  打开/random/就会随机跳转一篇文章

• 可选配置

  • 可以在_config.yml添加以下配置：

    random:  path: # 随机链接路径，默认"random/index.html"

  • 如果不想随机跳转到某篇文章，只需在这篇文章Front-matter添加random: false

文章统计图表

安装

npm install hexo-charts -S

使用

文章发布统计图

<div id="posts-chart"></div>

标签统计图

<!-- "data-length"为显示标签个数(从多到少)，默认为10 --><div id="tags-chart" data-length="10"></div>

文章分类统计图

<div id="categories-chart"></div>

示例

Butterfly 主题将图表添加到归档、分类、标签页面

将文章发布统计图添加到归档页面

在主题目录/Butterfly/layout/archive.pug文件的#archive下面添加一行#posts-chart, 新添加的比上一行多缩进两个空格。

block content  include ./includes/mixins/article-sort.pug  #archive    #posts-chart

将标签统计图和分类统计图分别添加到标签和分类页面

• 编辑主题目录/Butterfly/layout/page.pug文件，在.tag-cloud下面添加一行#tags-chart，在.category-content下面添加一行#categories-chart，新添加的比上一行多缩进两个空格。

block content  if page.type === 'tags'    .tag-cloud      #tags-chart

  else if page.type === 'categories'    .category-content      #categories-chart

文章二维码(仅 Butterfly 主题)

1. 安装hexo-helper-qrcode插件:

npm install hexo-helper-qrcode -S

2. 编辑主题目录/Butterfly/layout/includes/header/post-info.pug, 在文件最后添加以下内容：

      span.post-qrcode        span.post-meta__separator |        i.fa.fa-qrcode.post-meta__icon.fa-fw(aria-hidden="true")        a(href="javasvript:;" onmouseover='document.getElementById("post-qrcode").style.display="block"' onmouseout='document.getElementById("post-qrcode").style.display="none"')='二维码'        div#post-qrcode.post-qrcode-img          img#post-img(src=qrcode(page.permalink))

valine 评论添加博主等标签(仅 Butterfly 主题)

1. 下载valine.pug文件，替换themes/Butterfly/layout/includes/comments/valine.pug

2. 编辑butterfly.yml文件，找到valine配置，添加以下配置项:

  master: # md5加密后的博主邮箱    - f8c7c3961aea2c203160e90cd3b3a26a  friends: # md5加密后的小伙伴邮箱    - 5c2105bbfe6rfc02a6f6ae26dad3819c    - a0adabb31677df92a2405fb18a02ee4d  metaPlaceholder: # 输入框的背景文字    nick: 昵称/QQ号(必填)    mail: 邮箱(必填)    link: 网址(https://)  tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'  verify: false # 评论时是否需要验证，需jQuery支持

3. 编辑butterfly.yml文件，将CDN中的valine链接改为https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

4. 改完之后hexo clean一下，不然不会生效

1. 编辑butterfly.yml文件，找到valine配置，在option下添加以下配置项(注意缩进！):

  option:    master: # md5加密后的博主邮箱      - f8c7c3961aea2c203160e90cd3b3a26a    friends: # md5加密后的小伙伴邮箱      - 5c2105bbfe6rfc02a6f6ae26dad3819c      - a0adabb31677df92a2405fb18a02ee4d    metaPlaceholder: # 输入框的背景文字      nick: 昵称/QQ号(必填)      mail: 邮箱(必填)      link: 网址(https://)    tagMeta:  # 标签要显示的文字,请注意顺序！      - 博主      - 小伙伴      - 访客

2. 编辑butterfly.yml文件，将CDN中的valine链接改为https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

3. 改完之后hexo clean一下，不然不会生效