打造一个“精致的”我的博客

我为何要写博客？其实我最初打算写博客，缘由很简单，我就是想把工做中、学习中遇到 的问题及解决方案记录下来，它能帮你梳理下整个过程的要注意的地方，写写你在工做中遇到的问题，用来记录和回顾。Tips:我的博客排版、UI更佳；地址：https://haonancx.github.io/

GITHUB地址：博客仓库

以为好的话，记得给个星呀~

废话少说，先上效果图

网页端

移动端1

移动端2

主要技术栈

• GITHUB帐户

• SASS、JS、CSS

• 搜索功能

• 多说评论

• 百度统计

GITHUB帐户

首先，你得有一个GITHUB帐户，尚未的赶忙去注册一个吧。

• 登录 GitHub，新建一个 repository, 命名为 你的用户名 + github.io。如个人用户名为 haonancx，因此 repository 命名为 haonancx.github.io（能够购买私人域名），以下图。

注意图片中红色箭头标注的地方，命名和你挂载在 GITHUB 的域名是一致的，就是你命名为 "haonancx",那么你的我的博客地址就是 "haonancx.github.io";其次要勾选上 "Public",别人才能访问你的博客。

• 若是你以为我博客风格还不错的话，能够去把他 GIT 下来；或者你能够从这里选中你喜欢的博客；地址：jekyllthemes

下载好你喜欢的博客，而后，把它上传到你刚建好的 repository 上；
而后 输入你的博客地址就访问成功了。

SASS、JS、CSS

若是你须要修改博客内容，这里给你介绍一下；文件夹中的内容（以个人博客为例）。

1. _include 文件夹中是网页的公共部分，head.html是文件head标签里的引入的文件，图片等，header.html、footer.html 是网页的公共头部（导航）和底部（版权）；

2. _layouts 中 default.html、post.html 是引入网页的公共头部（导航）和底部（版权）以及编译发表文章的内容，

3. _sass 、css文件夹中有整个博客的公共样式文件。(在这里你能够对你的博客按照你喜欢的 UI 界面进行调整)

4. images 文件夹中包含引用的图片(傻子都知道~)。

5. scripts 文件夹中有引用的 JS 文件。

6. _config.yml 为博客的配置文件，若是你要使用一些插件，大部分都得在这里配置（很重要~）。

代码高亮模块（jekyll 支持代码高亮），只需在你写的文章的先后加上约定的代码便可。

撰写方式

搜索功能

试试双击Ctrl键看看，或者点击右下角搜索图标；

博客从wordpress的jekyll，jekyll的核心思想:

将纯文本转化为静态网站和博客

jekyll只是一个生成静态网页的工具，不须要数据库支持。可是能够配合第三方服务,例如Disqus。最关键的是jekyll能够免费部署在Github上，并且能够绑定本身的域名。

jekyll没有数据库支持，默认没有搜索功能，那么怎么添加炫酷简洁的搜索的功能呢？google一下，大部分都是使用插件之类的，起始咱们能够直接在服务端产生索引，以后利用索引进行搜索。

受到spotlight的简洁启发，因而打算作出一个相似于spotlight的搜索。下面先看一下操做步骤：

1. 服务端生成文章索引

2. 浏览器获取文章索引

3. 页面交互以及按键控制

JSON代码

{% highlight ruby %}

layout: null

{

"code" : 0 ,
"data" : [
 {\% for post in site.posts \%}
{
    "title" : " - {\% for tag in post.tags \%}{\% if forloop.rindex != 1 \%}_{\% else \%}{\% endif \%}{\% endfor \%}",
    "url" : ""
}
{\% if forloop.rindex != 1  \%}
,
{\% endif %\}

{% endfor %}

]

}
{% endhighlight %}

• 因为文章中的动态代码会被解析，因此作了替换，代码中%被替换成%,使用中请去除%前面的转义符

• 这段代码是一个双层循环，将文章的标题与标签组合，同时和url一块儿组合为json字符串，方便后续ajax调用。

• 浏览器获取文章索引，此处也即一个ajax调用，使用$.ajax或者$.getJson均可以，此处能够参考一下ajax的异步请求。

• 页面交互以及按键控制，为了可以有一个更好的交互，对搜索进行了不少的按键的操做:

• PC下双击Ctrl键打开或者关闭搜索框，搜索框展现时按下Esc键关闭搜索框，按键的检测在js中也是很容易进行，此处也不在列代码了。

• 为了移动端也能够很好的搜索，在页面的右下角加入搜索悬浮按钮，点击后打开搜索页面，而在搜索页面，右上角提供关闭按钮，这样总体下来就完美的实现了搜索。

多说评论

jekyll bootstrap搭建的博客默认使用的是Disqus评论插件,固然不是说Disqus很差，只是针对咱们国内的用户来讲,彷佛并非最好的选择。因此咱们改成多说（容易上手）。

建立成功以后 咱们会获得以下代码

这段代码有三个地方须要修改

最后咱们就能够在页面中看到多说了。

百度统计

先注册个百度统计的帐号(站长帐号，适合我的博客)，注册成功后；

按照提示，把代码复制到 head.html 中的head的标签里；（这里特指个人博客文件）

好了，这样你的博客就差很少了，是否是感受很酷？？？ 今天就到这儿，下篇文章见。

部分技术实践整理于网络