Opensource Jekyll Theme JekyllPure

Jekyll主题 •JekyllPure

JekyllPure版本V1.0.0 最后更新:2014-09-19 16:45

Demo:曾经不知你好'Blog

Github:JekyllPure'github

版本更新

版本 时间 说明
V0.4.2 2014-05-12 22:00 第一个版本
V0.5.0 2014-05-27 16:00 1.修复主页分页.标签与分类URL.
2.Font Awesome更新为4.1.0
3.替换一些小图标为Font
4.blockquote下的li增加数字前缀样式
5.一些导航html移到Public文件夹
V1.0.0 2014-09-19 16:45:04 1.Pure正式为Pure v0.5.0
2.毫无技术的使用了Pure官方的blog布局
3.兼容性全面支持ie
4.Font Awesome更新为4.2.0 兼容ie7
5. jquery降级到1.7.2 为了兼容ie
6.jwplayer加载不需要远程获取js
7.多说js也调用本地js
8.index.js增加主题颜色随着星期变换.可删除
9.以后小修改请参照博客源码
10.欢迎随便修改使用.有问题留言

使用技术

项目基于 说明 版本
Jekyll 静态博客 Version 2.3.2
Pure 雅虎前端框架 Version 0.5.0
Fontawesome 字体图标 Version 4.2.0
Jquery javascript Version 1.7.2
NProgress.js 页面顶部加载条 Version 0.1.2
TOC.js 文章目录生成 Version 0.2.0
fancyBox 图片盒子 Version 2.1.5
qrcode 网址生成二维码 Version 1.0.0
tagcloud.js 标签云 Version 1.0.0
tapirgo(停用) 全文搜索插件 Version 1.0.0
Jwplayer HTML5视频插件 Version 6.2.0
Duoshuo 多说评论 Version 1.0.0
微搜索 全文检索服务 邀请码0926231a3717

环境搭建

  1. 小前提
  2. 需了解使用版本控制Git
  3. 需了解jekyll
  4. 需了解使用Github、或GitCafe
  5. 对html等熟悉.或程序员、或适合折腾的人

Mac/Linux下:

请使用如下命令(其中 gem 是 Ruby 的包管理工具)安装 jekyll(如果遇到权限问题请在前面加 sudo):

gem install jekyll


window 安装步骤

基于 版本 安装包 安装设置
Ruby 2.0 ruby-2.0.0-p481-i386-mingw32.7z 环境变量
DevKit 1.9 DevKit-mingw64-32-4.7.2-20130224-1151-sfx.exe 解压
Python 2.7 python-2.7.8.msi 环境变量
jekyll 2.3.4 gem install jekyll 完成以上
wdm 0.1.0 gem install wdm(多数人运行错误都是没安装这依赖) 最后安装

环境变量:

C:\OpenSources\lib\Jekyll\ruby\bin;C:\OpenSources\lib\Jekyll\DevKit\bin;C:\OpenSources\lib\Jekyll\DevKit\mingw\bin
# 解压DevKit 然后进入文件夹
cd C:\OpenSources\jekyll\DevKit

# 初始化DevKit 配置文件(记得ruby要加入环境变量)
C:\OpenSources\jekyll\DevKit>ruby dk.rb init
Initialization complete! Please review and modify the auto-generated
'config.yml' file to ensure it contains the root directories to all
of the installed Rubies you want enhanced by the DevKit.

# 安装DevKit
C:\OpenSources\jekyll\DevKit>ruby dk.rb install
[INFO] Updating convenience notice gem override for 'C:/OpenSources/jekyll/ruby'
[INFO] Installing 'C:/OpenSources/jekyll/ruby/lib/ruby/site_ruby/devkit.rb'

# 查看是否安装gem成功
C:\OpenSources\jekyll\DevKit>gem --version
2.0.14

