【像黑客一样写博客之八】分类标签

原创 2013年11月21日 08:36:51

原创作品,转载请标明http://blog.csdn.net/jackystudio/article/details/16855023


给文章分类和添加标签是博客必不可少的功能,方便了信息的快速攫取。


1.添加分类


1.1.添加分类插件

进入Octopress\plugins目录,新建category_list_tag.rb文件,添加如下代码

[ruby] view plaincopy
  1. module Jekyll  
  2.   class CategoryListTag < Liquid::Tag  
  3.     def render(context)  
  4.       html = ""  
  5.       categories = context.registers[:site].categories.keys  
  6.       categories.sort.each do |category|  
  7.         posts_in_category = context.registers[:site].categories[category].size  
  8.         category_dir = context.registers[:site].config['category_dir']  
  9.         category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)  
  10.         html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"  
  11.       end  
  12.       html  
  13.     end  
  14.   end  
  15. end  
  16.   
  17. Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)  

1.2.添加边栏文件

进入Octopress\source\_includes\custom\asides目录,新建category_list.html,添加如下代码

[html] view plaincopy
  1. <section>  
  2.   <h1>Categories</h1>  
  3.   <ul id="categories">  
  4.     {% category_list %}  
  5.   </ul>  
  6. </section>  

1.3.添加分类到主页面

打开Octopress/_config.yml,在default_asides一栏中添加

[html] view plaincopy
  1. default_asides: [..., custom/asides/category_list.html]  

1.4.生成页面,推送

  1. rake generate  
  2. rake preview  
  3. rake deploy  

打开页面http://geekjacky.github.io/,如下




1.5.推送source分支

  1. git add .  
  2. git commit -m "增加分类边栏"  
  3. git push origin source  

1.6.给文章增加分类

还记得博文的开头有个categories么?填在这里就行了。




2.添加标签

标签可以加在边栏,也可以加在顶部导航,这里两种方法都介绍一下,我自己是加到导航栏,因为标签太多了,放在边栏不好看。


2.1.获取插件

先克隆这两个项目到本地,这里会使用到项目中相关的插件。

  1. git clone https://github.com/robbyedwards/octopress-tag-pages.git  
  2. git clone https://github.com/robbyedwards/octopress-tag-cloud.git  
(1)在Octopress-tag-pages中,复制plugins/tag_generator.rb到Octopress/plugins目录,复制/source/_layouts/tag_index.html到/source/_layouts目录,复制source/_includes/custom/tag_feed.xml到/source/_includes/custom/目录。

(2)在Octopress-tag-cloud中,复制tag_cloud.rb到/plugins目录。


2.2.增加标签


2.2.1.增加到边栏

2.2.1.1.增加边栏文件

进入Octopress\source\_includes\custom\asides目录,创建tags.html,添加如下代码

  1. <section>  
  2.   <h1>Tags</h1>  
  3.   <ul class="tag-cloud">  
  4.     {% tag_cloud font-size: 90-210%, limit: 10, style: para %}  
  5.   </ul>  
  6. </section>  
2.2.1.2.添加标签到主页面边栏

打开Octopress/_config.yml,在default_asides一栏中添加

  1. default_asides: [..., custom/asides/tags.html]  

2.2.2.增加到导航栏

2.2.2.1.增加新网页

运行如下命令

  1. rake new_page['tag_cloud']  




2.2.2.2.在导航栏添加新页面

进入Octopress\source\_includes\custom,打开navigation.html,添加一栏

  1. <li><a href="/tag-cloud/">Tags</a></li>  

2.2.2.3.修改标签内容

进入Octopress\source\tag-cloud目录,修改index.markdown,添加如下内容

[html] view plaincopy
  1. <ul class="tag-cloud">{% tag_cloud font-size: 90-210%, limit: 1000, style: para %}</ul>  
这些参数的意思应该还好理解。


2.3.给文章增加标签

用markdownpad打开博文,在categories下增加一行

[html] view plaincopy
  1. tags: [Octopress]  

