Opensource Jekyll Theme JekyllPure

Jekyll主题 •JekyllPure

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

Demo:曾经不知你好'Blog

Github:JekyllPure'github

版本更新

使用技术

环境搭建

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

Mac/Linux下:

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

gem install jekyll

window 安装步骤">window 安装步骤

环境变量：

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按钮
cmd下cd进去目录目录运行如下命令，就能在 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主题地址

使用说明

文章发表:

在_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介绍

表格：

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
• 益云公益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

本文日志