自定义配置octopress

1.安装好之后可以简单配置一下:

主要是修改文件:_config.yml ,这个配置文件都有相应的注释。主要就是改一些博客头,作者名之类的东西。 注意最好把里面的twitter相关的信息全部删掉,否则由于GFW的原因,将会造成页面load很慢。

1.1添加百度统计,/source/_includes/custom/footer.html

1)把google的自定义字体去掉

2)添加以下文本到footer.html中

```
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?ada97da06266f7901b152f7e9cda2ada";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
```

3)添加CNZZ统计,修改source/_includes/custom/footer.html文件
copyright后添加统计代码即可

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1255137947'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1255137947%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>

1.2 分享和评论配置

主要介绍一下如何配置评论和分享到微博功能。步骤如下:

  • 在_config.yml中增加一项: weibo_share: true
  • 修改 source/_includes/post/sharing.html ,增加:(使用时将{}分别换为{}
    {% if site.weibo_share %}
        {% include post/weibo.html %}
    {% endif %}
  • 增加文件:source/_includes/post/weibo.html
  • 访问 http://www.jiathis.com/,获取分享的代码(登录自己的jiathis账号)
  • 访问 http://uyan.cc/ ,获得评论的代码(登录自己的jiathis账号)
  • 将上面2步的代码都加入到weibo.html中即可,添加后的内容如下
<!-- JiaThis Button BEGIN -->  
<div class="jiathis_style_32x32">  
    <a class="jiathis_button_qzone"></a>
    <a class="jiathis_button_tsina"></a>
    <a class="jiathis_button_tqq"></a>
    <a class="jiathis_button_weixin"></a>
    <a class="jiathis_button_renren"></a>
    <a href="http://www.jiathis.com/share?uid=2031184" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
    <a class="jiathis_counter_style"></a>
</div>  
<script type="text/javascript">  
var jiathis_config = {data_track_clickback:'true'};  
</script>  
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2031184" charset="utf-8"></script>  
<!-- JiaThis Button END -->  
<!-- UJian Button BEGIN -->  
    <div class="ujian-hook"></div>
    <script type="text/javascript" src="http://v1.ujian.cc/code/ujian.js"></script>
<!-- UJian Button END -->

<!-- UY BEGIN 友言插件-->  
<div id="uyan_frame"></div>  
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=2031184"></script>  
<!-- UY END -->  
  • 修改sass/base/_typography.scss,将其中的rticle blockquotefont-styleitalic改为normal,因为中文的引用文字用斜体显示其实并不好看。再将其中的ul, ol 的margin-left: 1.3em;修改为margin-bottom: 0em;

1.3 为octopress添加分类(category)列表

1.3.1 增加category_list插件

保存以下代码到plugins/category_list_tag.rb

module Jekyll  
  class CategoryListTag < Liquid::Tag
    def render(context)
      html = ""
      categories = context.registers[:site].categories.keys
      categories.sort.each do |category|
        posts_in_category = context.registers[:site].categories[category].size
        category_dir = context.registers[:site].config['category_dir']
        category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)
        html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"
      end
      html
    end
  end
end

Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)  

这个插件会向liquid注册一个名为category_list的tag,该tag就是以li的形式将站点所有的category组织起来。如果要将category加入到侧边导航栏,需要增加一个aside。

1.3.2 增加aside