2.4.生成页面,推送

  1. rake generate  
  2. rake preview  
  3. rake deploy  

打开Tags页面http://geekjacky.github.io/tag-cloud/,如下




2.5.推送source分支

  1. git add .  
  2. git commit -m "添加标签"  
  3. git push origin source  

2.6.生成博文时自动追加tags

不想每次都手动添加tag这一行,没问题。打开Octopress目录下的Rakefile,加入下面这一行,加在哪?你找得到的。

  1. post.puts "tags: "  

2.7.Bug

如果在使用标签生成静态页面的时候,出现如下错误。

  1. Liquid Exception: comparison of Array with Array failed in page  
好吧,这也许是个bug:http://jeffli.me/blog/2013/06/17/add-tags-and-tag-cloud-support-to-octopress/
版权声明:本文为博主原创文章,未经博主允许不得转载。

【像黑客一样写博客之四】发表博文

Octopress结合Github搭建博客是很酷,但是别忘了初衷是写博文,可不要本末倒置了。 1.发表博文 1.1.新建博文 使用如下命令新建博客文章 [cpp] view pla...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月17日 09:40
  • 3269

【像黑客一样写博客之一】环境搭建

原谅我又不务正业了,最近在Github上利用Octopress框架搭建了一个博客,所有的东西都可以DIY,感觉还是蛮酷的。这里把整个搭建过程分享一下。 当然第一步还是环境的搭建,有没有搞错?写个博客还...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月14日 15:23
  • 5601

【像黑客一样写博客之五】博客克隆

很多情况下我们需要在不同电脑之间维护同一个Octopress博客,那应该怎么在一台新的电脑上获取你的Octopress克隆呢? 1.环境配置 安装msysgit,Ruby,DevKit,这里就...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月18日 09:21
  • 3415

【像黑客一样写博客之十】域名绑定

相信很多人都有自己的域名,而github帮你提供了免费的空间。让你的域名直接转到github.io是个不错的注意。假设通过之前9篇文章,你已经初步建立起一个github.io的博客了。 1....
  • jackyvincefu
  • jackyvincefu
  • 2013年11月23日 08:52
  • 7185

【像黑客一样写博客之七】分享功能

Octopress自带的分享代码是推特,脸书和Google+,这里改用国内的加网分享,添加方式和评论相似。 1.获取分享代码 进入http://www.jiathis.com,选择样式,点击获...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月20日 08:30
  • 3164

【像黑客一样写博客之六】评论功能

博客怎么能少了评论呢?虽然Octopress自带了disqus评论系统,但是登录需要使用推特,脸书,Google+等帐号登录,你懂的,所以这里会对评论进行更换。。。 这里我只能降降逼格了,使用国内的...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月19日 09:01
  • 3305

【像黑客一样写博客之二】发布博客

本地环境配置完毕后就可以把Octopress推到Github上了。 1.新建Github仓库 仓库名字必须是username.github.com,其中username是你的github用户名...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月15日 08:20
  • 3862

【像黑客一样写博客之九】微博访客

这节介绍如何往边栏添加新浪微博和进行访客统计。 1.新浪微博 1.1.创建微博页面 进入Octopress\source\_includes\custom\asides,创建weibo.htm...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月22日 08:30
  • 3686

【像黑客一样写博客之三】配置博客

Octopress Push到Github之后,就可以对博客进行一些个性化配置了,这里先介绍一些基本配置。 1.基本配置 博客的基本配置文件在Octopress目录下的_config.yml。...
  • jackyvincefu
  • jackyvincefu
  • 2013年11月16日 08:10
  • 13801

像 geek 一样写博客

在 Github 上利用 Octopress 框架搭建了一个博客,所有的东西都可以 DIY,感觉还是蛮酷的。这里把整个搭建过程分享一下。当然第一步还是环境的搭建。...
  • u011986449
  • u011986449
  • 2015年06月14日 22:32
  • 763
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【像黑客一样写博客之八】分类标签
举报原因:
原因补充:

(最多只允许输入30个字)