# RubyGems 镜像换为淘宝、防止下载包出错(官网https://ruby.taobao.org/)
# 移除旧地址
C:\OpenSources\jekyll\DevKit>gem sources --remove https://rubygems.org/
https://rubygems.org/ removed from sources
# 更新为淘宝镜像
C:\OpenSources\jekyll\DevKit>gem sources -a https://ruby.taobao.org/
https://ruby.taobao.org/ added to sources
# 查看是否只有一条镜像地址
C:\OpenSources\jekyll\DevKit>gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org/
# 安装jekyll
C:\OpenSources\jekyll\DevKit>gem install jekyll
<span class="hljs-comment">Fetching: liquid-2.6.1.gem (100%)
Successfully installed liquid-2.6.1
Fetching: kramdown-1.4.1.gem (100%)
Successfully installed kramdown-1.4.1
Fetching: mercenary-0.3.4.gem (100%)
Successfully installed mercenary-0.3.4
----------此处省略xxx---------
Installing ri documentation for jekyll-watch-1.1.1
Parsing documentation for fast-stemmer-1.0.2
unable to convert "\x90" from ASCII-8BIT to UTF-8 for lib/stemmer.so, skipping
Installing ri documentation for fast-stemmer-1.0.2
Parsing documentation for classifier-reborn-2.0.1
Installing ri documentation for classifier-reborn-2.0.1
Parsing documentation for jekyll-2.4.0
Installing ri documentation for jekyll-2.4.0
31 gems installed
# 查看是否安装jekyll成功
C:\OpenSources\jekyll\DevKit>jekyll -version
jekyll 2.4.0
# 继续安装依赖包
C:\OpenSources>gem install wdm
Fetching: wdm-0.1.0.gem (100%)
Temporarily enhancing PATH to include DevKit...
Building native extensions.  This could take a while...
Successfully installed wdm-0.1.0
Parsing documentation for wdm-0.1.0
unable to convert "\x90" from ASCII-8BIT to UTF-8 for lib/wdm_ext.so, skipping
Installing ri documentation for wdm-0.1.0
1 gem installed
# 继续安装依赖包代码高亮
C:\OpenSources\liyouhai>gem install rdiscount
Fetching: rdiscount-2.1.7.1.gem (100%)
Temporarily enhancing PATH to include DevKit...
Building native extensions.  This could take a while...
Successfully installed rdiscount-2.1.7.1
Parsing documentation for rdiscount-2.1.7.1
unable to convert "\x90" from ASCII-8BIT to UTF-8 for lib/rdiscount.so, skipping
Installing ri documentation for rdiscount-2.1.7.1
1 gem installed

如果运行错误.安装以下步骤

# 删除86版本的yajl
C:\OpenSources\liyouhai>gem uninstall yajl-ruby
Successfully uninstalled yajl-ruby-1.1.0-x86-mingw32

# 安装指定版本的yajl
C:\OpenSources\liyouhai>gem install yajl-ruby -v 1.1.0 --platform=ruby
Fetching: yajl-ruby-1.1.0.gem (100%)
Temporarily enhancing PATH to include DevKit...
Building native extensions.  This could take a while...
Successfully installed yajl-ruby-1.1.0
Parsing documentation for yajl-ruby-1.1.0
unable to convert "\x90" from ASCII-8BIT to UTF-8 for lib/yajl/yajl.so, skipping
Installing ri documentation for yajl-ruby-1.1.0
1 gem installed
# 最终安装pyhton 并且加入环境变量

Windows其他安装方法②:

官方对 winodws 的支持程度很低,推荐使用 Building portable Jekyll for Windows,附上网盘地址方便大家下载:PortableJekyll 1.3.0[百度网盘]

下边以 PortableJekyll 的解压目录为 e:\jekyll 介绍环境变量的配置:

  1. 在环境变量中新建变量: JEKYLL_HOME 取值为 e:\jekyll

  2. 为 PATH 变量添加如下内容: %JEKYLL_HOME%\ruby\bin;%JEKYLL_HOME%\devkit\bin;%JEKYLL_HOME%\git\bin;%JEKYLL_HOME%\Python\App;%JEKYLL_HOME%\devkit\mingw\bin;%JEKYLL_HOME%\curl\bin

  3. 完成 jekyll 配置后,通过如下命令检查是否配置成功:jekyll -h

  4. 以上为百度FEX提供的方法、本人使用的是Ruby200-x64原始安装、Jekyll新版本使用基本完美


完成 jekyll 的安装后,需要将本项目 clone 至本地环境,或Download zip按钮
cmdcd进去目录目录运行如下命令,就能在 localhost:4000 中预览了:

