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>
  <% } %>