using for jekyll

<meta name="description" content="博客的引用链接,在阅读某一系列的博客的时候,我们经常会在其中某一篇博客看到上一篇博客的引用链接,在 jekyll 中如何实现类似的 功能呢?如下:"> </head>
<header>
	<p>Dec 25, 2014 • CoderSimple <a href="http://codersimple.github.io/jekyll/2014/12/25/using-for-jekyll.html">原文传送阵</a></p>
</header>

<article>
	<ol>
  • 博客的引用链接,在阅读某一系列的博客的时候,我们经常会在其中某一篇博客看到上一篇博客的引用链接,在 jekyll 中如何实现类似的 功能呢?如下:

    [create new post with jekyll]({*{ site.url }}/jekyll/2014/12/23/create-new-post-with-jekyll.html)

    效果: create new post with jekyll

  • 添加图片,我们可以使用 MarkDown 默认的语法,但是该语法比较简单,无法对图片进行控制,因此我们通过使用 <img> 标签

    <img src="{*{ site.url }}/images/kenisaike.jpg" width=1000px/>

  • 加载代码, 在书写博客时,经常要给出适量的代码进行说明,这里使用 google-code-prettfy 进行高亮,加以 jquery 进行 辅助,下载它的 small 包解压 到工程目录下并命名为 js,在引用的头部 _include/head.html 中加入如下如下代码:

     <link rel="stylesheet" href="/js/prettify.css" type="text/css"/>
     <script src="/js/prettify.js"></script>
     <script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
     <script>
     $(function(){
       $("pre").addClass("prettyprint");
       prettyPrint();
     })
     </script>
    
  • 分页,随着时间的推移,文章会越来越多(当然如果一直坚持写的话,O(∩_∩)O哈哈~),那么 分页的功能是少不了了,分页在官网中也提及了,首先开启分页功能,这是我的配置:

     paginate: 10
     paginate_path: "page:num"
    

    代码部分是参照官网在布局上做了的一点修改(默认是竖向的 list )这里的分页效果是本博客的样式,也是对 index.html 进行修改。

  • Disqus,方便大家的交流,如何为 jekyll 添加一个评论系统呢?这里以添加 Disqus 为例:

    1. 创建 Disqus 账号
    2. 注册你的网站
    3. 拷贝脚本文件保存为 disqus.html,并修改 var disqus_shortname = 'codersimple';,将 disqus.html放到 _include 目录下,脚本连接
    4. 修改配置文件 _config.xml,加入:

       disqus:
           shortname: 'your shor name'
      
    5. 添加脚本至文章布局 _layout/post.html,{*% include disqus.html %}
    6. 加入统计评论功能,将统计脚本添加至引用 {*% include disqus.html %} 的上方即可
  • Tips: 注意去掉 *,这里为了防止编译加上

    </article>
    
    </div>
    
    </body>
    posted @ 2015-01-04 00:28  codersimple  阅读(188)  评论(0编辑  收藏  举报