搭建博客过程中遇到的一些问题

发表于 更新于 分类于
本文字数: 5.3k 阅读时长 ≈ 33 分钟

在我搭建博客的过程中遇到过一些比较棘手的问题，这些内容以10%的内容占有率耗费了我80%的时间；由于个人能力的缘故，解决这些问题的方法就是上google、简书和csdn找。

现在我将我遇到的一些问题和解决方案抄写在这里，作为一个经验总结。

TIPS: 带有下划线的是超链接，可打开；最底端有脚注汇总，里面也有可打开的超链接。

内置播放器

网易云外链播放器

想要挂载这个播放器非常的简单，在网络上教程随处可见，因此我只在此提供细节上一些的tips。

  • 网易云的外链播放器选项中有自动播放的功能，但是这个功能很容易被现在的浏览器拦截[1]，所以自动播放失效不用担心，这是正常的。

  • 网易云中需要VIP的音乐只能播放30s。

APLAYER播放器

这个其实相比网易云播放器会更好些，一方面它支持使用metingjs;[2]另一方面播放器的样式会好看一些 （个人观点：网易云的播放器看着有些简陋）。

但是，在我配置的过程中，发现APLAYER官网的方法对我的博客网站毫无作用。。。。。。[3]

不过最后还是成功找到了方法——直接在源码里面对cdn服务器require插件。

具体做法如下：

  1. 在 themes/next/layout/-macro 目录下的 sidebar.swig 文件或 themes/next/layout 目录下的 layout.swig 文件[4]加入以下代码。
1
2
3
4
5
<!-- require APlayer --> #分别在线请求aplayer和metingjs
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
  1. 在请求插件后，便开始配置播放器。将如下代码放入 themes/next/layout/-macro 目录下的 sidebar.swig 文件或 themes/next/layout 目录下的 layout.swig 文件。请自行阅读源码来确定你要插入的位置[5]，代码中的参数都是我自己设好的，你可以参考官方DOCS来自行设置，markdown的表格输入起来还比较麻烦，我也导不出别人表格的markdown源码（别问，问就是菜）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <!--这里是注释，用来标记你的播放器类型（爱写不写XD）-->   
<meting-js
     server = "netease"
     id = "7585293889"
     type = "playlist" 
     mini = "true"
     fixed = "true"
     list-folded = "true"
     autoplay = "true"
     volume = "0.4"
     theme = "#FADFA3"
     order = "random"
     loop = "all"
     lrc_type = 0
     preload = "auto"
     mutex = "true">
</meting-js>

全局播放

当设置好播放器后，很快便能发现无法全局播放，每切换一个网页就会自动中断播放，需要手动重播，所以我们想要真正让音乐播放器达到应有的效果，就要去配置好全局播放功能。话不多说。

  1. 首先直接在git bash中转到hexo根目录下的next主题目录下
1
2
3
$ cd themes/next   

# 在git bash中执行该命令。
  1. 安装pjax模块
1
2
3
$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

# 获取pjax模块，将模块安装到source/lib目录
  1. 在Next主题的_config.yml文件中，启用pjax模块
1
2
3
# Easily enable fast Ajax navigation on your website.
   # Dependencies: https://github.com/theme-next/theme-next-pjax
   pjax: false ==> true

在一篇blog中单独插入音乐

有时只是想分享一首音乐，如果把它放入左下角的背景音乐播放器很难起到良好的安利效果，这时我们就可以单独水发一篇blog来专门安利。

方法一 (此方法恰好在检查这篇blog时发现有致命bug，暂无解决方案，慎用)

  1. 首先我们需要安装插件 hexo-tag-aplayer
1
$ npm install --save hexo-tag-aplayer
  1. 然后在blog的markdown文件中插入如下代码在希望出现音乐播放器的地方。
