hexo搭建博客(二)主題更換

文章目錄

• 其餘搭建
• 1. 主題
• 2. 語言
• 3. NexT主題
• 3.1 下載NexT主題
• 3.2 更換主題
• 3.3 在菜單欄開啓一些跳轉頁面

其餘搭建

hexo4快速搭建博客(一）快速搭建一個博客
hexo4快速搭建博客(三)美化 很全面 收集不少資料
hexo4快速搭建博客(四)寫做技巧包含圖牀和自動變圖牀的插件
hexo4搭建博客系列(五)優化博客(無坑) 部署到阿里雲
hexo4搭建博客系列(六)百度，必應，谷歌收錄(無坑)

搭建一個博客不難，可是網上資料好多坑。可能我有些會寫錯，請在評論指出。可是有通過測試的。
我用的版本是 hexo4.0 + NexT7.6版本。
個人我的博客

1. 主題

主題文件都是存放在站點的themes文件下，默認爲landscape主題，主題能夠從hexo官網下載，每一個主題都會有文檔。

下載主題有兩種方式，一種是下載主題包而後放到themes文件中，而我喜歡用另外一種，就是使用GitBash從github上clone下來，可能速度有點慢，本身也能夠用第一種方法，去github直接下載。

2. 語言

一開始來是英文的，因此得改爲中文，打開站點目錄下的_config.yml。找到下面的代碼：

在language的值修改成: zh-CN

而後測試下就變中文。

3. NexT主題

3.1 下載NexT主題

我使用的是Next主題，比較火，出bug容易找到解決方案，訪問速度很快，簡潔。

打開GitBash，定位到你的博客站點目錄下，或者在你的博客站點目錄右鍵點擊GitBash。輸入以下指令：

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

而後等待下載，最後的themes/next 表示會把克隆的主題放到該目錄，具體能夠參考 官方。

3.2 更換主題

在站點目錄下的_config.yml文件中更改新下載的主題，把theme後面的值改成next，記得要有空格，這是yml文件得遵循yml語法。

而後使用以前說的三條指令啓動本地測試，訪問localhost:4000，就能夠看到更換的next主題

NexT主題中還有四個不一樣風格的主題，我是用Gemini風格，這個能夠改，在主題目錄下（next）的_config.yml中查詢 Schemes，而後下面有四種風格，都試試喜歡哪種，把不用的註釋，只能存在一個風格。

3.3 在菜單欄開啓一些跳轉頁面

仍是在主題目錄下的_config.yml中。把想要的頁面開啓，去掉#便可。

我開啓的從上到下分別是：首頁、閱讀排行（這個是我加的原先沒有，後面再說怎麼加）、歸檔、分類、標籤、關於我。能夠在menu中調換顯示順序。

可是這些頁面不會自動生成，得咱們建立。

好比：分類頁面，在站點目錄打開Git Bash，輸入

hexo new page categories

而後去站點目錄的source/categories的index.md 中，配置：copy過去便可。

---
title: 分類
type: "categories" # 這要跟主題目錄下的_config.yml的那個名稱同樣
comments: false # 不開啓評論
---

• 標籤頁面

hexo new page tags

在source/tags的index.md 中

---
title: 標籤 # 默認是顯示英文，須要本身改中文
type: "tags"
comments: false
---

• 關於頁面

hexo new page about

在source/about的index.md 中

title: 關於
date: 2019-11-30 22:52:16
type: "about"

# 而後下面就可使用Markdown語法介紹本身

• 文章閱讀排行頁面

hexo new page top

在source/top的index.md 中，添加：

---
comments: false
type: "top"
---
<div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("PqPgFdX018fr1aVY5hzsSsNI-gzGzoHsz", "3QD9vLXdOV4igzOOalSTkhkc");</script>
<script type="text/javascript">
  var time=0
  var title=""
  var url=""
  var query = new AV.Query('Counter');
  query.notEqualTo('id',0);
  query.descending('time');
  query.limit(1000);
  query.find().then(function (todo) {
    for (var i=0;i<1000;i++){
      var result=todo[i].attributes;
      time=result.time;
      title=result.title;
      url=result.url;
      var content="<p>"+"<font color='#1C1C1C'>"+"【文章"+time+"人觀看過】"+"</font>"+"<a href='"+"https://flunggg.cn/"+url+"'>"+title+"</a>"+"</p>";
      document.getElementById("top").innerHTML+=content
    }
  }, function (error) {
    console.log("error");
  });
</script>

而且在主題目錄下，themes\next\languages 中找到咱們最初在網站配置的語言，我是 zh-CN，因此我打開這個文件。在menu中添加 top: 閱讀排行。每次在菜單欄新增就得在這裏配置一箇中文意思。

menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  top: 閱讀排行
  tags: 標籤
  about: 關於
  search: 搜索
  schedule: 日程表
  sitemap: 站點地圖
  commonweal: 公益 404

• 歸檔頁面

hexo new page top

而後source\archives中配置

---
title: archives
type: "archives"
comments: false
---

觀看下篇系列博文 NexT主題的美化：hexo4快速搭建博客(三)美化 很全面 收集不少資料
有幫助的能夠點個贊，謝謝！

參考：

Hexo博客搭建全攻略(二)：NexT主題配置