博客改造计划

2022年11月22日博客改造

博客

现在前面

首先感谢Nexmoe主题的开发大佬们。

本篇blog主要记录了我在构建这个博客时的一些踩坑经历和一些小改造。以供他人借鉴之。

对LaTex的支持

写机器学习比较多，难免要用到LaTex，但是我从CSDN搬运过来后发现LaTex不能渲染。遂上网查询解决方案。发现时hexo预制的渲染器不支持LaTex公式。解决方案很多，但是很多都没有效果，不清楚为什么，这里通过多次尝试，找到了一种适用于本主题的解决方案。

这里应该先卸载原本的渲染器，安装pandoc渲染器。

1 2	`npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save`

在主题的config.yml文件中添加配置。

# MathJax
mathjax:
  enable: true
  per_page: true

在hexo的_config.yml文件中添加配置。

# mathjax:
#   tags: none # or 'ams' or 'all'
#   single_dollars: true # enable single dollar signs as in-line math delimiters
#   cjk_width: 0.9 # relative CJK char width
#   normal_width: 0.6 # relative normal (monospace) width
#   append_css: true # add CSS to pages rendered by MathJax
#   every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter
markdown:
  plugins:
    - markdown-it-footnote
    - markdown-it-sup
    - markdown-it-sub
    - markdown-it-abbr
    - markdown-it-emoji
    - hexo-math

在每篇博客的头部添加mathjax标签。

---
title: 示例
mathjax: true
---

随后博客可以正常渲染LaTex公式。

代码高亮问题

发现代码的显示出现了问题，代码块的样式很正常，但是代码无法根据不同语言高亮。这个问题折腾了我很长时间，上网几经周折也没找出问题。网上给出的方案挨个尝试也没什么效果。最后通过以下手段解决了一半，代码可以高亮了，但是风格有些奇怪。

变更_config.yml文件配置。

highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: true
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

在网站头进入highlist.js脚本，一种具体做法是在主题的config.yml文件中更改配置, 在网页head标签中嵌入js。

1	`slotHead: '<script src="//cdn.bootcss.com/highlight.js/9.2.0/highlight.min.js"></script>'`

博客置顶

我想把一篇blog进行置顶操作，百度后，发现有个方法，就是在文章头部中添加top参数，top值越高，越靠前。但是尝试后发现没有效果。这里发现_config.yml文件中有下面属性：

遂尝试改成：

但是发现没有任何效果，在hexo文档中也没有找到有关这个参数的说明。这里在百度的指导下，找到hexo有关主页博客排序的源码位置node_mudules/hexo-generator-index/lib/generator.js，~~观察源码，但是忽然意识到自己不怎么会js~~。总之，既然无法理解，就改一下源码，手动进行排序吧。

其实，通过分析源码可以发现，hexo的order_by属性不能是一个数组，而只能是一个-开头的属性，以供sort进行排序，所以hexo仅支持对单一属性进行排序。这不符合我的需求（先按top排序，然后再按日期排序）。

// posts.data.sort((a, b) => (b.sticky || 0) - (a.sticky || 0)); // 将源代码中的该语句注释，改成下面这样。
console.warn("Kalzn:: Hexo 源码已经被修改！ hexo-generator-index/lib/generator.js 首页排序被自定义！");
posts.data = posts.data.sort(function(a, b) {
  if(a.top && b.top) { /
      if(a.top == b.top) return b.date - a.date; 
      else return b.top - a.top; 
  }
  else if(a.top && !b.top) {
      return -1;
  }
  else if(!a.top && b.top) {
      return 1;
  }
  else return b.date - a.date;
});

此时我们在将文章头部引入top属性，文章将以top排序，之后按照date排序。

---
title: 示例
top: 10
date: 2022-11:14: 11:45:14
---

此时发现，想要置顶的blog已经出现在文章首页啦！但是有个问题，我得让别人直到这是个置顶blog呀。此时我想到了标签系统，如果这是我给文章打个置顶标签，就能看到了。但是，Nexmoe主题默认是无法在主页显示标签的（只会显示分类），所以这里对源码进行一些改写。

在主题的layout/_partial/_post/meta.ejs中添加tags的显示。

<div class="nexmoe-rainbow">
    <a class="nexmoefont icon-calendar-fill"><%- date(page.date, "YYYY年MM月DD日") %></a>
    <% if (page.categories && page.categories.length){ %>
        <%- list_categories(page.categories, {
            show_count: false,
            class: 'nexmoefont icon-appstore-fill ',
            style: 'none',
            separator: ''
        }) %>
    <% } %>
    <%- partial('_partial/_post/word-count', {post: page}) %>

    <!-- 添加label列举 -->
    <%- partial('_partial/_post/tag', {post: page}) %>

</div>

此时，在引入置顶标签后，就可以看到了。

但是，此时我发现，在进入blog后，会在文章的上下显示两边标签（文章末的标签是原本自带的）。这里索性将文章末的标签注释，改在文章头显示标签。

在主题的layout/post.ejs中注释代码。

<% if (!page.reprint){ %>
    <%- partial('_partial/copyright') %>
<% } %>

