Hexo:個人化NexT主題

2020/09/17更新。

＊關於在本機伺服器正常運作，但部署後卻沒有生效的情況，單獨執行”hexo d”指令即可，”hexo d -g”之類的組合指令會使某些檔案沒有被推送到遠端伺服器上。

---

SEO(Search Engine Optimization)

Google Webmaster tools verification
輸入網址前置字元(部落格網址)，Google提供許多驗證方法，而我選擇的是HTML標記方法，在Hexo根目錄找到/themes/next/layout/_partials/head/head.swig，貼上Google所提供的標記，部署後按下驗證即可。之後生成sitemap.xml放在根目錄下的public中，並於Google Console中設定提交。

<meta name="google-site-verification" content="{verification code}" />

＊讓Hexo於部署時自動生成sitemap：
在部落格根目錄下安裝sitemap generator

npm install hexo-generator-sitemap --save

接著在部落格根目錄下的_config.yml設定檔中寫入

# Sitemap
sitemap:
    path: sitemap.xml

這樣每次編譯和部署的時候就會自動更新sitemap了。

Font Awsome Icon

NexT自帶的版本為v4.7.0，到官網找新版本CDN連結，貼在/themes/next/layout/_partials/head/head.swig就能套用更多icon呢。

＊引入新版本後部分icon可能會因為class name改變而無法顯示

Change Side Bar Icon

檔案路徑:/themes/next/layout/_macro/sidebar.swig
修改social icon相關程式碼為:

{ if theme.social_icons.enable }  // ％符號會影響Code Block顯示因此在文章這裡移除
    { set sidebarIcon = '<i class="' + link.split('||')[1] | trim | default('globe') + '"></i>' }
{ endif }

如此在NexT Config就能直接設定Font Awsome的class name:

social:
  GitHub: https://github.com/username || fab fa-github fa-lg
  Linkedin: https://www.linkedin.com/ || fab fa-linkedin-in fa-lg
  Twitter: https://twitter.com/ || fab fa-twitter fa-lg
  E-Mail: mailto:username@gmail.com || fas fa-envelope fa-lg

Change Post Icon

檔案路徑:themes/next/layout/_macro/post.swig

<span class="post-meta-item-icon">
    <i class="fas fa-calendar-alt"></i>
</span>

<span class="post-meta-item-icon">
    <i class="fas fa-folder-open"></i>
</span>

<span class="post-meta-item-icon">
    <i class="fas fa-comment-dots"></i>
</span>

Background Style

檔案路徑:themes/next/source/css/_custom/custom.styl
參考Slanceli - 深度美化Hexo(NexT主题)

// Custom styles.
@media screen and (min-width:1200px){
    body{	
        background-image:url(/images/background.png);
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position:50% 60%;
    }

    #footer a{
        color:#eee;
    }
}

// background
.main-inner{
    background: #fff;
    opacity: 0.9;
}

// menu
.header-inner{
    background: #ffffffe8;
    opacity: 1;
}

// footer
.footer{
    font-size: 14px;
    color: #fff;
}

調整響應式斷點，讓行動裝置瀏覽也能顯示背景圖片：

@media screen and (min-width:768px){
    body{	
        background-image:url(/images/background.png);
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position:50% 60%;
    }

    #footer a{
        color:#eee;
    }
}

@media screen and (min-width:320px) and (max-width:768px){
    body{	
        background-image:url(/images/background_768.png);
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position:70% 0%;
    }

    #footer a{
        color:#eee;
    }
}

Hyper-Link Style

修改內文和項目中的超連結文字樣式：

// hyper-link
.post-body p a, .post-body li a{
  color: #003D79;
  border-bottom: none;
  border-bottom: 1px solid #003D79;
  &:hover {  // mouse hover
    color: #0080FF;
    border-bottom: none;
    border-bottom: 1px solid #0080FF;
  }
}

Block Style

修改側邊欄與文章區塊直角為圓角

檔案路徑:themes/next/source/css/_variables/Gemini.styl
修改參數如下 :

$border-radius-inner              = 0 0 16px 16px;
$border-radius                    = 16px;

檔案路徑:themes/next/source/css/_schemes/Gemini/index.styl
加入CSS :

.sidebar {
  background-color:transparent;
}

Tag Cloud

雖然NexT有內建標籤雲，因個人喜好故採用第三方標籤雲。

Mobile View Optimization

於行動裝置瀏覽下，sub-title文字和nav-toggle之間的排版、文章標題與內文之間的margin太大，這兩個問題一直讓我覺得很礙眼，不過也一直沒有去調整它，但它終究讓我感覺到難以忍受了。

sub-title於行動裝置瀏覽的時候使左右兩側padding增加15%：
/themes/next/source/css/_common/components/header/site-meta.styl

.site-subtitle {
  margin-top: 10px;
  font-size: $subtitle-font-size;
  color: $subtitle-color;
  
  +mobile(){
    padding-left: 15%;
    padding-right: 15%;
  }
}

調整文章標題與內文之間的margin-bottom為25px：
/themes/next/source/css/_common/components/post/post-meta.styl

.posts-expand .post-meta {
  margin: 3px 0 25px 0;
  color: $grey-dark;
  font-family: $font-family-posts;
  font-size: 12px;
  text-align: center;
}

Continue…