学习完官方的文档,有很多地方都不明白那就对了,要不然你肯定就不是小白了。接下来的内容就是按照之前学习的步骤一步步搭建起自己的博客站点,遇到问题,解决问题,慢慢地就会变成大白。这里将要记录的内容就是从小白慢慢变成大白的经历。

我定义的大白阶段就是能够针对自己的需求随心所欲的定制自己的站点,这里就需要大量的前端知识了,如HTML、CSS、Javascript,对于一直想学习前端开发的我来说,这应该是个绝好的机会,通过对站点主题的一些改变,可以作为学习前端开发的最佳实践。同时可以在博客中记录学习心得,岂不是一举两得的美事!

初步了解Hexo站点的布局

Every templates apply to layout template by default.
每个模板都默认使用layout布局。

刚看完Hexo Docs中模版那一部分的时候,很不理解这是什么意思?这里就来谈谈Hexo的站点布局到底是怎样的?我觉得这是非常重要的,了解了这些,就可以对你的站点布局『为所欲为』了。

1、前提

上面说了,每个模版都默认使用layout布局,首先来看看themes目录下的light-ch目录,light-ch主题是基于hexo默认主题light的china适用版,详细请fork light-ch,这里主要以该主题为例。可以看到主题根目录下有如下结构:

light-ch/
├── _config.yml
├── languages/
├── source/
└── layout/
    ├── _partial/
    ├── _widget/
    ├── archive.ejs
    ├── category.ejs
    ├── index.ejs
    ├── layout.ejs
    ├── page.ejs
    ├── post.ejs
    └── tag.ejs

2、默认布局

Hexo的主题布局文件基本上是在layout这个文件夹下,每个模版都默认使用layout布局,那么来看看layout.ejs这个文件的内容。

<%- partial('_partial/head') %>
<body>
  <header id="header" class="inner"><%- partial('_partial/header') %></header>
  <div id="content" class="inner">
    <div id="main-col" class="alignleft"><div id="wrapper"><%- body %></div></div>
    <aside id="sidebar" class="alignright"><%- partial('_partial/sidebar') %></aside>
    <div class="clearfix"></div>
  </div>
  <footer id="footer" class="inner"><%- partial('_partial/footer') %></footer>
  <%- partial('_partial/after_footer') %>
</body>
</html>

结合局部模块的知识,不难看出这个layout.ejs就是一个完整的页面,有head、header、content、sidebar、footer以及after_footer,页面所有的部分都通过局部模块嵌入在这个文件中。然而中间有一段<%- body %>指的是什么呢?这里就是各个布局的关键所在。

每个Hexo站点基本上分为index(首页)post(文章详情页)page(导航标签页)archive(归档页)category(类别页)以及tag(标签页),没错就是Layout文件夹下的几个文件。它们每个都代表一种布局,将它们用来替换掉layout.ejs文件里的<%- body %>就得到了各个布局的页面代码。

其实你打开各个布局的文件,你会发现他们有些其实是很相似的,甚至是一样的。比如post.ejspage.ejs,这两者代码如下(以light-ch主题为例):

<!-- post.ejs -->
<%- partial('_partial/article', {item: page, index: false}) %>

<!-- page.ejs -->
<%- partial('_partial/article', {item: page, index: false}) %>

可以看出他们是一模一样的,他们都引用了_partial/article局部模块,事实上这两种在light-ch主题里的布局是一样的,当然你也可以通过在article.ejs里判断layout来使他们不一样。

3、首页布局

最后来看看index.ejs,它是首页布局,跟其他的布局还是不一样的。代码如下:

<!-- index.ejs -->
<% page.posts.each(function(item){ %>
    <%- partial('_partial/article', {item: item, index: true}) %>
<% }); %> 

这一块什么意思?首先是一个循环语句,因为首页要显示出近期发布的几篇文章,引入局部模块的时候使用了Local Variables(本地变量)的相关内容,这里是将post页面变量赋值给了本地变量item,换句话说,在_partial/article.ejs这个文件中所有的item变量都指的是post页面变量,里面使用了很多页面变量的一些键值,参考这里页面变量article.ejs的代码就容易多了。

