nunjucks 配 Koa2 搭建个人博客

前言

关于 Koa2 的文章网上有很多,但关于 Koa2 配 Nunjucks 模板引擎来开发网站其实不是很多,所以我想为社会做点小小的贡献,那怕在别人看来是微不足道,我在所不辞.

Koa2 相关你应该不会陌生, Nunjucks 模板引擎也应该也略知一二.但是这篇文章不会写过多的细节,更多的是从宏观上来总结要用 Koa2 配 Nunjucks 模板引擎做一个网站要做哪事情.

宏观把握

首先我假设你已经配置好了 Node.js 环境.接下来我们就得先安装 Koa2

Koa2 安装

npm install koa

下面列出的就是基于 Koa 的一些模块.

#处理模板
npm install koa-views
#让静态资源可以被访问
npm install koa-static
#处理请求
npm install koa-bodyparser
#后端路由
npm install koa-router

如果执行 npm i koa-bodyparser 报错:

npm ERR! Unexpected end of JSON input while parsing near '...-config":"^1.6.1","pa'

那么你可以执行下面这行命令先清空下缓存再重新安装

npm cache clean --force

Nunjucks 模板引擎安装

接下来安装模板引擎:

npm install nunjucks

nunjucks 模板引擎使用文档可以看这里:https://mozilla.github.io/nunjucks/

装完模板引擎后,我们需要为自己的编辑器安装一个 Nunjucks 代码高亮插件,如果你用的是微软的 vscode 编辑器那么你可以安装这个插件 Nunjucks Template

mongodb 数据库模块安装

npm install mongoose

当然前提是你得安装了 mongodb 数据库

如果是Deepin (Linux) 系统那么你可以运行如下使命时行安装

sudo apt-get install mongodb

安装也很简单,这里就多说了.

再者,我想你很可能需要一个数据库的图形管理软件,这里给你提供一个 https://studio3t.com/download/

如果需要对代码进行高亮,那么你可以引入一个代码高亮库

https://highlightjs.org/

还可以下载不同的主题样式表

https://github.com/highlightjs/highlight.js/tree/master/src/styles

微观审察

下面我们来看看主入口文件 index.js

const path = require('path');
const koa = require('koa');
const views = require('koa-views');
const nunjucks = require('nunjucks')
const static = require('koa-static');
const Routers = require('./routers');
// 客户端发送请求,通过 koa-bodyparser 这个插件把请求数据解析出来,参数的使用更为方便
const bodyParser = require('koa-bodyparser');
const app = new koa();

// 如果不配置下面这个那么在页面中 extends 模板时会报如下错误 template not found: layout.html
const env = new nunjucks.Environment(
new nunjucks.FileSystemLoader(path.join(__dirname, '/views'))
)

// GET http://localhost:3000/static/styles/reset.css 404 (Not Found)
// 这是因为我们设置了 静态资源文件默认目录为 static,所以我们在模板中引入时在资源文件路径中就不需要添加 static 了,就像这样 styles/reset.css
app.use(static(path.resolve('./static')));

app.use(views(__dirname + '/views', {
options: {
nunjucksEnv: env
},
map: {
html: 'nunjucks'
}
}));
app.use(bodyParser());
app.use(Routers.routes());
app.use(Routers.allowedMethods());
app.listen(3000);
console.log("启用成功");

index.js 中涉及到 nunjucks 的一些配置,更多环境配置可以参考这里:

https://github.com/queckezz/koa-views/blob/HEAD/test/index.js