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版下载

隐藏边栏