复制以下代码到source/_includes/asides/category_list.html,(使用时将{}分别换为{}

<section>  
  <h1>分类目录</h1>
  <ul id="categories">
    {% category_list %}
  </ul>
</section>  

配置侧边栏需要修改_config.yml文件,修改其default_asides项:

default_asides: [asides/category_list.html, asides/recent_posts.html]  

以上asides根据自己的需求调整。

2.Header,Navigation,footer

2.1Navigation(导航栏)

  可以自行为导航栏添加项目,链接至不同的页面,在 /source/_includes/custom/navigation.html 中编辑即可。

    <ul class="main-navigation">
      <li><a href="{{ root_url }}/">博客主页</a></li>
      <li><a href="{{ root_url }}/blog/archives">文章列表</a></li>
      <li><a href="{{ root_url }}/category-cloud">分类云</a></li>
      <li><a href="{{ root_url }}/about">关于</a></li>
    </ul>

  当想添加一些页面,如“关于”页面,可以试验 rake new_page['name'] 命令来创建,如 rake new_page['about'] 后,会建立 source/about/index.html 文件,在此文件编辑,添加自己想要展示的内容,然后再 navigation.html 里添加正确的路径即可,如 <li><a href="/about">关于</a></li>

3.样式修改

  添加或修改控制样式,需编辑 sass/custom/_styles.scss ,博客的所有颜色控制在 /sass/base/_theme.scss 中进行设置。定制自己的配色,编辑 sass/custom/_colors.scss 。查看 HSL COLOR PICKER ,帮你挑选喜欢的颜色。

  修改布局,需要编辑 sass/base/_layout.scss ,可以修改各部分的宽度等。

3.1 导航栏倒圆角

  我设置的header区背景色透明,所以导航栏的直角有些尖锐,在 sass/custom/_styles.scss 中添加如下语句,将其修改为圆角:

    //倒圆角
    @media only screen and (min-width: 1040px) {
            body > nav {
                    @include border-top-radius(.4em);
            }

            body > footer {
                    @include border-bottom-radius(.4em);
            }
    }

4.滑动返回顶部按钮

  当文章较长,通常希望有一个返回顶部的按钮,如下方法实现了在页面右下方添加一个返回顶部的图片按钮,点击后可以滑动的返回顶部。

  在source/_include/custom/footer.html中添加如下代码,并将css部分移到header.html中以优化加载速度:

    <script type="text/javascript">
    $(document).ready(function(){
      // hide #back-top first
      $("#back-top").hide();
      // fade in #back-top
      $(function () {
          $(window).scroll(function () {
              if ($(this).scrollTop() > 100) {
                  $('#back-top').fadeIn();
              } else {
                  $('#back-top').fadeOut();
              }
          });
          // scroll body to 0px on click
          $('#back-top a').click(function () {
              $('body,html').animate({
                  scrollTop: 0
              }, 800);
              return false;
          });
      });

    });
    </script>

    <style type="text/css">
    #back-top {
      position: fixed;
      bottom: 30px;
      left: 80%;
      margin-bottom: 0px;
    }

    #back-top a {
      width: 80px;
      display: block;
      text-align: center;
      font: 11px/100% Arial, Helvetica, sans-serif;
      text-transform: uppercase;
      text-decoration: none;
      color: #bbb;

      /* transition */
      -webkit-transition: 1s;
      -moz-transition: 1s;
      transition: 1s;
    }
    #back-top a:hover {
      color: #000;
    }

    /* arrow icon (span tag) */
    #back-top span {
      width: 80px;
      height: 80px;
      display: block;
      margin-bottom: 0px;
      background: #ddd url(/images/top.png) no-repeat center center;

      /* rounded corners */
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;

      /* transition */
      -webkit-transition: 1s;
      -moz-transition: 1s;
      transition: 1s;
    }
    #back-top a:hover span {
      background-color: #888;
    }
    </style>
    <p id="back-top">
      <a href="javascript:;"><span></span></a>
    </p>

  最后,还需要将返回顶部的图片放入 source/images ,命名为 top.png (或修改footer.html中图片的路径)。

5.二维码展示

  在关于页面或边栏可以展示你的个人博客的二维码,方便移动终端扫描访问你的博客,插件主页 点击这里

  在侧边栏显示,则将 qrcode.html 放入 source/_includes/custom/asides/ 中,在 _config.ymldefault_asides 添加 custom/asides/qrcode.html 即可显示。

或者将 qrcode.html整合到about.html 代码添加到你想展示的页面的HTML文件中亦可。