下面分析article.ejs中一小段代码如下:

<article class="<%= item.layout %>">
  <% if (item.photos && item.photos.length){ %> <!--当文章存在照片的时候,也就是在前置声明中加入了photos变量-->
    <%- partial('post/gallery') %>    <!--就会引入这段代码,用来显示相册-->
  <% } %>
  <div class="post-content">
......

后面的代码可以自行分析一下,接下来我会添加一个全新的resume布局到站点中,通过这个实战应该会对Hexo的布局有更进一步的了解。

转载保存:Hexo | LP's Blog

Hexo主题中新添加resume布局

上一篇大致介绍了Hexo站点的布局,每个主题的布局结构是不一样的,但是都是类似的,所以明白了Hexo生成站点的原理就能看懂所有主题的布局,这里还是以主题light-ch为例来讲解如何添加一个新的布局resume.ejs

1、在layout文件夹中添加布局文件

想要一个新的布局,要么通过对layout的判断在article.ejs局部模块中修改,要不就是新建一个resume.ejs布局文件,指向另外一个局部模块。这里我选择了后面一种方法,避免混乱。

首先在layout文件下创建resume.ejs文件,里面代码如下:

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

它指向的是一个局部模块,里面就是想要显示的样式了。把它替换到layout.ejs文件中<%- body %>的位置上就是你的resume页面了。

假如这里替换到<%- body %>的样式也不是我想要的,那么就可以修改layout.ejs文件如下:

<%- partial('_partial/head') %>
<body>
  <header id="header" class="inner"><%- partial('_partial/header') %></header>
    <% if(page.layout == 'resume') {%>
      <%- body %>
    <% }else{ %>
      <div id="content" class="inner">
          <div id="main-col" class="alignleft"><div id="wrapper"><%- body %></div></div>
          <aside id="sidebar" class="alignright"><%- partial('_partial/sidebar') %></aside>
           <div class="clearfix"></div>
      </div>
      <% } %>
   <footer id="footer" class="inner"><%- partial('_partial/footer') %></footer>
  <%- partial('_partial/after_footer') %>
</body>
</html>

我只想要保留header以及footer的部分,其他的部分我想单独设计,那么如上加个判断条件就行了。当布局为resume的时候,完全按照我的_partial/resume模版样式。那么接下来就是考验设计网页的功底了。

2、resume布局的局部模块

_partial目录下创建resume.ejs局部模块,这里的内容就是想显示的页面布局了,可以发挥自己的设计能力,设计一个漂亮的页面,我的示例代码如下:

<div class="resume">
    <div class="resume-left">
      <img src="/assets/img/avatar/psb.jpg" alt="photo">
          <span>Email:</span>
          <a href="#">1911986273@qq.com</a>
    </div>
    <div class="resume-entry">
        <%- page.content %>
    </div>
</div>

页面结构有了,下面就要添加样式文件了,你可以在source/css/_partial/目录中添加resume.styl,然后在source/css/style.styl中引入(在最后一行加入@import '_partial/resume')就行了。

3、在页面中添加page

通过命令hexo new page resume创建一页,Hexo会自动在根目录下的source文件夹下创建resume文件夹,文件夹下有index.md文件,编辑index.md写上你的简历主要内容。

index.md的前置声明一定要加上layout: resume,不然你的布局就形同虚设了。(如果不设置,默认会是page布局)

 source/
    ├── _drafts/
    ├── _posts/
    ├── resume/
        ├──index.md

然后打开主题light-ch目录下的_config.yml配置文件,在menu下添加一行代码。

menu:
    首页: /
    个人简历: /resume

至此,大功告成,浏览一下个人简历页面。Demo

转载保存:Hexo | LP's Blog

Hexo站点中添加文章目录以及归档

通过前面的介绍,Hexo站点的布局应该了解得差不多了,这次主要介绍一下如何使用Hexo自带的帮助函数在站点中添加归档以及文章目录。添加这两块功能都是使用了Hexo提供的帮助函数,创建对应局部模块之前,首先要想想这两块内容应该属于哪个布局?要添加到哪个局部模块下?考虑这些是为了整洁性,当你添加的东西越来越多的时候才不至于令自己混乱。

