免費AI編程助手
基本設(shè)置和了解
前言
前面的文章已經(jīng)能讓大家搭建起自己的博客，并通過網(wǎng)絡(luò)訪問了，通過基礎(chǔ)的發(fā)布文章和編輯既可以實現(xiàn)博客的運作了，其他的一些包括分頁和標簽、分類等都不用自己來操作實現(xiàn)，只要通過命令hexo g就可以了，如果大家看過了next主題的官網(wǎng)中介紹的配置，我會幫助大家對其中描述不清的地方進行講解。 <!--more-->
理解文章和頁面
當你前面的做好了后，現(xiàn)在還需要建立三個頁面：分類頁categories、標簽頁tags、關(guān)于頁about,以及一個html頁面放到根目錄source下，才能完善博客基本的內(nèi)容。 在根目錄配置文件中有一個設(shè)置希望設(shè)置為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 ##就是這個原因是設(shè)置后當你新建一個頁面后自動生成一個同名文件夾方便管理。
hexo new page categories
hexo new page tags
hexo new page abouttags里index.md設(shè)置
---
title: 標簽
date: 2017-03-01 19:31:10
type: "tags"
---
categories里index.md設(shè)置
---
title: categories
date: 2017-03-01 19:42:08
type: "categories"
---主題目錄下的配置文件設(shè)置如下
menu:
home: /
categories: /categories
about: /about
archives: /archives
tags: /tags
commonweal: /404.html一個文章應(yīng)該包含以下屬性在頂部
---
date: 2017-03-07
title: xxxxxxxxx
tags: xxxx #如果不想加入標簽可以為空
categories: xxxxx #如果不想加入分類可以為空
---添加Fork me on GitHub
去網(wǎng)址https://github.com/blog/273-github-ribbons 挑選自己喜歡的樣式，并復(fù)制代碼，添加到themes\next\layout_layout.swig的body標簽之內(nèi)即可 記得把里面的url換成自己的!
把側(cè)邊欄頭像變成圓形，并且鼠標停留在上面發(fā)生旋轉(zhuǎn)效果
修改themes\next\source\css_common\components\sidebar\sidebar-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 */添加音樂
去往網(wǎng)易云音樂搜索喜歡的音樂，點擊生成外鏈播放器，復(fù)制代碼直接放到博文末尾即可，height設(shè)為0可隱藏播放器，但仍然可以播放音樂，auto設(shè)成0可手動播放，默認是1自動播放，可把代碼放到themes/next/layout/_custom/sidebar.swig文件里，播放器會顯示在站點預(yù)覽中
實現(xiàn)文章標題欄顯示更多的文章信息
hexo-wordcount實現(xiàn)
這個是官方文檔上沒有提及的所以我來說下，可以讓你的文章標題位置更加富含信息，本插件可以為文章標題位置添加，文章字數(shù)，文章預(yù)計閱讀時間。
安裝WORDCOUNT
執(zhí)行命令
npm install hexo-wordcount --save主要功能
字數(shù)統(tǒng)計:WordCount 閱讀時長預(yù)計:Min2Read 總字數(shù)統(tǒng)計: TotalCount
查看post.swig模板
模板位置：themes\next\layout_macro\post.swig
{% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
<div class="post-wordcount">
{% if theme.post_wordcount.wordcount %}
<span class="post-meta-item-icon">
<i class="fa fa-edit"></i>
</span>
{% if theme.post_wordcount.item_text %}
<span class="post-meta-item-text">{{ __('post.wordcount') }}</span>
{% endif %}
<span title="{{ __('post.wordcount') }}" }}">
{{ wordcount(post.content) }} 字 ##我在這里加了一個單位上去
</span>
{% endif %}
{% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.post_wordcount.min2read %}
<span class="post-meta-item-icon">
<i class="fa fa-clock-o"></i>
</span>
{% if theme.post_wordcount.item_text %}
<span class="post-meta-item-text">{{ __('post.min2read') }}</span>
{% endif %}
<span title="{{ __('post.min2read') }}" }}">
{{ min2read(post.content) }} 分鐘 ##我在這里加了一個單位上去
</span>
{% endif %}
</div>
{% endif %}
因為已經(jīng)寫好了代碼，所以大家不用更改什么，只需要按自己需求來修改一些地方，我還對圖標進行了修改在FontAwesome官網(wǎng)上找到一些圖標替換了標簽里對應(yīng)的class值來實現(xiàn)目的。因為hexo默認引入了這個字體圖標庫，涉及到圖標的地方都可以自行來更改。
其他主題配置
另外評論系統(tǒng)推薦用多說，數(shù)據(jù)統(tǒng)計用不蒜子統(tǒng)計，搜索系統(tǒng)用local search,內(nèi)容分享用多說分享，配置起來最簡單好用。 next主題的官網(wǎng)文檔上寫了相關(guān)配置的設(shè)置方法都是在配置文件里進行值的設(shè)定，操作起來很簡單，我就不重復(fù)講了，如有其他問題歡迎提問，后面我會講如何來自定義CSS樣式和更改里面的一些設(shè)置。
更多建議：