Hexo博客搭建与优化过程中常见问题及解方案

来源：互联网发布：php开源做账系统编辑：程序博客网时间：2024/05/21 10:50

最近刚刚完成了个人博客的搭建，也成功发布了个人的第一篇文章。在搭建过程中也遇到了各种问题，结合个人经验现在整理如下，由于也是初次接触，若有问题欢迎交流！

生成SSH keys

首先需在Git Bash输入以下指令，检查是否已经存在了SSH keys。

ls -al ~/.ssh

如果存在就去以下路径C:\Users\xx\ssh进行手动删除，记住是全部删除；
接下来生成相应SSH keys（切记邮箱地址填写github注册时所用邮箱）

ssh-keygen -t rsa -C "xxx@xxx.com"

之后可在上述提到的路径中生成名为id_rsa.pub的文件，相应的SSH keys就在里面，之后就可以添加了。

代码编辑器的选择

在搭建过程中，对于代码编辑器的选择，一般来说有两种，最专业的当然是MarkdownPad，不过我用的是Sublimetext。两者都可以，SublimeText还是比较强大的，支持平台多，也支持Markdown语法。具体选择看个人。另附一份福利，关于markdown的入门资料,点击markdown即可访问。

Hexo无法部署到github上

这是我在搭建博客时遇到的第一个问题，也是目前为止所发先的唯一一个无法部署到github上的问题。其实，无论在修改站点配置文件还是修改主题配置文件的时候，作为一名刚刚接触搭建博客的小白，一定要切记，就是在每个冒号后面都必须留有空格，如果不留，那么肯定是无法部署成功的，就连本地测试都通不过，因此在修改文件的时候需要高度注意了。博主当时就是因为不知道，花了很长时间才发现这个蛋疼的问题。

next主题中标签个数出错

关于具体如何去创建标签，可以参考Next主题的中文使用文档。在这里提到的这个问题是关于标签个数的问题。有时候发现所设立标签的总数与站点概览所显示的标签数目不一样，而这个问题当时是在我删除两篇文章时所发现的。后查阅资料，发现两行代码即可解决：

hexo cleanhexo g

先删除后重新生成，完美解决问题。

在博客中添加背景音乐

关于如何在博客中添加背景音乐，应该是花了我最长时间的一部分吧。不知道什么原因，按照网上所说的方法，利用网易云音乐的外链链接的生成器，“成功”添加背景音乐，而奇怪的是该背景音乐只能在本地测试时播放，而一旦部署到github上时却无法播放。究其原因，应该是网易云音乐不支持https吧。具体如何解决，首先还是感谢开源吧，虽然只是初次接触，但是确实有比较有趣好玩的东西在里面，其次分享一为名为禹克斯技术达人的博客，这位博主是真大神，自己写了个163音乐的播放器，该项目的内容在其github上有兴趣的可以去看一下。当然在解决了https之后即可对相关博文进行背景音乐的添加。

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=0 height=0 src="https://music.daoapp.io/player?song=29588243&auto=1&height=66"></iframe>

上面已经贴出示例代码，若想显示播放器可以在marginwidth与marginheight上做相关修改，具体只需要在src之后修改链接即可，获取链接方式很简单，打开技术大牛所写的demo，输入你要听的歌，然后再网址栏复制地址下来即可，完美解决问题。

让你的博客摇起来

如何给博客添加哈林摇特效，具体参考了刘靖博主的博文。
首先，在所使用的Next主题目录中，在这路径下layout_macro\，创建high.swig文件，然后添加以下代码：

<a title="收藏到书签，偶尔High一下^_^" rel="alternate" class="mw-harlem_shake_slow wobble shake" href='javascript:(function() {    function c() {        var e = document.createElement("link");        e.setAttribute("type", "text/css");        e.setAttribute("rel", "stylesheet");        e.setAttribute("href", f);        e.setAttribute("class", l);        document.body.appendChild(e)    }    function h() {        var e = document.getElementsByClassName(l);        for (var t = 0; t < e.length; t++) {            document.body.removeChild(e[t])        }    }    function p() {        var e = document.createElement("div");        e.setAttribute("class", a);        document.body.appendChild(e);        setTimeout(function() {            document.body.removeChild(e)        }, 100)    }    function d(e) {        return {            height : e.offsetHeight,            width : e.offsetWidth        }    }    function v(i) {        var s = d(i);        return s.height > e && s.height < n && s.width > t && s.width < r    }    function m(e) {        var t = e;        var n = 0;        while (!!t) {            n += t.offsetTop;            t = t.offsetParent        }        return n    }    function g() {        var e = document.documentElement;        if (!!window.innerWidth) {            return window.innerHeight        } else if (e && !isNaN(e.clientHeight)) {            return e.clientHeight        }        return 0    }    function y() {        if (window.pageYOffset) {            return window.pageYOffset        }        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)    }    function E(e) {        var t = m(e);        return t >= w && t <= b + w    }    function S() {        var e = document.createElement("audio");        e.setAttribute("class", l);        e.src = i;        e.loop = false;        e.addEventListener("canplay", function() {            setTimeout(function() {                x(k)            }, 500);            setTimeout(function() {                N();                p();                for (var e = 0; e < O.length; e++) {                    T(O[e])                }            }, 15500)        }, true);        e.addEventListener("ended", function() {            N();            h()        }, true);        e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";        document.body.appendChild(e);        e.play()    }    function x(e) {        e.className += " " + s + " " + o    }    function T(e) {        e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]    }    function N() {        var e = document.getElementsByClassName(s);        var t = new RegExp("\\b" + s + "\\b");        for (var n = 0; n < e.length; ) {            e[n].className = e[n].className.replace(t, "")        }    }    var e = 30;    var t = 30;    var n = 350;    var r = 350;    var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";    var s = "mw-harlem_shake_me";    var o = "im_first";    var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];    var a = "mw-strobe_light";    var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";    var l = "mw_added_css";    var b = g();    var w = y();    var C = document.getElementsByTagName("*");    var k = null;    for (var L = 0; L < C.length; L++) {        var A = C[L];        if (v(A)) {            if (E(A)) {                k = A;                break            }        }    }    if (A === null) {        console.warn("Could not find a node of the right size. Please try a different page.");        return    }    c();    S();    var O = [];    for (var L = 0; L < C.length; L++) {        var A = C[L];        if (v(A)) {            O.push(A)        }    }})()'><i class="fa fa-music"></i> High</a>

添加成功后，保存，之后修改侧边栏的代码，在layout_macro\sidebar.swig路径下，添加以下代码：

{% include 'high.swig' %}

具体添加位置视个人喜好所定，本人将其添加在了最后：

最终效果如下图所示：

哈林摇的时候可能会出现加载的问题，有时候会没有声音而旁边的东西拼命地摇啊摇，这个问题目前我也未找到良好的解决方案。。。反正目前采取的方法就是多点几回，果断时间就会好了。若有良好解决方案欢迎交流。

1 0