一、文章目录

文章目录肯定是添加到post布局上,这个毋庸置疑,因为只有看文章详情页的时候才需要目录。那么我们在目录layout/_partial/post/下创建toc.ejs文件,代码如下:

<div id="toc" class="toc-article">
    <div class="toc-title">目录</div>
    <%- toc(item.content, {list_number: false}) %>
</div>

这里使用了Hexo提供的toc()帮助函数,它的使用方法如下:

<%- toc(str, [options]) %>

str就是文章内容,options有两个参数,一个是class,也就是html标签的class值,默认为toc;一个是list_number,是否显示列表编号,默认值是true。

接下考虑把这个局部模块放到哪呢,既然属于post布局,那么就看看layout/post.ejs代码如下:

<%- partial('_partial/article', {item: page, index: false}) %>

很明显,我们要到_partial/article.ejs文件里添加toc.ejs,添加后article.ejs代码如下:

......
    <div class="entry">
      <% if (item.excerpt && index){ %>   <!--01-->
        <%- item.excerpt %>
      <% } else { if (item.toc !== false) {%>   <!--02-->
        <%- partial('post/toc') %>
      <% } %>
        <%- item.content %>
      <% } %>
    </div>
......

01、判断是否有摘要以及index值,显然post.ejs传过来的index值为false; 02、接下来判断page.toc是不是不等于false,这一块的主要作用是可以在文章的前置声明里设置toc: false来关闭目录功能。当没有设置false时,插入上面写的toc.ejs局部模块。

OK!完美嵌入进去,接下来就是设置样式了,进入source/css/_partial/目录下,创建toc.styl,代码这里就不贴出了,具体查看github。最后别忘了在source/css/style.styl文件里加入这句了@import '_partial/toc'。显示如下图,样式可以自行调整。

二、归档sidebar

默认的hexo-theme-light主题没有添加归档的sidebar挂件,于是我将该widget添加到了主题light-ch中。先看一下效果如下图:

sidebar中的局部模块都在layout/_widget中,于是在该文件夹下创建archive.ejs,代码如下:

<% if (site.posts.length){ %>
  <div class="widget tag">
    <h3 class="title">归档</h3>
    <%- list_archives({format: "YYYY年MM月"}) %>
  </div>
<% } %>

然后在主题的配置文件中_config.yml中加入该widget,如下所示:

widgets:
    - category
    - archive
    - tagcloud
    - weibo

最后就是设置样式了,在source/css/_partial/sidebar.styl文件中加入了这么一段就能如上显示了。

.archive-list
    font-size 0.9em
    padding 15px 20px 
    .archive-list-count
        margin-left 8px
        font-size 0.8em
        color color-meta
        &:before
            content '('
        &:after
            content ')'

这段样式是为了和分类列表保持一致。详细代码参照github来自定义样式。

总结

这里通过添加文章目录以及归档侧边栏的实战练习,大致了解了如何在Hexo站点中添加局部模块和widget,基本上也就这两种类型。
诸如添加百度统计、多说评论以及微博小插件等等,都可以归属为上述两类,这里就不再赘述,详情可以参照github上代码,有什么问题可以随时向我提issue。

转载保存:Hexo | LP's Blog

Hexo主题中响应式布局设计

几乎所有的Hexo主题都是响应式布局的主题,在现在这个多屏的时代,特别是移动互联网时代,一个网站如果没有做成响应式的布局都不好意思拿出来,所以响应式布局非常的重要。

什么是响应式布局?响应式布局就是一套网页样式适应所有的屏幕,站点的内容不变,但是随着屏幕的大小不一样,网页的布局会随之改变。如下图所示。

其实我只是刚刚接触响应式布局,因为最近一直在学习前端相关知识,当我接触了它,并且在我的Hexo站点实战后,真是感觉太棒了,页面随着不同的屏幕大小呈现不同的样式。这样就解决了移动客户端访问页面时的尴尬。

响应式布局的最核心的内容应该就是CSS中的媒介查询,通过它可以在一个CSS文件中定制针对不同屏幕的样式, 从而实现了响应式布局。 想要简要了解一下的请查看媒介类型 | w3school。当然要掌握响应式布局可不仅仅只需这么点知识。建议找本书完整的学习一下。

