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

前言

作者曾经听人说过这么一句话，累死累活不如做PPT的，这话虽然不雅，但是非常有道理，因此作者经常非常喜欢做出漂亮的PPT内容。

我曾经自己配置过一些markodwn转为网页PPT的开源内容，但是没有我想像中的好用。不过也正是在这样的情况下，我接触到了WebSilides,这确实是个非常好的软件，但是是用html写的，用起来不算很方便，刚好markdown可以自动转化为html,既然如此，为什么不直接做一个自动转化的程序呢？

出于这样的目的，作者使用markdown-it做出了尝试，效果不错，以下是一个演示站点。 CFLMY-生成至美PPT

这里算是第0.0.1版。

配置环境

环境配置还是比较简单的，只需要配置nodejs,npm,markdown-it,webslides的依赖即可。

安装nodejs和npm

这里采用了之前的scoop配置的方式，详情见：Scoop环境配置记录

scoop install nodejs

等待下载完成即可。

安装markdown-it

使用npm安装即可：

npm install markdown-it

配置Webslides

直接访问如下网站，下载压缩包即可： webslides演示网站

配置使用

在将Webslides下载解压之后，我们就可以创建一个属于自己的配置内容，比如作者就是建立了一个名为main.js的文件，并进行了下列配置：

const fs = require('fs');
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 headerContent = fs.readFileSync(headerFilePath, 'utf-8');
const footerContent = fs.readFileSync(footerFilePath, 'utf-8');

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

//更改定义自己的全新规则
//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 文本是否为 'background'
  if (alt === 'BackGround') {
      // 自定义处理逻辑，例如添加样式类
      //return `<div style="background-image: url('${src}'); height: 300px;"></div>`;
      if(src === '')
      {
        return `<span class="background" style="background-image:url('Assert/cflmy-back.png')"></span> \n <div class="wrap">`
      }
      return `<span class="background" style="background-image:url('${src}')"></span> \n <div class="wrap">`
  }
  else if(alt === 'BackGround-aligncenter'){
    if(src === '')
      {
        return `<span class="background" style="background-image:url('Assert/cflmy-back.png')"></span> \n <div class="wrap">`
      }
    return `<span class="background" style="background-image:url('${src}')"></span> \n <div class="wrap aligncenter">`
  }

  // 默认行为
  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 features">`; // 可以自定义前置内容
};

// 自定义无序列表的渲染规则
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>`;
};


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(`HTML 文件已生成: ${outputFilePath}`);

暂时先支持这么多内容，接下来只需要在命令行输入：

node main.js

就会自动读取index.md的内容，并自动输出index.html

配置效果

上述配置文件实现了效果为

读取index.md内容，并生成index.html文件
识别

#

---

并生成新的一页sildes 3. 识别

[BackGround]()
<!--设置居中-->
[BackGround-aligncenter]()

如果后续为空，则插入默认背景 4. 识别有序列表和无序列表 5. 识别代码块

vercel配置

这个博客本身就是在vercel上建立的，自然的刚刚建立的内容也可以配置到vercel上，只需要将一些设置更改一下就好，还是比较简单的，因此不再赘述。

后记

生成漂亮的PPT确实很有吸引力，目前的很多高阶配置都没有完成，写下这一篇博客，既是记录也是对后续不断完成高阶配置的目标设立。