website优化之路

在这里我会从上到下介绍我所做的优化和调整,会把每个模块的修改都覆盖到,而中间踩过的坑都给大家添上。同时也会记录自己的创新点和实践心得等等,欢迎大家评论~

Blog首页

其中这个样式的原版是下面这样的:
原版博客样式
详见原作者博客 | 另外该样式的Github地址

乍一看,感觉两者没有实质上的改变,大部分都相同。确实是这样的,下面我会一一列举我新增的内容和填过的坑。😄

导航栏

首先是导航栏部分,可以看到左侧导航栏出现了多个标签页,这里我需要在theme/_config.yml文件中新增menu菜单栏,实质上脚本文件会自动解析你的config配置项,然后到masthead.ejs文件中将所有的menu以遍历的形式进行展现出来,具体看下面相关的代码:

[第16行开始]
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-menu-navbar">
<ul class="nav navbar-nav">
<% for (var i in theme.menu){ %>
<li><a class="<%= is_current(theme.menu[i]) ? 'active' : '' %>"
href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
<% } %>
</ul>
......

导航栏右侧的个人站点图表

masthead.ejs 文件中加入下面的内容,这是整个顶部导航栏右侧的图表列表。

<ul class="nav navbar-nav navbar-right" id="sub-menu-navbar">
<% if (theme.rss){ %>
<li><a href="<%- theme.rss %>" title="RSS Feed"><i class="fa fa-rss"></i></a></li>
<% } %>
<% if (theme.github){ %>
<li><a href="https://github.com/<%- theme.github %>" title="Github"><i class="fa fa-github"></i></a></li>
<% } %>
<% if (theme.gitlab){ %>
<li><a href="https://gitlab.com/<%- theme.gitlab %>" title="Gitlab"><i class="fa fa-gitlab"></i></a></li>
<% } %>
<% if (theme.stackoverflow){ %>
<li><a href="https://stackoverflow.com/users/<%- theme.stackoverflow %>" title="StackOverFlow"><i class="fa fa-stack-overflow"></i></a></li>
<% } %>
</ul>

个人头像专栏设置

这里也是有一个文件保存这些信息 header.ejs

<div class="blog-header hidden-xs">
<img id="blog-logo" width="80" height="80" alt="Long Shilin" src="https://www.gravatar.com/avatar/06c71e5f94c268040fd4068f336188e7.png">
<h2 class="blog-title"><%= config.title %></h2>
<% if (theme.subtitle){ %>
<p class="lead blog-description"><%= theme.subtitle %></p>
<% } %>
</div>
<div class="blog-header visible-xs">
<h1 class="blog-title"><%= config.title_mobile %></h1>
<% if (theme.subtitle){ %>
<p class="lead blog-description"><%= theme.subtitle_mobile %></p>
<% } %>
</div>

博客分享按钮的添加


这里我加入来五种平台的分享,其中除微信外,其他集中可以直接跳转到对应的Web或App中进行分享。

下面主要介绍这几个平台分享URL是如何进行拼接的。当时找微博的url拼接的方法还是找了好一圈,不过最后还是解决了~😄 (有问题可以在下面评论区留言)

  • 微博、微信、Twitter、Facebook、Google+
<a href="http://service.weibo.com/share/share.php?appkey=&title='+ "【" + title + "】" + description +'&url=' + encodedUrl + '&searchPic=false&style=simple" class="article-share-weibo" target="_blank" title="微博"></a>,
<a href="http://qr.liantu.com/api.php?text=' + encodedUrl + '" class="article-share-weixin" target="_blank" title="微信"></a>,
<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>,
<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>,
<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="article-share-google" target="_blank" title="Google+"></a>

博客中增加emoji表情

我推荐这篇博文 Hexo中添加emoji表情,持久化保存的pdf版下载

hexo文章置顶功能

npm插件:hexo-generator-topindex

另外在index页面的文章简介出,修改了显示置顶文章的样式,新增了一个小图标

<% if (post.top){ %><i class="fa fa-thumb-tack"><font color=7D26CD>&nbsp;置顶 &nbsp;&nbsp;</font>|</i><% } %>

对接评论系统

在我的博客中,我先后接入评论有四款,按照时间先后顺序分别是:disqus -> gitment -> 畅言 -> valine,现在选择了valine 也是我比较看好的。首先它不像disqus,需要翻墙才能评论,虽然有博友已经开发了对于disqus的代理,但是还是有缺陷;后来转战gitment,这个由于存在第三方验证的事情,感觉会导致评论系统的不稳定;转而国内比较稳的畅言,也因为我的域名有备案,因此还是很顺利的接入了,但是个人感觉UI实在不适合技术类博客,因此最后选择valine这一款评论系统,它是基于leancloud,我们使用免费版即可满足小规模的评论,这里推荐一个valine上手参考博文Valine Admin 配置手册,支持邮件通知新评论。Valine Admin pdf版下载