前端时间我在Hexo站点中添加了resume布局,这一页的内容抛弃了原主题light-ch自带的布局及样式,但是随之抛弃就是原本已经设置好的响应式布局文件, 下面通过我对resume页面的改造来了解一下响应式布局的魅力。 主要内容就是要手动添加CSS代码中的媒介查询,使resume页面符合响应式布局。首先看一下最后的效果,如下图:



如何实现这种布局?先简单看一下resume页面的结构:

<div class="resume">
    <div class="resume-left"></div>
    <div class = 'resume-content'>
        <div class="resume-entry">
            <%- page.content %>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

结构很简单,分为resume-left以及resume-contentresume-content里包含文章主要内容resume-entry。实现布局的重点还是要看CSS代码,打开resume.styl文件,查看部分代码如下:

.resume{
    margin: 0 auto;
    width: 800px;
    @media screen and (max-width: 860px){
        width: 100%;
    }
}
.resume-content{
    float: right;
    width: 580px;
    @media screen and (max-width: 860px) {
        width: 100%;
        margin-left: -210px;
    }
    @media screen and (max-width: 500px){
        margin-left: 0;
        float: none;
    }
}
.resume-entry{
    margin: 30px;
    @media screen and (max-width: 860px) {
        margin-left: 200px;
    }    
    @media screen and (max-width: 500px){
        padding-left: 30px;
        margin-left: 0px;
    }

}

简单分析一下这段代码,这里有两个临界点,一个是宽度为860px时,一个是宽度为500px时。那么整个页面就分为3段宽度来分析:

(1)当宽度大于860px时,忽略掉所有@media部分就是它的样式情况;
(2)当宽度在500px到860px之间时,样式就变成了@media screen and (max-width: 860px)这里面规定的代码了;
(3)当宽度小于500px时,样式又替换成了@media screen and (max-width: 500px)里规定的代码了。

原理就是这样,页面比较简单,实现也很简单。学到这里,记载在此。待深入学习后再分享。

上述例子详细代码请点击light-ch | github查看。

转载保存:Hexo | LP's Blog

Hexo主题中实现多级分类

大部分的Hexo主题都将文章的分类放在了sidebar上面,并且都是支持多级分类的,然而默认的light主题并没有实现多级分类的功能,主要原因应该是该主题太老了,没人更新了,但是偏偏就有像我这样喜欢它的简洁风格的人。

有折腾就有收获,下面就来了解一下Hexo中是如何实现多级分类的。 还是以light-ch主题为例。首先看一下最终效果如下图:

上面提到分类一般放到sidebar上,于是在主题中找到layout/_widget/category.ejs文件,light主题最开始的代码如下:

<% if (site.categories.length){ %>
<div class="widget tag">
  <h3 class="title"><%= __('categories') %></h3>
   <% site.categories.sort('name').each(function(item){ %>
    <li><a href="<%- config.root %><%- item.path %>"><%= item.name %></a><small><%= item.posts.length %></small><  /li>
    <% }); %>
</div>
<% } %> 

这里将site.categories的所有分类,按照名字的顺序进行遍历,并显示在列表标签下,从这段代码可以看出,实现分类列表的主要原理就是这样。

然而这样并不能区分多级分类,因为多级分类名也会按照同样的等级以及样式显示在<li>标签下,不能跟一级分类区分开来。那么该如何区分呢?我最初的想法是通过判断一个列表是否有下阶分类,并通过设置不同的class类名来区分,如下代码所示。

<% if (site.categories.length){ %>
<div class="widget tag">
  <h3 class="title"><%= __('categories') %></h3>
   <% site.categories.sort('name').each(function(item){ %>
    <% if(item.parent) {%>
        <li><a class = "list-2"href="<%- config.root %><%- item.path %>"><%= item.name %></a><small><%= item.posts.length %></small></li>
     <% }else{%>
        <li><a href="<%- config.root %><%- item.path %>"><%= item.name %></a><small><%= item.posts.length %></small></li>
    <% } %>
  <% }); %>
</div>
<% } %> 

