Hexo NexT主题 | 自定义友链页面

主题自带的友链设置不够骚

而且,友链可不会只有那么几条,以后会越来越多,侧栏是放不下的,所以要放在页面上

那么问题来了,有什么方法可以让我每次方便快捷地添加新的友链呢?不知道,但办法是想出来的

挑选方案

数据文件夹

看到NexT主题6.x的版本允许使用数据文件夹,这样可以让NexT主题的升级体验更加平滑。把自定义的主题配置放在数据文件夹里,下次升级主题版本的时候,不需要对主题文件夹进行任何修改,只要添加所需的新特性配置到数据文件夹即可;自定义的样式,变量等也可达到同样效果。这个想法很好,但我不会swig模板引擎,只能就此作罢

资源文件夹

启用资源文件夹后,没新建一篇文章或者页面,都会自动生成和文章md文件同名的资源文件夹,这样可以便于管理文章的图片等资源。我首先想到的是,在友链页面的资源文件夹里放以JSON或YAML格式保存的友链数据,然后读取该文件进行展示到页面。然后,YAML文件浏览器无法GET到,即404了;而JSON呢,能GET到,但返回的数据在JSON数据面前加了一长串的字符,不知哪来的。这两个格式也只能放弃了。保存数据的话,我还想到了这学期学的XML,还行

获取友链数据文件

由于浏览器端的JavaScript不能直接读取文件,得像个办法获取文件数据。Google了一下,发现可以通过HTTP请求来获取文件,所以就用到了XMLHttpRequest对象,还是异步的(Ajax…),因为使用同步方式时Chrome浏览器提醒说说同步方式弃用,行吧,那就用异步咯。获取了友链数据,接下来就是使用好好用的for循环了

以后要添加新的链接,往数据文件里一丢,啥都不用管~

搞定了

效果

源码

参见

  1. hexo-theme-next/DATA-FILES.md at master · theme-next/hexo-theme-next
  2. links | AsucreYau’s Blog
  3. AsucreYau/my-hexo-config