metadata 数据 和 { isNotTest, isTest 合并 } if (opts.metalsmith && typeof opts.metalsmith.before === 'function...') { opts.metalsmith.before(metalsmith, opts, helpers) } // askQuestions是会在终端里询问一些问题 // 名称...=== 'function') { opts.metalsmith(metalsmith, opts, helpers) } else if (opts.metalsmith && typeof...opts.metalsmith.after === 'function') { opts.metalsmith.after(metalsmith, opts, helpers) }.../src` which is Metalsmith's default for `source` .destination(dest) .build((err, files) => {
编译逻辑 编译逻辑就是将用户输入的信息替换到模板中,这里需要用到 Metalsmith 这个库,这个库的作用就是将用户输入的信息替换到模板中,它就有这个能力。...官网我就不贴出来大家自行去 npm 官网搜索即可,这里直接安装 Metalsmith: npm install metalsmith --save 安装好了之后,导入 Metalsmith: const...Metalsmith = require('metalsmith'); 然后在 else 代码块中,编写编译逻辑: // 处理用户输入 await new Promise((resolve, reject...(__dirname) 这个方法是用来创建一个 Metalsmith 实例的,这个实例中包含了一些方法,比如 source、destination、use、build 等方法。...因为 Metalsmith 是一个流式处理的库,它是通过 .use 方法来注册插件的,这里我注册了两个插件,第一个插件是用来处理用户输入的,第二个插件是用来处理模板的。
/logger') 复制代码 chalk 是一个可以让终端输出内容变色的模块 Metalsmith是一个静态网站(博客,项目)的生成库 handlerbars 是一个模板编译器,通过template和...metadata 数据 和 { isNotTest, isTest 合并 } if (opts.metalsmith && typeof opts.metalsmith.before === 'function...') { opts.metalsmith.before(metalsmith, opts, helpers) } // askQuestions是会在终端里询问一些问题 // 名称...=== 'function') { opts.metalsmith(metalsmith, opts, helpers) } else if (opts.metalsmith && typeof...opts.metalsmith.after === 'function') { opts.metalsmith.after(metalsmith, opts, helpers) }
metadata 数据 和 { isNotTest, isTest 合并 } if(opts.metalsmith &&typeofopts.metalsmith.before ==='function...') { opts.metalsmith.before(metalsmith, opts, helpers) } // askQuestions是会在终端里询问一些问题 // 名称 描述 作者 是要什么构建... ==='function') { opts.metalsmith(metalsmith, opts, helpers) }elseif(opts.metalsmith &&typeofopts.metalsmith.after... ==='function') { opts.metalsmith.after(metalsmith, opts, helpers) } // clean方法是设置在写入之前是否删除原先目标目录 默认为...true // source方法是设置原路径 // destination方法就是设置输出的目录 // build方法执行构建 metalsmith.clean(false) .source('.')/
metalsmith/metalsmith[5] Stars: 7.8k License: MIT Metalsmith 是一个极其简单且可插拔的静态网站生成器。...可扩展性强:使用 Metalsmith 的插件系统,你可以根据需要添加、删除和定制不同的功能模块。...适应多种需求:无论是构建个人博客还是开发复杂项目文档,在 Metalsmith 中都能找到解决方案。 强大而灵活:每个文件都包含元数据,并由插件进行处理。这意味着您可以对任何文件执行几乎任何操作。...github.com/react-static/react-static [4] gridsome/gridsome: https://github.com/gridsome/gridsome [5] metalsmith.../metalsmith: https://github.com/metalsmith/metalsmith [6] middleman/middleman: https://github.com/middleman
commander NodeJs命令行工具,提供了用户命令行输入和参数解析,用户解析用户输入 inquirer NodeJs交互式命令行工具,询问操作者问题,获取用户输入,校验回答的合法性 metalsmith...= require('metalsmith'); const Handlebars = require('handlebars'); const path = require('path'); const...questionConfig } = JSON.parse(config); const answer = await askQuestion(questionConfig); const metalsmith...= Metalsmith(__dirname); metalsmith .metadata(answer) .source(path.join(dirPath, source))....destination(path.join(dirPath, dist)) .use(function (files, metalsmith, done) { //遍历替换模板
Metalsmith Metalsmith是简单、高效、pluggable静态网站生成工具,它使用nodejs编写。...Metalsmith和其他工具的最大区别是它的所有东西都由插件处理,并且插件可以重用。只要决定网站的功能,然后找到相关插件,组合到一起,ok,ready to go!...Metalsmith也可以生成PDF、电子书、文档等等。
怎么对下载的文件进行处理 当你提供的模板不仅仅是一个纯粹的文件,而是可以通过某些参数进行编译,得到不同的目标文件时,你可以通过metalsmith来对文件进行操作。...在Vue-cli中,使用了模板引擎合并库consolidate.js,通过这个库的render方法来编写metalsmith的处理函数,从而在渲染的过程中对模板进行处理,具体代码如下: exports.handlebars.render
其实就借助了他~ inquirer :交互式命令行工具,有他就可以实现命令行的选择功能 download-git-repo :在git中下载模板 chalk :粉笔帮我们在控制台中画出各种各样的颜色 metalsmith...核心原理就是将下载的模板文件,依次遍历根据用户填写的信息渲染模板,将渲染好的结果拷贝到执行命令的目录下 安装需要用到的模块 npm i metalsmith ejs consolidate const...MetalSmith = require('metalsmith'); // 遍历文件夹 let { render } = require('consolidate').ejs; render = promisify...target, path.join(path.resolve(), projectName)); } else { await new Promise((resovle, reject) => { MetalSmith
编译其实也就是通过 metalsmith 静态模板生成器把模板作为输入,数据作为填充,按照 handlebars的语法进行规则渲染。最后产出 build 构建好的目录。...,以数据入口为生成源,通过renderTemplateFiles编译产出到目标目录 function build(data, temp_dest, source, dest, cb) { let metalsmith...= Metalsmith(temp_dest) .use(renderTemplateFiles(data)) .source(source) .destination(dest...) .clean(false) return metalsmith.build((error, files) => { if (error) console.log(error);
8.GitBook CLI 9.Docsify 10.VuePress 11.Mkdocs 12.Eleventy 13.Pelican 14.React Static 15.Gridsome 16.Metalsmith...16.Metalsmith star 数 8K+。 Metalsmith 一个基于 Node.js 开发的超级简单、插件化的静态网站生成工具。...Metalsmith 采用模块化的设计,用户可以根据自己的需求和喜好选择不同的插件进行配置,以生成满足自己需求的网站。 你可以查看它的 GitHub和官网了解更多。
主要使用ejs实现模板字符替换 ncp :像cp -r一样拷贝目录、文件 metalsmith :可插入的静态网站生成器;例如获取到根据用户自定义的输入或选择配合ejs渲染变量后的最终内容后,通过它做插入修改...focusTemplate中 如果模板项目中没提供ask-for-cli.js文件,则使用ncp直接拷贝代码到本地 ·如果存在则使用inquirer根据用户输入和选择渲染(consolidate.ejs)变量最终通过metalsmith...path.join(result, CONFIG.ASK_FOR_CLI as string)); await new Promise((resolve, reject) => { MetalSmith
chalk: 命令窗口文字有颜色的输出 commander:解析命令的输入 download-github-repo:下载github上面的模板项目 fs-extra:file和folder的处理,如删除 metalsmith
以这个README.md文件为例,在vue-cli运行的过程中,会首先读取文件的内容放在内存,然后通过 获取用户输入,把输入的值替换到文件内容里面,最后通过另外一个名叫Metalsmith的工具,把替换好的内容输出为文件
download-git-repo,下载模版 inquirer 命令行交互,获取用户输入 ora 进度条 log-symbols 输出一些标志,如√ handlebars 模板引擎,更复杂或高级点的可以用 metalsmith
js-pdf: PDF解析 js-xlsx: Excel解析 js-yaml: YAML解析 jslib-base: 项目初始化 madge: 文件依赖关系 markdown-it: Markdown解析 metalsmith
{tplPath}/meta`); const projectPath = `${process.cwd()}/${dir}`; // 生成新项目 Metalsmith
Jekyl 和 Metalsmith 提供更多模板驱动的方法,更加符合它们的静态特质。 静态渲染的一个缺点是必须为每个可能的 URL 生成单独的 HTML 文件。
领取专属 10元无门槛券
手把手带您无忧上云