这里在分类的循环遍历里加了一个判断语句,当遍历到某个分类的时候,先判断它是否有父分类,也就是判断它是否为二级分类。如果是二级分类,放到带有class="list-2"的列表标签下,这样就跟一级分类区分开了,然后通过css,将list-2设置个margin-left值,进行缩进就OK了。

然而当有3级、4级分类怎么办?总不能list-3list-4吧,所以这种方式不可取,那么就要从html标签身上动手了,很自然就可以想到无序列表标签,一级分类下包含一个<ul>标签的二级分类。然而设置样式的时候只需要对所有liul设置缩进就行了。

那么问题就来了,页面结构的逻辑怎么写?这个就不用担心了,因为Hexo有封装好的帮助函数list_categories()。有了这个帮助函数就简单了,改写category.ejs代码如下:

<% if (site.categories.length){ %>
<div class="widget tag">
  <h3 class="title"><%= __('categories') %></h3>
     <%- list_categories(site.categories) %> 
</div>
<% } %> 

页面结构搞定了,在source/css/_partial/sidebar.styl中添加样式代码就行了。

.category-list
  font-size 0.9em
  padding 15px 20px 
  .category-list-count
    margin-left 8px
    font-size 0.8em
    color color-meta
    &:before
      content '('
    &:after
      content ')'

ul, ol, dl
  list-style none
  ul, ol, dl
    margin-left 20px
    li:before
      content '> '

这里的样式显示的效果就如上图那样,你可以自定义出你的样式。

补充:
list_categories([categories], [options])帮助函数可以添加参数。
例如当你不想显示多级分类了,不必去修改每篇文章的前置申明,只需设置depth参数就行了。
list_categories(site.categories,{depth: 1})这样就只会显示一级分类了。用法可以参考一下官方Docs或者这里

转载保存:Hexo | LP's Blog

Hexo部署至多个repo上,多域名指向

最近有好友会问,你那个博客站点域名是啥来着?我就发现之前申请的域名确实很难记,就算告诉过了很快就会忘了,虽然当时还觉得.com的域名很牛X的样子,发现问题后,果断入手了lupeng.me,这个域名虽然不是.com国际域名,但是相比而言要好记得多了,直接就是名字全拼,二级域名.me也比较新颖,由于站点只是一个简单的Blog,直接访问lupeng.me就OK了。

那么现在就有一个问题了,后台统计发现还是有一些老用户会访问我的Blog站点的,如果直接废除掉,感觉很不负责任。于是只能将该域名指向到之前的域名了。

显性URL指向 or 隐性URL指向,由于域名都是在万网上申请的,很遗憾被告知没有备案的域名不支持该功能。

当然你可以将两个域名都指向你的服务器一样OK了,但是这个博客站点只是搭载在了Github上,使用了Github的Pages功能,并没有自己的服务器,而且Github Pages是不支持多域名指向的,于是只能另寻他法了。

其实国内也有一家提供类似Github pages服务的公司,那就是Gitcafe。通过将Hexo部署到它上面,同样也可以获得类似pages的服务(因为服务器在国内,速度会比Github更加快),具体方法可以自己去Gitcafe官方站点上去找。

既然是同一个站点,而又部署到完全不同的服务器上,必须要一键部署才是最完美的,不然就得来回折腾,好在Hexo是支持这个功能的,非常方便,只要在_config.yml配置文件中如下配置,就OK了。

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    github: https://github.com/pengloo53/pengloo53.github.io.git
    gitcafe: https://gitcafe.com/pengloo53/pengloo53.git
  branch: master

上面repo替换成自己的repo地址就可以了。以后只要执行hexo d -g,就会自动将Hexo站点布置到上述两个Git repo中。

最后分别设置两个域名的CNAME类型的域名解析,使它们分别指向Github以及Gitcafe的pages就可以了。

当访问www.linux2me.com时,使用的是Github Pages服务,当访问lupeng.me时,使用的是Gitcafe Pages服务。

写在最后,当然有能力的完全可以搭载在自己的服务器上,使用自己的资源才是正确的价值观。

