hexo-theme-icarus配置指南

记录本站使用icarus主题的配置，以及自定义实现功能的实现方式，目前在原有主题基础上做了下属功能：

• 代码高亮增加语言展示功能
• 修正typora编辑文章图片展示异常问题

引入主题icarus

引入hexo-theme-icarus到theme/icarus目录

git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b master --depth 1

参考：Icarus快速上手

安装依赖

将theme/icarus/packages.json的devDependencies和dependencies依赖，复制到项目根目录下的packages.json中，重新触发依赖安装

请勿删除theme/icarus/packages.json文件，源代码中有使用该文件

代码高亮增加语言展示功能

增加配置项

_config.icarus.yml文件增加自定义配置article.highlight.lang，支持配置true/false

# 文章配置
article:
    highlight:
        # 自定义配置：是否展示代码块语言信息 true/false
        lang: true

具体实现代码参见

扩充全局变量定义

在icarus中，通过定义IcarusThemeSettingsJS代码实现，通过变量embeddedConfig注入到全局<script>标签中，来实现全局变量IcarusThemeSettings的定义。你可以在控制台输入IcarusThemeSettings来查看变量具体的值。
修改后的代码如下，具体参见

// 代码块语言信息
let lang = true;
if (article && article.highlight) {
    if (typeof article.highlight.clipboard !== 'undefined') {
        clipboard = !!article.highlight.clipboard;
    }
    if (typeof article.highlight.lang !== 'undefined') {
        lang = !!article.highlight.lang;
    }
    if (typeof article.highlight.fold === 'string') {
        fold = article.highlight.fold;
    }
}
const embeddedConfig = `var IcarusThemeSettings = {
    article: {
        highlight: {
            clipboard: ${clipboard},
            fold: '${fold}',
            lang: ${lang}
        }
    }
};`;

在themes\icarus\source\js\main.js中通过注入全局的变量的方式，将IcarusThemeSettings注入到该文件内。具体实现参见

实现逻辑功能

在themes\icarus\source\js\main.js文件中，增加下面的代码，识别语言信息并添加展示按钮。具体实现代码参见

// 读取配置信息
const lang = config.article.highlight.lang;

// 展示语言信息
if (lang) {
    $('figure.highlight').each(function () {
        // 获取代码块语言信息
        const classList = $(this).attr('class').split(/\s+/);
        // class名称列表格式： highlight <语言> <其他添加的class>
        const langName = classList && classList[1] || ""
        if (langName) {
            const id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
            const lang = '<a href="javascript:;" class="copy" title="语言" data-clipboard-target="#' + id + ' .code">' + langName + '</i></a>';
            $(this).attr('id', id);
            $(this).find('figcaption div.level-right').append(lang);
        }
    });
}

修改CSS样式

修改themes\icarus\include\style\codeblock.styl，修改鼠标指示器为默认样式，具有代码参见

.lang
    cursor: default

修正typora编辑文章图片展示异常问题

hexo默认使用hexo-renderer-marked处理md中的图片，按照官方文档说明，图片需要[图片名称](filename.png)的格式，不能包含路径。

资源文件夹 | Hexo

原文：

启用post_asset_folder: true，资源图片将会被自动解析为其对应文章的路径。 例如： image.jpg 位置为 /2020/01/02/foo/image.jpg ，这表示它是 /2020/01/02/foo/ 文章的一张资源图片， ![](image.jpg) 将会被解析为 <img src="/2020/01/02/foo/image.jpg"> 。

在使用typora编写博客时，设置将图片复制到同名资源目录。

这样，typora在你粘贴图片时，生成的图片路径时一个包含资源目录的相对路径。

例如：![1759823861216](icarus-init-and-config-page/1759823861216.png)

为了保证hexo可以正常渲染，需要将路径修改成![1759823861216](1759823861216.png)，这样会导致在typora中展示异常。

有没有可以兼顾的方法？

自定义图片处理过滤器

1. 在项目更目录，新增scripts目录

2. 添加自定义处理过滤器fix-image-path.js

   该脚本的作用就是把应用的图片的md格式，匹配出包含引用资源的路径，人为去掉相关路径。

   const log = require('hexo-log').default();
   hexo.extend.filter.register('before_post_render', function(data) {
       
       const { config } = this;
       if(!config.post_asset_folder){
           log.debug("[fix-image-path] 未启用post_asset_folder, markdown 图片目录处理程序暂不执行")
           return data
       }
       // 匹配图片语法 ![alt](文件夹名/文件名)
       const regex = /!\[(.*?)\]\(([^)]+)\/([^)]+)\)/g;
       // 替换为 ![alt](文件名)
       data.content = data.content.replace(regex, function(matched, mName, mDir, mFileName, offset, string, groups){
           // data.slug中保存的时当前文章文件的名称，也是附件保存的文件夹名称
           // 通过该判断限制匹配图片范围，文章中依然可以引入其他目录资源文件
           if(mDir == data.slug){
               log.info('[fix-image-path] 识别到带目录的图片地址', matched, '->', `![${mName}](${mFileName})`)
               return `![${mName}](${mFileName})`
           }
           return matched
       });
       return data;
     });

3. 效果如下

   

网上有很多其他的教程，例如引入hexo-asset-img插件，下面这些，都可以参照。

Hexo + Typora + 开发Hexo插件 解决图片路径不一致 | yiyun’s Blog

Hexo+NexT（六）：手把手教你编写一个Hexo过滤器插件 - Guide2IT - 博客园

代办事项

• 修改页面主题宽度
• 修改CDN，优化CDN响应慢的问题
• 实现黑白主题切换
• 实现国际化
• 首页精简展示信息，不显示全文

资源站列表

• fontawesome字体
• 开发hexo主题教程