Hexo

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.yml 中 plugins 下添加 hexo-generator-sitemap

1
2
plugins:
- hexo-generator-sitemap

rss

安装

1
npm install hexo-generator-feed --save

激活
在 _config.yml 中 plugins 下添加 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: