Skip to content

Commit 6d369a2

Browse files
abiningabining
committed
feat: 新增简历，修改readme
1 parent 0efedc2 commit 6d369a2

File tree

12 files changed

+412
-48
lines changed

12 files changed

+412
-48
lines changed

‎README.md‎

Lines changed: 231 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,258 @@
1-
[Ebin Blog](https://abining.fun)
2-
================================
1+
# Ebin blog 模板
32

4-
> I never expected this to become popular.
3+
### [我的博客在这里 →](http://abining.github.io)
54

6-
![](http://abining.fun/img/blog-desktop.jpg)
5+
### 关于收到"Page Build Warning"的email
76

7+
由于jekyll升级到3.0.x,对原来的pygments代码高亮不再支持，现只支持一种-rouge，所以你需要在 `_config.yml`文件中修改 `highlighter: rouge`.另外还需要在 `_config.yml`文件中加上 `gems: [jekyll-paginate]`.
88

9-
[User Manual 👉](_doc/Manual.md)
10-
--------------------------------------------------
9+
同时,你需要更新你的本地jekyll环境.
1110

12-
### Getting Started
11+
使用 `jekyll server`的同学需要这样：
1312

14-
1. You will need [Ruby](https://www.ruby-lang.org/en/) and [Bundler](https://bundler.io/) to use [Jekyll](https://jekyllrb.com/). Following [Using Jekyll with Bundler](https://jekyllrb.com/tutorials/using-jekyll-with-bundler/) to fullfill the enviromental requirement.
13+
1. `gem update jekyll` # 更新jekyll
14+
2. `gem update github-pages` #更新依赖的包
1515

16-
2. Installed dependencies in the `Gemfile`:
16+
使用 `bundle exec jekyll server`的同学在更新jekyll后，需要输入 `bundle update`来更新依赖的包.
17+
18+
参考文档：[using jekyll with pages](https://help.github.com/articles/using-jekyll-with-pages/) & [Upgrading from 2.x to 3.x](http://jekyllrb.com/docs/upgrading/2-to-3/)
19+
20+
## 关于模板(beta)
21+
22+
我的博客仓库——`huxpro.github.io`，是经常修改的，而且还会有人乱提交代码，因此给大家做了一个稳定版的模板。大家可以直接fork模板——`huxblog-boilerplate`,要改的地方我都说明了。或者可以直接下载zip到本地自己去修改。
23+
24+
```
25+
$ git clone git@github.com:Huxpro/huxblog-boilerplate.git
26+
```
27+
28+
**[在这里预览模板 →](http://huangxuan.me/huxblog-boilerplate/)**
29+
30+
## 各版本特性
31+
32+
##### New Feature (V1.5.2)
33+
34+
* 当你fork了我的仓库之后，还要删掉里面的关于我的文档是不是感到略烦躁呢？**Boilerplate** 模板将帮助你快速开始，方便合并与更新。
35+
* `-apple-system`被添加到了字体规则里面了，这套字体格式能将iOS9默认的新字体**San Francisco**表现的非常漂亮。
36+
* 解决了代码过长自动换行的bug,替换为横向滚动条。详情请见[issue#15](https://github.com/Huxpro/huxpro.github.io/issues/15)
37+
38+
###### 其他历史版本个人觉得没有必要了解，看看英文就行了。
39+
40+
## 支持
41+
42+
* 你可以自由的fork。如果你能将主题作者和 github 的地址保留在你的页面底部，我将非常感谢你。
43+
* 如果你喜欢我的这个博客模板，请在 `huxpro.github.io`这个repository点个赞——右上角**star**一下。
44+
45+
## 说明文档
46+
47+
* 开始
48+
* [环境要求](#environment)
49+
* [开始](#get-started)
50+
* [写一篇博文](#write-posts)
51+
* 组件
52+
* [侧边栏](#sidebar)
53+
* [迷你关于我](#mini-about-me)
54+
* [推荐标签](#featured-tags)
55+
* [好友链接](#friends)
56+
* [HTML5 演示文档布局](#keynote-layout)
57+
* 评论与 Google/Baidu Analytics
58+
* [评论](#comment)
59+
* [网站分析](#analytics)
60+
* 高级部分
61+
* [自定义](#customization)
62+
* [标题底图](#header-image)
63+
* [搜索展示标题-头文件](#seo-title)
64+
65+
#### Environment
66+
67+
如果你安装了jekyll，那你只需要在命令行输入 `jekyll serve`就能在本地浏览器预览主题。你还可以输入 `jekyll serve --watch`，这样可以边修改边自动运行修改后的文件。
68+
69+
经 [@BrucZhaoR](https://github.com/BruceZhaoR)的测试，好像两个命令都是可以的自动运行修改后的文件的，刷新后可以实时预览。官方文件是建议安装bundler，这样你在本地的效果就跟在github上面是一样的。详情请见这里：https://help.github.com/articles/using-jekyll-with-pages/#installing-jekyll
70+
71+
#### Get Started
72+
73+
你可以通用修改 `_config.yml`文件来轻松的开始搭建自己的博客:
1774

18-
```sh
19-
$ bundle install
2075
```
76+
# Site settings
77+
title: Ebin Blog # 你的博客网站标题
78+
SEOTitle: Ebin Blog # 在后面会详细谈到
79+
description: "Cool Blog" # 随便说点，描述一下
2180
22-
3. Serve the website (`localhost:4000` by default):
81+
# SNS settings
82+
github_username: abining # 你的github账号
83+
weibo_username: abining # 你的微博账号，底部链接会自动更新的。
2384
24-
```sh
25-
$ bundle exec jekyll serve # alternatively, npm start
85+
# Build settings
86+
# paginate: 10 # 一页你准备放几篇文章
2687
```
2788

28-
### Development (Build From Source)
89+
Jekyll官方网站还有很多的参数可以调，比如设置文章的链接形式...网址在这里：[Jekyll - Official Site](http://jekyllrb.com/) 中文版的在这里：[Jekyll中文](http://jekyllcn.com/).
90+
91+
#### write-posts
92+
93+
要发表的文章一般以markdown的格式放在这里 `_posts/`，你只要看看这篇模板里的文章你就立刻明白该如何设置。
94+
95+
yaml 头文件长这样:
96+
97+
```
98+
---
99+
layout: post
100+
title: "Hello 2024"
101+
subtitle: "Hello World, Hello Blog"
102+
date: 2023-01-29 12:00:00
103+
author: "abining"
104+
header-style: text
105+
# header-img: "img/post-bg-2015.jpg"
106+
tags:
107+
- Life
108+
- Right
109+
---
110+
111+
```
112+
113+
在引入[Rake](https://github.com/ruby/rake)工具之后，我们可以使用命令：
114+
115+
```
116+
rake post title="Hello 2015" subtitle="Hello World, Hello Blog"
117+
```
118+
119+
来自动生成上面的文章模板。
120+
121+
#### SideBar
122+
123+
看右边:
124+
![20241127000137](https://raw.githubusercontent.com/abining/picgo_imgs/main/images/20241127000137.png)
125+
126+
设置是在 `_config.yml`文件里面的 `Sidebar settings`那块。
127+
128+
```
129+
# Sidebar settings
130+
sidebar: true #添加侧边栏
131+
sidebar-about-description: "简单的描述一下你自己"
132+
sidebar-avatar: /img/avatar-hux.jpg #你的大头贴，请使用绝对地址.
133+
```
134+
135+
侧边栏是响应式布局的，当屏幕尺寸小于992px的时候，侧边栏就会移动到底部。具体请见bootstrap栅格系统 [http://v3.bootcss.com/css/](http://v3.bootcss.com/css/)
136+
137+
#### Mini About Me
138+
139+
Mini-About-Me 这个模块将在你的头像下面，展示你所有的社交账号。这个也是响应式布局，当屏幕变小时候，会将其移动到页面底部，只不过会稍微有点小变化，具体请看代码。
140+
141+
#### Featured Tags
142+
143+
看到这个网站 [Medium](http://medium.com) 的推荐标签非常的炫酷，所以我将他加了进来。
144+
这个模块现在是独立的，可以呈现在所有页面，包括主页和发表的每一篇文章标题的头上。
145+
146+
```
147+
# Featured Tags
148+
featured-tags: true
149+
featured-condition-size: 1 # A tag will be featured if the size of it is more than this condition value
150+
```
151+
152+
唯一需要注意的是 `featured-condition-size`: 如果一个标签的 SIZE，也就是使用该标签的文章数大于上面设定的条件值，这个标签就会在首页上被推荐。
153+
154+
内部有一个条件模板 `{% if tag[1].size > {{site.featured-condition-size}} %}` 是用来做筛选过滤的.
155+
156+
#### Friends
157+
158+
好友链接部分。这会在全部页面显示。
159+
160+
设置是在 `_config.yml`文件里面的 `Friends`那块，自己加吧。
161+
162+
```
163+
# Friends
164+
friends: [
165+
{
166+
title: "Foo Blog",
167+
href: "http://foo.github.io/"
168+
},
169+
{
170+
title: "Bar Blog",
171+
href: "http://bar.github.io"
172+
}
173+
]
174+
```
175+
176+
#### Keynote Layout
177+
178+
HTML5幻灯片的排版：
179+
180+
![](http://abining.github.io/img/blog-keynote.jpg)
181+
182+
这部分是用于占用html格式的幻灯片的，一般用到的是 Reveal.js, Impress.js, Slides, Prezi 等等.我认为一个现代化的博客怎么能少了放html幻灯的功能呢~
183+
184+
其主要原理是添加一个 `iframe`，在里面加入外部链接。你可以直接写到头文件里面去，详情请见下面的yaml头文件的写法。
185+
186+
```
187+
---
188+
layout: keynote
189+
iframe: "http://abining.github.io/js-module-7day/"
190+
---
191+
```
192+
193+
iframe在不同的设备中，将会自动的调整大小。保留内边距是为了让手机用户可以向下滑动，以及添加更多的内容。
194+
195+
#### Comment
196+
197+
博客不仅支持多说[Duoshuo](http://duoshuo.com)评论系统，也支持[Disqus](http://disqus.com)评论系统。
198+
199+
`Disqus`优点是：国际比较流行，界面也很大气、简介，如果有人评论，还能实时通知，直接回复通知的邮件就行了；缺点是：评论必须要去注册一个disqus账号，分享一般只有Facebook和Twitter，另外在墙内加载速度略慢了一点。想要知道长啥样，可以看以前的版本点[这里](http://brucezhaor.github.io/about.html) 最下面就可以看到。
200+
201+
`多说` 优点是：支持国内各主流社交软件(微博，微信，豆瓣，QQ空间 ...)一键分享按钮功能，另外登陆比较方便，管理界面也是纯中文的，相对于disqus全英文的要容易操作一些；缺点是：就是界面丑了一点。
202+
当然你是可以自定义界面的css的，详情请看多说开发者文档 http://dev.duoshuo.com/docs/5003ecd94cab3e7250000008 。
203+
204+
**首先**，你需要去注册一个账号，不管是disqus还是多说的。**不要直接使用我的啊！**
205+
206+
**其次**，你只需要在下面的yaml头文件中设置一下就可以了。
207+
208+
```
209+
duoshuo_username: _你的用户名_
210+
# 或者
211+
disqus_username: _你的用户名_
212+
```
213+
214+
**最后**多说是支持分享的，如果你不想分享，请这样设置：`duoshuo_share: false`。你可以同时使用两个评论系统，不过个人感觉怪怪的。
215+
216+
#### Analytics
217+
218+
网站分析，现在支持百度统计和Google Analytics。需要去官方网站注册一下，然后将返回的code贴在下面：
219+
220+
```
221+
# Baidu Analytics
222+
ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900
223+
224+
# Google Analytics
225+
ga_track_id: 'UA-49627206-1' # 你用Google账号去注册一个就会给你一个这样的id
226+
ga_domain: huangxuan.me # 默认的是 auto, 这里我是自定义了的域名，你如果没有自己的域名，需要改成auto。
227+
```
29228

30-
To modify the theme, you will need [Grunt](https://gruntjs.com/). There are numbers of tasks you can find in the `Gruntfile.js`, includes minifing JavaScript, compiling `.less` to `.css`, adding banners to keep the Apache 2.0 license intact, watching for changes, etc.
229+
#### Customization
31230

32-
Yes, they were inherited and are extremely old-fashioned. There is no modularization and transpilation, etc.
231+
如果你喜欢折腾，你可以去自定义我的这个模板的 code，[Grunt](gruntjs.com)已经为你准备好了。（感谢 Clean Blog）
33232

34-
Critical Jekyll-related code are located in `_include/` and `_layouts/`. Most of them are [Liquid](https://github.com/Shopify/liquid/wiki) templates.
233+
JavaScript 的压缩混淆、Less 的编译、Apache 2.0 许可通告的添加与 watch 代码改动，这些任务都揽括其中。简单的在命令行中输入 `grunt` 就可以执行默认任务来帮你构建文件了。如果你想搞一搞 JavaScript 或 Less 的话，`grunt watch` 会帮助到你的。
35234

36-
This theme uses the default code syntax highlighter of jekyll, [Rouge](http://rouge.jneen.net/), which is compatible with Pygments theme so just pick any pygments theme css (e.g. from [here](http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html) and replace the content of `highlight.less`.
235+
**如果你可以理解 `_include/` 和 `_layouts/`文件夹下的代码（这里是整个界面布局的地方），你就可以使用 Jekyll 使用的模版引擎 [Liquid](https://github.com/Shopify/liquid/wiki)的语法直接修改/添加代码，来进行更有创意的自定义界面啦！**
37236

237+
#### Header Image
38238

39-
### Interesting to know more? Checkout the [full user manual](_doc/Manual.md)!
239+
标题底图是可以自己选的，看看几篇示例post你就知道如何设置了。在
240+
[issue #6 ](https://github.com/Huxpro/huxpro.github.io/issues/6) 中我被问到：怎么样才能让标题底图好看呢？
40241

242+
标题底图的选取完全是看个人的审美了，我也帮不了你。每一篇文章可以有不同的底图，你想放什么就放什么，最后宽度要够，大小不要太大，否则加载慢啊。
41243

42-
Other Resources
43-
---------------
244+
但是需要注意的是本模板的标题是**白色**的，所以背景色要设置为**灰色**或者**黑色**，总之深色系就对了。当然你还可以自定义修改字体颜色，总之，用github pages就是可以完全的个性定制自己的博客。
44245

45-
Ports
246+
#### SEO Title
46247

47-
Translation
48-
- [🇨🇳 中文文档（有点过时）](https://github.com/abining/abining.github.io/blob/master/_doc/README.zh.md)
248+
我的博客标题是 **“Hux Blog”** 但是我想要在搜索的时候显示 **“黄玄的博客 | Hux Blog”** ，这个就需要SEO Title来定义了。
49249

250+
其实这个SEO Title就是定义了 `<head><title>`标题 `</title></head>`这个里面的东西和多说分享的标题，你可以自行修改的。
50251

51-
License
52-
-------
252+
## 致谢
53253

54-
Apache License 2.0.
55-
Copyright (c) 2015-present abining
254+
> Ebin的博客，fork自[Hux Blog](https://github.com/Huxpro/huxpro.github.io)
56255
57-
Ebin Blog is derived from [Clean Blog Jekyll Theme (MIT License)](https://github.com/BlackrockDigital/startbootstrap-clean-blog-jekyll/)
58-
Copyright (c) 2013-2016 Blackrock Digital LLC.
256+
1. 这个模板是从这里[IronSummitMedia/startbootstrap-clean-blog-jekyll](https://github.com/IronSummitMedia/startbootstrap-clean-blog-jekyll) fork 的。 感谢这个作者
257+
2. 感谢[@BrucZhaoR](https://github.com/BruceZhaoR)的中文翻译
258+
3. 感谢 Jekyll、Github Pages 和 Bootstrap!

‎_doc/README.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
[Ebin Blog](https://abining.fun)
2+
================================
3+
4+
> I never expected this to become popular.
5+
6+
![](http://abining.fun/img/blog-desktop.jpg)
7+
8+
9+
[User Manual 👉](_doc/Manual.md)
10+
--------------------------------------------------
11+
12+
### Getting Started
13+
14+
1. You will need [Ruby](https://www.ruby-lang.org/en/) and [Bundler](https://bundler.io/) to use [Jekyll](https://jekyllrb.com/). Following [Using Jekyll with Bundler](https://jekyllrb.com/tutorials/using-jekyll-with-bundler/) to fullfill the enviromental requirement.
15+
16+
2. Installed dependencies in the `Gemfile`:
17+
18+
```sh
19+
$ bundle install
20+
```
21+
22+
3. Serve the website (`localhost:4000` by default):
23+
24+
```sh
25+
$ bundle exec jekyll serve # alternatively, npm start
26+
```
27+
28+
### Development (Build From Source)
29+
30+
To modify the theme, you will need [Grunt](https://gruntjs.com/). There are numbers of tasks you can find in the `Gruntfile.js`, includes minifing JavaScript, compiling `.less` to `.css`, adding banners to keep the Apache 2.0 license intact, watching for changes, etc.
31+
32+
Yes, they were inherited and are extremely old-fashioned. There is no modularization and transpilation, etc.
33+
34+
Critical Jekyll-related code are located in `_include/` and `_layouts/`. Most of them are [Liquid](https://github.com/Shopify/liquid/wiki) templates.
35+
36+
This theme uses the default code syntax highlighter of jekyll, [Rouge](http://rouge.jneen.net/), which is compatible with Pygments theme so just pick any pygments theme css (e.g. from [here](http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html) and replace the content of `highlight.less`.
37+
38+
39+
### Interesting to know more? Checkout the [full user manual](_doc/Manual.md)!
40+
41+
42+
Other Resources
43+
---------------
44+
45+
Ports
46+
47+
Translation
48+
- [🇨🇳 中文文档（有点过时）](https://github.com/abining/abining.github.io/blob/master/_doc/README.zh.md)
49+
50+
51+
License
52+
-------
53+
54+
Apache License 2.0.
55+
Copyright (c) 2015-present abining
56+
57+
Ebin Blog is derived from [Clean Blog Jekyll Theme (MIT License)](https://github.com/BlackrockDigital/startbootstrap-clean-blog-jekyll/)
58+
Copyright (c) 2013-2016 Blackrock Digital LLC.

0 commit comments

Comments
 (0)