本文最后更新于:星期二, 四月 28日 2020, 2:41 下午

扫一扫,手机查看本页内容

本站采用的是hexo官网推荐的Fluid博客主题,当初在官网浏览其他主题时,发现可以通过扫码手机查看本页内容,所以一直在寻找可以实现这个功能的方法;昨天发现hexo官网给出了一个hexo-addlink插件,可以在文章末尾自动生成一个版权声明,如图

因此我们利用这个插件生成的本文地址,通过js实现自动生成地址二维码的功能,不会生成图片,不占用空间。

install

npm install hexo-addlink --save

Usage

在hexo根目录下的_config.yml文件中添加如下代码(此步骤用于在文章底部生成版权声明,如不需要添加版权声明可跳过)

addlink:
  before_text: 本文地址: # text before the post link 
  after_text:  # text after the post link

2 修改hexo-addlink代码

我安装这个插件后,生成的地址中存在一个字段是undefined

例如域名/posts/2020/04/undefined.html

最后查看源码时发现hexo-addlink这个插件没有定义优先级,因此默认为10;而我安装了hexo-abbrlink这个插件定义的优先级为15,按hexo的规则是数字越大越晚执行,因此hexo-abbrlink在hexo-addlink后执行。所以,最后那个字段没有生成自然是undefined。

所以需要修改hexo-addlink的优先级为20,我们找到hexo-addlink安装的位置/node_modules/hexo-addlink/index.js修改index.js最后一行,如下:

'use strict';

var hexo = hexo || {};
var config = hexo.config;
var addlink = hexo.config.addlink;

hexo.extend.filter.register('before_post_render', function (data) {
  if (!addlink || !config.url || data.layout !== 'post') {
    return data;
  }

  var domain = config.url;
  var beforeText = addlink.before_text || '';
  var afterText = addlink.after_text || '';
  var layout = data.layout;
  var href = domain + '/' + data.path;
  var hrefText = beforeText + ' [' + href + '](' + href + ') ' + afterText;

  data.content += '\n\n' + hrefText;
},20);//这里添加优先级选项

3 添加二维码生成脚本

我使用的Fluid主题,以此主题为例进行说明

/themes/fluid/layout/路径下的post.ejs文件中添加如下代码:

<!--此处生成本页二维码-->
<script src="//cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div id="output" style="padding-left:1px; width:150px; height:170px; margin-top:80px; margin-left:35px; font-family: 楷体;  border:10px solid #bde4e4;background:#ffffff; font-weight: 600; text-align: center; color: rgba(0, 0, 0, 0.9); font-size: 0.5cm;">扫一扫手机看</div>
<script type="text/javascript">
   function utf16to8(str) {
     var out, i, len, c;
     out = "";
     len = str.length;
     for (i = 0; i < len; i++) {
         c = str.charCodeAt(i);
         if ((c >= 0x0001) && (c <= 0x007F)) {
             out += str.charAt(i);
         } else if (c > 0x07FF) {
             out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
             out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
             out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
         } else {
             out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
             out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
         }
     }
     return out;
 }
 
 content = utf16to8('<%- decodeURI((page.link_url || url)).replace('index.html', '') %>'); 
 <!--括号内调用了addlink插件的生成的地址-->
 $('#output').qrcode({
     width: 110,
     height: 110,
     render: "canvas",
     correctLevel: 0,
     text: content
 });
 </script>
 <!--生成本页二维码结束-->

插入代码的位置根据个人需要而定,我把上述代码插在了第三个div的下边,如图

完工,执行hexo三连,本地查看

hexo clean && hexo g && hexo s

4 效果图

本文作者:Darren
本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!

本站支持评论邮件提醒功能,在邮箱输入框中留下你的邮箱,这样就能通过邮件收到回复!