摘要：百度统计先注册个百度统计的账号站长账号，适合个人博客，注册成功后按照提示，把代码复制到中的的标签里这里特指我的博客文件好了，这样你的博客就差不多了，是不是感觉很酷今天就到这儿，下篇文章见。
我为什么要写博客？其实我最初打算写博客，原因很简单，我就是想把工作中、学习中遇到 的问题及解决方案记录下来，它能帮你梳理下整个过程的要注意的地方，写写你在工作中遇到的问题，用来记录和回顾。Tips:个人博客排版、UI更佳；地址：https://haonancx.github.io/
GITHUB地址：博客仓库
觉得好的话，记得给个星呀~
废话少说，先上效果图GITHUB账户
SASS、JS、CSS
搜索功能
多说评论
百度统计
GITHUB账户首先，你得有一个GITHUB账户，还没有的赶紧去注册一个吧。
登陆 GitHub，新建一个 repository, 命名为 你的用户名 + github.io。如我的用户名为 haonancx，所以 repository 命名为 haonancx.github.io（可以购买私人域名），如下图。
如果你觉得我博客风格还不错的话，可以去把他 GIT 下来；或者你可以从这里选中你喜欢的博客；地址：jekyllthemes
下载好你喜欢的博客，然后，把它上传到你刚建好的 repository 上；
然后 输入你的博客地址就访问成功了。
_include 文件夹中是网页的公共部分，head.html是文件head标签里的引入的文件，图片等，header.html、footer.html 是网页的公共头部（导航）和底部（版权）；
_layouts 中 default.html、post.html 是引入网页的公共头部（导航）和底部（版权）以及编译发表文章的内容，
_sass 、css文件夹中有整个博客的公共样式文件。(在这里你可以对你的博客按照你喜欢的 UI 界面进行调整)
images 文件夹中包含引用的图片(傻子都知道~)。
scripts 文件夹中有引用的 JS 文件。
_config.yml 为博客的配置文件，如果你要使用一些插件，大部分都得在这里配置（很重要~）。
代码高亮模块（jekyll 支持代码高亮），只需在你写的文章的前后加上约定的代码即可。博客从wordpress的jekyll，jekyll的核心思想:
jekyll只是一个生成静态网页的工具，不需要数据库支持。但是可以配合第三方服务,例如Disqus。最关键的是jekyll可以免费部署在Github上，而且可以绑定自己的域名。
jekyll没有数据库支持，默认没有搜索功能，那么怎么添加炫酷简洁的搜索的功能呢？google一下，大部分都是使用插件之类的，起始我们可以直接在服务端产生索引，之后利用索引进行搜索。
受到spotlight的简洁启发，于是打算做出一个类似于spotlight的搜索。下面先看一下操作步骤：
服务端生成文章索引
浏览器获取文章索引
页面交互以及按键控制
{
"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不好，只是针对我们国内的用户来说,似乎并不是最好的选择。所以我们改为多说（容易上手）。
最后我们就可以在页面中看到多说了。
百度统计先注册个百度统计的账号(站长账号，适合个人博客)，注册成功后；
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91232.html
摘要：百度统计先注册个百度统计的账号站长账号，适合个人博客，注册成功后按照提示，把代码复制到中的的标签里这里特指我的博客文件好了，这样你的博客就差不多了，是不是感觉很酷今天就到这儿，下篇文章见。 我为什么要写博客？其实我最初打算写博客，原因很简单，我就是想把工作中、学习中遇到 的问题及解决方案记录下来，它能帮你梳理下整个过程的要注意的地方，写写你在工作中遇到的问题，用来记录和回顾。Tips:...
摘要：所以完美的方案就是，需要提供尺寸均一的大图片，适配到下相比微信的高清图片资源，展现的精致效果在级别及更高版本中，可定义矢量图片，而且图片可在不损失清晰度的情况下缩放。 前言 由于android系统的开放性，以及IOS的相对封闭。第三方设备想要使用苹果的OS，目前来说是不可能。所以，各厂商纷纷的投入了android的怀抱，android阵营也越来越强大，如今移动操作系统也就是androi...
摘要：从现在开始，养成写技术博客的习惯，或许可以在你的职业生涯发挥着不可忽略的作用。如果想了解更多优秀的前端资料，建议收藏下前端英文网站汇总这个网站，收录了国外一些优质的博客及其视频资料。 前言 写文章是一个短期收益少，长期收益很大的一件事情，人们总是高估短期收益，低估长期收益。往往是很多人坚持不下来，特别是写文章的初期，刚写完文章没有人阅读会有一种挫败感，影响了后期创作。 从某种意义上说，...
摘要：高级特效之酷炫抢红包金币下落动画最近项目需求要求做一个抢红包特效。使用动画让页面跳转更炫酷中引入了很多炫酷的动画效果，便是其中一种。 Android自定义View：一个精致的打钩小动画 一个精致的打钩动画。 Android 自定义水平进度条圆角进度 项目中实现进度条进度过程中显示圆角样式 ViewPager系列之 仿魅族应用的广告BannerView 前言 Banner广告位是APP ...
阅读 3360·2021-11-17 09:33
阅读 1225·2021-11-16 11:44
阅读 431·2021-07-25 21:37
阅读 3436·2019-08-30 15:55
阅读 2403·2019-08-30 15:54
阅读 1587·2019-08-30 15:44
阅读 2991·2019-08-30 15:44
阅读 736·2019-08-30 15:43