参考文章:Hexo多Repo部署——使用Github和GitCafe同时托管博客 | Less is More

转载保存:Hexo | LP's Blog

Hexo数据文件功能添加友情链接

Hexo3版本添加了一项数据文件的功能,大概意思就是可以将数据保存在文件中,然后从文件中读取数据,最后展示在站点上。官方Docs中简要介绍了一下Data files的使用方法。

正好想在站点上添加友情链接的功能,使用这个数据文件的功能,就可以将友情链接的数据保存在文件中,这样就避免了将数据直接写进HTML或者_config.yml配置文件中。

1. 添加数据文件

在Hexo根目录中的source目录中创建_data目录,然后在_data目录中新建links.yml文件,内容如下:

LP's Blog: http://pengloo53.farbox.com
xiaoxiao's Blog: http://xiaoyun.farbox.com
说说事: http://www.saysays.com

添加了两行数据,代表两条友情链接。

2. 添加主题布局文件

将友情链接放到右侧的sidebar中,于是需要在主题目录下的layout/_widget中添加文件links.ejs,内容如下:

<% if (site.data.links){ %>
  <div class="widget tag">
    <h3 class="title">友情链接</h3>
      <ul class="entry">
        <% for (var i in site.data.links){ %>
          <li class='link'><a href='<%- site.data.links[i] %>'><%= i %></a></   li>
        <% } %>
      </ul>
  </div>
<% } %>

其中的site.data.links就是上面创建的links.yml数据文件所对应的对象。

3. 填写配置文件

这里使用的是Hexo-theme-light_cn主题,在主题目录下的_config.yml文件中widgets下添加上links就OK了,如下图:

启动服务就可以看到如下图样式了。

以后想要添加友情链接,直接编辑links.yml文件就可以了,而不必去修改主题的配置文件。

转载保存:Hexo中数据文件功能添加友情链接 | LP's Blog

Hexo主题中添加日历云功能

从博客园还有wordpress站点中都能看到类似于下图所示的小模块,方便查看日历以及文章发表的日期。

之前查看每月写的文章都是通过归档的功能来实现的,显示年月以及对应月份的文章数量,如下图。

但是随着时间的不断增长,页面这块也会不断的增长,于是就想到要用日历云的小模块来替代掉目前的归档显示在站点widget区域。最终显示效果如下:

很清晰的看到4月份写了5篇文章,分别在6、7、12、13以及23号。点击对应的日期能直接定位到该日期下的文章,尝试一下效果请点击这里

这里使用了净土大哥开发的小插件,然后「厚颜无耻」的移植到了自己的博客里,如果使用的是正好净土大哥的Hexo主题,那么请移步到它的站点-Hexo日历插件 | 净土

如果使用的Hexo-theme-light_cn主题或者想移植到其他主题下,接着往下看。

1. 安装hexo-generator-calendar插件

npm install --save git://github.com/howiefh/hexo-generator-calendar.git 目的是为了产生文章日期信息的calendar.json文件,后续通过前端Ajax取得日历数据,最终展示成日历表格。

2. 添加相关文件

不想看我啰嗦的,直接看这次commit:Hexo-theme-light_cn@8f1bae1,相信你对着源码能添加上相关文件。

2.1 js文件

添加JS实现的日历模块外框。在主题目录下source/js目录下添加下面两个文件。

2.2 ejs文件

我们要在widget区域显示该模块,那么在主题目录layout/_widget目录下添加calendar.ejs文件,代码如下:

<div class="widget tag">
  <h3 class="title"><%= __('calendar') %></h3>
  <div id="calendar"></div>
</div>

提供一个div来显示日历云模块。注意title那块可以直接写成日历云,如果想实现多语言,那么去主题languages目录下配置对应语言的calendar字段即可

2.3 styl样式文件

在主题source/css/_partial/目录下添加calendar.styl文件。具体代码拷贝calendar.styl。其中用到两个样式变量确保在source/css/_base/variable.styl文件中已经定义好。一个是color-link,一个是color-calendar-post-bg

3. 修改相关配置

添加完一些必要的文件后,现在需要对一些现有文件进行修改。

3.1 引入js文件

