在这里我会从上到下介绍我所做的优化和调整,会把每个模块的修改都覆盖到,而中间踩过的坑都给大家添上。同时也会记录自己的创新点和实践心得等等,欢迎大家评论~
其中这个样式的原版是下面这样的:
详见原作者博客 | 另外该样式的Github地址
乍一看,感觉两者没有实质上的改变,大部分都相同。确实是这样的,下面我会一一列举我新增的内容和填过的坑。😄
导航栏
首先是导航栏部分,可以看到左侧导航栏出现了多个标签页,这里我需要在theme/_config.yml
文件中新增menu菜单栏,实质上脚本文件会自动解析你的config配置项,然后到masthead.ejs
文件中将所有的menu以遍历的形式进行展现出来,具体看下面相关的代码:
1 2 3 4 5 6 7 8 9 10 [第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 文件中加入下面的内容,这是整个顶部导航栏右侧的图表列表。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <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
1 2 3 4 5 6 7 8 9 10 11 12 13 <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+
1 2 3 4 5 <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页面的文章简介出,修改了显示置顶文章的样式,新增了一个小图标
1 <% if (post.top){ %><i class="fa fa-thumb-tack"><font color=7D26CD> 置顶 </font>|</i><% } %>
对接评论系统
在我的博客中,我先后接入评论有四款,按照时间先后顺序分别是:disqus -> gitment -> 畅言 -> valine ,现在选择了valine 也是我比较看好的。首先它不像disqus,需要翻墙才能评论,虽然有博友已经开发了对于disqus的代理,但是还是有缺陷;后来转战gitment,这个由于存在第三方验证 的事情,感觉会导致评论系统的不稳定;转而国内比较稳的畅言,也因为我的域名有备案,因此还是很顺利的接入了,但是个人感觉UI实在不适合技术类博客,因此最后选择valine这一款评论系统,它是基于leancloud ,我们使用免费版即可满足小规模的评论,这里推荐一个valine上手参考博文Valine Admin 配置手册 ,支持邮件通知新评论。Valine Admin pdf版下载