由于 butterfly 5.x 已不再原生支持 pangu 插件，因此需要通过inject字段引入：

1
2
3
4
5
inject:
  bottom:
    - <script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js"></script>
    # 这里用于兼容 Pjax
    - <script> const initPangu = () => { if (typeof pangu !== 'undefined') { pangu.spacingPage(); } }; document.addEventListener('DOMContentLoaded', initPangu); document.addEventListener('pjax:complete', initPangu); </script>

  下面是 butterfly 4.x 版本的配置方法。

一、模块配置

  pangu（盘古）模块是一个渲染脚本，用于在博客的中英文、数字之间自动添加空格，使中英文文字混排变得美观。

  我的butterfly主题版本是4.9.0，在配置文件中找到pangu关键字并启用：

1
2
3
pangu:
  enable: true
  field: site # site/post

  这里site表示全站启用，post表示仅post页面启用。一般到这里就OK了，但是我的配置并未成功，还需要安装 hexo-pangu组件，这里并不直接安装pangu组件是因为需要进行魔改才能生效，比较麻烦。

1
npm install hexo-pangu

  然后就能在页面中看到启用后的效果了。

二、相关问题

  部署之后出现发生Uncaught SyntaxError: Cannot use import statement outside a module的报错。具体报错代码在pangu.min.js中第7行，意思是这个js文件使用了 ES6 的 import 语法，但遇到了兼容性问题。因此选择直接将 pangu.min.js 进行引入：

1
<script src="https://cdn.jsdelivr.net/npm/pangu@7.2.0/dist/browser/pangu.umd.js"></script>

  或直接将 pangu.umd.js 下载到本地并引入：

1
<script src="/js/pangu.umd.js"></script>