本文最后更新于:星期五, 三月 20日 2020, 4:15 下午

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

回头看看自己的,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吧.


爱折腾      Hexo 主题 NexT Diaspora

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!

Heroku~Websocket~Workers浅谈
如何++CloudFlare Warp+

 目录