使用KeystoneJS构建个人博客系统全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00452/article/details/148377929

使用KeystoneJS构建个人博客系统全指南

keystone-classic Node.js CMS and web app framework 项目地址: https://gitcode.com/gh_mirrors/ke/keystone-classic

前言

KeystoneJS是一个基于Node.js和MongoDB的开源内容管理系统(CMS)框架，特别适合快速构建数据驱动的网站和应用程序。本文将详细介绍如何使用KeystoneJS从零开始构建一个完整的博客系统。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

Node.js 0.10或更高版本
MongoDB 2.4或更高版本
基本的JavaScript和命令行知识

项目初始化

KeystoneJS提供了便捷的项目生成工具，可以快速搭建项目骨架：

首先全局安装项目生成器：

npm install -g generator-keystone

mkdir my-blog
cd my-blog

运行生成器并选择配置：

yo keystone

在交互式配置过程中，建议选择以下选项：

包含博客功能
使用Pug模板引擎
使用LESS作为CSS预处理器

项目结构与核心概念

生成的项目包含以下重要部分：

models/ - 数据模型定义
templates/ - 前端模板文件
routes/ - 路由配置
public/ - 静态资源
keystone.js - 项目主配置文件

KeystoneJS的核心概念包括：

Lists：相当于MongoDB中的集合(Collection)，定义了数据结构和行为
Fields：定义了List中的字段类型和属性
Views：处理请求并渲染模板
Admin UI：自动生成的内容管理界面

博客功能实现

1. 文章模型

KeystoneJS已经为我们生成了基本的Post模型(models/Post.js)，包含以下常用字段：

title：文章标题
state：文章状态(草稿/发布/归档)
author：作者
publishedDate：发布日期
image：封面图片
content：文章内容(分为摘要和正文)

2. 模板定制

KeystoneJS使用Pug(原Jade)作为默认模板引擎。主要模板文件包括：

layouts/default.pug - 基础布局模板
views/blog.pug - 博客列表页
views/post.pug - 文章详情页

模板中可以通过以下方式访问数据：

// 访问文章标题
h1= post.title

// 检查图片是否存在
if post.image.exists
  img(src=post._.image.fit(800,800))
  
// 显示文章摘要
p= post.content.brief

3. 添加自定义页面

除了博客文章，我们还需要添加"关于我们"等静态页面：

创建Page模型(models/Page.js)：

const Page = new keystone.List('Page', {
  autokey: { path: 'slug', from: 'title', unique: true }
});

Page.add({
  title: { type: String, required: true },
  state: { type: Types.Select, options: 'draft, published, archived', default: 'draft' },
  content: {
    brief: { type: Types.Html, wysiwyg: true, height: 150 },
    extended: { type: Types.Html, wysiwyg: true, height: 400 },
  },
});

Page.register();

创建页面视图(routes/views/page.js)：

const Page = keystone.list('Page');

exports = module.exports = function(req, res) {
  const view = new keystone.View(req, res);
  const locals = res.locals;
  
  locals.section = 'pages';

  view.on('init', function(next) {
    Page.model.findOne({ slug: req.params.page })
      .exec(function(err, page) {
        if (err) return res.err(err);
        if (!page) return res.notfound('Page not found');
        
        locals.page = page;
        next();
      });
  });

  view.render('page');
};

添加路由配置(routes/index.js)：

app.get('/pages/:page', routes.views.page);

样式定制

KeystoneJS默认集成了Bootstrap框架，我们可以轻松定制博客样式：

修改public/styles/site.less文件
添加自定义LESS变量和样式
使用响应式设计确保在各种设备上良好显示

部署上线

完成开发后，我们可以将博客部署到生产环境。以Heroku为例：

初始化Git仓库：

git init
git add .
git commit -m "Initial commit"

创建Heroku应用并设置环境变量：

heroku create my-blog
heroku config:set MANDRILL_API_KEY=<your-key>
heroku config:set CLOUDINARY_URL=<your-url>
heroku config:set COOKIE_SECRET=<your-secret>