随着 jekyll 的版本升级，同时我也想重构我的旧版博客主题，因此在这个月对博客进行了重构加改版，这个仓库存放我的新博客，并且我也会一直使用这个主题。目前基本改版完成，后续可能还会有些细节上的修补。
博客访问地址：http://gaohaoyang.github.io/。若您喜欢这个新的博客主题，请给我个star以示鼓励吧，欢迎大家使用。
先上预览图：
主页
文章页
主页默认展示5篇文章的摘要部分，用户点击标题或阅读全文后进入文章页。右侧为近期文章、分类和标签3块区域，用户可以继续在这部分添加区域，只需修改index.html即可。
按照年份归档文章。
按照文章的分类，显示文章。
按照文章的标签显示文章。
本页是用markdown写的，用户可以收藏自己喜欢的文章链接。
使用 Masonry 重写了瀑布流布局，响应式布局，更好的交互体验。
对个人和对本站的介绍，使用markdown写的。
只需要在 _config.yml 修改相应的配置short_name即可，如下：
# comments
# two ways to comment, only choose one, and use your own short name
# 两种评论插件，选一个就好了，使用自己的 short_name
duoshuo_shortname: #xxx
disqus_shortname: xxx页面滚动时目录固定在屏幕右侧，若目录高度超出屏幕高度，目录产生滚动条。
随着 jekyll 的升级，目前代码高亮使用风格与 github 上的 markdown 写法一致。
可以看到导航按钮高亮时，下面的阴影效果，我把这个称为灯泡效果。
完美适配移动端。
欢迎使用这个主题，使用时请保留 footer 上的模板主题来源。 Theme designed by HyG.
博客支持百度统计和 Google Analytics，只需在_config.yml中配置响应的id即可，代码如下。
# statistic analysis 统计代码
# 百度统计 id，将统计代码替换为自己的百度统计id，即
# hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx";
# xxxxx字符串
baidu_tongji_id: xxxxxxxxxxxx
google_analytics_id: UA-xxxxxxxx # google 分析追踪id欢迎使用这个主题，以下简单说一下使用方法。
这一步和第5步主要是为了让博客系统在本地跑起来，如果不想在本地运行，可以无视这两步，但我还是强烈建议试着先在本地跑起来，没有什么问题后再推送的 GitHub 上。
Windows 用户可以直接使用 RubyInstaller 安装 ruby 环境。后续的操作中可能还会提示安装 DevKit，根据提示操作即可。
建议使用 RubyGems 镜像- Ruby China 安装 jekyll。
安装 jekyll 命令如下
gem install jekyll
详情可以查看 jekyll 官网。https://jekyllrb.com/ 或 中文翻译版 jekyll 官网http://jekyllcn.com/ （中文文档翻译落后于英文官网，有兴趣有时间的小伙伴可以参与翻译，为开源世界贡献一份力哦~）
在 mac OS X El Capitan 系统下安装可能会出现问题，解决方案详情见 jekyll 官网: https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011
对 jekyll 本身感兴趣的同学可以看看 jekyll 源码: https://github.com/jekyll/jekyll
可以直接 clone 、下载 或 fork 这个仓库的代码即可
主要修改 _config.yml 中的参数和自己的网站小图favicon.ico
_config.yml文件中
主要用于网站头部header。
# Site settings
title: HyG
brief-intro: Front-end Dev Engineer
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://gaohaoyang.github.io" # the base hostname & protocol for your site主要用于网站底部footer。
# other links
twitter_username: gaohaoyang126
facebook_username: gaohaoyang.water
github_username: Gaohaoyang
email: [email protected]
weibo_username: 3115521wh
zhihu_username: gaohaoyang
linkedIn_username: gaohaoyang
dribbble_username:
description_footer: 本站记录我前端之旅的沿途风景！获取short_name的方法：
访问 https://disqus.com/ 或 http://duoshuo.com/ 根据提示操作即可。
# comments
# two ways to comment, only choose one, and use your own short name
# 两种评论插件，选一个就好了，使用自己的 short_name
duoshuo_shortname: #hygblog
disqus_shortname: gaohaoyang运行成功后，可以在 disqus 或 多说 的后台管理页看到相关信息。
获取 百度统计id 或 Google Analytics id 的方法：
访问 http://tongji.baidu.com/ 或 https://www.google.com/analytics/ 根据提示操作即可。当然，如果不想添加统计信息，这两个参数可以不填。
# statistic analysis 统计代码
# 百度统计 id，将统计代码替换为自己的百度统计id，即
# hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx";
# xxxxx字符串
baidu_tongji_id: cf8506e0ef223e57ff6239944e5d46a4
google_analytics_id: UA-72449510-4 # google 分析追踪id成功后，进入自己的百度统计或 Google Analytics 后台管理，即可看到网站的访问量、访客等相关信息。
_posts目录下存放文章信息，文章头部注明 layout(布局)、title、date、categories、tags、author(可选)、mathjax(可选，点击这里查看更多关于Mathjax)，如下：
---
layout: post
title: "对这个 jekyll 博客主题的改版和重构"
date: 2016-03-12 11:40:18 +0800
categories: jekyll
tags: jekyll 端口 markdown Foxit RubyGems HTML CSS
author: Haoyang Gao
mathjax: true
---
下面这两行代码为产生目录时使用
* content
{:toc}
文章中存在的4次换行为摘要分割符，换行前的内容会以摘要的形式显示在主页Home上，进入文章页不影响。
换行符的设置见配置文件_config.yml的 excerpt，如下：
# excerpt
excerpt_separator: "\n\n\n\n"使用 markdown 语法写文章。
代码风格与 GitHub 上 README 或 issue 中的一致。使用3个```的方式。
本地执行
jekyll s
显示
Configuration file: E:/GitWorkSpace/blog/_config.yml
Source: E:/GitWorkSpace/blog
Destination: E:/GitWorkSpace/blog/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 6.33 seconds.
Please add the following to your Gemfile to avoid polling for changes:
gem 'wdm', '>= 0.1.0' if Gem.win_platform?
Auto-regeneration: enabled for 'E:/GitWorkSpace/blog'
Configuration file: E:/GitWorkSpace/blog/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
在本地访问 localhost:4000 即可看到博客主页。
若安装了 Foxit 福昕pdf阅读器可能会占用4000端口，关闭 Foxit服务 或切换 jekyll 端口即可解决。详情见文章：对这个 jekyll 博客主题的改版和重构
若正在使用全局代理，可能会报错502，关闭全局代理即可。
没什么问题，推送到自己的博客仓库即可。
您也可以捐助我喝杯咖啡！感谢！
| 支付宝 | 微信支付 | PayPal |
|---|---|---|
 |
 |
 Donate via PayPal |
感谢捐赠的小伙伴！！！
- 2017.05.25 收到 微信用户 ¥1.00
- 2017.05.19 收到 风之筝 ¥6.66
- 2017.05.16 收到 张驰 ¥6.00
- 2017.05.03 收到 希成 ¥6.66
- 2017.04.24 收到 deezer ¥10.00
- 2017.04.13 收到 Abraham Xiao ¥30.00
- 2017.04.11 收到 微信用户 ¥4.00
- 2017.04.01 收到 Elvin Zeng ¥6.66
- 2017.03.13 收到 微信用户 ¥6.66
- 2017.03.04 收到 史莱姆 ¥9.90
- 2017.03.02 收到 梦想小熊 ¥6.66
- 2017.02.27 收到 夏友杰 ¥6.66
- 2017.02.26 收到 兰缘小妖 ¥10.00
- 2017.02.25 收到 微信用户 ¥6.66
- 2017.02.22 收到 微信用户 ¥6.66
- 2017.02.15 收到 微信用户 ¥10.00
- 2017.02.06 收到 Light ¥10.24
- 2017.01.15 收到 微信用户 ¥6.66
- 2016.12.17 收到 HitNoah ¥12.00
- 2016.12.09 收到 情融 ¥6.60
- 2016.11.16 收到 微信用户 ¥6.66
- 2016.11.16 收到 微信用户 ¥1.00
- 2016.10.24 收到 奇峰 ¥6.66
- 2016.10.21 收到 旭廷 ¥10.00
- 2016.09.24 收到 鑫 ¥6.66
- 2016.08.25 收到 Erlend Aakre $2.50
- 2016.08.10 收到 微信用户 ¥4.40
- 2016.07.25 收到 邓炳初 ¥6.66
- 2016.07.11 收到 彦风 ¥6.66
- 2016.07.07 收到 Klci ¥2.50
- 2016.05.08 收到 1057 ¥10.57
- 2016.05.07 收到 吴林 ¥2
- 2016.04.29 收到 北归 ¥10
- 2016.04.28 收到 魏楚阳_Brian ¥2
- 2016.04.28 收到 薛彬 ¥8.8
[^]优化代码，将页面中的大段评论相关代码抽离出来，放入comments.html[+]添加百度统计和Google分析代码，在_config.yml中配置相关参数即可[+]更新文档，添加博客主题使用方法，便于上手[+]添加了favicon.ico[^]修复 bug，目录太长时，滚动到最底部时隐藏到footer下面。修复后长目录在滚动到底部时使用position:absolute[^]修改目录区的滚动条样式（仅针对webkit内核浏览器）[^]修改 demo 页中 disqus 评论区 a 标签的颜色 bug，修改 blockqoute 中 p 标签的 margin[+]添加不蒜子计数功能，在footer上显示访问量[+]添加回到顶部功能
[^]基于 jekyll 3.1.2 重构了所有代码[+]主页添加了摘要，在正文中使用4个换行符来分割，可在_config.yml中修改[+]主页添加了近期文章、分类列表和标签云[+]主页导航区做了视觉优化，阴影效果[+]增加了归档、标签和分类页面[+]增加了收藏页面[+]评论插件可以选择 disqus 或 多说，直接在_config.yml中修改[+]适配移动端[+]页面滚动时，文章目录固定在右侧[+]页面内容较少时，固定 footer 在页面底部[^]使用 GitHub 风格的代码高亮写法，即```的写法，去除highlight.js代码高亮插件的使用[^]使用 Masonry 重写了 Demo 页中的瀑布流布局，响应式交互体验更好[-]去除了 jQuery 和 BootStrap，使得加载速度更快
关于旧版博客，我不再维护，同时我把代码转移到了另一个仓库，见 Gaohaoyang/old-blog。