feat(profile): Add profile icon settings to exist items & Add custom …

…profile links solve #308
fi3ework · Aug 22, 2021 · d978987 · d978987
1 parent 9274d7c
commit d978987
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 14 deletions.
diff --git a/_config.yml b/_config.yml
@@ -43,6 +43,22 @@ search:
   url: 
   # Search engine: 'bing' (default), 'google' or 'baidu'
   engine: bing
+# Display icons of friends, about and search
+# You can only use free icons started with 'fab' and 'fas' by default
+# https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=brands,solid&m=free
+profile_icons:
+  enable: false
+  friends: 'fas fa-heart'
+  about: 'fas fa-id-card'
+  search: 'fas fa-search'
+# Additional profile links
+profile_links:
+  # - name: GOOGLE
+  #   url: //www.google.com
+  #   icon: 'fab fa-google'
+  # - name: GALLERY
+  #   url: //www.unsplash.com
+  #   icon: 'fas fa-images'
 
 # ========== Site ========== #
 # title of the site (good for SEO)
@@ -85,6 +101,7 @@ post_banner_theme: default
 # Display profile avatar's border
 avatar_border: true
 # Stick profile info
+# Keep false if you have too many profile links
 profile_sticky: false
 # Show categories info in index and post page
 show_categories: false

diff --git a/layout/_partial/base-head.ejs b/layout/_partial/base-head.ejs
@@ -15,7 +15,7 @@
     <meta name="author" content="<%- config.author %>">
     <meta name="renderer" content="webkit">
     <meta name="copyright" content="<%- config.author %>">
-    <% if (keywords){ %>
+    <% if (keywords) { %>
         <meta name="keywords" content="<%- keywords %>">
     <% } else { %>
         <meta name="keywords" content="<%- config.title %>,<%- config.author %>">

diff --git a/layout/_partial/base-profile.ejs b/layout/_partial/base-profile.ejs
@@ -13,7 +13,12 @@
     <% } %>
     <% if(theme.friends) { %>
         <div class="friends">
-            <div>FRIENDS</div>
+            <div>
+                <% if(theme.profile_icons && !!theme.profile_icons.enable && theme.profile_icons.friends) { %>
+                    <i class="<%- theme.profile_icons.friends %> profile-item-icon"></i>
+                <% } %>
+                FRIENDS
+            </div>
             <% for (name in theme.friends) { %>
                 <% if(theme.friends[name]) { %>
                     <span>
@@ -25,10 +30,15 @@
     <% } %>
     <% if(theme.about.enable) { %>
         <div class="profile-link-item">
-            <a href="<%- url_for("/about") %>" class="about-me">ABOUT ME</a>
+            <a href="<%- url_for("/about") %>" class="about-me">
+                <% if(theme.profile_icons && !!theme.profile_icons.enable && theme.profile_icons.about) { %>
+                    <i class="<%- theme.profile_icons.about %> profile-item-icon"></i>
+                <% } %>
+                ABOUT ME
+            </a>
         </div>
     <% } %>
-    <% if(theme.search.enable) { %>
+    <% if(theme.search.enable && theme.search.url) { %>
         <% var baseSearchMeUrl %>
         <% switch (theme.search.engine) {
             case 'google': %>
@@ -41,7 +51,24 @@
                 <% baseSearchMeUrl = 'https://www.bing.com/search?q=site%3A' %>
         <% } %>
         <div class="profile-link-item">
-            <a href="<%- baseSearchMeUrl + theme.search.url %>" class="search-me">SEARCH</a>
+            <a href="<%- baseSearchMeUrl + theme.search.url %>" class="search-me">
+                <% if(theme.profile_icons && !!theme.profile_icons.enable && theme.profile_icons.search) { %>
+                    <i class="<%- theme.profile_icons.search %> profile-item-icon"></i>
+                <% } %>
+                SEARCH
+            </a>
         </div>
     <% } %>
+    <% if(theme.profile_links) { %>
+        <% theme.profile_links.forEach((_link) => { %>
+            <div class="profile-link-item">
+                <a href="<%- _link.url %>" class="profile-link-<%- _link.name %>">
+                    <% if(_link.icon) { %>
+                        <i class="<%- _link.icon %> profile-item-icon"></i>
+                    <% } %>
+                    <%- _link.name %>
+                </a>
+            </div>
+        <% }) %>
+    <% } %>
 </div>
diff --git a/source/css/dark.css b/source/css/dark.css
diff --git a/source/css/dark.css.map b/source/css/dark.css.map
diff --git a/source/css/style.css b/source/css/style.css
diff --git a/source/css/style.css.map b/source/css/style.css.map
diff --git a/src/scss/_dark/_partial/_partial/_profile-dark.scss b/src/scss/_dark/_partial/_partial/_profile-dark.scss
@@ -1,4 +1,5 @@
 .profile {
+  color: $social-iconfont-color-dark;
   border-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -18,6 +19,7 @@
   border-color: rgba(255, 255, 255, 0.1);
 
   a {
+    color: $social-iconfont-color-dark;
     &:hover {
       color: $feature-color-dark;
     }
@@ -28,6 +30,7 @@
   border-color: rgba(255, 255, 255, 0.1);
 
   a {
+    color: $social-iconfont-color-dark;
     &:hover {
       color: $feature-color-dark;
     }

diff --git a/src/scss/_partial/_partial/_profile.scss b/src/scss/_partial/_partial/_profile.scss
@@ -6,14 +6,14 @@
   flex-shrink: 0;
   width: $profile-width;
   font: 1rem $feature-font-family;
-  * {
-    color: $social-iconfont-color;
-  } // 为了在没有social和friends时也显示一个分割线
+  color: $social-iconfont-color;
+  // 为了在没有social和friends时也显示一个分割线
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding-bottom: 0.5rem;
+  a {
+    transition: color 0.1s ease-in;
+  }
   & > *:last-child {
     border-bottom: none;
-    padding-bottom: 0;
   }
 }
 
@@ -96,6 +96,7 @@
   }
   a {
     margin-right: 0.6rem;
+    color: $social-iconfont-color;
     &:hover {
       color: $feature-color;
     }
@@ -108,12 +109,17 @@
   a {
     font-size: 1.2rem;
     font-weight: bold;
+    color: $social-iconfont-color;
     &:hover {
       color: $feature-color;
     }
   }
 }
 
+.profile-item-icon {
+  margin-right: 0.3rem;
+}
+
 .about-me {
 }