jekyll serve -watch (或jekyll serve -w



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:descendantFocusability="blocksDescendants"
    android:paddingLeft="6dip"
    android:paddingRight="6dip"
    android:paddingTop="8dip"
    android:paddingBottom="7dip">

JekyllPure 文档

jekyll是一个简单的免费的Blog生成工具,类似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具,不需要数据库支持。但是可以配合第三方服务,例如多说评论。最关键的是jekyll可以免费部署在Github上,而且可以绑定自己的域名

  1. Jekyll官网 http://jekyllrb.com/

  2. Jekyll中文网 http://jekyllcn.com/,

  3. Jekyll Themes 主题 http://jekyllthemes.org/,

  4. Google搜索site:github.io github.io.

  5. 如果你熟悉html等.完全可以自己弄首页与内容页模板就可以搭建博客了、也可以使用本主题.请尊重作者,保留footer主题地址

使用说明


  • 大致浏览JekyllPure代码的结构、能方便理解以下的技巧
  • 更改自己的多说id _includes\duoshuo.html --> var duoshuoQuery = {short_name:"你申请的ID"};
  • 全文搜索功能tapirgo填写邮箱和网站rss地址生成.需要提前部署一次到远程仓库.返回token填写在search.html
  • 发布文章duoshuo: false 可关闭评论
  • 发布文章avatarimg: "http://liyouhai.com/images/lindachung.jpg" 为首页文章小头像
  • url地址RESTful风格设置permalink: 1/ 地址为http://liyouhai.com/1

文章发表:

_posts目录下新建2014-05-11-opensource-jekyll-theme-jekyllpure.md文件名有规定的格式

---
layout: post     //使用哪个模板、`_layouts`下可自定义模板
title: Jekyll主题 •JekyllPure
description: "文章的描述、可复制百度搜索排前的和你文章相符的描述"
category: Project    //文章的分类.看本文url就提现出来.
avatarimg: "/img/lindachung.jpg"  //首页文章题目旁边的小头像.可上传文章作者头像或者相关的图标
tags : [ 静态博客] //标签,方便搜索引擎收录 <meta name="keywords" content="静态博客"/>
---
文章正文
<!-- more --> //在首页文章内容截取的部分.后面的内容不再首页显示.

文章插入代码:

{% raw %}  {% highlight java  %} {% endraw %}  //可填写各种语言例如ruby.javascript.css.html
       System.out.print("输出") ;
{% raw %}{% endhighlight %}{% endraw %}

文章的图片存放:

1.只能墙裂推荐七牛云储存.但愿伸出你援助之手我的邀请地址,没有副作用(本人能增加流量

2.七牛云储存提供10G的免费空间,以及每月10G的流量.存放个人博客图片最好不过了

3.本人不是打广告的、用了真心好.有各种图形处理功能.缩略图.视频存放速度也给力.还有CDN加速功能喔,你还等什么

视频播放:

可以使用Jwplayer插件直接在xxxx.md下使用以下代码.Markdown会直接解析运行代码.
(小技巧:直接输入html的代码如<br>页面会是一个换行

<script src="../js/min/jwplayer/jwplayer.js"></script>
<div id="videotop"></div>
<script type="text/javascript">
    jwplayer("videotop").setup({
    flashplayer: "../js/min/jwplayer/jwplayer.flash.swf",
        file:"http://liyouhai.qiniudn.com/2014-05-04-intellij-idea-guide-note.mp4",
        image: 'http://liyouhai.qiniudn.com/2014-05-04-intellij-idea-guide-note01.jpg',
        aboutlink:"http://liyouhai.com",
        width: '743',
        height: '360',
        stretching: "fill",
    });
</script>

音频播放: 直接黏贴音频地址就可以显示了

<script type="text/javascript" src="http://www.xiami.com/widget/player-single?uid=0&sid=1771944809&mode=js"></script>

Markdown

Markdown:很多人用它写博客.可读性高.写作方便.表格、脚注、展现的非常棒 StackEdit:是一个开放源码免费使用的 MarkDown 的在线编辑器

看到在线编辑StackEdit很漂亮,很清爽.动了心.把它的CSS样式抄过来.改了背景色.一些小样式.发现它小图标是用 fontawesome字体图标

Fontawesome使用

Fontawesome 一款字体小图标.通过<i class="fa fa-ambulance"></i>调用.官网还有更多的图标样式.我们只需要增加你所喜欢图标的class.前端bootstrap框架也是运用了这个字体库

官网下载后.加入css和font文件夹到服务器.网页载入CSS文件

<link rel="stylesheet" href="/css/font-awesome.min.css">

fontawesome4.0.3版本IE7兼容下载

<!--[if IE 7]>
<link rel="stylesheet" href="/css/font-awesome-ie7.css"><![endif]-->

尽情添加你的小图标吧


Markdown语法

显示图片:![](url)

超级连接:[<i class=""></i> text](url)

显示本url:[url][1]:

文字加粗:**Text**

字体斜体:*Text*

显示警告:It's time to be brave.Say I'm not afraid.Not anymore.I used to be calm

显示代码:code

更多语法查看: 淘宝UED博客Markdown介绍

表格:

Item Value Qty
Computer 1600 USD 5
Phone 12 USD 12
Pipe 1 USD 234

Markdown代码高亮

高亮:采用的是highlight版本有多种.由于pygments生成的是以下div结构

    <div class="highlight"><pre><code class="java">  <span class="cm">test</span>

这种结构颜色的定义css

 pre .cm{color:#60a0b0}

不难看出pygments在生成代码高亮的时候自动用<span>标签来分割代码关键字再加以class定义,为此我找到了几款Markdown css的样式

Highlight CSS的样式

NOTE: Pygments online demo

  • Markdown Demo列表 here,
  • Markdown java demo here,
  • Markdown html demo here,
  • Markdown JavaScript demo here,
  • Markdown css demo here.

Jekyll技巧

jekyll无所不能了.越来越多的开源项目的主页大多是jekyll生成托管在github.io.包括jekyll主页等

小提示:如果想学习jekyll新版本增加的特性.可在源码下运行cd C:\Ruby200-x64\lib\ruby\gems\2.0.0\gems\jekyll-2.0.2\site

Page域:就是特定某篇文章范围、我们可以在发布文章的.md文件下.增加自己的变量.例如 avatarimg: "任何文本内容"在文章迭代_layouts/post.html使用方法为

<header class="post-header">
    <img class="post-avatar" height="48" width="48"
         src="{% raw %}{{ page.avatarimg }}{% endraw %}">

Post域:也算是公共的范围吧.例如在首页index.html遍历全部文章.具体哪一篇当然会有一个for循环.当然page域有的变量post也会拥有

{% raw %}{% for post in paginator.posts %}{% endraw %}
 <h2 class="post-title">{% raw %}{{ post.title }}{% endraw %}</h2>
  <p class="post-meta">By {% raw %}{{ post.date | date: "%m" }}{% endraw %}月{% raw %}{{ post.date | date: "%d" }}{% endraw %}日 {% raw %} {{ post.date | date: "%Y" }}{% endraw %}
  <a class="post-categorybut " href="#">{% raw %}{{ post.categories  }}{% endraw %}</a>
  <a class="post-category " href="#">{% raw %} {{ post.tags | first }}{% endraw %}</a>
  <a class="post-category " href="#"> {% raw %} {{ post.tags[1] }}{% endraw %}</a> </p></header>
  <div class="post-description">
 {% raw %}  {{ post.content | split:'<!-- more -->'| first }}{% endraw %}
   <a href="{% raw %}{{ post.url }}{% endraw %}" class="post-categorybut">阅读全文</a>
{% raw %}{% endfor %}{% endraw %}

我们可以遍历全部.也可以选择数组中的某个值

{% raw %} {{ post.tags[1] }}{% endraw %} 这里的数组也是从0下标开始数起

也可以使用过滤器

{% raw %}  {{ post.content | split:'<!-- more -->'| first }}{% endraw %}

以上的中文日期年月日.也是使用了过滤器!!更多的过滤器方法参照Liquid for Designers(译)

我们可以让某篇博文特殊关照.例如没有评论.没有分享按钮.没有任何你想到的(来、看代码\_layouts\post.html

 {% raw %}{% if  page.duoshuo != false %}{% endraw %}
   {% raw %} {% include duoshuo.html %}{% endraw %}
  {% raw %}  {% endif %}{% endraw %}

具体使用办法只要在不想评论的文章.增加duoshuo: false即可关闭评论功能.默认不配置为开启 你可以为博文增加各种变量、例如指定下一页URL.上一页URL,

site域:应该算为全局变量吧.在_config.yml定义使用

404网页


网站只需要在自己的404页面中嵌入一段简单的代码,就能通过互联网来迅速传播失踪儿童信息,从而提高找回失踪儿童的概率。失踪儿童信息来自宝贝回家寻子网。

公益404页面接入方法?

注意事项

  • 如果一个 404 页面的内容小于 512B,IE 会认为该 404 页面不够友好,在 IE 下将不会成功返回该 404 错误页面
  • 以下的代码给插入了2种公益的代码。页面大小刚好够,单单加入一个会被IE浏览器报403错误
  • javascript的代码插入到body里面才有效
  • jekyll博客的只需要在根目录创建404.html
  • <head>增加<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://liyouhai.com/">能五秒后跳转回首页
<!DOCTYPE html>
<html>
<head>
    <title>网页找不到_404公益</title>
</head>
<body>
<script type="text/javascript"src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>

<iframe scrolling='no' frameborder='0' src='http://yibo.iyiyun.com/js/yibo404/key/2057' width='640' height='464' style='display:block; margin:0 auto;'></iframe>
</body>
</html>

其它扩展

微搜索:站内搜索引擎 使用方法.参照http://doc.tinysou.com/guides/overview.html

本文日志


时间 修改内容
2014-05-12 22:00 主题基本说明
2014-05-19 16:00 增加jekyll的技巧
2014-05-27 16:00 版本更新
2014-09-11 14:00 win下安装jekyll教程
2014-11-04 12:07:44 增加微搜索全文检索服务