feat: support header links with icon (#177)

README.md

@@ -74,6 +74,14 @@ widgets:
 google_analytics:
 favicon: /favicon.png
 twitter:
+
+# Header links
+# Each name must correspond to the icon name of Fork Awesome
+# https://forkaweso.me/Fork-Awesome/icons/
+#links:
+#  github: https://github.com/your_github_account
+#  twitter: https://twitter.com/your_twitter_account
+#  telegram: https://t.me/your_telegram_account
 ```
 
 - **menu** - Navigation menu
@@ -87,6 +95,7 @@ twitter:
 - **google_analytics** - Google Analytics ID
 - **favicon** - Favicon path
 - **twitter** - Twitter ID
+- **links** - Header links with icon, specified links will appear at the top right corner of the page
 
 ## Features
 
@@ -114,5 +123,16 @@ Landscape provides 5 built-in widgets:
 
 All of them are enabled by default. You can edit them in `widget` setting.
 
+### Header links
+
+You can add links to the header area with icons.
+
+```
+social:
+  github: https://github.com/your_github_account
+  twitter: https://twitter.com/your_twitter_account
+  telegram: https://t.me/your_telegram_account
+```
+
 [Hexo]: https://hexo.io/
 [Fancybox]: https://github.com/fancyapps/fancyBox

layout/_partial/article.ejs

@@ -23,13 +23,13 @@
       <% } %>
     </div>
     <footer class="article-footer">
-      <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" data-title="<%= post.title %>" class="article-share-link"><%= __('share') %></a>
+      <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" data-title="<%= post.title %>" class="article-share-link"><span class="fa fa-share"><%= __('share') %></span></a>
       <% if (post.comments && config.disqus_shortname){ %>
-        <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
+        <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><span class="fa fa-comment"><%= __('comment') %></span></a>
       <% } %>
       <% if (post.comments && theme.valine.enable && theme.valine.appId && theme.valine.appKey ){ %>
         <a href="<%- url_for(post.path) %>#comments" class="article-comment-link">
-          <span class="post-comments-count valine-comment-count" data-xid="<%- url_for(post.path) %>" itemprop="commentCount"></span>
+          <span class="post-comments-count valine-comment-count fa fa-comment" data-xid="<%- url_for(post.path) %>" itemprop="commentCount"></span>
           <%= __('comment') %>
         </a>
       <% } %>

layout/_partial/head.ejs

@@ -36,4 +36,7 @@
   <% if (theme.fancybox){ %>
     <%- css('fancybox/jquery.fancybox.min.css') %>
   <% } %>
+  <% if (theme.links) {%>
+    <%- css('https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css') %>
+  <% } %>
 </head>

layout/_partial/header.ejs

@@ -13,16 +13,21 @@
     </div>
     <div id="header-inner" class="inner">
       <nav id="main-nav">
-        <a id="main-nav-toggle" class="nav-icon"></a>
+        <a id="main-nav-toggle" class="nav-icon"><span class="fa fa-bars"></span></a>
         <% for (var i in theme.menu){ %>
           <a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
         <% } %>
       </nav>
       <nav id="sub-nav">
+        <% if (theme.links) { %>
+          <% for (const i in theme.links) {%>
+            <a class="nav-icon" href="<%- url_for(theme.links[i]) %>"><span class="fa fa-<%= i %>"></span></a>
+          <% } %>
+        <% } %>
         <% if (theme.rss){ %>
-          <a id="nav-rss-link" class="nav-icon" href="<%- url_for(theme.rss) %>" title="<%= __('rss_feed') %>"></a>
+          <a class="nav-icon" href="<%- url_for(theme.rss) %>" title="<%= __('rss_feed') %>"><span class="fa fa-rss"></span></a>
         <% } %>
-        <a id="nav-search-btn" class="nav-icon" title="<%= __('search') %>"></a>
+        <a class="nav-icon nav-search-btn" title="<%= __('search') %>"><span class="fa fa-search"></span></a>
       </nav>
       <div id="search-form-wrap">
         <%- search_form({button: '&#xF002;', text: __('search')}) %>

source/css/_partial/article.styl

@@ -159,17 +159,13 @@
 .article-comment-link
   float: right
   &:before
-    content: "\f075"
-    font-family: font-icon
     padding-right: 8px
 
 .article-share-link
   cursor: pointer
   float: right
   margin-left: 20px
   &:before
-    content: "\f064"
-    font-family: font-icon
     padding-right: 6px
 
 #article-nav
@@ -263,40 +259,31 @@ $article-share-link
   text-shadow: 0 1px #fff
   &:before
     font-size: 20px
-    font-family: font-icon
     absolute-center(@font-size)
     text-align: center
   &:hover
     color: #fff
 
 .article-share-twitter
   @extend $article-share-link
-  &:before
-    content: "\f099"
   &:hover
     background: color-twitter
     text-shadow: 0 1px darken(color-twitter, 20%)
 
 .article-share-facebook
   @extend $article-share-link
-  &:before
-    content: "\f09a"
   &:hover
     background: color-facebook
     text-shadow: 0 1px darken(color-facebook, 20%)
 
 .article-share-pinterest
   @extend $article-share-link
-  &:before
-    content: "\f0d2"
   &:hover
     background: color-pinterest
     text-shadow: 0 1px darken(color-pinterest, 20%)
 
 .article-share-linkedin
   @extend $article-share-link
-  &:before
-    content: "\f0e1"
   &:hover
     background: color-linkedin
     text-shadow: 0 1px darken(color-linkedin, 20%)
@@ -321,36 +308,3 @@ $article-share-link
     display: block
     max-width: 100%
     margin: 0 auto
-/*
-$article-gallery-ctrl
-  position: absolute
-  top: 0
-  height: 100%
-  width: 60px
-  color: #fff
-  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
-  opacity: 0.3
-  transition: opacity 0.2s
-  cursor: pointer
-  &:hover
-    opacity: 0.8
-  &:before
-    font-size: 30px
-    font-family: font-icon
-    position: absolute
-    top: 50%
-    margin-top: @font-size * -0.5
-
-.article-gallery-prev
-  @extend $article-gallery-ctrl
-  left: 0
-  &:before
-    content: "\f053"
-    left: 15px
-
-.article-gallery-next
-  @extend $article-gallery-ctrl
-  right: 0
-  &:before
-    content: "\f054"
-    right: 15px*/

source/css/_partial/header.styl

@@ -80,7 +80,6 @@ $nav-link
 
 .nav-icon
   @extend $nav-link
-  font-family: font-icon
   text-align: center
   font-size: font-size
   width: font-size
@@ -98,23 +97,13 @@ $nav-link
 
 #main-nav-toggle
   display: none
-  &:before
-    content: "\f0c9"
   @media mq-mobile
     display: block
 
 #sub-nav
   float: right
   margin-right: -15px
 
-#nav-rss-link
-  &:before
-    content: "\f09e"
-
-#nav-search-btn
-  &:before
-    content: "\f002"
-
 #search-form-wrap
   position: absolute
   top: 15px

source/css/_variables.styl

@@ -25,9 +25,7 @@ font-sans = -apple-system, BlinkMacSystemFont,
     sans-serif
 font-serif = Georgia, "Times New Roman", serif
 font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
-font-icon = FontAwesome
-font-icon-path = "fonts/fontawesome-webfont"
-font-icon-version = "4.7.0"
+font-icon = ForkAwesome
 font-size = 14px
 line-height = 1.6em
 line-height-title = 1.1em