hexo-theme-sam 主题使用方法

开始使用

安装主题

初始化

// "blog" 为文件夹名
$ hexo init blog

主题下载

初始化后进入blog文件夹，结构如下：

.
├ node_modules
├ scaffolds     // 模版文件夹
├ source        // 资源文件夹
├ themes        // 主题文件夹
├ _config.yml   // 网站的 配置 信息
├ .gitignore
└ package.json  // 应用程序的信息

进入themes主题文件夹，克隆hexo-theme-sam主题。

$ cd themes/
$ git clone git@github.com:Sam618/hexo-theme-sam.git

主题切换

切换回根目录，打开_config.yml网站配置文件；

$ cd ../

找到theme属性，并把值修改为hexo-theme-sam。

theme: hexo-theme-sam

主题预览

预览当前主题；
```
$ hexo server --debug
```
发现没有加载css文件，因为默认hexo使用了stylus预处理器；而hexo-theme-sam主题使用了SCSS预处理器，先不管它往后看。

插件准备

安装

$ npm install hexo-renderer-sass --save
$ npm install hexo-generator-json-content --save
$ npm install hexo-generator-feed --save

hexo-renderer-sass，主题使用的是SCSS，之后再预览就能加载css文件了；
hexo-generator-json-content，主题使用了本地搜索功能，这个插件会生成一个JSON格式的所有文章数据；
hexo-generator-feed，用于生成RSS订阅，经过配置，根目录会生成一个XML文件。

配置以下配置在根目录的_config.yml文件中写入。

hexo-generator-json-content插件生成的数据有许多是用不到的，参考官网配置如下：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: true
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true

hexo-generator-feed插件配置：

#RSS订阅
plugin:
  - hexo-generator-feed

主题更新

$ cd themes/hexo-theme-sam
$ git pull

语言切换

默认语言为英语，文件名为default.yml，在主题文件夹下的languages中；
配置在根目录的_config.yml中，属性为language；

language: zh-CN

现在一共有两种可选语言，英语和简体中文。

基础设置

站点信息

主要修改或添加以下内容：

title: 网站的标题
keywords: 网站的关键字
description: 网站的描述
author: 网站的作者
url: 网站的完整域名，格式 http://www.cfmwsc.cn/
root: 网站的位置，根目录就为 /

新建文章

只需使用命令hexo new后面选择模板post，hexo-test就是文章标题，注意文章标题最好是英文；

$ hexo new post hexo-test

文章有一些内容需要在官网了解。

文章摘要

在文章内容中添加就可以在主页显示摘要，如下所示：

评论设置

评论默认开启，在主题的配置文件_config.yml中：

comments: true

评论使用的是畅言平台，需要ID和KEY，在文件中修改配置：

# ID
changyan_appid: cysXoaLrO

# KEY
changyan_appkey: d728bfac2289e4139bef3956efe4401f

导航菜单

导航菜单可以修改图标和注释选项，链接需要加上index.html不然会导致识别不出当前页面，图标使用的是阿里的iconfont字体：

# 侧边导航
aside_menu:
  home:
    link: /index.html
    icon: wendang
  archives:
    link: /archives/index.html
    icon: wendang1
  tags:
    link: /tags/index.html
    icon: biaoqian1
  links:
    link: /links/index.html
    icon: lianjie
  about:
    link: /about/index.html
    icon: guanyu
  rss:
    link: /atom.xml
    icon: rss

分类与标签

分类与标签页默认并没有创建所以打不开，需要自己手动创建主页：

$ hexo new page tags

页面标题可以在主题文件夹languages语言文件夹中选择当前语言的配置文件中修改：

tags: 所有标签
categories: 所有分类

如果分类和标签是中文，就需要映射为英文以便链接和文件夹名为英文，在根配置文件中修改：

# 分类和标签的映射，中文就需要映射防止 BUG
category_map:
  技术开发: tech
  资源共享: share
  新闻动态: news
  生活杂烩: life
  点滴记录: diary
tag_map:

关于页面

和分类与标签页一样：

$ hexo new page about

about: 关于

本地搜索

本地搜索默认开启，上文有讲如何配置，设置在主题文件夹的_config.yml中：

# 搜索
search: true

`favicon`图标

一般放在根目录下，名字命名为favicon.icon；如有特殊要求也可在根目录下配置地址：

# 需要自己添加
favicon: /favicon.ico

`RSS`订阅

RSS只要装好插件基本就可以使用了，修改下导航菜单的RSS链接即可。

字体图标

如果想要修改需要先在根目录配置文件中设置：

# 修改字体图标链接，用的是阿里的 iconfont
fontface_url: //at.alicdn.com/t/font_pb2xepysv85gsyvi.css

修改导航菜单图标上文有讲，但是还有一些图标就要在SCSS文件中找了。

文章置顶

相关插件是hexo-generator-index，在文章的Front-matter设置：

---
top: true
---

这样的置顶是在它所在的那一页的效果，我们需要修改下插件的代码；在node_modules文件夹中找到hexo-generator-index文件夹，在lib文件夹中打开generator.js，修改如下：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) {
            if(a.top == b.top) return b.date - a.date;
            else return b.top - a.top;
        }
        else if(a.top && !b.top) {
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date;
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

自定义

前面其实说了一些自定义的内容，现在来设置样式，图片等。

个人头像

头像默认存储在hexo-theme-sam/source/img/avatar.png。
主题配置文件hexo-theme-sam/_config.yml配置头像地址，并且头像信息也在这里更改：

aside_show:
  avatar: /img/avatar.png
  name: 晨风明悟
  caption: 个人博客
  description: 观诸次为道，存神于想思。

背景图片

背景默认存储在hexo-theme-sam/source/img/background/中，有两个图像文件background.jpg为大图和background-media.jpg为小图。
也可以在hexo-theme-sam/source/css/_custom.scss中修改图片位置：

/* 背景 */
$custom-background-image: "/img/background/background.jpg";
$custom-media-background-image: "/img/background/background-media.jpg";

代码高亮

在hexo-theme-sam/source/css/_custom.scss中设置代码高亮外框样式：

/* 代码块高亮 */
$highlight-title-color: $color_fff;
$highlight-title-background-color: $color_19f;
$highlight-body-color: #abb2bf;
$highlight-body-background-color: #282C34;
$highlight-number-color: #999;
$highlight-number-border-color: $color_fff;

在hexo-theme-sam/source/css/_custom.scss中设置代码高亮风格：

$highlight-pre-color-attr: #e06c75;
$highlight-pre-color-selector-tag: #d19a66;
$highlight-pre-color-attribute: #e06c75;
$highlight-pre-color-keyword: #19f;
$highlight-pre-color-name: #ff4500;
$highlight-pre-color-string: #8fb774;
$highlight-pre-color-literal: #d19a66;
$highlight-pre-color-meta: #8fb774;
$highlight-pre-color-built_in: #53b0bd;
$highlight-pre-color-function: #c678dd;
$highlight-pre-color-comment: #5c6370;
$highlight-pre-color-number: #8fb774;
$highlight-pre-color-bullet: #8fb774;
$highlight-pre-color-variable: #e06c75;

文本高亮

在hexo-theme-sam/source/css/_custom.scss中可以设置代码高亮风格：

/* 代码颜色 */
$code-color: $color_fff;
$code-background-color: $color_19f;

其它自定义

基本所有颜色都可以在hexo-theme-sam/source/css/_custom.scss中设置。

导航
搜索框
侧边展示
链接颜色
分类颜色
标签颜色
标题颜色

ShenChang618/hexo-theme-sam