1
{% meting "1959535653" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:metadata" "autoplay:false" %}

具体的参数调整可以移步参考内容中的Hexo主题插入音乐之aplayer音乐播放器

方法二 (利用我们已经在线加载的aplayer插件和metingjs插入播放器)

  • 将下列代码插入markdown文件中你想要的位置就可以了，具体参数配置和之前的是一样的，这里有一个官方DOCS的传送门(〃'▽'〃)。
1
2
3
4
5
6
<meting-js
      server = "netease"
      id = "1959535653"
      type = "song" 
      mini = "false">
</meting-js>

HEXO脚注

正是在写这篇博客的过程中，我发现markdown中的脚注语法无效;起初还怀疑是我阅读的markdown语法教程过时，事实似乎是因为hexo并不原生支持渲染markdown的脚注，所以需要我们安装一个简单的 Reference 插件完成脚注功能。

1
npm install hexo-reference --save

markdown的脚注语法[6]在这里就不赘述了。

设置背景图片

没想到吧，╮(─▽─)╭ ，设置背景图片居然无法在next的配置文件里完成，而且网上盛传的新建stlyes文件夹的方法根本用不了，只会导致页面排版错乱。所以实际上想要给next主题设置背景图片需要我们去修改目录 \themes\next\source\css\_schemes 下的scheme文件夹中的 index.html 文件（这取决于你选择的scheme，比如我选择了Gemini）。

  1. 准备好你的背景图片[7]，放在目录 \themes\next\source下的任意文件夹中（实际上我建议放在目录 \themes\next\source\images 下）。
  2. 打开目录 \themes\next\source\css\_schemes 下的scheme文件夹中的 index.styl 文件，并作出如下修改
1
2
3
4
5
6
7
body { 
background: url(/images/background6.jpg); // background6.jpg是我的背景图片的全称（注意带上文件类型后缀）
background-repeat: no-repeat; // 设定背景图片非重复填充
background-attachment: fixed; // 设置背景图片不随页面滚动
background-position: 50% 50%; // 设置背景图片位置
background-size: cover // 设置背景图片大小
}

POSTpage中的按钮只能指向第一个blog

我不知道这是不是一个个例问题，但是我觉得任何碰上的人都绝对很绝望（比如我(T＿T)。。。），所以还是在这里写一下解决办法。先说好，我并不知道其中原理（菜☹），我只是通过观察别人的配置试错得出的解决办法，如果有人明白其中原理，还请加我的QQ或WeChat赐教（在sidebar底端）。

  1. 问题似乎出在hexo的配置文件中的配置选项 permalink ，如下。
1
2
3
4
5
6
7
8
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://zivmax.top
permalink: title/    <== 问题在这儿！！！
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
  1. 当我将其改为如下时，问题得到解决。
1
permalink: :year/:month/:day/:title/

小记

这是我的第一篇技术博客，虽然我其实没有任何技术，实际上呢光是在写这篇博客的过程中就发现很多问题（如第二个和第四个问题），甚至是发布前都能发现bug。。。然后在总结内置aplayer播放器的过程中，我又成功发现插件插入位置的奥秘，优化了我的内置播放器，当然这些也让写这篇博客的70%时间流走 ╮(─▽─)╭ 。

实际上我已经到达了SHTU小四天，不会忘记建立博客的目的之一就是完整展示SHTU的本科生活，为自己留下一些纪念，也让之后的高考生在报考时有一个完整的参考（虽然可能主观且有限，但贵在完整）。

大概每周会对SHTU的生活进行一次总结并更新博客，希望自己能坚持下去吧

对于博客网站建设本身的规划如下

  • 图床搭建（90%）
  • 歌单页面搭建（30%）
  • 使网站能被google和百度（1%）

大概下一次有关搭建博客网站的内容会是CDN加速？说实话我现在ssl证书的问题都还没有解决(T＿T)，下次更新前我至少先解决这个问题吧。

最后推荐首歌（以后每个blog大概都会有推荐）


参考内容

  1. 1.尤其在移动端，几乎是必拦截自动的音视频播放。 ↩
  2. 2.意味着可以使用网易云以外的平台（然而我还没能用别的平台成功过(╬￣皿￣)），但是对于VIP歌曲只能播放30s。 ↩
  3. 3.当然，我觉得是我的问题，也许我的hexo配置出错或者DOCS没理解。 ↩
  4. 4.个人只测试过这两个文件，理论上，只要是点开网站就会执行的文件，就可以把请求代码放在里面。 ↩
  5. 5.关注源码中关键词如 endif body head 等。 ↩
  6. 6.我是在菜鸟教程上面学的markdown语法。 ↩
  7. 7.我的背景图片来自NASA-哈勃望远镜(ﾟ▽ﾟ*)♪。 ↩