hexo后记

Contents

  1. 1. 设置google analytics
  2. 2. sitemap
  3. 3. rss
  4. 4. 添加菜单
  5. 5. 修改新建post的框架
  6. 6. 修改widgets
  7. 7. 创建文件后在编辑器中打开
  8. 8. read more
  9. 9. 重新部署问题
  10. 10. pagination设置
  11. 11. widget增加日历
  12. 12. site post 使用示例
  13. 13. 返回顶部
  14. 14. 修改header样式

设置google analytics

在themes/light/_config.yml中添加
google_analytics: [id]
这里的id填上你自己的谷歌分析的id即可,比如:UA-********-*

sitemap

安装

1
npm install hexo-generator-sitemap --save

激活
_config.ymlplugins 下添加 hexo-generator-sitemap

1
2
plugins:
- hexo-generator-sitemap

rss

安装

1
npm install hexo-generator-feed --save

激活
_config.ymlplugins 下添加 hexo-generator-feed

1
2
plugins:
- hexo-generator-feed

在themes/light/_config.yml中添加

1
2
menu:
RSS: /atom.xml

添加菜单

themes/light/_config.yml

1
2
3
4
menu:
Home: /
Archives: /archives
GitHub: https://github.com/howiefh

修改新建post的框架

scaffolds/post.md

1
2
3
4
5
title: {{ title }}
date: {{ date }}
categories:
tags:
---

修改widgets

themes/light/_config.yml

1
2
3
4
5
6
7
widgets:
- search
- category
- tag
- twitter
- tagcloud
- recent_posts

创建文件后在编辑器中打开

scripts/autoOpenNewPost.js

1
2
3
4
5
var spawn = require('child_process').spawn;

hexo.on('new', function(target){
spawn('gvim', [target]);
});

使用hexo new "title"新建后会调用gvim打开新建的文件

read more

文章中添加<!--more-->可以实现read more功能。

重新部署问题

修改后无法部署到github 删除 .deploy
删除tags 需要删除db.json

pagination设置

分页,设置每页显示10篇,archive,tag,category都激活每页10篇

1
2
3
4
5
6
7
8
9
per_page: 10

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

widget增加日历

themes/light/layout/_widget/calendar.ejs

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div class="widget tag">
<h3 class="title">Calendar</h3>
<div class="Calendar">
<div id="idCalendarPre">&lt;&lt;</div>
<div id="idCalendarNext">&gt;&gt;</div>
<span id="idCalendarYear">2008</span><span id="idCalendarMonth">8</span>
<table cellspacing="0">
<thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody id="idCalendar">
</tbody>
</table>
</div>
</div>
<script language="JavaScript">
var cale = new Calendar("idCalendar", {
//howiefh
/* SelectDay: new Date().setDate(10), */
SelectDay: new Date().setDate(this.Date),
onSelectDay: function(o){ o.className = "onSelect"; },
//howiefh
onToday: function(o){ o.className = "onToday"; },
onFinish: function(){
//howiefh
// $("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month;
$("idCalendarYear").innerHTML = "<a href='<%= config.root %>" + "archives/" + this.Year + "/'>" + this.Year + " "+ "</a>";
if (this.Month < 10) {
$("idCalendarMonth").innerHTML = "<a href='<%= config.root %>" + "archives/" + this.Year + "/" + "0" + this.Month + "/'>" + " " + this.Month + " " + "</a>";
} else {
$("idCalendarMonth").innerHTML = "<a href='<%= config.root %>" + "archives/" + this.Year + "/" + this.Month + "/'>" + " " + this.Month + " " + "</a>";
}

// var flag = [10,15,20];
// for(var i = 0, len = flag.length; i < len; i++){
// this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
// }

<% site.posts.each(function(post){ %>
var postdate = new Date("<%= post.date %>");
if (postdate.getFullYear() == this.Year && postdate.getMonth()+1 == this.Month) {
var day = postdate.getDate();
this.Days[day].innerHTML = "<a href='<%= config.root %><%= post.path %>' title='<%= post.title %>'>" + day + "</a>";
}
<% }); %>

//howiefh
}
});

$("idCalendarPre").onclick = function(){ cale.PreMonth(); }
$("idCalendarNext").onclick = function(){ cale.NextMonth(); }
</SCRIPT>

themes/light/languages/default.yml:

1
calendar: Calendar

themes/light/languages/zh-CN.yml:

1
calendar: 日历

themes/light/languages/zh-TW.yml:

1
calendar: 日曆

引用方法<%= __('calendar') %>
themes/light/layout/_partial/head.ejs:

1
<SCRIPT type=text/javascript src="<%- config.root %>js/calendar.js"></SCRIPT>

themes/light/source/css/style.styl:

1
@import '_partial/calendar'

themes/light/_config.yml

1
2
widgets:
- calendar

site post 使用示例

post 有哪些项 参照 db.json

