Hexo折腾记 Ⅲ

发表于 2015-12-04

用Hexo搭建本博客至今为止，感觉不错，管理起来很方便，Markdown排版文字的确很赞。接下来这一篇文章想更为深入的探讨，比如如何编程的方式来修改Hexo成更为灵活的布局或创建新的功能：

边栏Widget - 最新随笔

可直接自己在模板template写或通过帮助创建Hexo helper plugin来实现。在此分享后者的做法：

代码原理

获取指定目录或全站的随笔并排序遍历输出而已

<% site.categories.findOne({name: 'project'}).posts.sort('date', -1).each(function(post){ %>
    <li>
      <a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
    </li>
<% }) %>

执行代码安装插件recent_posts

npm install hexo-helper-recent_posts --save

在主题目录下的_widget目录下新建widget文件recent_posts.ejs (比如ROOT\themes\jacman\layout_widget)，代码如下（如有必要可自定义修改ulClass和liClass并添加相关的样式）：

<div class="linkslist">
    <p class="asidetitle"><%= __('recent_posts') %></p>
    <div class="linkslist clearfix">
        <%- recent_posts({     count: 6, 
                            ulClass: '',
                            liClass: ''}) %>
    </div>
</div>

打开主题_config.yml, 启用recent_posts这一widget：

#### Widgets
widgets: 
- github-card
- category
- tag
- recent_posts // 启用recent_posts
- links
##- douban
- rss
##- weibo

创建Filter - 文章尾部增加版权信息

Hexo博客系统天生具有良好的可扩展性，Hexo的插件基本上分为Deployer、Filter、Generator、Renderer、Tag等很多种类。其中Filter插件可用于修改一些特定的数据。比如这种before_post_render Filter会在文章正式渲染之前执行，具体的执行和渲染步骤可以参见关于渲染的官方文档。

Blog & CMS & DotNetNuke

By Baldwin

发表于 2015-12-03

最近重新拾起CMS这一领域的研究，希望借助DNN重新规划自己的职业生涯或工作方式。

CMS的扩展之术
一趟 MVP 的旅程：在 Logdown 學到的幾件事

一个台湾华人创建的博客网站，专注优雅的书写平台（Markdown）, 可对比国内的简书或国外的 Medium。

小孩教育

By Baldwin

发表于 2015-12-02

孩子其实不需要玩具，他们需要的是工具。给他工具，给他书，教他技能，他自己会玩出各种东西。
常带着孩子到野外走走，带他看看水里游泳的蚂蟥，看看野生的蛇。如果院子太小，给他租一亩地，给他买各种植物的种子，在一亩地里种上几十种作物。老农会教他怎样耕作，不会收他学费。

也许孩子长大后会说一口小镇口音的普通话，会说一口英国人听不懂的英文，但是这没什么，他是和土地和底层一起长大的，生命力会很顽强，也比一般的孩子健康。

免费的代价 PK 收费的便利

By Baldwin

发表于 2015-12-02

最近看了这两篇文章，感觉的确需要重新审视一些原本固有的观念和想法，在此分享大家：

买贵的，任性地省钱

一种不一样的生活态度和境界，至少最后一条Tip对我们程序猿来说是明智的选择，工欲善其事必先利其器。

免费才是最贵的

程序猿全新的消费观，实实在在的心声和想法，感触颇多，特别是对软件和墙的思考，希望更多的人都能尊重每个行业，其中包括程序猿产出的作品软件，或付费或捐献的方式来支持让你生活更美好的软件。

PS: 今年这季《奇葩说》陆陆续续看了好些集，且不论辩题有多奇葩或辩论过程多虐心，倒是蔡康永每次总结陈词时娓娓道来，核心无非总是强调 - 时间是一件神器，没有时间，一切无从谈起，时间成本是无价，任何观念和价值都可以让位或被时间同化。由此推论，当你为了获取免费的同时，所付出就是时间的代价成本。不妨留更多的时间投资到别处：

投资要投时间对我们有利的

时间自由，是比财务自由更重要的事儿

先有 Mac 还是先有钱？

最后还是想说：凡事不可扣上绝对的帽子，故此有时有意地淘淘货消磨时间也算是一种慢生活的节奏 :)

