Hexo NexT：插入图片/emoji以及post置顶

Posted on In

后注：该文章写作时刚接触博客搭建，很多方法都是在绕弯路。目前大多主题已实现了自带置顶方案，emoji可以通过unicode直接输入。本文所示图片插入方法为本地存储，服务器流量或带宽受限情况下推荐使用图床。

Salute! 😀 今天尝试搭建了自己的Hexo博客，经历了github部署、coding部署等一系列操作，由于网络限制和域名映射之类的种种问题最后还是选择部署在自己的服务器上。虽然一路坎坷，不过多亏了各路大神提供的各种避坑指南和问题解决方案，最终成果还是很满意的。本想讨论记录下搭建过程中遇到的各类技术问题，但由于涉猎不深，实在整理不出更好更系统的描述和解决方案，一通胡扯倒还不如具体问题具体搜索。🙊

不过在实现图片和emoji功能的过程中出现了几次撤销重来的情况，网上的post置顶教程对于代码的修改也有版本偏差，经过一些并不复杂的搜索、一些不加理解的copy，以及不考虑一些被我强行忽视的漏洞，也算成功实现了，在这里整理一个同环境下完整的可行方案。

环境

  • Hexo：5.4.0
  • NexT：8.2.2

图片插入

图片插入实现后可能会出现安全漏洞，不过不影响使用

  1. 安装插件

    在hexo根目录打开cmd或git bash

    1
    npm install hexo-asset-image --save

    插件安装完成可能会出现安全漏洞警告 🙅‍♀️

    1
    2
    found 4 vulnerabilities (2 low, 2 high)
      run `npm audit fix` to fix them, or `npm audit` for details

    这些漏洞我暂时无法解决但并不影响使用，不在乎的朋友可以跳过看第2步了 👈

    这里输入 npm audit fix 无法修复，npm audit 后发现四个漏洞均是lodash版本过低引起

    1
    2
    3
    4
    5
    6
    Low             Prototype Pollution
      Package         lodash
      Patched in      >=4.17.19
      Dependency of   hexo-asset-image
      Path            hexo-asset-image > cheerio > lodash
      More info       https://npmjs.com/advisories/1523

    手动查看lodash本身版本符合安全要求，推测是image插件不兼容高版本lodash，其内置版本过低导致

    1
    2
    npm lodash -v
    6.14.11

    由于不影响实际使用，在此暂不做深入研究处理

  2. 修改hexo配置文件

    在根目录_config.yml文件中找到post_asset_folder项，修改为true (默认为false)

    1
    post_asset_folder: true

  3. 修改插件代码

    打开/node_modules/hexo-asset-image/index.js，修改原插件代码避免出现Bug

    由于原创作者Ericam_禁止转载，这里贴上原帖地址：hexo引用本地图片无法显示_Ericam_-CSDN博客_hexo 图片

    复制大神代码覆盖即可 👍

  4. 插入图片

    此后使用 hexo n 指令新建文章后会在markdown文件同目录自动生成同名文件夹，文件夹内存放图片可直接使用文件名引用

    1
    ![new_img](test.jpg)

  5. 调整图片大小

    Hexo支持直接使用img标签插入图片，可实现大小调整

    1
    <img src="test.jpg" width="50%" height="50%">

Emoji

由于hexo默认markdown渲染器不支持emoji显示，网上会有更换渲染器实现该功能的教程，但可能由于版本问题，我测试后并不能实现emoji效果，还可能导致一系列问题，这里使用插件方法

  1. 安装插件

    在hexo根目录打开cmd或git bash

    1
    npm install hexo-filter-github-emojis --save

  2. 修改配置文件

    在hexo根目录_config.yml文件中任意位置添加如下内容

    1
    2
    3
    4
    5
    6
    githubEmojis:
      enable: true
      className: github-emoji
      inject: true
      styles:
      customEmojis:

    inject启用后，可以使用style对表情图片显示进行调整，具体配置方式可查看插件文档：文档

  3. 插入emoji

    直接在markdown文件中输入emoji编码即可，注意编码前需留出空格

    1
    :smile:

    :smile:

    更多表情编码可查看 Emoji Cheat Sheet

Post置顶

置顶功能的实现和找到的教程没有区别，但由于next主题版本演变，置顶图标的实现有一些变化

  1. 修改hexo生成器

    hexo根目录下打开cmd或git bash，输入命令

    1
    2
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save

  2. 实现置顶

    需置顶文章的 Front-matter 处添加 top: true 或 top: 任意数字，数字越大排列优先级越高 :point_up:

    1
    2
    3
    4
    5
    title: Welcome
    date: 20xx-xx-xx xx:xx:xx
    top: true
    tags:
    	- share

  3. 置顶标志

    打开 \themes\next\layout\_partials\post\ 目录中的 post-meta.njk 文件，在 <span class="post-meta-item"> 下添加代码

    1
    2
    3
    4
    5
    {% if post.top %}
    	<i class="fa fa-thumbtack"></i>
    	<font color=DC143C>TopSticky</font>
    	<span class="post-meta-divider">|</span>
    {% endif %}

    font color 可修改为自己喜欢颜色的十六进制码

    "TopSticky" 可修改为自己喜欢的文字

    整体代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {%- if theme.post_meta.created_at %}
      <span class="post-meta-item">
    	
    	{% if post.top %}
    		<i class="fa fa-thumbtack"></i>
    		<font color=DC143C>TopSticky</font>
    		<span class="post-meta-divider">|</span>
    	{% endif %}
        
        ...

    效果参考 ✨

    StickyExample

参考文章

HEXO插入图片（详细版） - 简书 (jianshu.com)

hexo引用本地图片无法显示_Ericam_-CSDN博客_hexo 图片

markdown中插入图片怎么定义图片的大小或比例？ - 知乎 (zhihu.com)

让 Hexo NexT 支持 emoji 表情 | novnan's notes

Hexo nexT主题之文章置顶 - 简书 (jianshu.com)