<!-- <%- partial('_partial/_post/tag') %> -->

<% if (page.comments){ %>
    <div class="nexmoe-post-footer">
        <%- theme.slotComment %>
    </div>
<% } %>

大功告成。

文章图片随机显示

网上有随机显示的教程，但好像是指定一个随机显示图片的连接。我们需求是想从我自己选取的一组图片中随机选取一个。应该有解决方案，但是我懒得找了，自己动手吧！

在主题的config.yml中添加自定的参数。

background: # 既是博客的背景，又是文章默认头图
    randomImage: true #开启随机图片
    randomFolder: /static/pic/random_background/ #随机图片存放的文件夹
    randomNumber: 9 # 随机图片的数量
    path: /static/pic/back.jpg
    width: 1280
    height: 726

在主题的layout/index.ejs中添加对改参数的支持，这里在目录下随机选取一个图片，随机的数值与位置题目对应，以保证每次生成时，同一篇文章始终对应一张图片（也可以完全随机，但是不想每次生成都把整个网站的样子完全改变一下。笑）

<a href="<%- url_for(page.path) %>">
            <% if (page.cover){ %>
                <div class="nexmoe-post-cover mdui-ripple absolute" style="padding-top: <%- page.coverHeight/page.coverWidth*100 %>%;"> 
                    <img src="<%- page.cover %>" alt="<%= page.title %>" loading="lazy">
                    <h1><%= page.title %></h1>
                </div>
            <% } else if(theme.background.randomImage) { 
                randomNo = 0;
                for (var i =0; i <page.title.length; i++) {
                    randomNo = (randomNo * 2053  % 1000000007 + page.title.charCodeAt(i)) % 1000000007;
                }
                randomNo %= theme.background.randomNumber;
                randomPath = theme.background.randomFolder + randomNo + ".jpg";
            %>
                <div class="nexmoe-post-cover absolute" style="padding-top: <%- page.coverHeight/page.coverWidth*100 %>%;"> 
                    <img src="<%- randomPath %>" alt="<%= page.title %>" loading="lazy">
                    <h1><%= page.title %></h1>
                </div>
            <%}  else{ %>
                <div class="nexmoe-post-cover mdui-ripple"> 
                    <img src="<%- theme.background.path %>" alt="<%= page.title %>" loading="lazy">
                    <h1><%= page.title %></h1>
                </div>
            <% } %>

同样在layout/post.ejs进行改变。

<% if (page.cover){ %>
        <div class="nexmoe-post-cover absolute" style="padding-top: <%- page.coverHeight/page.coverWidth*100 %>%;"> 
            <img src="<%- page.cover %>" alt="<%= page.title %>" loading="lazy">
            <h1><%= page.title %></h1>
        </div>
    <% } else if(theme.background.randomImage) { 
        randomNo = 0;
        for (var i =0; i <page.title.length; i++) {
            randomNo = (randomNo * 2053  % 1000000007 + page.title.charCodeAt(i)) % 1000000007;
        }
        randomNo %= theme.background.randomNumber;
        randomPath = theme.background.randomFolder + randomNo + ".jpg";
    %>
        <div class="nexmoe-post-cover absolute" style="padding-top: <%- page.coverHeight/page.coverWidth*100 %>%;"> 
            <img src="<%- randomPath %>" alt="<%= page.title %>" loading="lazy">
            <h1><%= page.title %></h1>
        </div>
    <%}  else{ %>
        <div class="nexmoe-post-cover"> 
            <img src="<%- theme.background.path %>" alt="<%= page.title %>" loading="lazy">
            <h1><%= page.title %></h1>
        </div>
    <% } %>

然后创建存储随机文件的文件夹，放入对应数量的图片。图片命名从0开始，后缀是jpg。

然后开始欣赏美如画的荧妹妹吧！

哦，看了官方的归档页面指导，也顺带把归档页面的标签也设置为随机把！在layout/archives.ejs中进行更改。

<div class="categories nexmoe-rainbow-fill">
    <% site.categories.sort('name').map(function(category){  %>
        <% 
            let randomNo = 0;
            for (var i = 0; i < category.name.length; i++) {
                randomNo = (randomNo * 2053 % 1000000007 + category.name.charCodeAt(i)) % 1000000007;
            }
            randomNo %= theme.background.randomNumber;
            randomPath = theme.background.randomFolder + randomNo + ".jpg";
            let coverx = randomPath 
            
        %>
        <% category.posts.sort('-date').map(function(post){  %>
            
            <% if(post.cover!==undefined){ %> 
                <% coverx = post.cover %> 
            <% } %>
        <% }) %>

        <a class="mdui-ripple" href="<%- url_for(category.path) %>">
            <div class="bg" style="background-image:url(<%= coverx %>)"></div>
            <h1><%= category.name %></h1>
        </a>
    <% }) %>
</div>

归档页统计图

在归档页做两个统计图，这里使用了echarts.js绘制，具体教程官网非常详细。将代码插入到arhive页面中即可。

荧妹页

此页专门用来欣赏荧妹！