使用art-template生成静态页面

我们常用的web端后台系统很多基于vue或者php开发，用这些框架和语言开发的项目都有一个特性，页面都是动态的，我们知道动态页面SEO并不友好，当前，后台系统也不需要考虑SEO，但假如你开发的是企业网站，就需要考虑SEO优化，用PHP开发企业网站的话可以做伪静态，但始终不是完全静态。

这里简单介绍一下利用node.js生成静态页面。

1.node文件写法

const fs = require("fs")
const template = require("art-template"); //引用art-template模板引擎

router.post('/', (req,res)=> {
    //读取的静态文件模板
	fs.readFile("page/index.html", function(err, data) {
		let htmlstr = template.render(data.toString(), {
			//赋值需要渲染的数据
			title: '',
			keywords: ``,
			description: ``,
			logoImg: ``,
			type: ``,
			data: ``,
		});
        //生成后的静态文件将保存在当前位置
		fs.writeFile(`src/index.html`,htmlstr,function(error){
			if(error){
				console.log(error)
				return false
			}
			console.log('生成成功')
		})
	})
})

注：可以按项目需求，修改为批量生成静态页面，比如生成文章详情页。

2.html文件写法，使用{{变量名}}，变量名要和上面template.render的变量一致，如果变量为数组类型，需要遍历数据，则使用{{each 变量名}}，每条数据以{{$value.变量名}}渲染

<meta name="keywords" content="{{keywords}}">
<meta name="description" content="{{description}}">

<!-- 数组类型 -->
{{each data}}
<div class="">
	<div class="">
		<img style="" src="{{$value.img}}" />
	</div>
	<span class="">{{$value.title}}</span>
</div>
{{/each}}

3.使用{{if 变量名}}执行if判断

{{if files.authorInfo}}
<div class="content_2" style="margin-bottom: 20px;">
	<h3 class="content_2_title">作者</h3>
	<div class="content_2_div">
		<span class="content_2_div_span">{{@files.authorInfo}}</span>
	</div>
</div>
{{/if }}