添加完js文件,然后在layout/_partial/after_footer.ejs文件中引入js代码。添加内容如下:

<!-- add calendar widget -->
<% if (theme.widgets.indexOf('calendar') != -1){ %>
  <script src="<%- config.root %>js/calendar.js"></script>
  <script src="<%- config.root %>js/languages.js"></script>
  <script type="text/javascript">
    $(function() {
    <% if (theme.calendar.options){ %>
      $('#calendar').aCalendar('<%= theme.calendar.language || config.language %>', $.extend(<%- JSON.    stringify(theme.calendar.options ) %>, {single:<%= config.calendar.single %>, root:'<%= config.calendar.root %>'});
    <% }else{ %>
  $('#calendar').aCalendar('<%= theme.calendar.language || config.language %>',{single:<%= config.    calendar.single %>, root:'<%= config.calendar.root %>'});
    <% } %>
    });
  </script>
<% } %>

3.2 主题配置文件_config.yml

widgets下添加calendar,位置自定。然后在最后添加上calendar插件的配置代码:

calendar:
  language: zh-CN

只定义了语言language为中文,这样的配置就足够了。如果想自定义的话,可以修改calendar.js文件最后一段代码的相关参数,或者将参数填写在主题_config.yml里。例如:

calendar:
  language: zh-CN
  options:
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',     'October', 'November', 'December'],
    dayOfWeekShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    dayOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],

这样,应该就OK了。通过Hexo g重新生成以下,然后hexo s看看效果是否如上图所示。

转载保存:Hexo | LP's Blog

使用Nginx部署Hexo站点

在公司内网环境中,搭建一个静态站点,用于保存一些相关知识文档,并通过页面的形式展现出来。静态站点生成器这里我选择的是Hexo(一个基于Node实现的静态博客框架),而Web服务器首选当然是Nginx,简单高效。

1. 安装Nginx

这里我以Windows Server为例,安装非常简单,从官方站点页面下载Nginx软件包。下载完成后,直接解压到本地目录就行了。

打开cmd,进入Nginx目录,执行命令start nginx,然后你就可以在任务管理器中看到nginx的进程了。直接访问浏览器http://127.0.0.1,正常情况下,就能看到Nginx的欢迎界面了。如果不对,90%的可能是因为80端口占用问题,打开配置Nginx配置文件,修改一下默认端口就行了。

2. 配置Nginx

Nginx目录下打开conf/nginx.conf文件,部分内容如下:

...
server {
        listen       8080;
        server_name  127.0.0.1;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   html;
            index  index.html;
        }
...

如上,将默认80改成8080,然后在访问http://127.0.0.1:8080就OK了。下面location就是欢迎页面的访问路径,进入Nginx目录下html目录,可以看到有个index.html文件,这就是欢迎页面。

那么如何将Hexo静态站点部署在Nginx服务器下呢?

3. 部署静态站点

通过Hexo g命令生成的静态站点,默认就是Hexo站点目录中的public文件夹。

将生成好的静态站点(也就是public/目录),拷贝至Nginx目录下的html文件夹中。然后修改Nginx配置文件。

