'可以正式使用了✨''

Author: luckyray-fan

README.md

@@ -1,10 +1,14 @@
 # hexo-history
 
-文章历史对比, 显示每次更新差异的一个 hexo 插件, 关于如何开发的详细文章可见[]()
+文章历史对比, 显示每次更新差异的一个 hexo 插件, 关于如何开发的详细文章可见 [hexo history 插件开发](https://luckyray-fan.github.io/2020/02/19/hexo-history/)
 
-## 使用方法
+## 展示
 
-- 本地执行测试, 更改 info-provider 即可
+![](http://img.luckyray.cn/hexo-history.gif)
+
+## 本地执行测试
+
+- 本地执行测试, 更改 info-provider 内的 info 对象即可
 
 | 参数名      | 含义                               |
 | ----------- | ---------------------------------- |
@@ -13,10 +17,21 @@
 | anchorClass | 用于挂载和解析的文章节点           |
 | baseUrl     | 使用 iframe 渲染时设定的 base 标签 |
 
-- 正式使用, 设置 config, 名称为 hexoHistory, 参照下图操作即可
+- 执行 npm run s, 即可使用 webpack server 热加载
+- 执行 npm run build, 即可构建开发版本
+- 在当前文件夹下测试, 复制一个 index.html 过来, 当然要记得配置 info-provider
+- hexo 实地测试, 把构建好的覆盖到 hexo node_modules 的 hexo-history 文件夹下, 当然在此之前先 npm install hexo-history, 然后 hexo clean(删除目录), hexo g(generate 的缩写), hexo s 即可
+
+## 正式使用
+
+设置 config, 名称为 hexoHistory, 参照下图操作即可
+
+![](https://luckyray-fan.github.io/image/hexo-history-1.png)
+
+> 拥有改变按钮位置的功能但**并未测试**, 可以配置 pos 字段, 当然你也可以在 theme 的 css 文件中强势覆盖
 
 ## 后续改进
 
-- icon 引入 bug
-- diff 算法实现
-- hexo 只选择 post 进行处理
+- [x] icon 引入 bug
+- [ ] diff 算法实现
+- [ ] hexo 只选择 post 进行处理

index.html

@@ -18,7 +18,8 @@
   <link rel="dns-prefetch" href="https://cdn.staticfile.org">
   <link rel="dns-prefetch" href="https://cdn.bootcss.com">
   <link rel="dns-prefetch" href="https://creativecommons.org">
-  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
+  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
+  <script>window.hexoHistoryConfig = {"repo":"luckyray-fan/luckyray-fan.github.io","token":"1d5107f3e8a6dd270b60bb70ffce79485b387e53","theme":"melody"}</script>
   <style>
 
 

index.js

@@ -12,16 +12,14 @@ hexo.extend.generator.register('hexo-history-file', () => {
   return [
     { entry: './hexo-history-main.js', out: '/hexo-history-main.js' },
     {
-      entry: './143146fa24554ae2c5ac0a3982abb952.woff2',
-      out: '/143146fa24554ae2c5ac0a3982abb952.woff2'
+      entry: './ionicons.woff2',
+      out: '/ionicons.woff2'
     }
   ].map((i) => buildGenerator(require.resolve(i.entry), i.out));
 });
 //添加上script标签
 hexo.extend.filter.register('after_render:html', (htmlContent) => {
-  const scriptToInject = `<script>window.hexoHistoryConfig = JSON.parse(${JSON.stringify(
-    config
-  )});</script> `; //把配置注册为全局变量好了
+  const scriptToInject = `<script>window.hexoHistoryConfig = ${JSON.stringify(config)}</script> `; //把配置注册为全局变量好了
   let vueInject = `<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>`;
   const contentToInject = `${vueInject} ${scriptToInject}<script src="/hexo-history-main.js"></script>`;
   let newHtmlContent = htmlContent;

a2c4a261a239aa84463dc70e4bac9b9a.svg ionicons.svg

@@ -1,6 +1,6 @@
 {
   "name": "hexo-history",
-  "version": "1.1.4",
+  "version": "1.1.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/luckyray-fan/hexo-history.git"
@@ -9,7 +9,7 @@
   "main": "index.js",
   "files": [
     "/hexo-history-main.js",
-    "143146fa24554ae2c5ac0a3982abb952.woff2"
+    "ionicons.woff2"
   ],
   "scripts": {
     "start": "webpack --watch",

d535a25a79fb1365ae814b61e88fae71.ttf ionicons.ttf

@@ -25,7 +25,7 @@ class dombuild {
     arr = typeof arr === 'string' ? [arr] : arr;
     arr.forEach((i) => {
       let tem = parser(i);
-      window.tem = tem;
+      // window.tem = tem;
       tem = this.findNode(tem, anchorClass);
       tem = tem.filter(
         (i) => i !== ' ' //去除无意义文本节点

99ac3308dd8ee14f749f51538d0d5b9e.woff ionicons.woff

@@ -1,4 +1,4 @@
-// import Vue from 'vue';
+import Vue from 'vue';
 import app from './index.vue';
 Vue.config.productionTip = false; //防止生成生产提示
 import 'iview/dist/styles/iview.css';

143146fa24554ae2c5ac0a3982abb952.woff2 ionicons.woff2

@@ -40,7 +40,7 @@ import {
   Badge
 } from "iview";
 import skeleton from "./components/skeleton.vue";
-// import Vue from "vue";
+import Vue from "vue";
 
 Vue.component("skeleton", skeleton);
 Vue.component("Alert", Alert);
@@ -63,7 +63,7 @@ export default {
   },
   methods: {
     async render(name) {
-      if (this.cur === name) {
+      if (this.cur === name || name === undefined) {
         return;
       }
       if (name === "addCommit") {
@@ -81,28 +81,29 @@ export default {
         temNode = await this.domCompare.getDomFragment(
           this.items[+this.cur].content
         );
-        temNode = document.importNode(temNode, true); //dom 上事件的复制等等
+        temNode = document.importNode(temNode, true).children; //dom 上事件的复制等等
+      }
+      removeChildren(this.dom);
+      if (name !== 0) {
+        this.dom.append(saveInfo.infoAlert);
+      }
+      for (let i = 0; i < temNode.length; i++) {
+        this.dom.append(temNode[i]);
       }
-      this.dom.innerHTML = "";
-      this.dom.append(saveInfo.infoAlert);
-      this.dom.append(temNode);
-      // for (let i = 0; i < newNode.children.length; i++) {
-      //   this.dom.append(newNode.children[i]);
-      // }
-      // this.domCompare.getFragment(+name + 1); //把它换成整数, 防止传入字符串
     }
   },
   async mounted() {
     if (window.hexoHistoryConfig) {
       let pos = window.hexoHistoryConfig.pos;
-      if(!pos) return;
-      let style = this.$el.style;
-      ({
-        left: style.left,
-        right: style.right,
-        top: style.top,
-        bottom: style.bottom
-      } = pos);
+      if (pos) {
+        let style = this.$el.style;
+        ({
+          left: style.left,
+          right: style.right,
+          top: style.top,
+          bottom: style.bottom
+        } = pos);
+      }
     }
     this.items = await getCommits();
     this.complete = true; //防止连续点多次继续加载
@@ -132,15 +133,15 @@ export default {
     });
     //存储
     saveInfo.skeleton = new skeletonTem().$mount().$el;
-    saveInfo.origin = this.dom; // element.children 是 live 的
+    saveInfo.origin = cloneDeep(this.dom); // element.children 是 live 的
     saveInfo.infoAlert = new infoAlert().$mount().$el;
 
     this.domCompare = new dombuild();
     this.domCompare.setArr([
       this.dom.innerHTML,
       ...this.items.map(i => i.content)
     ]);
-    window.test = this.domCompare.astArr[0];
+    // window.test = this.domCompare.astArr[0];
   },
   data() {
     return {
@@ -155,6 +156,20 @@ export default {
   },
   props: ["dom"]
 };
+function removeChildren(node) {
+  let child = node.lastElementChild;
+  while (child) {
+    node.removeChild(child);
+    child = node.lastElementChild;
+  }
+}
+function cloneDeep(node) {
+  let frag = [];
+  for (let i = 0; i < node.children.length; i++) {
+    frag.push(node.children[i]);
+  }
+  return frag;
+}
 </script>
 <style scoped>
 .ivu-select-dropdown ul {

package.json

@@ -12,9 +12,9 @@ let themeToClass = {
   melody: 'article-container',
   next: 'post-body'
 };
-Info.path = location.pathname;
 if (window.hexoHistoryConfig) {
-  ({ repo: gitInfo.repo, token: gitInfo.token } = window.hexoHistoryConfig.gitInfo);
+  Info.path = location.pathname;
+  ({ repo: Info.repo, token: Info.token } = window.hexoHistoryConfig);
   if (window.hexoHistoryConfig.theme) {
     Info.anchorClass = themeToClass[window.hexoHistoryConfig.theme.toLowerCase()];
   }

src/dombuild.js

@@ -87,6 +87,7 @@ console.dir(c);
  *    - 文章内容: 如何本地测试与使用(readme), 如何开发的
  *  - bug fix
  *    - 请求没有按照顺序返回
+ *    - 可以保存节点1
  *  - 兼容next主题
  *  - **换主题的解决方案**
  *  - 挂载点问题解决

src/index.js

@@ -31,7 +31,14 @@ module.exports = {
       },
       {
         test: /\.(svg|ttf|eot|woff)\??.*$/,
-        loader: 'file-loader'
+        use: [
+          {
+            options: {
+              name: '/[name].[ext]' //没必要上hash
+            },
+            loader: 'file-loader'
+          }
+        ]
       }
     ]
   },

src/index.vue

@@ -29,7 +29,14 @@ module.exports = {
       },
       {
         test: /\.(svg|ttf|eot|woff)\??.*$/,
-        loader: 'file-loader'
+        use: [
+          {
+            options: {
+              name: '/[name].[ext]' //没必要上hash
+            },
+            loader: 'file-loader'
+          }
+        ]
       }
     ]
   },