开发资源汇总

By Baldwin

发表于 2015-12-01

资讯

程序员播客

专注程序员感兴趣的话题，包括 Web 设计和开发，移动应用设计和开发，创业以及一切 Geek 的话题。值得好好过一下。

InfoQ

InfoQ（Information Queue）是一个在线新闻/社区网站，上面的资料比较权威，中文版的更新速度比较慢

码农周刊

码农周刊是一份专为程序员打造的IT技术周刊，每周会有小惊喜

回答网站

Stack Overflow

程序员的问答网站，必备
SegmentFault

国内的问答网站，目前还是挺活跃的

知乎

一个神奇的网站，各种奇葩想法

远程工作

Andy 的个人博客

摄影学习备忘

By Baldwin

发表于 2015-11-27

分享一些学习摄影的资源及笔记心得。

算是国内比较有诚意的摄影教程，适合入门和明白一些误区和概念

免费课程 - 橄榄图摄影课堂

良知塾 - 李涛老师教程

本人第一个单反500D，也是目前还在用的，新增EF 50mm f/1.4 USM 人像头。

镜头和焦距的关系如图：

官方教程 - EOS 600D深度解析

李涛老师的教程一定过，了解一些摄影的理念和思想是必须的。

后期学习方法：

取法乎上，寻师经典
务先大体，鉴必穷源
诚心正意，自证良知

Adobe Camera Raw预处理步骤：

自动校准：镜头校准，相机校准，白平衡校准
预处理：

全局：正确的黑白场，准确的清晰度，适当的饱和度，丰富的层次
局部：目标调整工具HSL，画笔，渐变，径向
调性：影调（影：明暗黑白关系；调：色彩关系）
输出：锐化除噪

可关注的微信号：摄影修行，教摄影，摄影笔记，蜂鸟网，POCO摄影社区。

最近关注的素材资源网站：

摄图网 - 拥有设计资源的账号(QQ)

千图网

基于Hexo搭建的博客展示

By Baldwin

发表于 2015-11-26

在此列举一些用Hexo搭建的博客，算是比较可看的，其中还包含一些教程：

官方主题库

Yilia主题作者博客

Jark’s Blog | Jacman主题作者博客

IIssNan’s Notes | Next主题作者博客

The Bloom of Youth | 锦瑟华年

Hexo折腾记 Ⅱ

By Baldwin

发表于 2015-11-24

继续捣鼓Hexo博客框架，细化更为个性的地方。比如：

新增自定义页面

不妨以新增一个简历页面（个人博客建立优雅的简历页面不失为一个推销自己的方式）为例，不同的主题可能会有些微区别，修改步骤如下：

命令新增页面 $ hexo new page resume

拷贝page.ejs并重命名为resume.ejs，修改代码如下：

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

按照路径_partial/post/resume在目录post下拷贝article.ejs并重命名为resume.ejs，修改代码如下:

<div id="main" class="page" itemscope itemprop="blogPost">
    <article itemprop="articleBody"> 
    <header class="article-info clearfix">
      <h1 itemprop="name">
        <%= item.title %>
      </h1>
    </header>
    <div class="article-content">
        <%- item.content %>  
    </div>             
    </article>
</div>

打开文件layout.ejs, 增加resume布局的判断代码如下:

