👌 优化评论组件及相关展示

README.md

@@ -125,6 +125,7 @@
 - ftl 模板格式化
 - 导航栏优化
 - 页脚调整
+- 评论组件定制
 - SEO 优化
 - 样式优化
   - 使用 Less
@@ -235,7 +236,11 @@
 
 > 主要是一些开发及使用过程中暴露出来的问题
 
-#### 1、如何自定义导航条图标？
+#### 1、如何在浏览器中获取当前主题的配置信息？
+
+可以通过 `window.ThemeConfig` 直接获取。
+
+#### 2、如何自定义导航条图标？
 
 > 主题自身已经引入了部分 `iconfont` 图标，你可以直接用（[全在这里](https://bbchin.com/iconfont-joe2.0/)），如果想在这个基础上增加图标，可联系我加入该项目的图标组。`iconfont` 使用方式如下：
 
@@ -261,23 +266,23 @@
 
 **tips: 目前主题菜单只支持字体图标，若要用图片请自行修改代码。**
 
-#### 2、如果一个菜单有子菜单，如何禁止父菜单跳转？
+#### 3、如果一个菜单有子菜单，如何禁止父菜单跳转？
 
 - 通过 `管理后台-外观-菜单`，设置相关菜单的地址为 `#`，保存即可，子菜单同理；
 
 - 最后，重新进入你的博客即可看到效果。
 
 **tips: 为了适配和展示效果，不建议添加过多菜单。目前最多可展示 3 级。**
 
-#### 3、子菜单如何设置新页面打开？
+#### 4、子菜单如何设置新页面打开？
 
 - 通过 `管理后台-外观-菜单`，设置菜单的打开方式为 `新页面`，保存即可。
 
-#### 4、如何配置邮件服务？
+#### 5、如何配置邮件服务？
 
 Halo 已经提供好了邮件服务，我们只需要配置相关参数即可。请参见 [《Halo 博客配置邮件通知服务》](https://www.yuque.com/docs/share/ccd93bac-6265-44a1-b2ec-c1e8fc101cdb)
 
-#### 5、如何配置留言页？
+#### 6、如何配置留言页？
 
 目前主题中的留言页面是自定义页面，所以需要你进入 `后台管理-页面` ，点击 `新建页面` 添加留言页，然后把下面的模板复制进去并保存，最后进入 `外观-菜单` 添加刚才自定义的留言页，保存后刷新前台页面即可，其他自定义页面同理。
 
@@ -286,7 +291,7 @@ Halo 已经提供好了邮件服务，我们只需要配置相关参数即可。
 <div class="joe_detail__leaving-none">暂无留言，期待第一个脚印。</div>
 ```
 
-#### 6、自己修改了主题中的 CSS 或 JS 后为什么还是用的以前的？
+#### 7、自己修改了主题中的 CSS 或 JS 后为什么还是用的以前的？
 
 目前主题默认使用 `CDN` 加载静态资源，要使用自己修改后的版本，需要到 `后台管理-外观-主题设置-其它` 中关闭 `使用CDN加载静态资源` 即可生效。但关闭后同时也失去了 `CDN` 加载的优势，如果你不想关闭，就需要自己单独修改文件引入处的链接。
 
@@ -302,19 +307,19 @@ Halo 已经提供好了邮件服务，我们只需要配置相关参数即可。
 
 把其中的 `${BASE_RES_URL}` 修改为主题自身路径 `${theme_base!}` 即可。
 
-#### 7、如何通过元数据为文章详情页进行单独的功能配置？
+#### 8、如何通过元数据为文章详情页进行单独的功能配置？
 
 - 很多时候，我们希望能够单独控制文章详情页的功能，如分享、打赏、复制、点赞、评论、目录等。主题目前已经为文章详情页暴露了常用的元数据配置，具体大家可以查看 `theme.yaml` 文件中的 `postMetaField` 字段。
 
 - 如果我们想通过这些元数据来单独控制页面功能，可以到 `后台管理-文章-所有文章` 中找到要修改的文章，然后点击设置，再点击底部保存按钮旁的 `高级`，即可在弹框中对元数据进行配置，字段格式和主题配置是一致的，布尔值填 true 或 false，都是字符串形式。
 
 ![文章详情页元数据配置](https://cdn.jsdelivr.net/gh/qinhua/halo-theme-joe2.0@master/source/img/dp/metas.png)
 
-#### 8、如何查看博客后台日志？
+#### 9、如何查看博客后台日志？
 
 有时博客访问不了，想查看后台日志，可以进入 `后台管理-系统-小工具-实时日志` 查看，生成环境可能需要先开启彩蛋（连续点击 `Halo Dashboard` 10 次触发），更多请参见 [Halo 隐藏功能](https://halo.run/archives/use-hidden-features)。
 
-#### 9、Freemarker 相关小技巧
+#### 10、Freemarker 相关小技巧
 
 主要是本人在开发主题过程中积累的一些 `Freemarker` 技能，希望能帮到需要的人。请参见 [FreeMarker 常用技巧](https://www.yuque.com/docs/share/f8a15e0c-3bf2-4c93-b2ef-e3bf2357d09c)
 
@@ -332,12 +337,11 @@ Halo 已经提供好了邮件服务，我们只需要配置相关参数即可。
 location /upload/ {
   access_log off;
   # 域名白名单，去掉则阻止所有非本站请求
-  alid_referers none blocked server_names *.bbchin.com 127.0.0.1 localhost ~\.google\. ~\.baidu\. ~\.qq\.;
+  valid_referers none blocked server_names *.bbchin.com 127.0.0.1 localhost ~\.google\. ~\.baidu\. ~\.qq\.;
   if ($invalid_referer) {
     rewrite ^/ https://cdn.jsdelivr.net/gh/qinhua/cdn_assets/img/robber.jpg;
-    # return 403;
   }
-  proxy_pass http://127.0.0.1:8090; // 代理来源
+  proxy_pass http://127.0.0.1:8090;
 }
 ```
 

links.ftl

@@ -42,7 +42,7 @@
               <h5>申请格式</h5>
               <div class="link-requirement">
                 <p>
-                  <joe-message type="info" content='<em style="font-style:normal;font-weight:bold;">< 博客名称 + 博客地址 + 博客Logo + 博客简介 ></em><br>补充：如果是 Halo 博客，logo 链接可使用如下形式：<br>- 博客地址/logo<br>- 博客地址/avatar<br>(大家在留言栏目里留言即可)'></joe-message>
+                  <joe-message type="info" content='<em style="font-style:normal;font-weight:bold;">< 博客名称 + 博客地址 + 博客Logo + 博客简介 ></em><br>补充：Halo 博客用户可直接用短链接形式：<br>- 博客地址/logo<br>- 博客地址/avatar<br>(大家在留言栏目里留言即可)'></joe-message>
                 </p>
                 <#assign logo_url = blog_url + '/logo'>
                 <blockquote class="joe_link__demo">博客名称：${blog_title!}<br>博客地址：<a href="${blog_url!}">${blog_url!}</a><br>博客Logo：<a href="${logo_url!!}">${logo_url!}</a><br>博客简介：${meta_description!'这是一个非常牛逼的博客'}</blockquote>

settings.yaml

@@ -2318,8 +2318,8 @@ comment:
       label: 评论头像源
       type: text
       default: "https://sdn.geekzu.org/avatar"
-      placeholder: 请输入
-      description: "用于修改全站评论的头像源地址（优先取主题中的配置，取不到时才从后台配置项取），默认为 https://sdn.geekzu.org/avatar（若头像显示不出来，请自行更换源）。关于头像类型，可以到后台管理中设置。"
+      placeholder: 请输入源地址，末尾不需要斜杠
+      description: "用于修改全站评论的头像源地址（优先取主题中配置的源，取不到时才从后台管理中取），默认为 https://sdn.geekzu.org/avatar（若头像显示不出来，请自行更换源）。关于头像类型，可以到 “后台管理-系统-博客设置-评论设置” 中配置"
     enable_comment_autoload:
       name: enable_comment_autoload
       label: 自动加载评论

sheet.ftl

@@ -32,7 +32,7 @@
                   </div>
                 </div>
               </div>
-              <#--  <time class="joe_detail__count-created" datetime="${sheet.createTime?string('MM/dd')}">${sheet.createTime?string('MM/dd')}</time>  -->
+              <time class="joe_detail__count-created" datetime="${sheet.createTime?string('MM/dd')}">${sheet.createTime?string('MM/dd')}</time>
             </div>
             <#--  <#if sheet.thumbnail?? && sheet.thumbnail!=''>
               <img class="lazyload" data-src="${sheet.thumbnail}" src="${BASE_RES_URL!}/source/img/lazyload.gif" alt="封面"/>

source/css/joe.global.less

@@ -369,7 +369,7 @@ body {
             transform: scaleX(0.7);
           }
 
-          .joe-font {
+          .m-icon  {
             transform: translateY(-2px);
           }
 
@@ -434,7 +434,7 @@ body {
         position: relative;
         height: 34px;
 
-        .joe-font {
+        .m-icon {
           vertical-align: bottom;
         }
 

source/css/joe.responsive.less

@@ -361,7 +361,7 @@ html {
       &_header {
         &__above {
           &-nav {
-            .item .joe-font {
+            .item .m-icon {
               display: none;
             }
           }

source/js/joe.common.js

@@ -694,7 +694,7 @@ const commonContext = {
 		const $replys = $(".aside-reply-content");
 		$replys.each((_index, item) => {
 			// 获取转换后的marked
-			const markedHtml = marked(item.innerHTML).replace(/bili\//g, "bili/hd/ic_emoji_");
+			const markedHtml = marked(item.innerHTML).replace(/<img\ssrc[^>]*>/gm,"<i class=\"joe-font joe-icon-tupian\"></i>").replace(/bili\//g, "bili/hd/ic_emoji_");
 			// 处理其中的表情包
 			const emoji = Utils.renderedEmojiHtml(markedHtml);
 			// 将回车转换为br

source/js/joe.index.js

@@ -135,9 +135,7 @@ const homeContext = {
 	post.topped
 		? "<span class=\"badge\" style=\"display: inline-block\">置顶</span>"
 		: ""
-}
-                  ${post.title}
-                </a>
+}${post.title}</a>
             <a class="abstract" href="${
 	post.fullPath
 }" title="文章摘要" target="_blank" rel="noopener noreferrer">${

source/js/joe.leaving.js

@@ -11,15 +11,16 @@ const leavingContext = {
 					const str = res.content.reduce((sum, item) => {
 						if(item.content.trim()) {
 							// 渲染留言中的 emoji
-							const markedHtml = marked(item.content).replace(/bili\//g, "bili/hd/ic_emoji_");
+							const markedHtml = marked(item.content).replace(/<img\ssrc[^>]*>/gm,"[图片内容]").replace(/bili\//g, "bili/hd/ic_emoji_");
 							const emoji = Utils.renderedEmojiHtml(markedHtml);
 							item.content = Utils.return2Br(emoji);
 						}
+						const avatar = `${ThemeConfig.gravatar_source || ThemeConfig.gravatar_source_url}/${item.gravatarMd5}?s=256&d=${ThemeConfig.gravatar_type}`;
 						return (sum += `<li class="item">
             <div class="user">
                 <img class="avatar lazyload" src="${
 							ThemeConfig.lazyload_avatar
-							}" data-src="${item.avatar}" alt="用户头像" onerror="this.src='${
+							}" data-src="${avatar}" alt="用户头像" onerror="this.src='${
 								ThemeConfig.comment_avatar_error
 							}'"/>
                 <div class="nickname">${item.author}</div>