博客搭建——主题Light修改教程
这是部署了的我的博客：RP’s Blog可以点击预览效果
添加“多说”评论与“页面导航”
在多说 进行注册，我用的是我的QQ号，获取通用代码。
将通用代码粘贴到 \themes\light\layout\_partial\comment.ejs 里边，
其中var duoshuoQuery = {short_name:"paradoxallen"}里的paradoxallen是我的账号。
如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32<% if (page.comments){ %>
<nav id="pagination" >
<% if (page.prev) { %>
<a href="<%- config.root %><%- page.prev.path %>" class="alignleft prev" ><%= __('prev') %></a>
<% } %>
<% if (page.next) { %>
<a href="<%- config.root %><%- page.next.path %>" class="alignright next" ><%= __('next') %></a>
<% } %>
<div class="clearfix"></div>
</nav>
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%- config.root %><%- item.path%>" data-title="<%- item.title %>" data-url="<%- item.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"paradoxallen"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->
<section id="comment">
</section>
<% } %>
添加小图标
在themes/light/layout/_partial/head.ejs里将<link href="<%- config.root %>favicon.png" rel="icon">
替换为<link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">将favicon.ico图标文件放在source目录下。
添加分类、标签云widget
很简单，在themes/light/_config.yml中，添加如下：1
2
3
4
5
6
7widgets:
- category
- tagcloud
```
### 添加友情链接widget ###
在`themes/light/layout/_widget`中新建名为`blogroll.ejs`的文件，编辑内容如下：
友情链接
1 |
|
widgets: #站点右边栏，暂时默认，后面介绍修改和添加
- search
- category
- tagcloud #标签云
- intro
- weibo #新浪微博秀
- blogroll #友情链接
1
2
3
4
5
6
7
8
9
10
11
12
### 主页文章显示摘要 ###
编辑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，需要配置路径1
2
### 根目录下的_config.yml文件设置 ###
Hexo Configuration
Docs: http://hexo.io/docs/configuration.html
Source: https://github.com/hexojs/hexo/
Site
title: RP’s Blog
subtitle:
description: 学习总结 思考感悟 # 网站描述
author: paradox
email: paradoxallen@gmail.com
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://paradoxallen.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要配置
deploy:
type: github
repository: git@github.com:paradoxallen/paradoxallen.github.io.git
branch: master1
2
3
4
5
6
### 添加RSS ###
hexo提供了RSS的生成插件，需要手动安装和设置。步骤如下：
安装RSS插件到本地：`npm install hexo-generator-feed`
开启RSS功能：编辑`hexo/_config.yml`，添加如下代码：
plugins:
- hexo-generator-feed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16在站点添加链接：
在`themes/light/_config.yml`中，编辑 `rss: /atom.xml`
在`themes/light/layout/_partial/header.ejs中，<ul></ul>`之间，添加一样代码
`<li> <a href="/atom.xml">RSS</a> </li>`
### 文章中插入图片 ###
使用markdown写文章，插入图片的格式为``，这里要说的是链接地址怎么写。对于hexo，有两种方式：
使用本地路径：在`hexo/source`目录下新建一个`img`文件夹，将图片放入该文件夹下，插入图片时链接即为`/img/图片名称`。
使用[七牛](https://sso.qiniu.com/)，有图片的链接地址。格式为``我用的是139邮箱注册的七牛。
### 加入左上角「fork me on github」 ###
这里有[github](https://blog.github.com/2008-12-19-github-ribbons/)给出的教程，把代码插入到任意一个全局的模板文件中就行，比如`layout.ejs`的末尾。
我的`themes\light\layout\layout.ejs`文件如下：
<%
if(page.layout !== ‘false’){
%>
<%- partial(‘_partial/head’) %>
<%- partial(‘_partial/after_footer’) %>
<%}else{ %>
<%- page.content %>
<%};%>
`