Hexo Asset Image 插件使用教程

Hexo Asset Image 插件使用教程

1. 项目的目录结构及介绍

Hexo Asset Image 插件的目录结构如下:

hexo-asset-image/
├── LICENSE
├── README.md
├── index.js
├── package.json
└── test/
    ├── asset-image-test.js
    └── test.md

目录结构介绍

  • LICENSE: 项目的许可证文件。
  • README.md: 项目的说明文档,包含基本的使用方法和示例。
  • index.js: 插件的主文件,包含主要的逻辑和功能实现。
  • package.json: 项目的配置文件,包含依赖信息和脚本命令。
  • test/: 测试目录,包含测试文件和测试用例。
    • asset-image-test.js: 具体的测试文件。
    • test.md: 测试用例的Markdown文件。

2. 项目的启动文件介绍

项目的启动文件是 index.js,该文件主要负责以下功能:

  • 注册 Hexo 插件。
  • 处理 Markdown 文件中的图片引用,生成正确的路径。

关键代码片段

var cheerio = require('cheerio');

hexo.extend.filter.register('after_post_render', function(data){
  var $ = cheerio.load(data.content, {
    decodeEntities: false
  });

  $('img').each(function(){
    if ($(this).attr('src').indexOf('http') !== 0 && $(this).attr('src').indexOf('/') !== 0) {
      var link = data.permalink.replace('index.html', '') + $(this).attr('src');
      $(this).attr('src', link);
    }
  });

  data.content = $.html();
  return data;
});

3. 项目的配置文件介绍

项目的配置文件是 package.json,该文件包含了项目的基本信息和依赖项。

关键配置项

{
  "name": "hexo-asset-image",
  "version": "0.0.3",
  "description": "Generate correct paths to images in Hexo posts",
  "main": "index.js",
  "scripts": {
    "test": "mocha test/asset-image-test.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/CodeFalling/hexo-asset-image.git"
  },
  "keywords": [
    "hexo",
    "image",
    "asset",
    "path"
  ],
  "author": "CodeFalling",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/CodeFalling/hexo-asset-image/issues"
  },
  "homepage": "https://github.com/CodeFalling/hexo-asset-image#readme",
  "dependencies": {
    "cheerio": "^0.22.0"
  },
  "devDependencies": {
    "mocha": "^3.2.0"
  }
}

配置项介绍

  • name: 项目名称。
  • version: 项目版本。
  • description: 项目描述。
  • main: 项目的主入口文件。
  • scripts: 可执行的脚本命令,如测试命令 npm test
  • repository: 项目的仓库地址。
  • keywords: 项目的关键词。
  • author: 项目作者。
  • license: 项目许可证。
  • dependencies: 项目依赖的其他模块。
  • devDependencies: 开发环境依赖的其他模块。

通过以上配置,可以确保项目在安装和运行时的依赖关系和基本信息正确无误。

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值