...
server {
        listen       8080;
        server_name  127.0.0.1;
        location / {
            root   html/public;
            index  index.html;
        }
...

只是修改了root字段为public目录,其他地方都不变,然后重新加载Nginx,打开cmd,在Nginx目录下执行nginx -s reload,重新访问http://127.0.0.1:8080,就可以看到Hexo静态站点了。这里要注意浏览器缓存的问题

问题

  1. Hexo其实是提供hexo s命令来实时查看访问页面,如果在服务器端启动hexo s,在浏览器中同样也可以通过服务器IP来访问站点,并且能实时显示当前状态。但是,通过我尝试后发现,hexo s效率非常低,只能适合在线调试,不适合作为站点访问。
  2. 更新的时候,需要使用hexo g重新生成站点,然后将public目录拷贝到Nginx目录中html文件夹下即可。

如何在站点中添加漂亮的小图标?

在一些页面上,可以看到一些小图标,非常漂亮。如下:

这些小图标看上去非常可爱,给页面带来更好观赏性的同时也提高用户的交互体验,这里简单介绍一下如何在页面中添加这些漂亮小图标,使自己的导航链接从这样子,

变成这样子。这里还是以light_cn主题为例来介绍,看我是如何给页面加上这些小图标的。

这些小图标本质上其实是一种字体,并不是嵌入的图片,当你从页面代码上去查看这个元素的时候,你可能会发现这个:

但是,content是个什么玩意?\f015这又是个啥玩意?

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

这样就清晰了一点,在定义有before伪元素前面添加了一个叫\f015的玩意,这个玩意显示出来就是小房子这个小图标。

好了,那么怎么能随心所欲的添加我们想要的小图标呢?

1. 基本原理

这些图标字体肯定是某人或者某组织设计出来了,这里就要提到Font Awesome这个网站了,据我所知,绝大部分Hexo站点使用的免费icon都是出自这个网站,它是挂在Github上的一个开源项目。

首先将项目文件下载下来,这里我们只使用cssfonts两个文件夹,将他们拷贝进Hexo项目主题目录下source目录中。(注意:拷贝进主题目录下的source目录中)

然后在主题目录下layout/_partial/head.ejs文件中引用这个css样式文件,添加如下一行代码。

<!-- Font-Awesome -->
<link rel="stylesheet" href="<%- url_for('/font-awesome/css/font-awesome.min.css') %>">

接下来你就可以随心所欲的使用它了,使用方法很简单,在你需要显示小图标的元素上加上class="fa fa-***"样式即可。

例如,首页链接前面加个小房子图标:<a class="fa fa-home">首页</a>即可。fa定义了要使用的FontFontAwesomefa-home代表的就是小房子图标,它的Content值都已经在font-awesome.min.css中定义好了,如下房子图标的Content值为\f015

.fa-home:before {
  content: "\f015";
}

2. 导航链接小图标

light_cn主题的导航链接是通过主题配置文件中menu以及submenu来进行配置的,如下:

menu:
  home: /
  archives: /archives
  books: /hexo
  about: /resume

submenu:
  rss: /atom.xml
  customization: /customization

这些链接通过配置需要随时变化,并不是直接写死在布局文件中的,所以无法直接给a标签添加class属性,所以我参照了Next主题的处理办法,链接的图标名称对应关系以配置文件的方式进行维护。如下:

menu_icon:
  home: home
  archives: archive
  books: book
  about: user
  rss: rss
  customization: question-circle

针对每一个导航链接都对应有一个图标名称,该名称即是fa-***中星星字符所代表的图标。全部图标的对应关系请参照Font Awesome Icons,这些列举了官方提供的所有图标。

最后修改layout/_partial/header.ejs导航部分代码如下:

<div class='header-nav-content inner'>
    <div id="main-nav" class="alignleft">
    <% for (var i in theme.menu){ %>
      <a href="<%- theme.menu[i] %>"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%- __(i) %></a>
      <% } %>
    </div>
    <div id="sub-nav" class="alignright">
    <% for (var i in theme.submenu){ %>
      <a href="<%- theme.submenu[i] %>"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%-     __(i)%></a>
      <% } %>
    </div>
</div>

通过menu找到要显示的导航链接,然后通过menu_icon找到显示的图标样式,赋予到class属性上即可。

3. 不同布局的图标

light_cn主题中针对不同的布局,会显示不同的导航图标。例如:

点击分类的时候显示文件夹图标

点击标签的时候显示标签图标

点击日期归档的时候显示日历图标

这个如何实现呢?这个就需要借助Hexo提供的变量来实现,不同的布局下具有不同的变量,例如分类布局具有page.category变量等等,然后通过判断,设置不同的图标即可。详细见如下代码:

<h2 class="archive-title<% if (page.tag){ %> fa-tag<% } else if (page.category){ %> fa-folder<% } else if (page.archive){ %> fa-calendar<% } %>"><%= title %></h2>

tag布局图标fa-tagcategory布局图标fa-folderarchive布局图标fa-calendar

除了通过使用class属性值外,还可以直接在css中定义某个元素的Font以及content属性值便可,这样就可以更灵活的实现一些样式。

转载保存:如何在站点中添加漂亮的小图标? | LP's Blog