Hexo博客Next主题添加公众号二维码

发表于 更新于 分类于 ， 阅读次数： Changyan： 本文字数： 391 阅读时长 ≈ 1 分钟

通过改动模板文件，在侧边栏和文章底部添加公众号二维码。

添加到Next主题侧边栏

  1. 将图片放入博客根目录下的./themes/next/source/images/目录中，并将图片改名为wechat_channel.png

  2. 编辑themes/next/layout/_macro/sidebar.njk​文件。

在里面搜索theme.back2top.enable，在这个if语句之后添加下面的代码

1
2
3
4
5
6
<div class="wechat_channel">
  <br>
  <!-- 这里添加你的二维码图片 -->
  <img src ="/images/wechat_channel.png">
  <!-- <span>公众号</span> -->
</div>

​​

添加到文章底部

编辑themes/next/layout/_partials/post/post-copyright.njk文件，在底部的</div>上面增加下述代码，

1
2
3
4
5
<div class="wechat_channel">
  <br>
  <!-- 这里添加你的二维码图片 -->
  <img src ="/images/wechat_channel.png" style="width: 80%;">
</div>

【推荐，防止更新主题重置】或者修改主题的config.yml，去掉sidebar和postBodyEnd前面的#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
# 在网站目录“source/_data”中创建您的自定义文件，并取消下面所需文件的注释。
custom_file_path:
  head: source/_data/head.njk
  #header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.njk
  #body-end: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

新建文件source/_data/header.njk和post-body-end.njk，分别在两个文件中添加如下内容：

1
2
3
4
5
6
<div class="wechat_channel">
  <br>
  <!-- 这里添加你的二维码图片 -->
  <img src ="/images/wechat_channel.png">
  <!-- <span>公众号</span> -->
</div>

新建文件source/_data/sidebar.njk，在文件中添加如下内容：

参考

hexo next主题新增微信公众号二维码显示 - 知乎 (zhihu.com)