一次糟糕的换主题过程

前天看到了一个自称 无名小辈 的博主的博客，那界面，简洁又华丽，正好符合我的审美，

回头看看自己的，NexT最大的缺点是什么？大众脸,通常随便点几个博客都跟我的博客差不多。因为集成了大量插件以及修改简单、界面优雅，NexT已经在Hexo里占了半边江山，基本上网上搜索Hexo建立博客教程，其中主题绝大多数是NexT。

当然，NexT也有NexT的好处，毕竟作为一款主打全兼容的主题，NexT修改起来真的很简单，而且任何常见错误网上一搜就行了。但是，自建博客的主要目的是什么？当然是个性化，那不然我何苦不在CSDN、简书、掘金这些平台上写，还免去一番折腾，还能免去高额的域名价钱.

于是去hexo主题市场看看，感觉 Diaspora主题不错：

upload successful

因为NexT真的过于豪华，所以我就决定开始换主题，

最后发现我究竟是入了一个什么大坑…

因为这是个个人主题，根本没有很多详细的使用文档，整合的东西也不多，网上基本没有资料，所以修改时全靠经验，有一些根本没办法在本地预览…

说个数字就知道这坑有多大了，昨天刨掉上传前天博文一次，push量达到了30次。 我还能说什么。

更换

下载，解压，修改站点配置文件指向Diaspora。

这一步简单极了，那么接下来谈谈这到底有多少问题。

Gitalk问题

首先，之前说过Gitalk一个lable不能超过50字，很多人采用了decode方式规避解码，但对于我这种标题党人来说，50字显然不够。

于是看了一下主题配置文件:

gitalk:
    # 是否启用评论功能
    enable: false
    # 是否自动展开评论框
    autoExpand: false
    # 应用编号
    clientID: ''
    # 应用秘钥
    clientSecret: ''
    # issue仓库名
    repo: ''
    # Github名
    owner: ''
    # Github名
    admin: ['']
    # Ensure uniqueness and length less than 50
    id: location.pathname
    # Facebook-like distraction free mode
    distractionFreeMode: false

那么修改 id 不就行了么.

但是我修改后毫无卵用啊.

…

在 \layout\_partial\post 下,我看到了 gitalk.ejs,本来以为抓到核心了,结果打开来:

<% if (theme.gitalk != undefined){ %>
    <div id='gitalk-container' class="comment link"
		data-enable='<%=theme.gitalk.enable%>'
        data-ae='<%=theme.gitalk.autoExpand%>'
        data-ci='<%=theme.gitalk.clientID%>'
        data-cs='<%=theme.gitalk.clientSecret%>'
        data-r='<%=theme.gitalk.repo%>'
        data-o='<%=theme.gitalk.owner%>'
        data-a='<%=theme.gitalk.admin%>'
        data-d='<%=theme.gitalk.distractionFreeMode%>'
    >查看评论</div>
<%}%>

upload successful

根本没有id好不好!!!!!!!!所以你放在主题配置文件有什么用?????

最终拿出notepad++的文件夹搜索功能

upload successful

在 \source\js\diaspora.js 里有关于gitalk的配置,

// comment
           case - 1 != tag.indexOf("comment"): 
			if($('#gitalk-container').data('enable') == true){
				Diaspora.loading(),
				comment = $('#gitalk-container');
				gitalk = new Gitalk({
				  clientID: comment.data('ci'),
				  clientSecret: comment.data('cs'),
				  repo: comment.data('r'),
				  owner: comment.data('o'),
				  admin: comment.data('a'),
				  id: decodeURI(window.location.pathname),
				  distractionFreeMode: comment.data('d')
				})
				$(".comment").removeClass("link")
				gitalk.render('gitalk-container')
				Diaspora.loaded();
			}else{
				$('#gitalk-container').html("评论已关闭");
			}
               return false;
               break;

把id换成 id: md5(location.pathname), ,回到 \layout\_partial\post\gitalk.ejs 添加一行 <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script> 才行.

