CFLMY-PPT自动生成记录文档002

前言

这是一个更新的版本，演示站点仍为：CFLMY-生成至美PPT

更改的配置：

const fs = require('fs');
const path = require('path');
const MarkdownIt = require('markdown-it');

const md = new MarkdownIt({
  html: true
});
// 读取头部和尾部文件
const headerFilePath = 'decorate/header.html'; // 头部文件路径
const footerFilePath = 'decorate/footer.html'; // 尾部文件路径
const markdownFilePath = 'index.md'; // Markdown 文件路径
const markdownDirPath = 'md'; // Markdown 文件夹路径
// 读取头部和尾部内容
const headerContent = fs.readFileSync(headerFilePath, 'utf-8');
const footerContent = fs.readFileSync(footerFilePath, 'utf-8');

// 读取 Markdown 文件
const markdownContent = fs.readFileSync(markdownFilePath, 'utf-8');

const markdownFiles = fs.readdirSync(markdownDirPath).filter(file => {
  return path.extname(file) === '.md'; // 仅处理 .md 文件
});
//更改定义自己的全新规则
//Error
//将标题进行更改
//新增规则，仅当标题为1级的时候，开辟新页
md.renderer.rules.heading_open = function (tokens, idx, options, env, self) {
  const level = tokens[idx].tag.slice(1); // 获取标题级别（h1, h2, h3...）
  if (level == 1)
  {
    return '\n <section> \n <h1>'
  }
  return self.renderToken(tokens, idx, options);// 更改标题的样式或添加自定义属性
};
// 自定义分割线的渲染规则
md.renderer.rules.hr = function () {
  return ' <hr> \n </div> \n </section> \n'; // 自定义分割线样式
};

// 重写图片处理规则
md.renderer.rules.image = function (tokens, idx, options, env, self) {
  const token = tokens[idx];
  const alt = token.content; // 获取alt文本
  const src = token.attrs[token.attrIndex('src')][1]; // 获取src属性

  // 定义一个映射对象用于存储不同 alt 文本的处理信息
  const backgroundStyles = {
    'BackGround': '',                // 不添加额外类
    'BackGround-aligncenter': ' aligncenter', // 添加 aligncenter 类
    // 你可以添加更多的 alt 文本和对应样式
  };

  // 获取对应样式后缀
  const className = backgroundStyles[alt]; // 如果 alt 不在映射中，className 为 undefined

  // 默认情况下，使用缺省的背景图像
  const backgroundImage = src ? `url('${src}')` : `url('Assert/CFLMY.webp')`;

  // 只要 alt 文本在映射中存在，就返回相应的 HTML
  if (className !== undefined) {
      return `<span class="background" style="background-image:${backgroundImage};"></span>\n<div class="wrap${className}">`;
  }

  // 默认行为
  return self.renderToken(tokens, idx, options);
};

// 自定义有序列表的渲染规则
// 自定义有序列表的渲染规则
md.renderer.rules.ordered_list_open = function (tokens, idx, options, env, self) {
  // 在有序列表前添加内容
  return `<div class="bg-white shadow">
              <ul class="flexblock reasons">`; // 可以自定义前置内容
};

md.renderer.rules.ordered_list_close = function (tokens, idx, options, env, self) {
  // 在有序列表后添加内容
  return `</ul>
            </div>`; // 可以自定义后置内容
};

// 自定义无序列表的渲染规则，这里暂时先和无序列表保持一致
md.renderer.rules.bullet_list_open = function() {
  // 在有序列表前添加内容
  return `<ul class="flexblock gallery">`; // 可以自定义前置内容
};

// 自定义无序列表的渲染规则
md.renderer.rules.bullet_list_close = function() {
  // 在有序列表后添加内容
  return `</ul>`; // 可以自定义后置内容
};

// 自定义代码块的渲染规则
md.renderer.rules.fenced_code_open = function(tokens, idx, options, env, self) {
  // 在代码块前添加内容
  return `<div class="column">
                <pre>`;
};

md.renderer.rules.fenced_code_close = function(tokens, idx, options, env, self) {
  // 在代码块后添加内容
  return `</pre>
              </div>`;
};