<% } else if(page.layout=='resume'){ %>
    <%- partial('_partial/head') %>
      <body>
        <div id="container">
          <%- body %>
        </div>
      </body>
     </html>
<% } else if(page.layout=='page'){ %>

打开路径Hexo\source\resume下的index.md，增加layout: resume设置。

（可选）在主题配置文件_config.yml新增菜单：

##### Menu
menu:
  主页 | Home: /
  ##索引 | Index: /index
  归档 | Archives: /archives
  关于 | About: /about
  简历 | Resume: /resume

此时全部设置完毕，部署后可直接访问your_github_name.github.io/resume访问到该独立简历页面。

创建模板帮助插件

你可以在主题目录下的scripts文件夹里创建一些全局性的模板帮助方法，从而在模板直接调用即可。比如我们可以创建一个页面标题的方法，代码如下：

/** 
* page_title helper
*
* Usage:
*   <head>
*     <title><%= page_title() %></title>
*   </head>
*/

hexo.extend.helper.register("page_title", function () {
  var title = this.page.title;

  if (this.is_archive()){
    title = this.__('archive_a');

    if (this.is_month()){
      title += ': ' + this.page.year + '/' + this.page.month;
    } else if (this.is_year()){
      title += ': ' + this.page.year;
    }
  } else if (this.is_category()){
    title =  this.__('categories')+' : ' + this.page.category;
  } else if (this.is_tag()){
    title = this.__('tags')+' : ' + this.page.tag;
  }

  return title;
});

注意在此方法体你可以通过this访问到对象page，site，config等，如你所见，一些全局方法比如is_archive()或本地化方法__('archive_a')都必须经由this来调用。

复制以上代码到新建文件page_title.js里。接下来打开head.ejs并修改呈现页面标题的代码如下：

原代码：

<%
  var title = page.title;

  if (is_archive()){
    title = __('archive_a');

    if (is_month()){
      title += ': ' + page.year + '/' + page.month;
    } else if (is_year()){
      title += ': ' + page.year;
    }
  } else if (is_category()){
    title =  __('categories')+' : ' + page.category;
  } else if (is_tag()){
    title = __('tags')+' : ' + page.tag;
  }
  %>
    <title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>

新代码：

<% var title = page_title(); %>
    <title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>

参考教程 - WRITING HEXO TEMPLATE HELPERS

Hexo折腾记

By Baldwin

发表于 2015-11-20

自定义404页面

直接在根目录（指的不是Hexo目录下，而是Hexo/source目录下）下创建自己的 404.html 就可以。如腾讯公益404页面：

<html>
<head>
<meta charset="UTF-8" />
<title>404 | Hacker's Blog</title>                   
</head>
<body>
<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>
</body>
</html>

启用第三方评论系统

静态博客只能使用第三方评论系统，在此整合多说为例。直接用你的微博/豆瓣/人人/百度/开心网帐号登录多说。同时修改当前主题的配置文件，比如/themes/jacman/_config.yml，找到选项duoshuo_shortname, 替换成你的账号即可：

#### Comment
duoshuo_shortname: sunblognuke   ## e.g. wuchong   your duoshuo short name.
disqus_shortname:     ## e.g. wuchong   your disqus short name.

你也可以在多说后台自定义CSS，比如评论头像鼠标悬停旋转效果和隐藏多说底部版权，代码如下：

.ds-avatar{-webkit-border-radius: 5px !important;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:5px !important;
box-shadow: inset 0 -1px 0 #3333sf !important;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf !important;
-webkit-transition: 0.4s !important;
-webkit-transition: -webkit-transform 0.4s ease-out !important;
transition: transform 0.4s ease-out !important;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度）*/
-moz-transition: -moz-transform 0.4s ease-out !important; }
.ds-avatar:hover{box-shadow: 0 0 10px #fff !important; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1) !important;
-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1) !important;
transform: rotateZ(360deg) !important;/*图像旋转360度*/
-webkit-transform: rotateZ(360deg) !important;
-moz-transform: rotateZ(360deg) !important;}
/*隐藏多说底部版权*/
#ds-thread #ds-reset .ds-powered-by {
    display: none;
}

更多教程参看《多说CSS修改》

动动手指，给你的Hexo站点添加最近访客（多说篇）

整合Swiftype站内搜索

更新：swiftype开始收费，目前这一设置对大部分已经不实用了。

参考这两篇教程：

使用swiftype实现站内搜索

Swiftype 专业站内搜索工具

利用swiftype为hexo添加站内搜索v2.0

步骤大概如下:

新建文件swiftype_search.ejs，代码如下：

<% if (theme.swiftype_search.enable){ %>
<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

  _st('install','<%= theme.swiftype_search.id %>','2.0.0');
</script>
<% } %>

添加代码到文件after_footer.ejs：

<!-- Swiftype_search Begin -->
<%- partial('swiftype_search') %>
<!-- Swiftype_search End -->

添加配置项到主题文件_config.yml

swiftype_search:
  enable: true
  id: "zpAq-EQUfMzEzP6ybWEU" ## e.g. "zpAq-EQUfMzEzP6ybWEU" for your swiftype search id

