Octopress 设置

发表于   |   分类于   |  

在GitHub上搜索关键字octopress theme，然后按照星数排序，前面几个我都试过了，特别是greyshade主题，我是比较喜欢的，但是主题这东西除了考虑好看之外，还要考虑适不适合添加其他的东西，比如文章分类啊，标签云啊，近期文章啊，热评文章啊等等（这些是我在折腾了好几个主题后才考虑到的）。就是因为前面没考虑到这些，所以折腾了好久之后又更换主题又重新设置（我也是醉了）。最终还是绝得默认的经典主题比较适合加这些东西。

加速一下

默认主题里面有使用google字体什么的，所以加载的时候比较慢，参照链接：解决Octopress访问慢的问题，注意这里解决Google Analytics使用的是博主的（我目前不太懂这些是什么玩意，所以先用着博主的了）。
这里顺便记录下360网站卫士常用前端公共库CDN服务，应该类似于吧被墙了的东西放到墙内来让大家使用吧。

博客自定义修改

关于这部分，我就不多写了，直接提供一个链接吧，因为这位博主写的相当详细，就我这不懂ruby和html以及css的都能照着做。后面就只补充这里没有写过的了。
http://shengmingzhiqing.com/blog/octopress-lean-modification-1.html/

这里进行一下纠错：

  • 新的代码块插件那个code_ray_block.rb文件，使用的safe_wrap方法要改成TemplateWrapper::safe_wrap，估计是新版本的问题。
  • 带标题的图片我按照他的做法出错，所以根据他提供的链接 http://blog.zerosharp.com/image-captions-for-octopress/ 进行了更改。不过最终还是不会用～～囧。

增加返回顶部按钮

博文比较长可以考虑增加目录，但是当你想要回到目录时，每次都得拉边上的滑块，这里从别处参考到一种增加一个返回顶部按钮的方法。参考地址：http://txgcwm.github.io/blog/2014/05/17/octopressde-%5B%3F%5D-xie-she-zhi/

具体方法如下：
在文件source/_include/custom/footer.html的<p>Copyright声明</p>之前中添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  // hide #back-top first
  $("#back-top").hide();
  
  // fade in #back-top
  $(function () {
      $(window).scroll(function () {
          if ($(this).scrollTop() > 100) {
              $('#back-top').fadeIn();
          } else {
              $('#back-top').fadeOut();
          }
      });

      // scroll body to 0px on click
      $('#back-top a').click(function () {
          $('body,html').animate({
              scrollTop: 0
          }, 800);
          return false;
      });
  });

});
</script>

<style type="text/css">
#back-top {
  position: fixed;
  bottom: 50px;
  right: 100px;
}

#back-top a {
  width: 80px;
  display: block;
  text-align: center;
  font: 11px/100% Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #bbb;

  /* transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
#back-top a:hover {
  color: #000;
}

/* arrow icon (span tag) */
#back-top span {
  width: 80px;
  height: 80px;
  display: block;
  margin-bottom: 7px;
  background: #ddd url(/images/top.png) no-repeat center center;

  /* rounded corners */
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;

  /* transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
#back-top a:hover span {
  background-color: #888;
}
</style>




注意上面使用了图片/images/top.png，如果没有的话，你可以去我的github上下载

增加标签、关键字、描述

使用rake new_post命令生成新的博文时，默认前面只有如下内容：
layout: post
title: “Octopress 设置”
date: 2015-06-14 20:21:05 +0800
comments: true
categories: 学习Octopress

其实还可以增加标签、关键字、和描述：
tags: [Octopress设置, 博客]
keywords: octopress设置, octopress加速
description: 介绍设置octopress

这里可以在rakefile的post.puts "categories: []"后面增加如下三行即可自动在新生成的博客中增加上面的所有的关键字。
post.puts “tags: []”
post.puts “keywords: “
post.puts “description: “

当然其实对于博客首页，也可以添加描述和关键字，在source/index.html顶部仿照如上方法增加即可。