首页文章封面随机图片

这里是通过调用随机图片API实现，如果文章没有指定封面图，将通过API随机返回一张图片作为封面图。下面API调用返回的图片都是与MC酱相关的，如果需要其他类型的图片，可以自己搜索随机图片API，网上有很多。

https://api.ixiaowai.cn/mcapi/mcapi.php

使用Hexo Fluid主题的小伙伴可直接参考下方修改_config.fluid.yml主题配置文件 

default_index_img: https://api.ixiaowai.cn/mcapi/mcapi.php

实现Mac风格代码块

Github Issue#538配置方案

Fluid主题作者没有对代码块有样式设计，原生样式看着比较难受，于是我就去Github Issue中翻阅看看有没有代码块美化的内容，不出所料，果然有人提出类似的问题，回答中有段简陋版的CSS代码，可以实现代码块Mac风格化。

适用配置：使用主题配置hightlightjs高亮，Style建议设置为Tomorrow Night
如何引用外部CSS/JS详见主题:point_right:配置文档 

.highlight
    background: #21252b
    border-radius: 5px
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
    padding-top: 30px

    &::before
      background: #fc625d
      border-radius: 50%
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
      content: ' '
      height: 12px
      left: 12px
      margin-top: -20px
      position: absolute
      width: 12px

不过通过该CSS代码修改的样式在我看来会有点别扭，而且代码区域和代码框的背景颜色会不统一以及其他一些样式问题，让我一度放弃修改，使用原生代码块。

本站配置方案

1我几乎点紫了所有的相关代码块美化方案文章后，看到Tyzhao大佬写的对Matery主题的代码块样式美化方案，并进行移植尝试（不具备前端知识的我只能实现部分样式，如果小伙伴能给出更好的移植方案，欢迎在下方留言分享~）

1、Mac风格代码块样式

首先在node_modules\hexo-theme-fluid\source\css目录下创建自定义CSS文件，这里命名为custom.styl，复制下方代码进去

code {
    padding: 1px 5px;
    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
    /* font-size: 0.91rem; */
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}

pre code {
    padding: 0;
    color: #e8eaf6;
    background-color: #272822;
}

pre[class*="language-"] {
    padding: 1.2em;
    margin: .5em 0;
}

code[class*="language-"],
pre[class*="language-"] {
    color: #e8eaf6;
    white-space: pre-wrap !important;
} */

.line-numbers-rows {
    border-right-width: 0px !important;
}

.line-numbers {
    padding: 1.5rem 1.5rem 1.5rem 3.2rem !important;
    margin: 1rem 0 !important;
    background: #272822;
    overflow: auto;
    border-radius: 0.35rem;
    tab-size: 4;
}


pre {
    padding: 1.5rem !important;
    margin: 1rem 0 !important;
    background: #272822;
    overflow: auto;
    border-radius: 0.35rem;
    tab-size: 4;
}

pre::before {
    content: "";
    height: 16px;
    margin-bottom: 0;
    display: block;
}

pre::after {
    content: " ";
    position: absolute;
    border-radius: 50%;
    background: #ff5f56;
    width: 12px;
    height: 12px;
    top: 0;
    left: 12px;
    margin-top: 12px;
    -webkit-box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
    box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
}

code {
    padding: 1px 5px;
    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
    font-size: 0.91rem;
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}

.code_lang {
    position: absolute;
    top: 1.2rem;
    left: 80px;
    line-height: 0;
    font-weight: bold;
    font-family: normal;
    z-index: 1;
    filter: invert(50%);
    cursor: pointer;
}


pre code {
    padding: 0;
    color: #e8eaf6;
    background-color: #272822;
}

pre[class*="language-"] {
    padding: 1.2em;
    margin: .5em 0;
}

code[class*="language-"],
pre[class*="language-"] {
    color: #e8eaf6;
    white-space: pre-wrap !important;
}

2、实现代码语言显示

接下来的代码实现不要问我为什么，因为我也不懂，只是通过尝试出来的可行方案

在node_modules\hexo-theme-fluid\source\js下创建codeBlockFunction.js，复制下方代码（如果没有codeBlockFunction.js中的代码，会导致行号无法正常显示，别问我怎么知道，我试出来的）

// 代码块功能依赖
$(function () {
    $('pre').wrap('<div class="code-area" style="position: relative"></div>');
});

再创建codeBLang.js文件，复制下方代码

// 代码块语言识别

$(function () {
  var $highlight_lang = $('<div class="code_lang" title="代码语言"></div>');

  $('pre').after($highlight_lang);
  $('pre').each(function () {
    var code_language = $(this).attr('class');

if (!code_language) {
  return true;
};
var lang_name = code_language.replace("line-numbers", "").trim().replace("language-", "").trim();

// 首字母大写
lang_name = lang_name.slice(0, 1).toUpperCase() + lang_name.slice(1);
$(this).siblings(".code_lang").text(lang_name);

  });
});

上方步骤完成后，请参照主题:point_right:配置文档进行自定义CSS/JS引入，这里就不进行赘述了

自定义全局字体

2首先在node_modules\hexo-theme-fluid\source\css目录下创建自定义CSS文件（如果有了就可以跳过本步骤），这里命名为custom.styl，复制下方代码进去

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&display=swap');

然后，在主题_config.fluid.yml文件中，修改全局字体配置，参考如下

# 主题字体配置
# Font
font:
  font_size: 16px
  font_family: 'Noto Serif SC'
  letter_spacing: 0.02em
  code_font_size: 85%

更换Markdown渲染引擎

由于 Hexo 默认的 Markdown 渲染器不支持渲染Katex复杂数学公式以及emoji表情负号，所以需要更换渲染器3

先卸载原有渲染器：

npm uninstall hexo-renderer-marked --save

再安装hexo-renderer-markdown-it-olus

npm install @upupming/hexo-renderer-markdown-it-plus --save

然后配置渲染插件，该渲染引擎默认支持部分插件，这里我启用emoji渲染插件

markdown_it_plus:
    highlight: true
    html: true
    xhtmlOut: true
    breaks: true
    langPrefix:
    linkify: true
    typographer:
    quotes: “”‘’
    plugins:
        - plugin:
            name: markdown-it-emoji
            enable: true

需要查看详细支持信息可以点击参考文章

参考文章

  1. Hexo 博客代码块样式美化 ↩
  2. 博客网站字体设置：思源宋体 ↩
  3. hexo markdown渲染器 @upupming/hexo-renderer-markdown-it-plus ↩
最后修改：2023 年 07 月 12 日
© 允许规范转载