2014-08-18

Hexo-基于hexo-theme-light的主题修改

一贯喜欢简约的风格，看到官方hexo-theme-light差不多能到碗里来，但是一旦“差不多”就说明还差一点，尤其是一些天朝内使用不便的链接或者功能，不改用起来就有种水土不服的感觉。也有一些国内开发者基于light主题的二次开发主题，但是本着自己动手丰衣足食的口号，决定为自己量身定做一份，记录如下：

1.更换googleapis相关的链接；

这是水土不服表现之一，如果不改这个页面加载起来有种生不如死的感觉，所以先改它。

1.1 文件 layout/_partial/after_footer.ejs

找到

1	ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

替换为

1	ajax.useso.com/ajax/libs/jquery/2.0.3/jquery.min.js

1.2 文件 source/css/_base/variable.styl

找到

1	fonts.googleapis.com/css?family=Lato:400,400italic

替换为

1	fonts.useso.com/css?family=Lato:400,400italic

附：landscape正房主题的googleapis相关的链接修改
1 文件 layout/_partial/after_footer.ejs
找到
1
ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
替换为
1
ajax.useso.com/ajax/libs/jquery/2.0.3/jquery.min.js
2 文件 layout/_partial/head.ejs
找到
1
fonts.googleapis.com/css?family=Source+Code+Pro
替换为
1
fonts.useso.com/css?family=Source+Code+Pro

2.分享

这是水土不服表现之二，默认自带的是AddThis，这再国外好像是相当火（反正我没用过），进文章一看便发现都是分享到facebook、twitter等之类的网站，显然是不符合国情的，于是决定换成百度分享。

内容全部替换为

<div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more"></a>
    <a href="#" class="bds_qzone" data-cmd="qzone"></a>
    <a href="#" class="bds_tsina" data-cmd="tsina"></a>
    <a href="#" class="bds_tqq" data-cmd="tqq"></a>
    <a href="#" class="bds_renren" data-cmd="renren"></a>
    <a href="#" class="bds_weixin" data-cmd="weixin"></a>
</div>

<script>
    window._bd_share_config = {
        "common": {
            "bdSnsKey": {},
            "bdText": "",
            "bdMini": "2",
            "bdPic": "",
            "bdStyle": "0",
            "bdSize": "16"
        },
        "share": {},
        "image": {
            "viewList": ["qzone", "tsina", "tqq", "renren", "weixin"],
            "viewText": “分享到",
            "viewSize": "16"
        },
        "selectShare": {
            "bdContainerClass": null,
            "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"]
        }
    };
    with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>

3.评论

这是水土不服表现之三，默认自带的是disqus，就评论它再国外是火不火的无聊问题了，反正在国内用起来比较费劲，果断换成多说。

3.1 文件 hexo/_config.yml

添加

1	duoshuo_shortname: xxx

注：其实xxx是你在多说系统注册的一个shortname，这方面自行科普。

3.2 全局载入多说的js，在layout/_partial/after_footer.ejs尾部中加入如下代码

<script type="text/javascript">
var duoshuo_shortname = '<%= config.duoshuo_shortname %>';
var duoshuoQuery = {short_name:duoshuo_shortname};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = 'http://static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
</script>

3.3 显示正文评论，文件 layout/_partial/comment.ejs

全文替换为

<% if (page.comments){ %>
    <section id="comment">
        <h1 class="title"><%= __('comment') %></h1>
        <div class="ds-thread" data-thread-key="<%- item.path %>"></div>
    </section>
<% } %>

3.4 显示列表评论数，文件 layout/_partial/article.ejs

找到

<% if (item.comment && config.disqus_shortname){ %>
    <div class="alignright">
         <a href="<%- item.permalink %>#disqus_thread" class="comment-link">Comments</a>
    </div>
<% } %>

替换为

1
2
3

<% if (!item.comment){ %>
    <a href="<%- config.root %><%- item.path %>" class="ds-thread-count comment-link alignright" data-thread-key="<%- item.path %>" data-count-type="comments"></a>
<% } %>

4.百度站内搜索

这是水土不服表现之四，默认使用的是google搜索，就不解释了，换成百度吧。

4.1 文件 layout/_widget/search.ejs

全文替换为

<SCRIPT language=javascript>
function search(formname) {
    formname.method = "get";
    formname.action = "http://www.baidu.com/baidu";
    document.search_form.word.value = document.search_form.word.value + " site:mjiayou.com";
    return true;
}
</SCRIPT>

<div class="search">
    <form name="search_form" target="_blank" onsubmit="search(this)">
        <input type="search" name="word" results="0" placeholder="<%= __('百度站内搜索') %>" onblur="this.value=''">
        <!-- <input type="submit" value="搜索"> -->
    </form>
</div>

注：其实搜索框的操作是有bug的，待解决

以上基本是必修内容，确保博客系统能全功能运转，以下为选修内容

域名11年注册，用了小四年，终于在前段时间给备案了，也体验以下当合法站长的感觉，得拿出来嘚瑟嘚瑟。

找到

<% if (config.author){ %>
  &copy; <%= new Date().getFullYear() %> <%= config.author %>
  <% } else { %>
  &copy; <%= new Date().getFullYear() %> <%= config.title %>
  <% } %>

替换为

1 2	© 2011-<%= new Date().getFullYear() %> <%= config.author %> <a href="http://www.miitbeian.gov.cn/">京ICP备15042793号</a>

