2017年最新hexo——基本設置和了解

PrototypeZ 發布于2019-08-01 16:32 / 1770人閱讀

摘要：在根目錄配置文件中有一個設置希望設置為就是這個原因是設置后當你新建一個頁面后自動生成一個同名文件夾方便管理。

前言

前面的文章已經能讓大家搭建起自己的博客，并通過網絡訪問了，通過基礎的發布文章和編輯既可以實現博客的運作了，其他的一些包括分頁和標簽、分類等都不用自己來操作實現，只要通過命令hexo g就可以了，如果大家看過了next主題的官網中介紹的配置，我會幫助大家對其中描述不清的地方進行講解。

理解文章和頁面

當你前面的做好了后，現在還需要建立三個頁面：分類頁categories、標簽頁tags、關于頁about,以及一個html頁面放到根目錄source下，才能完善博客基本的內容。
在根目錄配置文件中有一個設置希望設置為true

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true  ##就是這個

原因是設置后當你新建一個頁面后自動生成一個同名文件夾方便管理。

hexo new page categories 
hexo new page tags
hexo new page about

tags里index.md設置

---
title: 標簽
date: 2017-03-01 19:31:10
type: "tags"
---

categories里index.md設置

---
title: categories
date: 2017-03-01 19:42:08
type: "categories"
---

主題目錄下的配置文件設置如下

menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  commonweal: /404.html

一個文章應該包含以下屬性在頂部

---
date: 2017-03-07
title: xxxxxxxxx
tags: xxxx  #如果不想加入標簽可以為空
categories: xxxxx #如果不想加入分類可以為空
---

添加Fork me on GitHub

去網址https://github.com/blog/273-g... 挑選自己喜歡的樣式，并復制代碼，添加到themesnextlayout_layout.swig的body標簽之內即可
記得把里面的url換成自己的!

把側邊欄頭像變成圓形，并且鼠標停留在上面發生旋轉效果

修改themesnextsourcecss_commoncomponentssidebarsidebar-author.styl：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: site-author-image-border-color;
  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}
/* start */
.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

添加音樂

去往網易云音樂搜索喜歡的音樂，點擊生成外鏈播放器，復制代碼直接放到博文末尾即可，height設為0可隱藏播放器，但仍然可以播放音樂，auto設成0可手動播放，默認是1自動播放，可把代碼放到themes/next/layout/_custom/sidebar.swig文件里，播放器會顯示在站點預覽中

實現文章標題欄顯示更多的文章信息 hexo-wordcount實現

這個是官方文檔上沒有提及的所以我來說下，可以讓你的文章標題位置更加富含信息，本插件可以為文章標題位置添加，文章字數，文章預計閱讀時間。

安裝WORDCOUNT

執行命令

npm install hexo-wordcount --save

主要功能

字數統計:WordCount
閱讀時長預計:Min2Read
總字數統計: TotalCount

查看post.swig模板

模板位置：themesnextlayout_macropost.swig

 {% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
            
              {% if theme.post_wordcount.wordcount %}
                
                  
                
                  {% if theme.post_wordcount.item_text %}
                    {{ __("post.wordcount") }}
                  {% endif %}
                    
                      {{ wordcount(post.content) }} 字  ##我在這里加了一個單位上去
                    
              {% endif %}

              {% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
                |
              {% endif %}

              {% if theme.post_wordcount.min2read %}
                
                  
                
                  {% if theme.post_wordcount.item_text %}
                    {{ __("post.min2read") }}
                  {% endif %}
                    
                      {{ min2read(post.content) }} 分鐘   ##我在這里加了一個單位上去
                    
              {% endif %}
            
          {% endif %}

因為已經寫好了代碼，所以大家不用更改什么，只需要按自己需求來修改一些地方，我還對圖標進行了修改在FontAwesome官網上找到一些圖標替換了標簽里對應的class值來實現目的。因為hexo默認引入了這個字體圖標庫，涉及到圖標的地方都可以自行來更改。

其他主題配置

另外評論系統推薦用多說，數據統計用不蒜子統計，搜索系統用local search,內容分享用多說分享，配置起來最簡單好用。
next主題的官網文檔上寫了相關配置的設置方法都是在配置文件里進行值的設定，操作起來很簡單，我就不重復講了，如有其他問題歡迎提問，后面我會講如何來自定義CSS樣式和更改里面的一些設置。

最近訪客

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50587.html

2017年最新hexo——基本設置和了解

摘要：在根目錄配置文件中有一個設置希望設置為就是這個原因是設置后當你新建一個頁面后自動生成一個同名文件夾方便管理。 showImg(https://segmentfault.com/img/remote/1460000008738195?w=1436&h=527); 前言前面的文章已經能讓大家搭建起自己的博客，并通過網絡訪問了，通過基礎的發布文章和編輯既可以實現博客的運作了，其他的一些包括...

ernest.wang 2019-08-29 12:15 評論0 收藏0
2017年最新基于hexo搭建個人免費博客——從零開始

摘要：前言搭建此博客是因為通過上了解到進而知道了可以把靜態網頁博客托管給倉庫或許您已經通搭建個人博客網站了解到如何通過實現個人博客網站的建立。但是盡管您已經成功建立博客網站，但是你需要對網站做合適的配置和調整才能迎合你的網站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

Paul_King 2019-08-29 12:14 評論0 收藏0
2017年最新基于hexo搭建個人免費博客——從零開始

摘要：前言搭建此博客是因為通過上了解到進而知道了可以把靜態網頁博客托管給倉庫或許您已經通搭建個人博客網站了解到如何通過實現個人博客網站的建立。但是盡管您已經成功建立博客網站，但是你需要對網站做合適的配置和調整才能迎合你的網站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

zacklee 2019-08-20 15:12 評論0 收藏0
2017年最新基于hexo搭建個人免費博客——從零開始

摘要：前言搭建此博客是因為通過上了解到進而知道了可以把靜態網頁博客托管給倉庫或許您已經通搭建個人博客網站了解到如何通過實現個人博客網站的建立。但是盡管您已經成功建立博客網站，但是你需要對網站做合適的配置和調整才能迎合你的網站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

hlcfan 2019-08-01 16:31 評論0 收藏0
2017年最新基于hexo搭建個人免費博客——自定義頁面樣式一

摘要：添加你修改的代碼找到你主題文件夾里的對應位置以我的路徑為例子里面有個文件夾和一個文件，主要用于打包代碼輸出成樣式的文件分析下其源代碼。注意本人不提倡去修改除了下的其他個文件里的源代碼，可能后面出問題不好還原。 showImg(https://segmentfault.com/img/remote/1460000008744124?w=1920&h=1280); 前言之前答應一個評論朋...

curried 2019-08-29 12:16 評論0 收藏0