feat: 优化评论组件

1. 更改评论组件文本样式 2. 解决mac本点击跳转的问题（大概） 3. 将所有的评论内容归类到P标签内部 4. marked渲染图片和链接时增加新的处理方式（图片增加一个class，方便后续操作，链接现在是在新窗口打开，而不是当前窗口） fix #12
LIlGG · Sep 23, 2020 · 6c86198 · 6c86198
1 parent 2b980db
commit 6c86198
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 114 deletions.
diff --git a/dist/halo-comment.js b/dist/halo-comment.js
diff --git a/dist/halo-comment.js.map b/dist/halo-comment.js.map
diff --git a/dist/halo-comment.min.js b/dist/halo-comment.min.js
diff --git a/dist/halo-comment.min.js.map b/dist/halo-comment.min.js.map
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build-comment": "vue-cli-service build --target wc --name halo-comment 'src/components/Comment.vue'",
+    "build-comment": "npx vue-cli-service build --target wc --name halo-comment 'src/components/Comment.vue'",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="halo-comment" id="halo-comment">
+  <div class="halo-comment serif" id="halo-comment">
     <div class="comment-load-button" v-if="!mergedConfigs.autoLoad && !loaded">
       <a
         class="button-load"
@@ -157,5 +157,6 @@ export default {
 <style lang="scss">
 $color: #898c7b;
 @import "../styles/global";
+@import url("https://fonts.googleapis.com/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC");
 @import "../styles/github-markdown";
 </style>
diff --git a/src/components/CommentEditor.vue b/src/components/CommentEditor.vue
@@ -4,8 +4,9 @@
       <small>
         <a
           rel="nofollow"
-          href="javacript:void(0);"
+          href="javascript:void(0);"
           class="cancel-comment-reply-link"
+          onclick="return false;"
           @click="cancelReply"
         >Cancel Reply</a>
       </small>

diff --git a/src/components/CommentNode.vue b/src/components/CommentNode.vue
@@ -1,81 +1,94 @@
 <template>
   <div>
-  <li
-    :id="'comment-'+comment.id"
-    class="comment"
-    :class="commentClass"
-    itemtype="http://schema.org/Comment"
-    itemprop="comment">
-    <div class="contents">
-      <div class="main shadow">
-        <div class="profile">
-          <a :href="comment.authorUrl" rel="nofollow" target="_blank">
-            <img :alt="comment.author" v-lazy="avatar" class="avatar" height="80" width="80">
-          </a>
-        </div>
-        <div class="commentinfo">
-          <section class="commeta">
-            <div class="left">
-              <h4 class="author">
-                <a :href="comment.authorUrl" rel="nofollow" target="_blank">
-                  <img :alt="comment.author" :src="avatar" class="avatar" height="24" width="24">
-                  <span v-if="comment.isAdmin" class="bb-comment isauthor" title="博主">博主</span>
-                  {{ comment.author }}
-                </a>
-              </h4>
-            </div>
-            <a rel="nofollow" class="comment-reply-link" :style="editing?'display:block;':''" href="javacript:void(0);" @click="handleReplyClick">Reply</a>
-            <div class="right">
-              <div class="info">
-                <time
-                  class="comment-time"
-                  itemprop="datePublished"
-                  :datetime="comment.createTime"
+    <li
+      :id="'comment-'+comment.id"
+      class="comment"
+      :class="commentClass"
+      itemtype="http://schema.org/Comment"
+      itemprop="comment"
+    >
+      <div class="contents">
+        <div class="main shadow">
+          <div class="profile">
+            <a :href="comment.authorUrl" rel="nofollow" target="_blank">
+              <img :alt="comment.author" v-lazy="avatar" class="avatar" height="80" width="80">
+            </a>
+          </div>
+          <div class="commentinfo">
+            <section class="commeta">
+              <div class="left">
+                <h4 class="author">
+                  <a :href="comment.authorUrl" rel="nofollow" target="_blank">
+                    <img :alt="comment.author" :src="avatar" class="avatar" height="24" width="24">
+                    <span v-if="comment.isAdmin" class="bb-comment isauthor" title="博主">博主</span>
+                    {{ comment.author }}
+                  </a>
+                </h4>
+              </div>
+              <a
+                rel="nofollow"
+                class="comment-reply-link"
+                onclick="return false;"
+                :style="editing?'display:block;':''"
+                href="javascript:void(0);"
+                @click="handleReplyClick"
+              >Reply</a>
+              <div class="right">
+                <div class="info">
+                  <time
+                    class="comment-time"
+                    itemprop="datePublished"
+                    :datetime="comment.createTime"
                   >发布于 {{ createTimeAgo }}</time>
-                  <span v-if="configs.showUserAgent" class="useragent-info" v-html="compileUserAgent"></span>
+                  <span
+                    v-if="configs.showUserAgent"
+                    class="useragent-info"
+                    v-html="compileUserAgent"
+                  ></span>
+                </div>
               </div>
-            </div>
-          </section>
-        </div>
-        <div class="body markdown-body" v-html="compileContent">
+            </section>
+          </div>
+          <div class="body markdown-body">
+            <!-- 将所有的评论内容约束为一段 -->
+            <p v-html="compileContent"></p>
+          </div>
         </div>
       </div>
-    </div>
-    <hr>
-    <ul v-if="comment.children" class="children">
-      <template v-for="(children, index) in comment.children">
-        <CommentNode
-          :isChild="true"
-          :targetId="targetId"
-          :target="target"
-          :comment="children"
-          :options="options"
-          :configs="configs"
-          :key="index"
-          :depth="selfAddDepth"
-          :parent="comment"
-        />
-
-      </template>
-    </ul>
-  </li>
-  <CommentEditor
-    :targetId="targetId"
-    :target="target"
-    :replyComment="comment"
-    :options="options"
-    :configs="configs"
-  />
+      <hr>
+      <ul v-if="comment.children" class="children">
+        <template v-for="(children, index) in comment.children">
+          <CommentNode
+            :isChild="true"
+            :targetId="targetId"
+            :target="target"
+            :comment="children"
+            :options="options"
+            :configs="configs"
+            :key="index"
+            :depth="selfAddDepth"
+            :parent="comment"
+          />
+        </template>
+      </ul>
+    </li>
+    <CommentEditor
+      :targetId="targetId"
+      :target="target"
+      :replyComment="comment"
+      :options="options"
+      :configs="configs"
+    />
   </div>
 </template>
 <script>
 import "./index";
 import { timeAgo, return2Br } from "@/utils/util";
 import ua from "ua-parser-js";
 import marked from "l-marked";
-import { renderedEmojiHtml } from "@/utils/emojiutil"
-import CommentEditor from './CommentEditor.vue'
-import globals from '@/utils/globals.js'
+import { renderedEmojiHtml } from "@/utils/emojiutil";
+import CommentEditor from "./CommentEditor.vue";
+import globals from "@/utils/globals.js";
 
 export default {
   name: "CommentNode",
@@ -130,17 +143,58 @@ export default {
     return {
       editing: false,
       level: [
-        { name: "小萌新~", icon: 'https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_0.svg' },
-        { name: "小魔仙", icon: 'https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_1.svg' },
-        { name: "初露头角", icon: 'https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_2.svg' },
-        { name: "大水笔", icon: 'https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_3.svg' },
-        { name: "后宫团", icon: 'https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_4.svg' },
-        { name: "有豪宅", icon: 'https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_5.svg' },
-        { name: "德国骨科", icon: 'https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_6.svg' },
+        {
+          name: "小萌新~",
+          icon:
+            "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_0.svg"
+        },
+        {
+          name: "小魔仙",
+          icon:
+            "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_1.svg"
+        },
+        {
+          name: "初露头角",
+          icon:
+            "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_2.svg"
+        },
+        {
+          name: "大水笔",
+          icon:
+            "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_3.svg"
+        },
+        {
+          name: "后宫团",
+          icon:
+            "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_4.svg"
+        },
+        {
+          name: "有豪宅",
+          icon:
+            "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_5.svg"
+        },
+        {
+          name: "德国骨科",
+          icon:
+            "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/level/level_6.svg"
+        }
       ],
-      globalData: globals,
+      globalData: globals
     };
   },
+  created() {
+    const renderer = {
+      image(href, title) {
+        return `
+          <img src="${href}" title="${title}" class="lazyload comment_inline_img" onerror="imgError(this)">`;
+      },
+      link(href, title, text) {
+        return `<a href="${href}" title="${title}" target="_blank" rel="nofollow">${text}</a>`
+      }
+    }
+
+    marked.use({ renderer });
+  },
   computed: {
     avatar() {
       return (
@@ -151,7 +205,7 @@ export default {
     },
     compileContent() {
       var at = "";
-      if (this.parent != undefined ) {
+      if (this.parent != undefined) {
         at =
           '<a href="' +
           this.parent.authorUrl +
@@ -161,6 +215,8 @@ export default {
       }
       // 获取转换后的marked
       let markedHtml = marked(at + this.comment.content);
+      // 处理其中的img
+      // 处理表情包
       let emoji = renderedEmojiHtml(markedHtml);
       // 将回车转换为br
       return return2Br(emoji);
@@ -173,7 +229,10 @@ export default {
       parser.setUA(this.comment.userAgent);
       var result = parser.getResult();
 
-      var browserImg = "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/ua/svg/"+ result.browser.name.toLowerCase()  +".svg";
+      var browserImg =
+        "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/ua/svg/" +
+        result.browser.name.toLowerCase() +
+        ".svg";
       var uaImg = "";
 
       switch (result.os.name) {
@@ -182,29 +241,53 @@ export default {
             case "7":
             case "8":
             case "10":
-              uaImg = "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/ua/svg/windows_win" + result.os.version + ".svg";
+              uaImg =
+                "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/ua/svg/windows_win" +
+                result.os.version +
+                ".svg";
               break;
             case "":
-              uaImg = "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/ua/svg/windows_" + result.os.version + ".svg";
+              uaImg =
+                "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/ua/svg/windows_" +
+                result.os.version +
+                ".svg";
               break;
             default:
-              uaImg = "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/ua/svg/windows.svg";
+              uaImg =
+                "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/ua/svg/windows.svg";
               break;
           }
           break;
         default:
-          uaImg = "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/ua/svg/" + result.os.name.replace(/\s+/g,"").toLowerCase() + ".svg";
+          uaImg =
+            "https://cdn.jsdelivr.net/gh/LIlGG/[email protected]/img/Sakura/images/ua/svg/" +
+            result.os.name.replace(/\s+/g, "").toLowerCase() +
+            ".svg";
           break;
       }
 
-      return `( <img src="` + browserImg + ` ">  `+ result.browser.name + " " + result.browser.version + ` 
-       <img src="` + uaImg + `"> `+ result.os.name + " " + result.os.version + ` )`;
+      return (
+        `( <img src="` +
+        browserImg +
+        ` ">  ` +
+        result.browser.name +
+        " " +
+        result.browser.version +
+        ` 
+       <img src="` +
+        uaImg +
+        `"> ` +
+        result.os.name +
+        " " +
+        result.os.version +
+        ` )`
+      );
     },
     selfAddDepth() {
       return this.depth + 1;
     },
     commentClass() {
-      return 'depth-' + this.depth + " comment-" + this.comment.id;
+      return "depth-" + this.depth + " comment-" + this.comment.id;
     }
   },
   methods: {

diff --git a/src/styles/github-markdown.scss b/src/styles/github-markdown.scss
@@ -1,16 +1,9 @@
-@font-face {
-    font-family: octicons-link;
-    src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
-}
-
 .markdown-body {
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     color: #24292e;
     line-height: 1.5;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
     font-size: 16px;
-    line-height: 1.5;
     word-wrap: break-word;
 
     .octicon {

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -607,6 +607,18 @@ div {
                 text-decoration: none;
             }
         }
+
+        .markdown-body {
+            .comment_inline_img {
+                display: inline-block;
+                height: 150px;
+                margin-right: 3px;
+                border: 1px solid #ddd;
+                border-radius: 4px;
+                padding: 3px;
+                cursor: pointer;
+            }
+        }
     }
 
     /*--------------------------------------------------------------
@@ -1292,4 +1304,8 @@ div {
         z-index: 10000;
         margin-top: -4px
     }
+}
+
+.serif {
+	font-family: 'Noto Serif SC','Source Han Serif SC','Source Han Serif','source-han-serif-sc','PT Serif','SongTi SC','MicroSoft Yahei',Georgia,serif
 }