Hexo博客网站再配置

这两天整理网站方面的事，本地IIS部署，个人网站，发现我的hexo做的个人网站实在很单调，于是找来资料做进一步的配置。

一、网站图标

看一下hexo\themes\modernist\layout\_partial\head.ejs，找到这句：

<link rel="icon" type="image/x-icon" href="<%- config.root %>favicon.ico">

我的是<link rel="icon" type="image/x-icon" href="<%- theme.favicon %>"> 不修改，好像也可以。。只是把favicon.ico放到hexo\source目录下了。

你懂的，将你的favicon.ico放到工程根目录下即可，也就是hexo\source目录。可以在线制作你的ico图标。

二、主题的更换

萝卜白菜各有所爱，玩博客换主题是必不可少的，hexo的默认主题为landscape，hexo的主题列表 Hexo Themes。
我比较喜欢 pacman，modernist、ishgo，raytaylorism。Pacman最为优秀，简洁大方小清新，同时移动版本支持的也很好，但作者并没有把很多参数分离出来给出可配置项，我最终选择了modernist。

安装modernist主题的方法就是一句git命令：

git
clone https://github.com/heroicyang/hexo-theme-modernist.git
themes/modernist

（参考了主题列表的文章里
Install：

Execute the following command, and modify theme in _config.yml to theme-name

$ git clone<repository>
themes/<theme-name>

）

安装完成后，打开hexo\_config.yml，修改主题为modernist

1	theme: modernist

打开hexo\themes\modernist目录，编辑主题配置文件_config.yml：

menu: #配置页头显示哪些菜单（下面几个自己定义页面，往下文看）

#  Home: /

  Archives: /archives

  Reading: /reading

  About: /about

#  Guestbook: /about

excerpt_link: Read More #摘要链接文字

archive_yearly: false #按年存档

widgets: #配置页脚显示哪些小挂件

  - category

#  - tag

  - tagcloud

  - recent_posts

#  - blogroll

blogrolls: #友情链接

  - bruce sha's duapp wordpress: http://ibruce.duapp.com

  - bruce sha's javaeye: http://buru.iteye.com

  - bruce sha's oschina blog: http://my.oschina.net/buru

  - bruce sha's baidu space: http://hi.baidu.com/iburu

fancybox: true #是否开启fancybox效果

duoshuo_shortname: buru #多说账号

google_analytics:

rss:

更新主题

cd themes/modernist

git pull

三、评论框

静态博客要使用第三方评论系统，hexo默认集成的是Disqus，因为你懂的，所以国内的话还是建议用多说。

多说——专门基于社交网络的评论系统，能够轻松的帮网站主搭建自己互动性极强的社区，让留言的用户都有“家”的感觉，功能强大且永久免费。

直接用你的qq账号/微博/豆瓣/人人/百度/开心网帐号登录多说，做一下基本设置。

如果使用modernist主题，在modernist_config.yml中配置duoshuo_shortname为多说的基本设置->域名中的shortname即可(fml710)。

你也可以在多说后台自定义一下多说评论框的格式，比如评论框的位置，对于css设置，可以参考这里，我是在HeroicYang的基础上修改的。

如果使用的是默认的landscape主题只需要修改themes\landscape\layout\_partial\article.ejs模板中的

<% if (!index && post.comments && config.disqus_shortname){ %>

 <section id="comments">

   <div id="disqus_thread">

     <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

   </div>

 </section>

<% } %>

改为

<% if (!index && post.comments && config.duoshuo_shortname){ %>

  <section id="comments">

   <!-- 多说评论框 start -->

<div id="ds-thread" class="ds-thread" data-thread-key="<%= post.path %>" data-title="<%= post.title %>" data-url="<%= post.permalink %>"></div>

<!-- 多说评论框 end -->

<!-- 多说公共JS代码 start (一个网页只需插入一次) -->

<script type="text/javascript">

var duoshuoQuery = {short_name:"datoublog"};

true(function() {

truetruevar ds = document.createElement('script');

truetrueds.type = 'text/javascript';ds.async = true;

truetrueds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';

truetrueds.charset = 'UTF-8';

truetrue(document.getElementsByTagName('head')[0]

truetrue || document.getElementsByTagName('body')[0]).appendChild(ds);

true})();

true</script>

<!-- 多说公共JS代码 end -->

  </section>

<% } %>

如果是其他主题，也只需要修改主题\layout\_partial\comment.ejs

四、自定义页面

执行new page命令：

hexo new page "about"

在hexo\source\下会生成about目录，里面有个index.md，直接编辑就可以了，然后在主题的_config.yml中将其配置显示出来。

上述步骤，也可以手工生成，在hexo\source\下手工新建about和index.md也是完全等价的。

因为markdown对table的支持不好，我是在about中直接建立index.html，里面书写页面内容，hexo会帮你加上头和尾。

五、404页面

GitHub Pages 自定义404页面非常容易，直接在Hexo/source目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目

才起作用，GitHub默认分配的二级域名是不起作用的，使用hexo server在本机调试也是不起作用的。

其实，404页面可以做更多有意义的事，来做个404公益项目吧，做点有意义的事情，也对得起这个域名。

目前有如下几个公益404接入地址，我选择了腾讯的。404页面，每个人可以做的更多。

404.html的内容可以设置为下面的内容

<span style="font-size:14px;"><html>

    <head>

         <meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />

         <title>公益404</title>

    </head>

    <body>

         <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="http://fml710.xyz/" homePageName="回到我的主页"></script>

    </body>

</html></span>

注：

1、页面有个链接默认是返回腾讯网，改修“homePageUrl”、“homePageName”两个参数，可定制化，

homePageUrl="http://yoursite.com/yourPage.html" homePageName="回到我的主页"

2、本地查看的话，<meta>中一定要加 http-equiv="Content-Type" content="text/html; 否则中文乱码，content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。