更惨的是当我测试的时候,issues却多开了一个

upload successful

upload successful

upload successful

编码之后才发现，NexT主题默认是在打开文章后添加了一个 #more 用于定位加载更多的地方，这个位置被gitalk统计进去了….

还好博客没有人留言，这个坑总算是填上去了。

google-analytics

由于我不用谷歌统计,因为谷歌统计在国内真的支持很差,很容易拖慢速度,所以一直在用百度统计.

但这个主题只整合了谷歌,没有百度.

欸,这就是小主题和大主题的区别.(つ&⊂)

不过这个坑还好填,文件夹搜索google,很快定位到位置 \diaspora\layout\_partial\post\google-analytics.ejs ,直接全部替换,解决.

搜索功能

upload successful

按照官方文档说明,首先

hexo new page search

接着在search添加

title: search
date: 2014-12-22 12:39:04
type: "search"
---

由于之前装过插件,我以为就这样打开直接使用,

结果搜索功能是正常的,链接点开就不正常了.

点开链接,地址栏变成这样:

https://blog.cyfan.top/search/%2F2020%2F03%2F18%2F%E5%85%8D%C2%B7%E7%88%AC%C2%B7%E5%9F%8E%C2%B7%E5%9B%BD%E5%86%85%E7%AE%A1%E7%90%86%E5%88%86%E4%BA%ABGoogleDrive%2F

地址栏不正确.

由于我是直接从NexT迁到Diaspora,没有重新安装插件,以前的NexT是直接在主页就可以搜索了,但Diaspora这个似乎要跳到一个专门的页面,导致链接不正确…

在作者主页和issues找过,发现了只有一个open的issues和我一样…

欸算了,自己动手丰衣足食.

同样是文件夹全局搜索,还是在 \source\js\diaspora.js 找到了目标:

// 返回搜索结果
if (isMatch) {
//结果标签
	str += "<li><a href='"+ data_url +"' class='search-result-title' target='_blank'>"+ data_title +"</a>";
	var content = data.content.trim().replace(/<[^>]+>/g,"");
	if (first_occur >= 0) {
		// 拿出含有搜索字的部分
		var start = first_occur - 6;
		var end = first_occur + 6;
		if(start < 0){
			start = 0;
		}
		if(start == 0){
			end = 10;
		}
		if(end > content.length){
			end = content.length;
		}
		var match_content = content.substr(start, end); 
		// 列出搜索关键字，定义class加高亮

在第四行我发现这个是根据地址跳转的,所以将 str += "<li><a href='"+ data_url +"' class='search-result-title' target='_blank'>"+ data_title +"</a>"; 替换成 str += "<li><a href='https://blog.cyfan.top/"+ data_url +"' class='search-result-title' target='_blank'>"+ data_title +"</a>"; , 其中域名改成你自己的。

友链

这个在浏览页是没有显示友链框的，所以干脆开辟了一个新的，使用的是孟坤的卡片式友链，这里就不多介绍了。

菜单不再使用fontawesome，注意要去掉NexT的图标文字。

Jquery

这个主题jquery库位置不对/(ㄒoㄒ)/，通常来讲jquery库需要放在所有要用到jquery的上方,否则会报错,这就要靠自己了.

Lazyload

这个我硬生生折腾了4小时,原因是这个主题似乎是不兼容懒加载的.

主题主页点击文章后,载入方式是直接平滑载入,这确实有助于提升访问好感,但这样js就不会自动载入了呀.必须手动刷新才行.

…

最后还是手动关闭懒加载,虽然提升了页面载入时间,但平滑加载从某种意义上来说也可以算作懒加载.

后言

总的来说,总算拜托了NexT的豪华和臃肿,以及大众脸.博客载入速度缩短至0.8秒(指打开到显示加载图像),首次载入时间缩短至6秒.

不过这个主题毕竟是小主题,修改还是很麻烦的,新手还是用NexT吧.

 目录