自定义tag教程01

将在md中自定义tag
参考文献：https://hexo.io/zh-cn/api/tag

在next主题中加入自定义tag相关js

进入themes/next/scripts/tags
创建htmlTag.js

编辑htmlTag.js

关键代码

// 在hexo中注册一个tag 叫 html7 执行方法是parseHtml 包含结束标识
hexo.extend.tag.register('html7', parseHtml, {ends: true});

核心functiong编写

// args tag后面的参数 
// 列：{% html7 js=xxx.js;x.js css=xxx.css;x.css %}
// content tag中包含的文本信息
function parseHtml(args, content) {  
  let html = `${content}`  
  for (let i = 0; i < args.length; i++) {  
    const arg = args[i];  
    const value = arg.split("=");  
    if (value && value[0] && value[1]){  
      if ( value[0].toLowerCase().trim() === 'js') {  
        const jsList = value[1].split(";").filter(e => e);  
        for (let j = 0; j < jsList.length; j++) {  
          html=html+`<script src="${hexo.config.root}${jsList[j]}"></script>`  
        }  
      } else if (value[0].toLowerCase().trim() === 'css') {  
        const cssList = value[1].split(";").filter(e => e);  
        for (let j = 0; j < cssList.length; j++) {  
          html=`<link rel="stylesheet" href="${hexo.config.root}${cssList[j]}"/>`+html  
        }  
      }    }  }  return html;  
}

完整代码

'use strict';  
function parseHtml(args, content) {  
  let html = `${content}`  
  for (let i = 0; i < args.length; i++) {  
    const arg = args[i];  
    const value = arg.split("=");  
    if (value && value[0] && value[1]){  
      if ( value[0].toLowerCase().trim() === 'js') {  
        const jsList = value[1].split(";").filter(e => e);  
        for (let j = 0; j < jsList.length; j++) {  
          html=html+`<script src="${hexo.config.root}${jsList[j]}"></script>`  
        }  
      } else if (value[0].toLowerCase().trim() === 'css') {  
        const cssList = value[1].split(";").filter(e => e);  
        for (let j = 0; j < cssList.length; j++) {  
          html=`<link rel="stylesheet" href="${hexo.config.root}${cssList[j]}"/>`+html  
        }  
      }    }  }  return html;  
}  
  
hexo.extend.tag.register('html7', parseHtml, {ends: true});

使用

这里用一个悬浮文字来演示

---  
title:   
date: 2023-09-23 09:38:38  
type: about  
---  
  
{% html7 js=/js/fontFloatMain/dataJson.js;/js/fontFloatMain/index-d2590129.js css=/css/fontFloatMain/index-6ed54a2c.css %}  
<style>  
.main-inner {  
    width: 100%;  
}  
</style>  
<div id="fontFloatMainApp"></div>  
{% endhtml7 %}

当然你可以在html7中使用任意的html（包含js、css）等文本，能够快速在页面总自定义样式不用写很多组件