第41篇 推荐一个jekyll博客模板
本人用的模板是基于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.注册地址
具体的添加方式如下 :
在_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的配置值存储下来。
下面只需要保证所有的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博客模板的更多相关文章
- 前端设计师也有必要学习seo,推荐一个seo博客
做前端设计师有一段时间了,现在越来越觉得作为一个前端设计师,必须要懂一些seo的知识. 因为公司的seo们,总是在网站做好以后,提出各种各样的网站修改的需求. 如果前端设计师,能够了解一些基本的seo ...
- 推荐一个静态博客兼笔记的工具:WDTP
简介 WDTP(山湖录)不止是一款开源免费的GUI桌面单机版静态网站生成器和简单方便的前端开发工具,更是一款跨平台的集笔记.录音.个人知识管理.写作/创作.博客/网站内容与样式管理等功能于一体的多合一 ...
- 在Jekyll博客添加评论系统:gitment篇
最近在Github Pages上使用Jekyll搭建了个人博客( jacobpan3g.github.io/cn ), 当需要添加评论系统时,找了一下国内的几个第三方评论系统,如"多说&qu ...
- 如何搭建一个独立博客——简明Github Pages与Hexo教程
摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册.DNS设置.github和Hexo设置等过程,这是我写得最长的一篇教程.我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来,希望能给后 ...
- 搭建jekyll博客
使用jekyll将markdown文件生成静态的html文件,并使用主题有序的进行布局,形成最终的博客页面. 特点 基于ruby 使用Markdown书写文章 无需数据库 可以使用GitHub Pag ...
- Jekyll博客添加Valine评论
Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...
- 基于Jekyll的博客模板
代码地址如下:http://www.demodashi.com/demo/13147.html 效果 环境配置 环境 Windows 10 Git Bash 安装ruby 下载rubyinstalle ...
- 转载请注明:Windows 系统必备好用软件&工具合集跟推荐 | 老D博客
Windows 系统必备好用软件&工具合集跟推荐 97 63,371 A+ 所属分类:工具软件 一.浏览器 二.下载软件 三.播放软件 五.电子邮件客户端 六.图片/照片 浏览查看工具 七.文 ...
- Github pages + jekyll 博客快速搭建
Github pages + jekyll 博客快速搭建 寻找喜欢的模版 https://github.com/jekyll/jekyll/wiki/sites http://jekyllthemes ...
随机推荐
- ultraedit中文乱码解决方案
高级--->配置--->文件处理--->Unicode/UTF-8检测 打钩自动检测UTF-8 文件,去掉其他钩. 来自为知笔记(Wiz)
- C 语言实现字符串替换
void replaceFirst(char *str1,char *str2,char *str3) { ]; char *p; strcpy(str4,str1); if((p=strstr(st ...
- Java 设计模式(四)-工厂方法模式 (FactoryMethod Pattern)
1 概念定义 1.1 定义 定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 1.2 类型 创建类模式 2 原理特征 2.1 类 ...
- hadoop2.8和spark2.1完全分布式搭建
一.前期准备工作: 1.安装包的准备: VMware(10.0版本以上) : 官方网站:https://www.vmware.com/cn.html 官方下载地址:http://www.vmware. ...
- java获得路径的多种方式
本文讲解java语言中获得运行时路径的多种方式,包括java项目.java web项目.jar.weblogic等多种场景. 一.this.getClass().getClassLoader().ge ...
- CSS空白符处理!
在CSS中有一个非常重要但对于初学者又非常容易忽略的属性: white-space:nowrap; //文本不换行属性 这里附带说一下W3Cschool中对white-space的解释: white- ...
- javascript中的apply,call,bind详解
apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
- hdu1269强连通分量入门题
https://vjudge.net/contest/156688#problem 为了训练小希的方向感,Gardon建立了一座大城堡,里面有N个房间(N<=10000)和M条通道(M<= ...
- String类理解
1.首先应该知道的是:String是一个类,不属于基本类型,而是引用类型. 2.创建String对象的三种方式的比较: 第一种是先去String pool检查是否存在"abc"常量 ...
- Spring Cloud 学习笔记(一)——入门、特征、配置
[TOC] 0 放在前面 0.1 参考文档 http://cloud.spring.io/spring-cloud-static/Brixton.SR7/ https://springcloud.cc ...