【源码级】butterfly魔改

首页文章使用新标签页打开

官方没有提供解决方案，但是可以通过修改源码的方式进行修改。
找到主题下的layout/includes/mixins/post-ui.pug，在第16行、第19行添加target="_blank"即可实现。

标签、分类页使用新标签打开

官方没有提供解决方案，但是可以通过修改源码的方式进行修改。
找到主题下的layout/includes/mixins/article-sort.pug，在第19行添加target="_blank"即可实现。

魔改Valine评论【支持cave-draw画图】

准备工作

效果如图，即可以在评论区使用画图工具：

插件项目地址：为你的评论表单添加一个画图板

进入项目第之后后，使用CTRL+F搜索Valine

【进入正题】

第一步：Valine.min.js操作

下载Valine.min.js，放在source下的一个目录，我放的是npm/valine/dist/目录，如图：

下载完成之后，将该文件格式化一下，通过搜索工具搜索定位到如图位置，并在函数的第一行添加：

if ("data:image/" == e.substr(0, 11)) return true;

在_config.yml文件中修改编译跳过的文件(因为文件太长了，如果不跳过的话会被编译，从而丢失后半段代码)

修改完之后最好检查一下localhost:4000/npm/valine/dist/Valine.min.js是否和源文件一样。

第二步：修改主题代码

找到主题目录下的butterfly/layout/includes/third-party/comments/valine.pug文件，原文件这幅模样：

- let emojiMaps = '""'
if site.data.valine
  - emojiMaps = JSON.stringify(site.data.valine)

script.
  function loadValine () {
    function initValine () {
      const valine = new Valine(Object.assign({
        el: '#vcomment',
        appId: '#{theme.valine.appId}',
        appKey: '#{theme.valine.appKey}',
        avatar: '#{theme.valine.avatar}',
        serverURLs: '#{theme.valine.serverURLs}',
        emojiMaps: !{emojiMaps},
        path: window.location.pathname,
        visitor: #{theme.valine.visitor}
      }, !{JSON.stringify(theme.valine.option)}))
    }

    if (typeof Valine === 'function') initValine() 
    else getScript('!{url_for(theme.CDN.valine)}').then(initValine)
  }

  if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('vcomment'),loadValine)
    else setTimeout(loadValine, 0)
  } else {
    function loadOtherComment () {
      loadValine()
    }
  }

需要修改成这样：

- let emojiMaps = '""'
if site.data.valine
  - emojiMaps = JSON.stringify(site.data.valine)

script.
  new CaveDraw({
    ele: '#veditor',
    special: 'valine',
    openBtn: {
      style: 'background-color:#b37ba4;color:white;',
      hoverStyle: 'background-color: #49d0c0;'
    },
    canvasStyle: 'cursor:crosshair;background:whitesmoke;/*margin-bottom:5px;border-radius:0px;*/'
  })

  var valine = new Valine();
  valine.init({
    el: '#vcomment',
    appId: '#{theme.valine.appId}',
    appKey: '#{theme.valine.appKey}',
    avatar: '#{theme.valine.avatar}',
    serverURLs: '#{theme.valine.serverURLs}',
    emojiMaps: !{emojiMaps},
    path: window.location.pathname,
    visitor: #{theme.valine.visitor}
  });

在这个过程中，参数并没有发生变化，只是改变了Valine实例创建的方式(从原来的构造更换成了new)。同时，在创建Valine实例前，创建CaveDraw对象。

在source/css/(没有css目录自行创建)目录下创建cavedraw.css文件，内容如下：

.brush-detail p {
    line-height: 1em!important;
}
.v[data-class="v"] .veditor {
    max-height: 17em;
}

修改_config.butterfly.yml配置文件(通过搜索找到对应的位置修改)：

inject:
  head:
  # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/cavedraw.css" >
    - <script src="https://cdn.jsdelivr.net/gh/flatblowfish/cave-draw/dist/cave-draw.min.js"></script>
    - <script src="/npm/valine/dist/Valine.min.js"></script>
  bottom:
  # - <script src="xxxx"></script>

CDN:
  valine: /npm/valine/dist/Valine.min.js

完结撒花！！！！！！！