6.让博客中连接在新窗口打开

  由于markdown不支持这一语法,如果要自己用html标签实现,又有些违背了markdown以内容为重的立意。

  参考博文《在Octopress中为markdown的超链接加上target="_blank"》,可以通过将如下代码添加到 {OCTOPRESS_HOME}/source/_includes/custom/head.html文件末尾来实现:

    <script type="text/javascript">

    function addBlankTargetForLinks () {

      $('a[href^="http"]').each(function(){

          $(this).attr('target', '_blank');

      });

    }

    $(document).bind('DOMNodeInserted', function(event) {

      addBlankTargetForLinks();

    });

    </script>

7.列表的排版

  默认情况,所有文字的排头会对齐,但如果有列表项的情况下也如此,列表头就会冲出文章的主体区块了。

  在octopress/sass/custom/_layout.scss文件中找到#$indented-lists: true行,去掉#注释即可。

$indented-lists: true

8.404ERROR页面

ocotopress/source目录下,增加404.htmlrank new_page[404.html]并做出自定义的编辑。本博客使用了腾讯公益404,推荐大家使用,为社会贡献一分正能量。公益404

    ---
    layout: page
    title: "404 Error"
    date: 2013-4-21 02:35
    comments: false
    sharing: false
    footer: false
    ---
    <center><h1>blog.sherlocky.com 404!</h1></center>
    <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="http://blog.sherlocky.com/" homePageName="回到博客主页"></script>

9.日期格式修改

  • 修改_config.yml中的date_format参数为%Y-%m-%d %A,并添加配置time_format: "%H:%M:%S"

    具体格式说明可以参考http://ruby-doc.org/core-1.9.2/Time.html#method-i-strftime

  • 修改source/_includes/post/date.html文件,将其中的\{\{ page.date_time_html }}\{\{ post.date_time_html }}分别替换为(请自觉去掉“\”,因为octopress处理大括号的问题,不加就不能显示,加了又不对,下同):

\{\{ page.date | date: '%Y-%m-%d %H:%M:%S %A' }}
\{\{ post.date | date: '%Y-%m-%d %H:%M:%S %A' }}
  • 如果要修改文章列表项里的日期格式,可以修改source/_includes/archive_post.html文件,修改<time>标签中对应的year,month,day即可

    PS:%A表示英文的星期

10.在Octopress中为markdown的超链接加上target="_blank"

Octopress的Issues Open links in a new window就给出了比较完美的答案,简单hack a 标签。
请在{YOUR_OCTOPRESS}\source\_includes\custom\head.html文件后面添加下面的代码 (YOUR_OCTOPRESS是你Octopress的主目录)

function addBlankTargetForLinks () {  
  $('a[href^="http"]').each(function(){
      $(this).attr('target', '_blank');
  });
}

$(document).bind('DOMNodeInserted', function(event) {
  addBlankTargetForLinks();
});

PS:代码来源 https://gist.github.com/4523641

11.使文章以摘要形式展示

默认情况下在博客的首页是显示每篇文章的全部内容,更多时候我们只想在首页展示文章的一部分内容,当点击阅读全文时进入到文章的详细页面,在Octopress中可以很轻松实现该功能:

  • 1.在文章对应的markdown文件中,在需要显示在首页的文字后面添加<!—more—>,执行rake generate后在首页上会看到只显示<!—more—>前面的文字,文字后面会显示Read on链接,点击后进入文章的详细页面;

  • 2.如果想将Read on修改为中文,可以修改_config.yml文件

    excerpt_link: "阅读全文&rarr;"  # "Continue reading" link text at the bottom of excerpted articles
    

参考

  1. 小熊的博客
  2. 象写程序一样写博客:搭建基于github的博客
  3. 将博客从GitHub迁移到GitCafe
  4. 定制Octopress - CSDN
  5. 定制Octopress - 推酷
  6. MarkDown简单示例
  7. Ruby开源项目介绍(1):octopress——像黑客一样写博客
  8. 利用octopress部署博客到github
  9. git@gitcafe 的一些笔记
  10. Windows下搭建Octopress博客
  11. 设置octopress首页的日期格式
  12. 在Octopress中为markdown的超链接加上target="_blank"
  13. 用Github和Octopress搭建博客-windows
  14. GitCafe/Help
  15. paddingme
  16. 为octopress添加分类(category)列表
  17. Octopress博客设置