Hux blog 模板

Hux blog 模板

我的博客在这里

模板在这里

我的博客仓库——huxpro.github.io，是经常修改的，而且还会有人乱提交代码，因此给大家做了一个稳定版的模板。大家可以直接fork模板——huxblog-boilerplate,要改的地方我都说明了。或者可以直接下载zip到本地自己去修改。

各版本特性

New Feature (V1.5.2)
  • 当你fork了我的仓库之后，还要删掉里面的关于我的文档是不是感到略烦躁呢？Boilerplate 模板将帮助你快速开始，方便合并与更新。
  • -apple-system被添加到了字体规则里面了，这套字体格式能将iOS9默认的新字体San Francisco表现的非常漂亮。
  • 解决了代码过长自动换行的bug,替换为横向滚动条。详情请见issue#15
其他历史版本个人觉得没有必要了解，看看英文就行了。

支持

  • 你可以自由的fork。如果你能将我的信息和github的地址放在你的页面底部做成链接，我将非常感谢你。
  • 如果你喜欢我的这个博客模板，请在huxpro.github.io这个repository点个赞——右上角star一下。

说明文档

Environment

如果你安装了jekyll，那你只需要在命令行输入jekyll serve就能在本地浏览器预览主题。你还可以输入jekyll serve --watch，这样可以边修改边自动运行修改后的文件。

经 @BrucZhaoR的测试，好像两个命令都是可以的自动运行修改后的文件的，刷新后可以实时预览。官方文件是建议安装bundler，这样你在本地的效果就跟在github上面是一样的。详情请见这里：https://help.github.com/articles/using-jekyll-with-pages/#installing-jekyll

Get Started

你可以通用修改 _config.yml文件来轻松的开始搭建自己的博客:

# Site settings
title: Hux Blog             # 你的博客网站标题
SEOTitle: Hux Blog			# 在后面会详细谈到
description: "Cool Blog"    # 随便说点，描述一下

# SNS settings      
github_username: huxpro     # 你的github账号
weibo_username: huxpro      # 你的微博账号，底部链接会自动更新的。

# Build settings
# paginate: 10              # 一页你准备放几篇文章

Jekyll官方网站还有很多的参数可以调，比如设置文章的链接形式…网址在这里：Jekyll - Official Site 中文版的在这里：Jekyll中文.

write-posts

要发表的文章一般以markdown的格式放在这里_posts/，你只要看看这篇模板里的文章你就立刻明白该如何设置。

yaml 头文件长这样:

---
layout:     post
title:      "Hello 2015"
subtitle:   "Hello World, Hello Blog"
date:       2015-01-29 12:00:00
author:     "Hux"
header-img: "img/post-bg-2015.jpg"
tags:
    - Life
---

长这样:

设置是在 _config.yml文件里面的Sidebar settings那块。

# Sidebar settings
sidebar: true  #添加侧边栏
sidebar-about-description: "简单的描述一下你自己"
sidebar-avatar: /img/avatar-hux.jpg     #你的大头贴，请使用绝对地址.

侧边栏是响应式布局的，当屏幕尺寸小于992px的时候，侧边栏就会移动到底部。具体请见bootstrap栅格系统 http://v3.bootcss.com/css/

Mini About Me

Mini-About-Me 这个模块将在你的头像下面，展示你所有的社交账号。这个也是响应式布局，当屏幕变小时候，会将其移动到页面底部，只不过会稍微有点小变化，具体请看代码。

看到这个网站 Medium 的标签云非常的炫酷，所有我在将他加了进来。 这个模块现在是独立的，可以呈现在所有页面，包括主页和发表的每一篇文章标题的头上。

# Featured Tags
featured-tags: true  
featured-condition-size: 1     # A tag will be featured if the size of it is more than this condition value

唯一需要注意的是featured-condition-size: A tag will be featured if the size of it is more than this condition value. （也不知道Hux是想表达什么意思，请作者解答）

Friends

好友链接部分。这会在全部页面显示。

设置是在 _config.yml文件里面的Friends那块，自己加吧。

# Friends
friends: [
    {
        title: "Foo Blog",
        href: "http://foo.github.io/"
    },
    {
        title: "Bar Blog",
        href: "http://bar.github.io"
    }
]

Keynote Layout

HTML5幻灯片的排版：

这部分是用于占用html格式的幻灯片的，一般用到的是 Reveal.js, Impress.js, Slides, Prezi 等等.我认为一个现代化的博客怎么能少了放html幻灯的功能呢~

其主要原理是添加一个 iframe，在里面加入外部链接。你可以直接写到头文件里面去，详情请见下面的yaml头文件的写法。

---
layout:     keynote
iframe:     "http://huangxuan.me/js-module-7day/"
---

iframe在不同的设备中，将会自动的调整大小。保留内边距是为了让手机用户可以向下滑动，以及添加更多的内容。

Comment

博客不仅的多说Duoshuo评论系统，也支持disqusDisqus评论系统。

disqus国际比较流行，界面也很大气、简介，如果有人评论，还能实时通知，直接回复通知的邮件就行了。缺点是评论必须要去注册一个disqus账号，分享一般只有Facebook和Twitter，另外在墙内加载速度略慢了一点。想要知道长啥样，可以看以前的版本点这里 最下面就可以看到。

多说国内主流社交软件都有分享按钮，登陆方便，比较好管理，就是界面丑了一点。当然你是可以自定义界面的css的，详情请看多说开发者文档。

首先，你需要去注册一个账号，不管是disqus还是多说的。不要直接使用我的啊！

其次，你只需要在下面的yaml头文件中设置一下就可以了。

duoshuo_username: _你的用户名_
# 或者
disqus_username: _你的用户名_

最后多说是支持分享的，如果你不想分享，请这样设置：duoshuo_share: false。你可以同时使用两个评论系统，不过个人感觉怪怪的。

Analytics

网站分析，现在支持百度统计和Google Analytics。需要去官方网站注册一下，然后将返回的code贴在下面：

# Baidu Analytics
ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900

# Google Analytics
ga_track_id: 'UA-49627206-1'            # Format: UA-xxxxxx-xx
ga_domain: huangxuan.me

Customization

如果你喜欢折腾，你可以去自定义我的这个模板的code，Grunt的环境已经搭好了。（非常感谢Clean Blog这个模板）

There are a number of tasks it performs like minification of the JavaScript, compiling of the LESS files, adding banners to keep the Apache 2.0 license intact, and watching for changes. Run the grunt default task by entering grunt into your command line which will build the files. You can use grunt watch if you are working on the JavaScript or the LESS.

Try to understand code in _include/ and _layouts/, then you can modify Jekyll Liquid template directly to do more creative customization.

Header Image

标题底图是可以自己选的，看看几篇示例post你就知道如何设置了，详情请见： issue #6 asked, how to make it looks great?

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

但是需要注意的是本模板的标题是白色的，所以背景色要设置为灰色或者黑色，总之深色系就对了。

SEO Title

我的博客标题是 “Hux Blog” 但是我想要在搜索的时候显示 **“黄玄的博客 Hux Blog”** ，这个就需要SEO Title来定义了。

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

致谢

  1. 这个模板是从这里IronSummitMedia/startbootstrap-clean-blog-jekyll forked 的。 感谢这个作者

  2. 感谢@BrucZhaoR的中文翻译

  3. 感谢 Jekyll、Github Pages 和 Bootstrap!
FEATURED TAGS
前端开发 JavaScript
ABOUT ME

写写代码，做做设计，看看产品。世界那么大，多玩玩看看。

FRIENDS