feat: icon name or html (handled by processor)

Candinya · Aug 13, 2024 · 50e4cf3 · 50e4cf3
1 parent 6cf93a5
commit 50e4cf3
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 45 deletions.
diff --git a/_config.yml b/_config.yml
@@ -55,15 +55,11 @@ nav:
   auto_hide: true # 桌面端向上滚动时自动收缩
   items: []
   # - label: # 这个菜单的标签文字
-  #   icon: # 这个菜单前的图标，可以不设置
-  #     name: # 和 html 二选一，该选项表示使用来自 fontawesome icons 4.7.0 图标库，内容为图标库中的唯一标识
-  #     html: # 和 name 二选一，该选项表示插入自定义的 HTML 作为标识，例如您可在此放置一串 svg
+  #   icon: # 这个菜单前的图标，可以不设置。使用来自 fontawesome icons 4.7.0 图标库中的唯一标识；或者插入自定义的 HTML ，例如您可在此放置一串 svg 。
   #   url: # 这个菜单指向的链接（站内或是站外均可）
   #   submenu: # 这个菜单是否为一个二级菜单，有了这个选项就会忽略上面的 url
   #     - label: # 二级菜单项的标签文字
-  #       icon: # 这个菜单前的图标，可以不设置
-  #         name: # 和 html 二选一，该选项表示使用来自 fontawesome icons 4.7.0 图标库，内容为图标库中的唯一标识
-  #         html: # 和 name 二选一，该选项表示插入自定义的 HTML 作为标识，例如您可在此放置一串 svg
+  #       icon: # 这个菜单前的图标，可以不设置。使用来自 fontawesome icons 4.7.0 图标库中的唯一标识；或者插入自定义的 HTML ，例如您可在此放置一串 svg 。
   #       url: # 二级菜单项指向的链接
 
 # 文章的列表配置（首页/分页/标签页）
@@ -73,9 +69,7 @@ index:
 # Footer 页脚配置
 footer:
   links: []
-  # - icon:
-  #     name: # 和 html 二选一，该选项表示使用来自 fontawesome icons 4.7.0 图标库，内容为图标库中的唯一标识
-  #     html: # 和 name 二选一，该选项表示插入自定义的 HTML 作为标识，例如您可在此放置一串 svg
+  # - icon: # 使用来自 fontawesome icons 4.7.0 图标库中的唯一标识；或者插入自定义的 HTML ，例如您可在此放置一串 svg 。
   #   link: # 按钮导向的目标链接
   #   addition: target="_blank" rel="nofollow"
   components: # 一些有特色的组件 （其他的请在 additional 自行追加）
@@ -129,9 +123,7 @@ share:
   message: "分享提示信息" # 弹出窗口显示的文字
   platforms: [] # 可以分享去的平台
   # - name: "" # 平台名字
-  #   icon: # 平台图标
-  #     name: # 和 html 二选一，该选项表示使用来自 fontawesome icons 4.7.0 图标库，内容为图标库中的唯一标识
-  #     html: # 和 name 二选一，该选项表示插入自定义的 HTML 作为标识，例如您可在此放置一串 svg
+  #   icon: # 平台图标。使用来自 fontawesome icons 4.7.0 图标库中的唯一标识；或者插入自定义的 HTML ，例如您可在此放置一串 svg 。
   #   color: ""
   #   link: ""
 
@@ -143,9 +135,7 @@ donate:
   qrcode_placeholder: "" # 对应平台的二维码出现前的占位图片
   platforms: [] # 可以用于打赏的平台
   # - name: ""
-  #   icon:
-  #     name: # 和 html 二选一，该选项表示使用来自 fontawesome icons 4.7.0 图标库，内容为图标库中的唯一标识
-  #     html: # 和 name 二选一，该选项表示插入自定义的 HTML 作为标识，例如您可在此放置一串 svg
+  #   icon: # 使用来自 fontawesome icons 4.7.0 图标库中的唯一标识；或者插入自定义的 HTML ，例如您可在此放置一串 svg 。
   #   color: ""
   #   link: ""
   #   qrcode: ""

