hexo 文章中插入二维码

时间：

分类：

hexo

字数：

607 字

时长：

大约需要 2 分钟

次数：

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});

  2. 修改 themes/landscape/_config.yml

    1
    2
    3
    4
    5
    # ...
    # CDN地址
    cdn:
      qrcode: 'https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js'
    # ...

  3. 修改 themes/landscape/layout/_partial/after-footer.ejs

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

    1
    <script src="<%= theme.cdn.qrcode %>" defer></script>

  4. 新建文件 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;

  5. 引入js并执行，修改文件 themes/landscape/source/js/search.js

    1
    2
    + import qrcodeInit from './qrcode';
    + qrcodeInit();

  6. 清空缓存，重启项目，效果如下

使用：{% 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/

如果您觉得文章不错，可以请我喝一杯咖啡！

赏