// 自定义链接样式和行为
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
  const token = tokens[idx];
  const alt = tokens[idx + 1].content; // 获取链接文本
  const href = tokens[idx].attrs[token.attrIndex('href')][1];
  // 使用正则表达式给包含 "IMG-" 的 alt 文本设置类名
  const match = alt.match(/^(IMG)-(.*?)-(.*)$/);
  if (match) {
    const prefix = match[1]; // "IMG"
    const imgHref = match[2]; // "图片链接"
    const description = match[3]; // "描述"
    tokens[idx + 1].content = description;

    return `<a href="${href}">
                  <figure>
                    <img alt="" src="${imgHref}">
                    <figcaption>
                      <h2>
                `;
  }

  // 默认行为
  return self.renderToken(tokens, idx, options);
};

md.renderer.rules.link_close = function (tokens, idx, options, env, self) {
  return `</h2>
              </figcaption>
            </figure>
          </a>`;
};

// 重写引用处理规则
md.renderer.rules.blockquote_open = function (tokens, idx, options, env, self) {
  // 返回定义好的开头HTML，可以为引用添加特定的类或样式
  return '<ul class="flexblock features"><li>';
};

md.renderer.rules.blockquote_close = function (tokens, idx, options, env, self) {
  // 返回引用结束的HTML
  return '</li></ul>';
};


const htmlContent = md.render(markdownContent);

// 生成完整的 HTML
const fullHtml = headerContent + htmlContent + footerContent;

// 写入 HTML 文件
const outputFilePath = 'index.html'; // 你的输出 HTML 文件路径
fs.writeFileSync(outputFilePath, fullHtml, 'utf-8');

console.log(`Index HTML 文件已生成: ${outputFilePath}`);

// 遍历每个 Markdown 文件并生成对应的 HTML 文件
markdownFiles.forEach(markdownFile => {
  const markdownFilePath = path.join(markdownDirPath, markdownFile); // Markdown 文件的完整路径
  const markdownContent = fs.readFileSync(markdownFilePath, 'utf-8'); // 读取 Markdown 文件

  // 用于自定义渲染规则的代码
  // ... (保留原有的渲染规则) ...
  // 重写图片处理规则
  md.renderer.rules.image = function (tokens, idx, options, env, self) {
    const token = tokens[idx];
    const alt = token.content; // 获取alt文本
    const src = token.attrs[token.attrIndex('src')][1]; // 获取src属性

    // 定义一个映射对象用于存储不同 alt 文本的处理信息
    const backgroundStyles = {
      'BackGround': '',                // 不添加额外类
      'BackGround-aligncenter': ' aligncenter', // 添加 aligncenter 类
      // 你可以添加更多的 alt 文本和对应样式
    };

    // 获取对应样式后缀
    const className = backgroundStyles[alt]; // 如果 alt 不在映射中，className 为 undefined

    // 默认情况下，使用缺省的背景图像
    const backgroundImage = src ? `url('${src}')` : `url('../Assert/CFLMY.webp')`;

    // 只要 alt 文本在映射中存在，就返回相应的 HTML
    if (className !== undefined) {
        return `<span class="background" style="background-image:${backgroundImage};"></span>\n<div class="wrap${className}">`;
    }

    // 默认行为
    return self.renderToken(tokens, idx, options);
  };

  const htmlContent = md.render(markdownContent); // 渲染 Markdown 内容为 HTML

  // 生成完整的 HTML
  const outputHtml = headerContent + htmlContent + footerContent;

  const outputFileName = path.basename(markdownFile, '.md') + '.html'; // 输出文件名
  const outputFilePath = path.join('html', outputFileName); // 输出 HTML 文件路径

  // 创建输出目录（如果不存在）
  if (!fs.existsSync('html')) {
      fs.mkdirSync('html');
  }

  // 写入 HTML 文件
  fs.writeFileSync(outputFilePath, outputHtml, 'utf-8');

  console.log(`md 目录下的HTML 文件已生成: ${outputFilePath}`);
});

更新内容

1. 新增读取md文件夹下的所有.md后缀的文件，并且在html文件夹下生成同名的.html文件。提高了泛用性
2. 修改无序列表的渲染样式，并将原有的无序列表样式移动到引用。
3. 修改原有的背景表达方式，简洁化代码
4. 增加链接的支持，使得对于

   * [IMG-imgHref-description](href)

   的链接样式进行修改
5. 背景缺省的情况下改变默认背景名称，防止出现兼容性问题。

后记

0.0.2版本就算更新了这么多吧，以后或许会有更近一步的更新的。

---

同系列

CFLMY-PPT自动生成记录文档001
CFLMY-PPT自动生成记录文档002
CFLMY-PPT自动生成记录文档003
CFLMY-PPT自动生成记录文档003