1
2
3
4
5
<% site.posts.each(function(post) { %>
<li>
<a href="<%= config.root %><%= post.path %>"><%- (new Date(post.date)).getFullYear() %><%- (new Date(post.date)).getMonth()+1 %><%- (new Date(post.date)).getDate() %><%= post.title %></a>
</li>
<% }); %>

返回顶部

themes/light/layout/layout.ejs

1
2
<DIV style="DISPLAY: none" id=goTopBtn title="Scroll Back to Top"><IMG border=0 src="<%- config.root %>images/top.jpg"></DIV>
<SCRIPT type=text/javascript>goTopEx();</SCRIPT>

themes/light/layout/_partial/head.ejs

1
<SCRIPT type=text/javascript src="<%- config.root %>js/scrolltop.js"></SCRIPT>

themes/light/source/js/scrolltop.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// JavaScript Document
function goTopEx(){
var obj=document.getElementById("goTopBtn");
function getScrollTop(){
return document.documentElement.scrollTop+document.body.scrollTop;
}
function setScrollTop(value){
if(document.documentElement.scrollTop){
document.documentElement.scrollTop=value;
}else{
document.body.scrollTop=value;
}
}
window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";}
obj.onclick=function(){
var goTop=setInterval(scrollMove,10);
function scrollMove(){
setScrollTop(getScrollTop()/1.1);
if(getScrollTop()<1)clearInterval(goTop);
}
}
}

themes/light/source/css/_partial/scrolltop.styl

1
2
3
4
5
6
7
8
9
10
11
12
#goTopBtn
POSITION fixed
TEXT-ALIGN center
LINE-HEIGHT 30px
WIDTH 45px
BOTTOM 35px
HEIGHT 47px
FONT-SIZE 12px
CURSOR pointer
RIGHT 10px
_position absolute
_right auto

themes/light/source/css/style.styl

1
@import '_partial/scrolltop'

themes/light/source/images/top.jpg把这张图片放在相应目录

修改header样式

themes/light/layout/_partial/article.ejs

1
2
3
4
5
6
7
8
<div class="date-wrapper">
<div class="date-shadow"></div>
<div class="date-mask"></div>
<div class="dateTitle">
<span class="d"><%= item.date.toDate().getDate() %></span>
<span class="ym"><%= item.date.toDate().getMonth() + 1 %>/<%= item.date.toDate().getFullYear() %></span>
</div>
</div>

替换原来的

1
2
<div class="icon"></div>
<time datetime="<%= item.date.toDate().toISOString() %>"><a href="<%- config.root %><%- item.path %>"><%= item.date.format(config.date_format) %></a></time>

themes/light/source/css/_partial/article.styl

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
header
.date-wrapper
@media screen and (max-width: 600px)
display none

.dateTitle
color #fff
background #559bc8
position absolute
height 40px
width 80px
left -20px
-webkit-border-radius 6px 0 0 0
border-radius 6px 0 0 0
background-image -webkit-gradient(linear, left top, right top, color-stop(0, #258fb8), color-stop(0.2, #559bc8))
background-image -webkit-linear-gradient(left, #258fb8 0, #559bc8 20px)
background-image -moz-linear-gradient(left, #258fb8 0, #559bc8 20px)
background-image -o-linear-gradient(left, #258fb8 0, #559bc8 20px)
background-image -ms-linear-gradient(left, #258fb8 0, #559bc8 20px)
background-image linear-gradient(left, #258fb8 0, #559bc8 20px)
line-height 120%
-webkit-box-sizing border-box
-moz-box-sizing border-box
box-sizing border-box
text-align right
font-size 11px
font-family "MuseoSlabTumblr"
.d
display block
text-align right
font-size 20px
padding-top 8px
padding-right 6px
text-shadow -1px -1px 0 rgba(0,0,0,0.4)
.ym
padding-right 6px
display block
line-height 18px
text-shadow -1px -1px 0 rgba(0,0,0,0.3)
.date-shadow
background #258fb8
position absolute
height 40px
width 40px
left -12px
top 33px
-webkit-transform rotate(30deg)
-moz-transform rotate(30deg)
-o-transform rotate(30deg)
-ms-transform rotate(30deg)
transform rotate(30deg)
.date-mask
background #fff
position absolute
height 40px
width 40px
left 0
top 60px

2014.3.4:

根据Light-JimLiu修改,增加了多说最新评论模块,Links模块,ABOUT ME模块。修改的文件包括:

  • _config.yml
  • themes/light/_config.yml
  • themes/light/languages/default.yml
  • themes/light/languages/zh-CN.yml
  • themes/light/languages/zh-TW.yml
  • themes/light/layout/_partial/comment.ejs
  • themes/light/layout/_widget/about_me.ejs
  • themes/light/layout/_widget/calendar.ejs
  • themes/light/layout/_widget/duoshuo_recent_comments.ejs
  • themes/light/layout/_widget/links.ejs
  • themes/light/source/css/_partial/sidebar.styl
  • themes/light/source/images/okal-eltocat.jpeg
Updated: