Rexdf

The devil is in the Details.

更新了下博客主题

| Comments

今天更新了下博客主题，记录下内容。

前一篇文章有几张图片，看起来有点模糊，所以考虑加个fancybox，顺便也把置顶解决了下。

1. fancybox

用的是纯前端的解决方案，没有用jekyll插件的方式。插件方式可以参考 给博客写了个 Fancybox 的插件。 因为过多使用一些没有必要的Liquid标记，会对markdown文章造成污染，不利于迁移操作。

我主要是参考的 Octopress Customizations 和 在Octopress中添加图片放大，不过主要是前者，因为我的图片都没有用img标记。

具体来说，用如下方式表示图片

![GitLab CI/CD](/images/gitlab1.png){: .center .fancybox}

后面那个{: .center .fancybox}是kramdown的class标记。 接下来下载fancybox，把source目录里面的内容解压到source/javascripts/fancybox。然后只要改下模板，head区域导入fancybox的css和js以及footer区域执行触发fancybox。

headMyBlog
<script src="/javascripts/fancybox/jquery.fancybox.pack.js"></script>

<link rel="stylesheet" type="text/css" href="/javascripts/fancybox/jquery.fancybox.css" />

与

footerMyBlog
<script type="text/javascript">

$(function() {

  $('.entry-content').each(function(i){

    var _i = i;

    $(this).find('img.fancybox').each(function(){

      var img = $(this);

      var title = img.attr("title");

      var classes = img.attr("class");

      img.removeAttr("class");

      img.wrap('<a href="'+this.src+'" class="' + classes + '" rel="gallery'+_i+'" />');

      if (title != "") {

        img.parent().attr("title", title);

      }

    });

  });

  $('.fancybox').fancybox();

});

</script>

2. 文章置顶

因为octopress背靠的jekyll这座大山，背后社区是比较庞大的。静态博客程序的star排行榜上，Jekyll是排第一的，遇到问题比较容易搜索到解决办法。

所以我用的是 Jekyll: Making Posts Sticky Redux 中的第一种方法。也就是修改source/index.html和source/_includes/article.html

source/index.htmlMyBlog
...

<div class="blog-index">

  {% assign index = true %}

 
  {% for post in site.posts %}

  {% if post.sticky %}

  {% assign content = post.content %}

  {% assign sticky = post.sticky %}

    <article>

      {% include article.html %}

    </article>

  {% endif %}

  {% endfor %}

 
  {% assign sticky = false %}

  {% for post in paginator.posts %}

  {% unless post.sticky %}

  {% assign content = post.content %}

    <article>

      {% include article.html %}

    </article>

  {% endunless %}

  {% endfor %}

...

</div>

在source/_includes/article.html中适当地方加上如下内容就好了。

source/_includes/article.htmlMyBlog
{% if sticky %} [置顶] {% endif %}

Comments