#5541·hexo

如果不使用标签插件的内容参数,则渲染器将无法完全工作

作者: BlueWhaleYT创建于 2024年9月2日更新于 2026年8月7日
标签bug

bubble.js

javascript
const fs = require('hexo-fs');

hexo.extend.tag.register('bubble', bubble, { async: true });

const REGEX = /^---\n([\s\S]*?)\n---/;

function bubble(args) {
    const notationPath = hexo.source_dir + 'assets/notation/' + args[0] + '.md';
    const notation = fs.readFileSync(notationPath).trim();

    const properties = getProperty(notation);
    const title = properties ? properties.title : 'Unnamed';

    const notationContent = hexo.render.renderSync({
        text: notation.replace(REGEX, ''),
        engine: 'markdown'
    })

    return `
        <div class="bubble-content">${title}</div>
        <div class="bubble-notation">
            <div class="bubble-item">${notationContent}</div>
        </div><p>
    `
}

function getProperty(notation) {
    const frontMatterRegex = REGEX;
    const match = notation.match(frontMatterRegex);

    if (match && match[1]) {
        const frontMatter = match[1];
        const properties = {};

        frontMatter.split('\n').forEach(line => {
            const [key, value] = line.split(':').map(item => item.trim());
            if (key) {
                properties[key] = value;
            }
        });

        return properties;
    }

    return null;
}

here is the final HTML of the notation:

xml
<div class="bubble-notation">
            <div class="bubble-item"><p>testing paragraph</p>
<p>another paragraph</p>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
<pre><code class="js">const express = require('express');
const app = express();
app.get('/', (req, res) =&gt; {
    
});
app.listen(3000);
</code></pre>
</div>
        </div>

the result preview: <img width="475" alt="螢幕截圖 2024-09-02 下午12 55 57"