Hexo 主题Light修改教程

感谢

首先感谢zipperary的教程，我这儿把我修改了的部分发上来做一个备份用。
官方主题下载地点

接下来发布我部署了的两个网址:gitcafe部署点
gitcafe我的博客,绑定域名http://snljzz.tk还是把gitcafe做为我的主站吧
github我的博客,绑定域名http://lxy361.tkgithub有时有点不稳定
两个地方是同步的

添加“多说”评论与“页面导航”

在多说进行注册，我用的是我的QQ号，获取通用代码。
将通用代码粘贴到 themes\light\layout\_partial\comment.ejs 里边，
其中var duoshuoQuery = {short_name:"szcx"}里的szcx是我的账号。

如下：

<% if (page.comments){ %>



    <% if (page.prev) { %>
    <%= __('prev') %>
    <% } %>
    <% if (page.next) { %>
    <%= __('next') %>
    <% } %>
    



 






<% } %>

添加小图标

在themes/light/layout/_partial/head.ejs里将
替换为将favicon.ico图标文件放在source目录下。

添加分类、标签云widget

很简单，在themes/light/_config.yml中，添加如下：

widgets:
- category
- tagcloud

添加友情链接widget

在themes/light/layout/_widget中新建名为blogroll.ejs的文件，编辑内容如下：


友情链接

遂州创信
Hexo博客

添加新浪微博widget(微博秀)

去新浪微博开放平台设置和生成微博秀代码。我用的139邮箱注册新浪。
在themes/light/layout/_widget中新建名为weibo.ejs的文件，将刚才的代码直接保存到这里。

在themes/light/_config.yml中，添加如下：

 widgets:  #站点右边栏，暂时默认，后面介绍修改和添加
  - search
 - category
 - tagcloud  #标签云
 - intro
 - weibo    #新浪微博秀
 - blogroll    #友情链接

主页文章显示摘要

编辑md文件的时候，在要作为摘要的文字后面添加``即可。

修改背景图片、文字颜色等

找到hexo\themes\light\source\css\_base\layout.styl，在body下面增加一条background-image url('/imgs/noise.png')
至于背景图片\themes\light\source\imgs\bozhu.png，用自己喜欢的即可。
然后在hexo\themes\light\source\css\_base\variable.styl中修改color区块中的属性，就可以改变网站不同元素的颜色了。

重头戏来了，我修改的`themes\light\_config.yml`文件

menu: #站点右上角导航栏，暂时默认
  首页: /
  归档: /archives
  关于: /about

widgets:  #站点右边栏
- search
- category
- tagcloud  #标签云
- intro
- weibo    #新浪微博秀
- blogroll    #友情链接

excerpt_link: 阅读全文 #替换为中文

plugins: 
- hexo-generator-feed

twitter: #右边栏要显示twitter展示的话，需要在此设置
  username: 
  show_replies: false
  tweet_count: 5

addthis: #SNS分享，身在天朝，当然用“百度分享”，暂时默认
  enable: true
  pubid:
  facebook: true
  twitter: true
  google: true
  pinterest: true

fancybox: true #图片效果，默认
google_analytics: #要使用google_analytics进行统计的话，这里需要配置ID
rss: /atom.xml #生成RSS，需要配置路径

根目录下的`_config.yml`文件设置

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 遂州创信
subtitle: 蓝江老涌的博客
description: 学习总结 思考感悟 知识管理 # 网站描述
author: 蓝江老涌
email: [email protected]
language: zh-CN

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://szcx.github.io
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
permalink_defaults:

# Directory
source_dir: source
public_dir: public

# Writing 文章布局、写作格式的定义，不修改
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight:
  enable: true
  line_number: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1

# Server
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
server_ip: localhost
logger: false
logger_format: dev

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-D
time_format: H:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 5 #每页5篇文章
pagination_dir: page

# Disqus #社会化评论disqus，我使用多说，在主题中配置
disqus_shortname:

# Extensions
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: light
exclude_generator:

#  Deployment 站点部署到github要配置，上一节中已经讲过
## Docs: http://zespia.tw/hexo/docs/deploy.html
deploy:
  type: github
  repository: [email protected]:szcx/szcx.github.io.git
  branch: master

添加RSS

hexo提供了RSS的生成插件，需要手动安装和设置。步骤如下：

安装RSS插件到本地：npm install hexo-generator-feed
开启RSS功能：编辑hexo/_config.yml，添加如下代码：
```
plugins:
- hexo-generator-feed
```
在站点添加链接：
在themes/light/_config.yml中，编辑 rss: /atom.xml
在themes/light/layout/_partial/header.ejs中，之间，添加一样代码
RSS

文章中插入图片

使用markdown写文章，插入图片的格式为![图片名称](链接地址)，这里要说的是链接地址怎么写。对于hexo，有两种方式：
使用本地路径：在hexo/source目录下新建一个img文件夹，将图片放入该文件夹下，插入图片时链接即为/img/图片名称。
使用七牛，有图片的链接地址。格式为![图片名称](链接地址)我用的是139邮箱注册的七牛。

加入左上角「fork me on github」

这里有 github 给出的教程，把代码插入到任意一个全局的模板文件中就行，比如layout.ejs的末尾。
我的themes\light\layout\layout.ejs文件如下：

<%
if(page.layout !== 'false'){
%>

<%- partial('_partial/head') %>


  <%- partial('_partial/header') %>
  
    <%- body %>
    <%- partial('_partial/sidebar') %>
    
  
  <%- partial('_partial/footer') %>
  <%- partial('_partial/after_footer') %>


<%}else{ %>
<%- page.content %>
<%};%>

接下来发布我部署了的两个网址:
github
gitcafe