Skip to content
hexo-theme-sam 主题使用方法
Branch: master
Clone or download
Latest commit 40feec2 Jan 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
languages
layout
source
README.md
UPDATE.md
_config.yml

README.md

hexo-theme-sam 主题使用方法

开始使用

安装主题

  1. 初始化
// "blog" 为文件夹名
$ hexo init blog
  1. 主题下载
  • 初始化后进入blog文件夹,结构如下:
.
├ node_modules
├ scaffolds     // 模版文件夹
├ source        // 资源文件夹
├ themes        // 主题文件夹
├ _config.yml   // 网站的 配置 信息
├ .gitignore
└ package.json  // 应用程序的信息
$ cd themes/
$ git clone git@github.com:Sam618/hexo-theme-sam.git
  1. 主题切换
  • 切换回根目录,打开_config.yml网站配置文件;
$ cd ../
  • 找到theme属性,并把值修改为hexo-theme-sam
theme: hexo-theme-sam

图片

  1. 主题预览
  • 预览当前主题;

    $ hexo server --debug
  • 发现没有加载css文件,因为默认hexo使用了stylus预处理器;而hexo-theme-sam主题使用了SCSS预处理器,先不管它往后看。
    图片

插件准备

  1. 安装
$ 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文件。
  1. 配置 以下配置在根目录的_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后面选择模板posthexo-test就是文章标题,注意 文章标题最好是英文;
$ hexo new post hexo-test
  • 文章有一些内容需要在官网了解。

文章摘要

在文章内容中添加<!-- more -->就可以在主页显示摘要,如下所示: 图片 图片

评论设置

  • 评论默认开启,在主题的配置文件_config.yml中:
comments: true
  • 评论使用的是畅言平台,需要IDKEY,在文件中修改配置:
# 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中设置。

  • 导航
  • 搜索框
  • 侧边展示
  • 链接颜色
  • 分类颜色
  • 标签颜色
  • 标题颜色
You can’t perform that action at this time.