天天看點

NexT主題更新以及hexo4.2.0 NexT7.7.2主題美化NexT主題更新主題優化

本文主要介紹如何更新NexT版本以及對NexT7.7.2版本的一些主題美化操作

點選我的部落格可以檢視一下我的樣式。

NexT主題更新

我覺得太痛苦了,原來用的NexT5.1.x版本,發現很多網上的東西不能用,然後就在從v5.1.x更新這個介紹進行了更新。直接更新到v7

在blog根目錄下輸入:

git clone https://github.com/theme-next/hexo-theme-next themes/next-reloaded

這個指令下載下傳最新的v7.7.2版本(今天是2020.3.29)到名字為

next-reloaded

的檔案中

然後在修改站點配置檔案:

theme: next-reloaded

這一版本需要注意,中文由原來的

zh-Hans

變成了

zh-CN

最後

hexo s --debug

就是全新版本了,很多東西需要重新配置了,尤其是原來

/next/source/css/

這個檔案下很多東西都沒了已經沒有了,似乎都是統一到根目錄下的source中了,我也沒有太搞清楚。下文有實際案例具體介紹。

主題優化

說在前面:v7.7.2版本的很多東西都內建好了,可以直接在

_config.yml

進行true/false選擇即可,隻要仔細讀讀每一項的注釋,很快就能配置好了。

下面一部分有關主題優化的是我覺得我讀注釋不太能了解的,以及注釋沒有提到的,當然後續可能也會更新一些新的主題優化相關的内容

檢視Hexo部落格NexT版本

在主題檔案中找到package.json可以看到

給文章添加陰影效果

首先主題配置檔案取消如下代碼的注釋

style: source/_data/styles.styl
           

在 blog/source/_data下建立 styles.styl檔案,_data檔案也是我手動建立的,在styles.styl檔案中添加如下内容:

// 首頁文章添加陰影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
           

但是目前來看隻有閱讀文章的時候會出現陰影效果不知道為什麼首頁沒有這個效果

給文章添加 本文結束 标記

首先主題配置檔案取消如下代碼的注釋

postBodyEnd: source/_data/post-body-end.swig
           

在 blog/source/_data下建立post-body-end.swig檔案,(_data檔案也是我手動建立的)在post-body-end.swig檔案中添加如下内容:

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-hand-peace-o"></i>感謝您的閱讀-------------</div>
    {% endif %}
</div>
           

效果如圖:

NexT主題更新以及hexo4.2.0 NexT7.7.2主題美化NexT主題更新主題優化

閱讀全文按鈕顔色設定

首先主題配置檔案取消如下代碼的注釋

variable: source/_data/variables.styl
           

在 blog/source/_data下建立variables.styl檔案,(_data檔案也是我手動建立的)在variables.styl檔案中添加如下内容:

// Buttons
// --------------------------------------------------
$btn-default-bg                 = white;
$btn-default-color              = #006762;
$btn-default-font-size          = $font-size-small;
$btn-default-border-width       = 2px;
$btn-default-border-color       = #006762;
$btn-default-hover-bg           = #456f95;
$btn-default-hover-color        = white;
$btn-default-hover-border-color = #456f95;
           

效果如圖:

NexT主題更新以及hexo4.2.0 NexT7.7.2主題美化NexT主題更新主題優化

如何添加文章版權

在主題配置檔案找到creative_commons, 設定post為true,其中sidebar根據自己喜好選擇

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:
           

文章目錄不自動編号

在主題配置檔案中找到toc并設定number屬性為false

網頁底部的動态桃心圖像

在主題配置檔案中找到下面内容,設定其中animated為true

icon:
 		 name: user
     animated: true
	   color: "#006762"
           

效果就是撲通撲通的跳動心髒

今天到此結束啦,累死了,搞了大半天,太痛苦。後續可能會繼續更新

繼續閱讀