Hexo中Next主题最新版本的微信公众号引流教程

发表于 分类于 阅读次数： 本文字数： 768 阅读时长 ≈ 3 分钟

重拾博客

很久没有分享博客了，也是最近比较忙的原因。这几天对博客代码重构了一下，主要针对以下几点

  1. 搭建本地NodeJs环境
  2. 优化Github Action自动化构建流程
  3. 调整post目录下的文章目录结构
  4. 开了一个公众号，逆向分析并修改readMore脚本，引流到公众号

遇到的问题

为了宣传我的公众号，我参考 【知识积累】Hexo中next主题微信引流教程 这篇文章进行配置。
但是过程中遇到了一个问题，我博客的Next主题似乎太新了，是v8版本的。因此带来了几个问题

  1. 最新版的Next主题将_layout.swig改为了_layout.njk
  2. Next在主题配置文件里支持了custom_file_path属性, 不需要再修改_layout.njk
  3. <div id="content">不存在, 这里要修改原来的readmore.js的注入方式

迫于网上答案过于陈旧，我这里重新再梳理下v8版本的Next主题要怎么使用readmore.js脚本。
这个思路可用于其他主题的适配。（必可活用于下次

自定义模块页面

Next主题的 主题配置文件 里已经提供了扩展点

1
2
custom_file_path:
  footer: source/_data/footer.njk

我们修改完主题配置文件后, 在source/_data目录下创建一个footer.njk文件.
在里面填上script脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% if page.comments %}
<script src="/js/readmore.js" type="text/javascript"></script>
<!--<script src="https://readmore.openwrite.cn/js/readmore.js" type="text/javascript"></script>-->
<script>
    const btw = new BTWPlugin();
    btw.init({
        id: 'container',
        blogId: '30660-1666263355112-307',
        name: '岁寒的编程随想',
        qrcode: 'https://blog.ahao.moe/images/config/wechat_channel.jpg',
        keyword: 'more',
    });
</script>
{% endif %}

反混淆魔改readmore脚本

从上面那套js语法可以猜测出readmore的遮罩层，是根据id为container的DOM元素进行定位操作的。
但是我们发现v8版本的文章部分已经没有id这个属性了

1
2
3
4
5
<div class="main-inner {% block class %}{% endblock %}">
  {%- include '_partials/header/sub-menu.njk' -%}
  {% block content %}{% endblock %}
  {%- include '_partials/comments.njk' -%}
</div>

这里的{% block content %}{% endblock %}语法，其实就是将themes/next/layout/_macro/post.njk这个文件引进来。

这个<article>就是文章的主要区域, 我们目标是div.post-block。

在source/js目录下创建一个readmore.js文件，将 原始readmore.js 的内容复制进去, 并格式化。
原始的readmore.js是经过混淆加密的，我们先借助IDE进行格式化.
然后找到我们熟悉的init初始化方法，加上debugger断点

可以看到这里是通过jQuery的$('#container')定位的, 那就简单了, 直接把这一行替换成以下代码即可

1
_0x77ddx3 = $('div.post-block');

思路就是这样，如果你的主题不是Next v8，那么也是修改这行代码，取想要hack的元素即可。

微信公众号的配置

剩下的公众号配置就按照openwrite的教程来处理就可以了，这里不再赘诉
https://openwrite.cn/guide/readmore/readmore.html

最后

想了想，最后还是没有强制引流到公众号。有感兴趣的就点击下面的微信公众号或者RSS订阅吧。