-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path14914444932741.html
More file actions
165 lines (130 loc) · 7.7 KB
/
14914444932741.html
File metadata and controls
165 lines (130 loc) · 7.7 KB
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
博客改版小结 - 余瓞归的博客
</title>
<meta name="description" content="ruby, rails, html, css, linux，javascript">
<link href="atom.xml" rel="alternate" title="余瓞归的博客" type="application/atom+xml">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,800" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="asset/image/favicon.png">
<link rel="stylesheet" href="asset/css/base.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-k2/8zcNbxVIh5mnQ52A0r3a6jAgMGxFJFE2707UxGCk= sha512-ZV9KawG2Legkwp3nAlxLIVFudTauWuBpC10uEafMHYL0Sarrz5A7G79kXh5+5+woxQ5HM559XX2UZjMJ36Wplg==" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">
</head>
<body>
<div class="container">
<div class="eleven columns content">
<p class="meta nav-header">
<a href="./archives.html">文章分类</a>
> <a class='category' href='other.html'>other</a>
<a href="./">
<i class="home fa fa-home"></i>
</a>
</p>
<h1 class="title">博客改版小结</h1>
<div class="meta">
<div class="date">
发表于：<time datetime="2013/4/16">2013/4/16</time>
</div>
</div>
<div id="post">
<p>开始<a href="http://jekyllrb.com/">Jekyll</a>的时候，朋友推荐用<a href="http://octopress.org/">Octopress</a>的<a href="https://github.com/panks/fabric">fabric</a>主题。用了一段时间之后发不是十分喜欢灰色基调。其次，Jekyll本身是个很简单的东西，经过Octopress封装之后反而感觉繁琐，想简化它。</p>
<span id="more"></span><!-- more -->
<p>于是，做了一下几点改动：</p>
<ol>
<li>使用新的主题</li>
<li>去掉octopress换用原生态jekyll</li>
<li>不使用自定义扩展，将_plugins清空，因为github上使用了--safe模式，以免不兼容</li>
<li>避免之前octopress用户自定义的layout和include层层嵌套。</li>
</ol>
<h3 id="toc_0">使用新主题</h3>
<p>在换掉<a href="https://github.com/panks/fabric">fabric</a>之前，在<a href="http://jekyllthemes.org/">Jekyll Themes</a>上浏览了一遍，主题虽然多也有不错的，但是总觉得不是自己喜欢的。直到在<a href="http://www.wix.com/">Wix</a>上看到<a href="http://www.wix.com/website-template/view/html/750?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fbusiness-services%2Fadvertising-marketing%2F1&bookName=create-master-new&galleryDocIndex=1&category=business-services&viewMode=desktop">当前主题</a>。喜欢的原因有两个，一个是是它使用的小方格背景我很喜欢，我平时用的笔记本专买这种小方格，能给人设计感；另一个就是他的设计上简洁但是不死板，我不大喜欢左右布局。</p>
<p>Wix上面的模板是自动生成的，代码很糟糕。我要做的就是使用他模板的设计，然后从新写一遍html和css。html/css我比较熟悉，重写一遍不是难事。将原来的宽度改为900px方便阅读，然后加上天气预报和pm2.5指数。文章字体是仿照<a href="http://jianshu.io/">简书</a>做的</p>
<h3 id="toc_1">去掉octopress换用原生态jekyll</h3>
<p>不想用octopress是因为他在jekyll基础之上进行大量的封装，安装了很多插件，这些东西不能直接放在github上面。你需要在本地生成html然后将html提交到master分支，源代码单独提交，有点麻烦。于是去掉octoress直接用jekyll，保留原来octopress的rakefile, 作为产生posts和提交<a href="https://github.com/nateyu/nateyu.github.com">Github</a>用。</p>
<h3 id="toc_2">不使用插件或扩展</h3>
<p>Push到<a href="https://github.com/nateyu/nateyu.github.com">Github</a>上之后，代码可以以两种方式运行，静态html件这个github page基本功能，还有就是直接上传jekyll目录但是是以safe模式运行，也就是不支持插件。所要想直接上传jekyll目录而不转换html，就不要使用插件。</p>
<h3 id="toc_3">避免之前octopress用户自定义的layout和include层层嵌套。</h3>
<p><a href="http://octopress.org/">Octopress</a>上的模板使用方便，但是封装较多，特别是_includes和_layouts。</p>
<h3 id="toc_4">可以进的地方</h3>
<ol>
<li>分页功能</li>
<li>搜索共能</li>
<li>响应式设计</li>
<li>多浏览器兼容性</li>
</ol>
<h3 id="toc_5">探讨</h3>
<p>利用<a href="https://developer.github.com/v3/repos/contents/">Github API</a>提交代码， 是否可以实现在线编辑blog</p>
<h3 id="toc_6">小结</h3>
<p>自己动手打造的自己喜欢的东西</p>
<p>喜欢清爽亮丽的而又简单的风格</p>
<p>尽量不用插件，轻便而又简单</p>
</div>
<div id="post-pagination" class="pagination">
<p class="previous">
<a href="14914444636077.html" title="Previous Post: 前端开步骤">上一页</a>
</p>
</div>
</div>
<div class="four columns sidebar">
<nav>
<a href="./">
<img src="asset/image/logo.png" id="logo" alt="Blog logo" width="80" />
</a>
<h2>
<a href="./living.html">生活</a>
<a href="./technology.html">技术</a>
</h2>
<div id="bio">
<p style="text-align:center">欢迎访问我的个人博客.</p>
<p>
我是余瓞归，一个懒惰挑剔的Ruby程序员。现居上海浦东，在一家电子商务公司从事系统架构工作。
</p>
</div>
<div id="social">
Follow me:
<div id="stalker">
<a title="nateyu on Github" href="https://github.com/nateyu">
<i class="fa fa-github-square"></i>
</a>
<a title="Atom feed" id="atom" href="./atom.xml">
<i class="fa fa-rss-square"></i>
</a>
<a title="Email" id="email" href="mailto: yudiegui@gmail.com">
<i class="fa fa-envelope"></i>
</a>
</div>
</div>
</nav>
</div> <div class="footer">
<div class="disclaimer">
<p>
本网站文章为个人所有，未经作者认许请勿转载
</p>
<p>
© 余瓞归, 2017 — built with <a href="http://jekyllrb.com/">Jekyll</a> using <a href="https://github.com/swanson/lagom">Lagom theme</a>
</p>
</div>
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?01179477135d9e37e18df55d2011d072";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>