Fun

Jekyll调整

对Jekyll搭建的网站进行前端调整

调整代码高亮

按照这篇文章搭建出的网站,代码高亮是亮色的,这对我这种什么都喜欢选暗色主题的“黑人”来说,不太适应。所以准备对此进行调整。

Jekyll的Markdown插件一般喜欢用kramdown,而它使用的语法高亮工具是Rouge(好像还没法用其他的了)。所以我们需要做的就是对rouge的配色做调整。读一读文档,发现rouge在处理代码高亮的时候配色是用的./css/syntax.css里的配置。

所以就有两种解决方案:

  1. 手动配色。 选择你喜欢的配色,就像#ffffff这样手动设置组分颜色。
  2. 使用主题配色。

以下简述“使用主题配色”的操作步骤:

  1. 安装rouge: (For Ubuntu:sudo gem install rouge)
  2. 查看可用主题:(For Ubuntu:rougify help style)
  3. 生成配色:因为我不想直接覆盖syntax.css,这里生成到temp.css里,等下手动覆盖过去(For Ubuntu:rougify style {你选择的主题名字} > ./temp.css)
  4. 覆盖原配色:用./temp.css里的代码,覆盖./css/syntax.css里的全部代码

日志字数统计

post.html中使用page.content | strip_html | strip_newlines | remove: " " | size来统计文章字数

增加点击效果

加一个script就好了

<script type = "text/javascript">
var mouseSum = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[mouseSum]);
        mouseSum = (mouseSum + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 9999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#6651ff"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

因为没有jQuery,所以需要先引入

 <script language="javascript" type="text/javascript" src="https://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>
本文总字数: 1236