6.1 新浪微博，新建文件 layout/_widget/weibo.ejs

内容如下（代码请自行去自己微博索取）

1
2
3

<iframe width="100%" height="550" class="share_self" frameborder="0" scrolling="no" 
src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=9&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=1734508991&verifier=faa09416&dpc=1">
</iframe>

内容如下

<div class="widget tag">
    <h3 class="title">友情链接</h3>
    <ul class="entry">
        <li><a href="http://www.cnblogs.com/" title="博客园">博客园</a></li>
        <li><a href="http://capegf.im/" title="Capegf's blog">Capegf's blog</a></li>
    </ul>
</div>

在widgets:位置添加

widgets:
-
- weibo
- blogroll

主要因为这个theme没有默认的archive widget，于是手动添加，又想和category、tag的widget保持一致，于是还得修改下styl。

7.1 新建文件 layout/_widget/archive.ejs

内容如下

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

7.2 文件 layout/_widget/category.ejs

全文替换为

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

7.3 文件 layout/_widget/_widget/tag.ejs

全文替换为

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

添加

.category-list-count
.tag-list-count
.archive-list-count
  padding-left: 15px
  color color-meta
  font-size: 0.85em
  &:before
    content: "("
  &:after
    content: ")"

.category-list
.tag-list
.archive-list
  font-size 0.9em
  padding 15px 20px
  ul, ol, dl
    list-style none

7.Fork me on Github

主要就是左上角fork me on github的图片展示，方便跳转github，一定的装x成分。

7.1 新建文件 layout/_widget/forkme.ejs

内容如下

<%if(page.layout !== 'false'){%>
<%}else{ %>
    <%- page.content %>
<%};%>
<a href="https://github.com/treason258" target="_blank"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://mjiayou.com/trefiles/image/forkme_left_white_ffffff.png" alt="Fork me on GitHub"></a>

7.2 文件 layout/layout.ejs

添加

1	<%- partial('_widget/forkme') %>

8.关于页面、RSS页面

8.1 文件 layout/_partial/header.ejs

添加

1 2	<li><a href="<%- config.root %>about-impress.html" target="_blank">关于</a></li> <li><a href="<%- config.root %>atom.xml" target="_blank">RSS</a></li>

青春不再 | 马加油DE博客

贪玩就像落叶，看似飞翔，却在堕落！

Hexo-基于hexo-theme-light的主题修改

1.更换googleapis相关的链接；

1.1 文件 layout/_partial/after_footer.ejs

1.2 文件 source/css/_base/variable.styl

附：landscape正房主题的googleapis相关的链接修改

1 文件 layout/_partial/after_footer.ejs

2 文件 layout/_partial/head.ejs

2.分享

3.评论

3.1 文件 hexo/_config.yml

3.2 全局载入多说的js，在layout/_partial/after_footer.ejs尾部中加入如下代码

3.3 显示正文评论，文件 layout/_partial/comment.ejs

3.4 显示列表评论数，文件 layout/_partial/article.ejs

4.百度站内搜索

4.1 文件 layout/_widget/search.ejs

以上基本是必修内容，确保博客系统能全功能运转，以下为选修内容

5.添加footer备案号

5.1 文件 layout/_partial/footer.ejs

6.添加常用widget

6.1 新浪微博，新建文件 layout/_widget/weibo.ejs

6.x 添加widget，文件 light/_config.yml

7.修改widget

7.1 新建文件 layout/_widget/archive.ejs

7.2 文件 layout/_widget/category.ejs

7.3 文件 layout/_widget/_widget/tag.ejs

7.4 文件 source/css/_partial/sidebar.styl

7.Fork me on Github

7.1 新建文件 layout/_widget/forkme.ejs

7.2 文件 layout/layout.ejs

8.关于页面、RSS页面

8.1 文件 layout/_partial/header.ejs

持续更新…

留言

1.更换googleapis相关的链接；

1.1 文件 layout/_partial/after_footer.ejs

1.2 文件 source/css/_base/variable.styl

附：landscape正房主题的googleapis相关的链接修改

1 文件 layout/_partial/after_footer.ejs

2 文件 layout/_partial/head.ejs

2.分享

2.1 文件 layout/_partial/post/share.ejs

3.评论

3.1 文件 hexo/_config.yml

3.2 全局载入多说的js，在layout/_partial/after_footer.ejs尾部中加入如下代码

3.3 显示正文评论，文件 layout/_partial/comment.ejs

3.4 显示列表评论数，文件 layout/_partial/article.ejs

4.百度站内搜索

4.1 文件 layout/_widget/search.ejs

以上基本是必修内容，确保博客系统能全功能运转，以下为选修内容

5.添加footer备案号

5.1 文件 layout/_partial/footer.ejs

6.添加常用widget

6.1 新浪微博，新建文件 layout/_widget/weibo.ejs

6.2 友链，新建文件 layout/_widget/blogroll.ejs

6.x 添加widget，文件 light/_config.yml

7.修改widget

7.1 新建文件 layout/_widget/archive.ejs

7.2 文件 layout/_widget/category.ejs

7.3 文件 layout/_widget/_widget/tag.ejs

7.4 文件 source/css/_partial/sidebar.styl

7.Fork me on Github

7.1 新建文件 layout/_widget/forkme.ejs

7.2 文件 layout/layout.ejs

8.关于页面、RSS页面

8.1 文件 layout/_partial/header.ejs

持续更新…

留言