hexo 文章中插入二维码

时间：

分类：

hexo

字数：

651 字

时长：

大约需要 3 分钟

次数：

0 人阅读

有时为了方便移动端查看 demo 链接或其他链接，需要在文章中生成二维码，扫码观看。

已有插件： hexo-tag-qrcode 、 hexo-helper-qrcode

不过以上两个插件都有问题，会生成图片，增大项目体积，再三考虑还是把生成二维码丢到浏览器去做，减小服务器压力。

具体方法如下：

依赖

本文使用默认主题： landscape

功能依赖： jquery 、 jquery.qrcode

使用方式

{% demo_qrcode 'example.html' %}

全部参数：

{% demo_qrcode 'example.html' 120 120 '#000000' '#ffffff' %}

第一个参数 ‘example.html’ 为 demo 地址，如果在 资源文件夹 找不到该文件，则直接使用 ‘example.html’ 字符串生成二维码，如下则直接使用链接生成二维码。

{% demo_qrcode 'https://hexo.io/zh-cn/docs/asset-folders' 120 120 '#000000' '#ffffff' %}

第二个参数 120 为宽度。

第三个参数 120 为高度。

第四个参数 #000000 为前景色。

第五个参数 #ffffff 为背景色。

代码

  1. 新建文件 themes/landscape/scripts/demo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const { encodeURL, escapeHTML } = require('hexo-util');
const { resolve } = require('url');

const PostAsset = hexo.model('PostAsset');

/**
* demo链接 或 其他内容 生成二维码
* @example {% demo_qrcode 'example-copy.html' 120 120 %}
*/
hexo.extend.tag.register('demo_qrcode', function (args = [], content) {
  const [ slug, width = 120, height = 120, foreground = '#000000', background = '#ffffff' ] = args;
  if (!slug) return;

  const asset = PostAsset.findOne({slug});

  let link = slug;

  if (asset) {
    link = encodeURL(resolve(hexo.config.url, resolve(hexo.config.root, asset.path)));
  };

  return `<div class="article-qrcode" data-qr="${link}" data-width="${width}" data-height="${height}" data-foreground="${foreground}" data-background="${background}"></div>`;
}, {ends: false});
  1. 修改 themes/landscape/_config.yml
1
2
3
4
5
# ...
# CDN地址
cdn:
  qrcode: 'https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js'
# ...
  1. 修改 themes/landscape/layout/_partial/after-footer.ejs

此处文件引入必须放在 jquery 之后（如果你的博客没使用 defer 延迟加载 js ，需要去掉 script 标签的 defer 属性）：

1
<script src="<%= theme.cdn.qrcode %>" defer></script>
  1. 新建文件 themes/landscape/source/js/qrcode.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 渲染页面中的二维码

const qrcode = () => {
  $('[data-qr]').each(function () {
    if (this.qrcode === true) {
      return true;
    }
    const $this = $(this);
    const qr = $this.data('qr');
    const width = $this.data('width') || undefined;
    const height = $this.data('height') || undefined;
    const background = $this.data('background') || '#ffffff';
    const foreground = $this.data('foreground') || '#000000';
    $this.qrcode({
      text: qr,
      width,
      height,
      background,
      foreground,
    });
    // 防止重复渲染
    this.qrcode = true;
  });
};

export default qrcode;
  1. 引入js并执行，修改文件 themes/landscape/source/js/search.js
1
2
+ import qrcodeInit from './qrcode';
+ qrcodeInit();
  1. 清空缓存，重启项目，效果如下
使用：{% demo_qrcode 'example.html' %}

效果：

使用：{% demo_qrcode 'example.html' 120 120 '#ff8600' '#0095ff' %}

效果：

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-01-25/hexo-qrcode/

如果您觉得文章不错，可以点击文章中的广告支持一下！