当Hexo自定义主页后出现的导航页码错误的问题...

🏠 自定义主页的问题

今天在捣鼓Hexo时遇到一个比较特殊的情况,就是需要自定义一个与Hexo主页完全不同的页面,并用它作为网站的首页,
而Hexo在使用CloudFlare进行部署时,它会重新构建Hexo的输出目录public,就会导致自定义主页失效,

⚙️ 最终妥协后的处理方办法

...
"scripts": {
  "build": "hexo generate && mv public/index.html public/blog.html && mv public/main.html public/index.html",
  ...
},
...

1. 修改了package.json文件中的build,添加构建后的地址修改命令,
2. 将hexo输出的主页面index.html改名为blog.html,
3. 将自定义主页的main.html改名为index.html,
4. 修改后实际的页面地址:
   主页: localhost:4000/index.html 原main.html页面
   文章: localhost:4000/blog.html 原index.html页面

🐞 导航页码错误问题

完成自定义主页后,发现导航页码的跳转地址有误,导航页码第1页默认使用的是网站的根目录,而增加自定义主页后根目录已经是我们修改后的自定义主页,

• 🔍 链接地址对比
  • 默认(无主页):
    文章地址: localhost:4000
  • 自定义主页:
    主页地址: localhost:4000
    文章地址: localhost:4000/blog.html

进一步折腾后发现Hexo处理页码导航是使用node_modules中的paginator,我们无法修改这个源码,
而这个函数会将第1页的地址强行导航到网站的根目录,即localhost:4000,
当根目录指向的是自定义主页时,就会出现用户点击第1页但却跳到主页的尴尬情况.

🎯 页码处理函数 paginator.ejs

/themes/fluid/layout/_partials/paginator.ejs

<% if (page.total > 1){ %>
  <nav aria-label="navigation">
    <span class="pagination" id="pagination">
      <%- paginator({
            prev_text: '<i class="iconfont icon-arrowleft"></i>',
            next_text: '<i class="iconfont icon-arrowright"></i>',
            mid_size: 2,
            end_size: 1,
            format: `${config.pagination_dir}/%d/${theme.scroll_down_arrow.scroll_after_turning_page ? '#board' : ''}`,
            escape: false
        }) %>
    </span>
  </nav>
<% } %>

代码中可以看到 paginator() 会自动构建整个 pagination 的HTML结构,
而我们能做的就是把构建完成后的数据中第1页的URL地址进行替换修改,

🛠️ 修改后的 paginator.ejs

<% if (page.total > 1){ %>
  <nav aria-label="navigation">
    <span class="pagination" id="pagination">
      <% let tOne = undefined; %>
      <% tOne = paginator({
            prev_text: '<i class="iconfont icon-arrowleft"></i>',
            next_text: '<i class="iconfont icon-arrowright"></i>',
            mid_size: 2,
            end_size: 1,
            format: `${config.pagination_dir}/%d/${theme.scroll_down_arrow.scroll_after_turning_page ? '#board' : ''}`,
            escape: false
        });
      %>
      <% let tTwo = tOne.replace(/href="\/"/g, 'href="/blog.html#board"'); %>
      <%- tTwo %>
    </span>
  </nav>
<% } %>

1. 创建了一个临时变量 tOne, 用来保存 paginator() 函数返回的HTML数据,
2. 然后将 tOne 中的所有 href=”/“ 替换为 href=”/blog.html#board”,
3. 最后将替换后的数据 tTwo 输出到HTML.

🔬 测试结果

可以看到导航页码的跳转地址已经正确指向修改后的页面了.