🎨 替换掉 &nbsp 控制间距 #848

Author: zkqiang

layout/_partials/header/navigation.ejs

@@ -24,7 +24,7 @@
               <a class="nav-link dropdown-toggle" target="_self" href="javascript:;" role="button"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <%- each.icon ? '<i class="' + each.icon + '"></i>' : '' %>
-                <%- text %>
+                <span><%- text %></span>
               </a>
               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                 <% for(const subEach of each.submenu || []) { %>
@@ -35,7 +35,7 @@
                   } %>
                   <a class="dropdown-item" href="<%= url_for(subEach.link) %>">
                     <%- subEach.icon ? '<i class="' + subEach.icon + '"></i>' : '' %>
-                    <%- subText %>
+                    <span><%- subText %></span>
                   </a>
                 <% } %>
               </div>
@@ -44,23 +44,24 @@
             <li class="nav-item">
               <a class="nav-link" href="<%= url_for(each.link) %>">
                 <%- each.icon ? '<i class="' + each.icon + '"></i>' : '' %>
-                <%- text %>
+                <span><%- text %></span>
               </a>
             </li>
           <% } %>
         <% } %>
         <% if(theme.search.enable) { %>
           <li class="nav-item" id="search-btn">
             <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
-              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
+              <i class="iconfont icon-search"></i>
             </a>
           </li>
           <% import_js(theme.static_prefix.internal_js, 'local-search.js') %>
         <% } %>
         <% if(theme.dark_mode && theme.dark_mode.enable) { %>
           <li class="nav-item" id="color-toggle-btn">
-            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
-                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
+            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
+              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
+            </a>
           </li>
         <% } %>
       </ul>

layout/_partials/post/toc.ejs

@@ -1,5 +1,8 @@
 <div id="toc">
-  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;<%- __('post.toc') %></p>
+  <p class="toc-header">
+    <i class="iconfont icon-list"></i>
+    <span><%- __('post.toc') %></span>
+  </p>
   <div class="toc-body" id="toc-body"></div>
 </div>
 

source/css/_pages/_base/_widget/header.styl

@@ -25,6 +25,9 @@
     i
       font-size 0.875rem
 
+    i:only-child
+      margin 0 .2rem
+
   .navbar-toggler
     border-width 0
     outline 0
@@ -155,6 +158,9 @@
   width 80%
   overflow-wrap break-word
 
+  .typed-cursor
+    margin 0 .2rem
+
 @media (max-width: 767px)
   #subtitle, .typed-cursor
     font-size 1.5rem

source/js/plugins.js

@@ -14,7 +14,7 @@ Fluid.plugins = {
     var typed = new window.Typed('#subtitle', {
       strings: [
         '  ',
-        text + ' '
+        text
       ],
       cursorChar: CONFIG.typing.cursorChar,
       typeSpeed : CONFIG.typing.typeSpeed,