Hexo-Nexmon主題安裝和配置流程

Hexo-Nexmon主題安裝和配置流程

1. nexmon

參考網址：

https://docs.nexmoe.com/

安裝

cd themes # 載入主題目錄
git clone https://github.com/nexmoe/hexo-theme-nexmoe.git nexmoe # 安裝
cd nexmoe # 進入 Nexmoe 主題目錄
npm i --save hexo-wordcount
# Node 版本 7.6.0 之前,請安裝 2.x 版本 (Node.js v7.6.0 and previous) 
# npm install hexo-wordcount@2 --save
cp -i _config.example.yml _config.yml

此處只記錄踩坑點!!!

主題默認開啓了字數統計，所以必須要安裝插件：

npm i --save hexo-wordcount

儘量使用最新版的nodejs

進入主題文件夾：

cp _config.example.yml _config.yml

啓用

進入hexo的config配置文件，將theme值改爲nexmon（和主題文件夾名一致即可）

hexo clean && hexo g && hexo s

打開瀏覽器進入：

localhost:4000

配置

大多數配置參考主題config文件自帶註釋

友情鏈接的頁面

啓用友情鏈接後，需要在博客根目錄下的source文件夾內建立py.md文件，並在文件頭寫入：

---
title: links
date: 2013/7/13 20:46:25
layout: py
permalink: PY.html
---

友鏈格式：

 - [![標題](https://example.com/logo.png)](https://example.com/ "標題")

關於我頁面

啓用關於我頁面後，需要在博客根目錄下的source文件夾內建立me.md文件，然後在主題config文件中配置about頁面的名字即可，此處爲me

2. 坑

坑比較多，這裏排一下雷：

• 文章中引用圖片格式爲![avatar](xxx.jpg)，圖片放在資源文件夾下，資源文件夾爲md文件同級的同名文件夾，需要在hexo配置中啓用assets選項
• 給文章添加圖頭，格式爲：

  ---
  cover: /img/xxx.xxx
  coverWidth: 1200
  coverHeight: 750
  ---
  

  圖片放置在主題文件夾下的source目錄下的img內，圖片大小格式與圖片一致
• 主題bug：tagCloud高亮沒有顯示，解決辦法:直接把css加在index文件裏面： 在 nexmoe\layout\_widget\tagcloud.ejs裏面，和div標籤平行加上內容，最終修改結果如：

  <% if (site.tags.length){ %>
    <div class="nexmoe-widget-wrap">
      <h3 class="nexmoe-widget-title"><%= __('tagcloud') %></h3>
      <div id="randomtagcloud" class="nexmoe-widget tagcloud">
        <%- tagcloud() %>
      </div>
      <% if (theme.maxTagcloud){ %>
        <script>
          var maxTagcloud = parseInt(<%= theme.maxTagcloud %>);
          var tags_length = parseInt(<%= site.tags.length %>);
          var tags_arr = [];
          for(var i = 0; i < tags_length; i++){
            tags_arr.push(i);
          }
          tags_arr.sort(function (l, r) {
            return Math.random() > 0.5 ? -1 : 1;
          });
          tags_arr = tags_arr.slice(0, maxTagcloud < tags_length ? tags_length - maxTagcloud : 0);
          for(var tag_i = 0; tag_i < tags_arr.length; tag_i++){
            document.getElementById("randomtagcloud").children[tags_arr[tag_i]].style.display = 'none';
          }
        </script>
      <% } %>
    </div>
    <style>
      #nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+1) {
      background-color: rgba(255,78,106,0.15);
      color: rgba(255,78,106,0.8);
      }
      #nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+2) {
      background-color: rgba(255,170,115,0.15);
      color: #ffaa73;
      }
      #nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+3) {
      background-color: rgba(254,212,102,0.15);
      color: #fed466;
      }
      #nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+4) {
      background-color: rgba(60,220,130,0.15);
      color: #3cdc82;
      }
      #nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+5) {
      background-color: rgba(100,220,240,0.15);
      color: #64dcf0;
      }
      #nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+6) {
      background-color: rgba(100,185,255,0.15);
      color: #64b9ff;
      }
      #nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+7) {
      background-color: rgba(180,180,255,0.15);
      color: #b4b4ff;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta {
      margin: 25px 0px;
      font-size: 0;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
      border-radius: 20px;
      padding: 10px 18px;
      color: #fff;
      font-size: 14px;
      display: inline-block;
      margin-bottom: 5px;
      margin-right: 10px;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta a .nexmoefont {
      font-size: 14px;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta a:before,
      #nexmoe-content .nexmoe-post .nexmoe-post-meta i:before {
      margin-right: 5px;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+1) {
      background-color: rgba(255,78,106,0.15);
      color: #ff4e6a;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+2) {
      background-color: rgba(255,170,115,0.15);
      color: #ffaa73;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+3) {
      background-color: rgba(254,212,102,0.15);
      color: #fed466;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+4) {
      background-color: rgba(60,220,130,0.15);
      color: #3cdc82;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+5) {
      background-color: rgba(100,220,240,0.15);
      color: #64dcf0;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+6) {
      background-color: rgba(100,185,255,0.15);
      color: #64b9ff;
      }
      #nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+7) {
      background-color: rgba(180,180,255,0.15);
      color: #b4b4ff;
      }
    </style>
  <% } %>