本人用的模板是基于Codeboy的博客模板改造模板,(由于本人可能会有很多样式修改,所以不再将修改pullrequst到原项目,在此对codeboy模板表示感谢)。功能改造如下:

添加微信支付宝打赏

这里也是一个开源的项目,项目地址,使用很方便,直接引用到项目中,配置下就可了:

<script>
window.tctipConfig = {
        staticPrefix:   "http://static.tctip.com",
        buttonImageId:  1,
        buttonTip:  "zanzhu",
        list:{
            alipay: {qrimg: "http://blog.laofu.online/img/assets/o_zhifubao.png"},
            weixin:{qrimg: "http://blog.laofu.online/img/assets/o_weixin.png"},
        }
};
</script>

<script src="http://static.tctip.com/js/tctip.min.js"></script>

百度流量监控

为了查看个人的博客的人气,添加了百度的统计模块,可以方便的看到博客的pv/uv.注册地址

具体的添加方式如下 :

  1. 在_incluides文件夹下添加一个baidu_analyze.html的文件,内容如下

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

    {{site.baidu_analyze}} 是一个变量,可以把你申请的baidu的key值作为_config.yml的配置值存储下来。

  2. 下面只需要保证所有的post生成都能包含这个html就可以了 ,我的选择是在head里面中把baidu_analyze.html包含进去:

添加thickbox插件

这个插件是一个图片的浏览插件,thickbox官方网站。首先先引入对应的js ,具体的使用是在img的标签上包含一个a标签,这个动作可以使用jQuery方便的实现:

<script type="text/javascript">

      (function(){
            $("article img").each(function(index,value){

                var aDom=$("<a></a>").attr({"href":$(value).attr("src")+"?inlineId=myOnPageContent"}).addClass("thickbox");
                $(value).wrap(aDom);

            });
        })();
    </script>

thickbox的演示后的效果:

其它样式问题

  • 图片的样式由由居中改成居左

  • 去除代码行号样式错乱问题

github地址

第41篇 推荐一个jekyll博客模板的更多相关文章

  1. 前端设计师也有必要学习seo,推荐一个seo博客

    做前端设计师有一段时间了,现在越来越觉得作为一个前端设计师,必须要懂一些seo的知识. 因为公司的seo们,总是在网站做好以后,提出各种各样的网站修改的需求. 如果前端设计师,能够了解一些基本的seo ...

  2. 推荐一个静态博客兼笔记的工具:WDTP

    简介 WDTP(山湖录)不止是一款开源免费的GUI桌面单机版静态网站生成器和简单方便的前端开发工具,更是一款跨平台的集笔记.录音.个人知识管理.写作/创作.博客/网站内容与样式管理等功能于一体的多合一 ...

  3. 在Jekyll博客添加评论系统:gitment篇

    最近在Github Pages上使用Jekyll搭建了个人博客( jacobpan3g.github.io/cn ), 当需要添加评论系统时,找了一下国内的几个第三方评论系统,如"多说&qu ...

  4. 如何搭建一个独立博客——简明Github Pages与Hexo教程

    摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册.DNS设置.github和Hexo设置等过程,这是我写得最长的一篇教程.我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来,希望能给后 ...

  5. 搭建jekyll博客

    使用jekyll将markdown文件生成静态的html文件,并使用主题有序的进行布局,形成最终的博客页面. 特点 基于ruby 使用Markdown书写文章 无需数据库 可以使用GitHub Pag ...

  6. Jekyll博客添加Valine评论

    Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...

  7. 基于Jekyll的博客模板

    代码地址如下:http://www.demodashi.com/demo/13147.html 效果 环境配置 环境 Windows 10 Git Bash 安装ruby 下载rubyinstalle ...

  8. 转载请注明:Windows 系统必备好用软件&工具合集跟推荐 | 老D博客

    Windows 系统必备好用软件&工具合集跟推荐 97 63,371 A+ 所属分类:工具软件 一.浏览器 二.下载软件 三.播放软件 五.电子邮件客户端 六.图片/照片 浏览查看工具 七.文 ...

  9. Github pages + jekyll 博客快速搭建

    Github pages + jekyll 博客快速搭建 寻找喜欢的模版 https://github.com/jekyll/jekyll/wiki/sites http://jekyllthemes ...

随机推荐

  1. html列表问题

    HTML无序列表 无序列表是一个项目的列表,此列项目运用粗体圆点(典型的小黑圆圈)进行符号. 无序列表运用 标签 Coffee Milk 浏览器闪现如下: <ul "="&q ...

  2. 利用原生JS判断组合键

    <script type="text/javascript"> var isAlt = 0; var isEnt = 0; document.onkeydown = f ...

  3. (转载)Google的PageRank算法

    本文由张洋(敲代码的张洋)投稿于伯乐在线. 本文转载于:http://blog.jobbole.com/23286/ 很早就对Google的PageRank算法很感兴趣,但一直没有深究,只有个轮廓性的 ...

  4. 【转】JDBC学习笔记(9)——DBUtils的使用

    转自:http://www.cnblogs.com/ysw-go/ 使用DBUtils提供的功能需要使用commons-dbutils-1.6.jar这个JAR包,在Apache官网可以下载到 使用D ...

  5. sizeof 与 strlen

    一.sizeof     sizeof(...)是运算符,其值在编译时即计算好了,参数可以是数组.指针.类型.对象.函数等.    它的功能是:获得保证能容纳实现所建立的最大对象的字节大小.    由 ...

  6. 用vuejs仿网易云音乐(实现听歌以及搜索功能)

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用 ...

  7. 为用户增加sudo权限(修改sudoers文件)

    在使用Linux系统过程中,通常情况下,我们都会使用普通用户进行日常操作,而root用户只有在权限分配及系统设置时才会使用,而root用户的密码也不可能公开.普通用户执行到系统程序时,需要临时提升权限 ...

  8. 关于制作C语言头文件的思考

    我们接触的第一个c语言代码是这个: #include<stdio.h> main() { printf("Hello World"); } 这是最简单的c代码,然而,它 ...

  9. F# 之旅(上)

    写在前面的话 解答一下在上一篇文章<在Visual Studio中入门F#>中有人的提问, 1. 问:是准备写 F# 系列吗?    答:当然不是,本人也是刚刚学习 F#,只是翻译微软官方 ...

  10. The authenticity of host '172.16.33.53 (172.16.33.53)' can't be established的问题(日志六)

    用ssh登录一个机器(换过ip地址)会出现如下错误 weiguohui@weiguohui1-virtual-machine:~/.ssh$ ssh 172.16.33.53The authentic ...