添加class - st-default-search-input到header.ejs

部署Github的README.md

如何部署Github时保证README.md不被渲染：

添加README.md文件：Hexo目录下的source根目录下创建README.md文件，编辑保存。
防止README.md被渲染：编辑Hexo目录的_config.yml文件中的“skip_render”参数，skip_render: README.md

在Github平台搭建Hexo免费静态博客

By Baldwin

发表于 2015-11-20

环境准备

安装Git

在此下载:http://git-scm.com/download/win

推荐安装绿色版本PortableGit, 下载解压到一个新文件夹即可，随即添加git.exe所在路径（比如E:\Dev\PortableGit\bin）到环境变量（如何添加环境变量请自行百度）

Windows下Git安装指南

安装node.js

在此下载:http://nodejs.org/download/

不必纠缠版本，选择对应系统版本 - x86或x64即可

安装时直接保持默认配置即可。

安装Hexo

Installation

确保git， node安装正确（包括环境变量的配置），可在命令提示符CMD窗口输入git和node，npm看看是否有相关提示。

打开命令提示符，执行如下命令：

$ npm install -g hexo

如果npm因为各种墙的原因不给力，安装起来卡得死慢，可以考虑替换镜像方案cnpm, 安装如下：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

Quick Start

setup your blog

新建目录，比如D:\Hexo, 目录右键进入命令提示符窗口，执行如下命令：

$ hexo init

[] Copying data

[] You are almost ! Dont forget to run `npm install` before you start b
logging with Hexo!

Hexo随后会自动在目标文件夹建立网站所需要的文件。然后按照提示，运行 npm install（在 D:\Hexo下）

$ npm install

会在D:\Hexo目录中安装 node_modules。

Start the server

运行下面的命令（在D:\Hexo下）

$ hexo server

[] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

表明Hexo Server已经启动了，在浏览器中打开以上网址，这时可以看到Hexo已为你生成了blog。你可以按Ctrl+C 停止Server。

Create new post

运行下面的命令（在D:\Hexo下）

$ hexo new "My New Post"

会在D:\Hexo\source_posts目录下生成一个markdown文件：My-New-Post.md

可以使用一个支持markdown语法的编辑器（比如Sublime Text）来编辑该文件。

Generate static files

执行下面的命令，将markdown文件生成静态网页。

$ hexo generate

该命令执行完后，会在 D:\Hexo\public\ 目录下生成一系列html，css等文件。

部署到Github

部署到Github前需要配置_config.yml文件，首先找到下面的内容

# Deployment
## Docs: http:hexo.io/docs/deployment.html
deploy:
type:

然后修改成如下格式：

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

执行部署命令如下：

$ hexo clean

$ hexo deploy

命令总结

2.3.1 常用命令

hexo new postName #新建文章

hexo new page pageName #新建页面

hexo generate #生成静态页面至public目录

hexo server #开启预览访问端口（默认端口4000，ctrl + c关闭server）

hexo deploy #将.deploy_git目录部署到GitHub

hexo help  #查看帮助

hexo version  #查看Hexo的版本

2.3.2 复合命令

hexo deploy -#生成加部署

hexo server -g  #生成加预览

命令的简写为：

hexo n == hexo new

hexo g == hexo generate

hexo s == hexo server

hexo d == hexo deploy

Baldwin's Blog

Coding - Keep Calm and Carry On

Hexo折腾记 Ⅲ

边栏Widget - 最新随笔

创建Filter - 文章尾部增加版权信息

Blog & CMS & DotNetNuke

小孩教育

免费的代价 PK 收费的便利

开发资源汇总

资讯

回答网站

远程工作

摄影学习备忘

基于Hexo搭建的博客展示

Hexo折腾记 Ⅱ

新增自定义页面

创建模板帮助插件

Hexo折腾记

自定义404页面

启用第三方评论系统

整合Swiftype站内搜索

部署Github的README.md

在Github平台搭建Hexo免费静态博客

环境准备

安装Git

安装node.js

安装Hexo

Installation

Quick Start

setup your blog

Start the server

Create new post

Generate static files

部署到Github

命令总结