diff --git a/layout/_modals/donate.ejs b/layout/_modals/donate.ejs
@@ -21,19 +21,11 @@
                 <% for (const platform of theme.donate.platforms) { %>
                     <% if (platform.qrcode) { %>
                         <button class="kr-donate-platform-button" style="color: <%- platform.color %>;" title="<%- platform.name %>" onclick="krDonateModalShowPlatformQR('<%- platform.qrcode %>', '<%- platform.color %>')">
-                            <% if (platform.icon.name) { %>
-                                <i class="fa fa-<%- platform.icon.name %>"></i>
-                            <% } else if (platform.icon.html) { %>
-                                <%- platform.icon.html %>
-                            <% } %>
+                            <%- icon_to_html(platform.icon) %>
                         </button>
                     <% } else { %>
                         <a class="kr-donate-platform-button" href="<%- platform.link %>" style="color: <%- platform.color %>;" title="<%- platform.name %>" target="_blank">
-                            <% if (platform.icon.name) { %>
-                                <i class="fa fa-<%- platform.icon.name %>"></i>
-                            <% } else if (platform.icon.html) { %>
-                                <%- platform.icon.html %>
-                            <% } %>
+                            <%- icon_to_html(platform.icon) %>
                         </a>
                     <% } %>
                 <% } %>

diff --git a/layout/_modals/share.ejs b/layout/_modals/share.ejs
@@ -16,11 +16,7 @@
             <div class="kr-share-platforms">
                 <% for (const platform of theme.share.platforms) { %>
                     <button class="kr-share-platform-button" style="color: <%- platform.color %>;" title="<%- platform.name %>" onclick="krShareModalOpenPlatform('<%- platform.link %>')">
-                        <% if (platform.icon.name) { %>
-                            <i class="fa fa-<%- platform.icon.name %>"></i>
-                        <% } else if (platform.icon.html) { %>
-                            <%- platform.icon.html %>
-                        <% } %>
+                        <%- icon_to_html(platform.icon) %>
                     </button>
                 <% } %>
             </div>

diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
@@ -11,11 +11,7 @@
                         <% for (const link of theme.footer.links) { %>
                             <li>
                                 <a href="<%- link.link %>" <%- link.addition || 'target="_blank" rel="nofollow"' %>>
-                                    <% if (link.icon.name) { %>
-                                        <i class="fa fa-<%- link.icon.name %>"></i>
-                                    <% } else if (link.icon.html) { %>
-                                        <%- link.icon.html %>
-                                    <% } %>
+                                    <%- icon_to_html(link.icon) %>
                                 </a>
                             </li>
                         <% } %>

diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
@@ -14,11 +14,7 @@
                                             <a href="<%- url_for(item.url) %>">
                                         <% } %>
                                             <% if (item.icon) { %>
-                                                <% if (item.icon.name) { %>
-                                                    <i class="fa fa-<%- item.icon.name %>"></i>
-                                                <% } else if (item.icon.html) { %>
-                                                    <%- item.icon.html %>
-                                                <% } %>
+                                                <%- icon_to_html(item.icon) %>
                                             <% } %>
                                             <%- item.label %>
                                         </a>
@@ -28,11 +24,7 @@
                                                     <li>
                                                         <a href="<%- url_for(submenu.url) %>">
                                                             <% if (submenu.icon) { %>
-                                                                <% if (submenu.icon.name) { %>
-                                                                    <i class="fa fa-<%- submenu.icon.name %>"></i>
-                                                                <% } else if (submenu.icon.html) { %>
-                                                                    <%- submenu.icon.html %>
-                                                                <% } %>
+                                                                <%- icon_to_html(submenu.icon) %>
                                                             <% } %>
                                                             <%- submenu.label %>
                                                         </a>

diff --git a/scripts/icon-to-html.js b/scripts/icon-to-html.js
@@ -0,0 +1,5 @@
+hexo.extend.helper.register("icon_to_html", (input) =>
+  input.includes("<")
+    ? input // HTML 裸标签
+    : `<i class="fa fa-${input}"></i>`, // FontAwesome ID
+);