hexo个性标签

注意：如果想看标签长什么样需要移步到我的博客查看，因为CSDN自带markdown不支持此样式，我的原文博客：点击我

"我们在写作时不只是需要好的内容，简洁美丽的页面也是我们所要追求的，简洁的页面能够使读者更容易看懂，结构更清晰，这时我们就需要一些标签来辅助我们写作，以下内容转载于" https://cndrew.cn/2020/04/18/mdjj/

下面只是我的一些记录也算是一种演示，需要JS和CSS文件，具体参考原文

JS

复制下面代码到JS文件中，在../node_modules/hexo-generator-tag/index.js中调用

function postFolding(args, content) {
  args = args.join(' ').split(',');
  let style = ''
  let title = ''
  if (args.length > 1) {
    style = args[0].trim()
    title = args[1].trim()
  } else if (args.length > 0) {
    title = args[0].trim()
  }
  if (style != undefined) {
    return `<details ${style}><summary> ${hexo.render.renderSync({text: title, engine: 'markdown'}).split('\n').join('')} </summary>
              <div class='content'>
              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
              </div>
            </details>`;
  } else {
    return `<details><summary> ${hexo.render.renderSync({text: title, engine: 'markdown'}).split('\n').join('')} </summary>
              <div class='content'>
              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
              </div>
            </details>`;
  }
}
hexo.extend.tag.register('folding', postFolding, {ends: true});
function postP(args) {
  args = args.join(' ').split(',')
  let p0 = args[0].trim()
  let p1 = args[1].trim()
  return `<p class='p ${p0}'>${p1}</p>`;
}
function postSpan(args) {
  args = args.join(' ').split(',')
  let p0 = args[0].trim()
  let p1 = args[1].trim()
  return `<span class='p ${p0}'>${p1}</span>`;
}
 
hexo.extend.tag.register('p', postP);
hexo.extend.tag.register('span', postSpan);
 
function postNote(args) {
  args = args.join(' ').split(',')
  if (args.length > 1) {
    let cls = args[0].trim()
    let text = args[1].trim()
    return `<div class="note ${cls}">${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}</div>`;
  } else if (args.length > 0) {
    let text = args[0].trim()
    return `<div class="note">${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}</div>`;
  }
}
 
function postNoteBlock(args, content) {
  return `<div class="note ${args.join(' ')}">
            ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
          </div>`;
}
hexo.extend.tag.register('note', postNote);
hexo.extend.tag.register('noteblock', postNoteBlock, {ends: true});

CSS

复制CSS代码在head.ejs文件中引用点击我

总是记不住这些代码干脆记录下来直接CTRL C+CTRL V

源码

{% folding, 图片测试 %}
{% fb_img https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp %}
{% endfolding %}
{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}
{% folding green, 查看代码测试 %}

{% endfolding %}
{% folding yellow, 查看列表测试 %}

haha
hehe
{% endfolding %}
{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha

{% endfolding %}
{% endfolding %}
{% endfolding %}

源码

支持使用颜色参数：
clear，light，gray，red，yellow，green，cyan，blue

{% note red, 为简单的一句话提供的简便写法。 %}

{% note quote, 为简单的一句话提供的简便写法。 %}

{% note info, 为简单的一句话提供的简便写法。 %}

{% note warning, 为简单的一句话提供的简便写法。 %}

{% note done, 支持同样丰富的参数。 %}

{% note success, 支持同样丰富的参数。 %}

{% note danger, 支持同样丰富的参数。 %}

{% note error, 支持同样丰富的参数。 %}

{% note radiation, 支持同样丰富的参数。 %}

{% note bug, 支持同样丰富的参数。 %}

{% note idea, 支持同样丰富的参数。 %}

{% note link, 支持同样丰富的参数。 %}

{% note todo, 支持同样丰富的参数。 %}

{% note msg, 支持同样丰富的参数。 %}

{% note guide, 支持同样丰富的参数。 %}

{% note up, 支持同样丰富的参数。 %}

{% note undo, 支持同样丰富的参数。 %}

{% note paperclip, 支持同样丰富的参数。 %}

源码

{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。

{% span small, Test %}
{% span large, Test %}
{% span huge, Test %}
{% span ultra, Test %}
{% span ultra logo red, Test %}

{% p center logo large, Uncle_drew %}
{% p center small, Hand down,man down %}