如何使用Node.js构建简单的博客

最新推荐文章于 2023-09-04 08:51:38 发布

dfsgwe1231

最新推荐文章于 2023-09-04 08:51:38 发布

阅读量240

点赞数

文章标签： javascript 开发工具 json ViewUI

在本教程中，我将向您展示如何使用Node.js和Cosmic JS创建一个简单的博客。这将是您创建过的最快，最轻量的博客。让我们开始吧。

TL; DR

入门

确保在计算机上安装了Node.js和NPM，如果没有，请访问Node.js网站以安装最新版本。

确保已全局安装Yarn ：

npm install yarn -g

让我们从为我们的应用程序创建一个文件夹开始。在您喜欢的终端中，运行以下命令：

mkdir simple -blog
cd simple -blog

现在，我们添加一个package.json文件，以导入我们应用程序的所有依赖项：

vim package . json

将以下内容添加到我们的package.json文件中：

{
  "dependencies" : {
    "cosmicjs" : "^2.39.0" ,
    "express" : "^4.15.2" ,
    "hogan-express" : "^0.5.2" ,
    "nodemon" : "^1.11.0"
  },
  "scripts" : {
    "start" : "node app.js" ,
    "development" : "nodemon app.js"
  }
}

这是一个漂亮应用程序的漂亮依赖列表。因此，我们将安装的是：

Cosmic JS节点模块，可从Cosmic JS Bucket中获取我们的内容。
为我们的Web应用程序框架表达
Hogan提供我们的模板视图
Nodemon开发

我们的脚本对于在生产和开发中启动我们的应用程序是必需的。

运行以下命令以安装我们的依赖项：

yarn

建立我们的博客

接下来，让我们开始构建我们的博客页面。创建一个名为app.js的文件：

vim app .js

并将以下内容添加到app.js：

const express = require ( 'express' )
const app = express()
const hogan = require ( 'hogan-express' )
const http_module = require ( 'http' )
const http = http_module.Server(app)
app.engine( 'html' , hogan)
app.set( 'port' , (process.env.PORT || 3000 ))
app.use( '/' , express.static(__dirname + '/public/' ))
const Cosmic = require ( 'cosmicjs' )
const helpers = require ( './helpers' )
const bucket_slug = process.env.COSMIC_BUCKET || 'simple-blog-website'
const read_key = process.env.COSMIC_READ_KEY
const partials = {
  header : 'partials/header' ,
  footer : 'partials/footer'
}
app.use( '/' , (req, res, next) => {
  res.locals.year = new Date ().getFullYear()
  next()
})
// Home
app.get( '/' , (req, res) => {
  Cosmic.getObjects({ bucket : { slug : bucket_slug, read_key : read_key } }, (err, response) => {
    const cosmic = response
    if (cosmic.objects.type.posts) {
      cosmic.objects.type.posts.forEach( post => {
        const friendly_date = helpers.friendlyDate( new Date (post.created_at))
        post.friendly_date = friendly_date.month + ' ' + friendly_date.date
      })
    } else {
      cosmic.no_posts = true
    }
    res.locals.cosmic = cosmic
    res.render( 'index.html' , { partials })
  })
})
http.listen(app.get( 'port' ), () => {
  console .info( '==> 🌎  Go to http://localhost:%s' , app.get( 'port' ));
})

这里发生了一些事情：

我们正在导入我们的基本模块：Express，Cosmic JS，动态设置PORT等。
我们指向一些局部：页眉和页脚，您可以从GitHub的代码库中引用这些局部。
我们查看应用程序主页（'/'），并查询Cosmic JS Bucket中的Post Objects，设置友好日期，然后返回index.html模板。
我们还将以全局数据存储的形式将数据添加到此页面：cosmic。这种数据结构使我们的模板实现超级直观。

添加我们的主页模板变量

该过程的这一部分是最有趣的，因为它向您展示了Cosmic JS与声明性，无逻辑的模板系统（例如Mustache）相结合的功能。让我们创建一个名为views的文件夹并添加我们的index.html文件：

mkdir views
cd views
vim index .html

将以下内容添加到index.html：

{{> header }}
  < main class = "container" >
    {{# cosmic.objects.type.posts }}
      < div class = "card" data-href = "/{{ slug }}" >
        {{# metadata.hero.imgix_url }}
          < div class = "blog-post-hero blog-post-hero--short" style = "background-image: url({{ metadata.hero.imgix_url }})" > </ div >
        {{/ metadata.hero.imgix_url }}
        < div class = "card-padding" >
          < h2 class = "blog__title blog__title--small" >
            < a href = "/{{ slug }}" > {{ title }} </ a >
          </ h2 >
          < div class = "blog__author" >
            < div class = "blog__author-image" style = "background-image: url({{ metadata.author.metadata.image.imgix_url }}?w=100)" > </ div >
            < div class = "blog__author-title" > by < a href = "/author/{{ metadata.author.slug }}" > {{ metadata.author.title }} </ a > on {{ friendly_date }} </ div >
            < div class = "clearfix" > </ div >
          </ div >
          < div class = "blog__teaser droid" > {{{ metadata.teaser }}} </ div >
          < div class = "blog__read-more" >
            < a href = "/{{ slug }}" > Read more... </ a >
          </ div >
        </ div >
      </ div >  
    {{/ cosmic.objects.type.posts }}
  </ main >
{{> footer }}

这里发生了什么事？

我们使用Mustache模板变量拉入头文件。
我们使用Mustache变量{{cosmic}}提取我们的Cosmic数据，该变量具有布局页面动态数据所需的一切。
我们正在遍历{{cosmic.objects.type.posts}}，并推出我们的博客文章。

我喜欢这种方法的地方在于，除了一些布尔查询和数组循环之外，该模板完全没有逻辑。将我们的逻辑与我们的演示文稿区分开来确实非常出色（感谢Chris Wanstrath ！）

如果要构建应用程序的其余部分，请克隆GitHub存储库，并按照README指示进行操作。

结论

这是Simple Blog应用程序的简化版本，可在Cosmic JS Apps页面中下载。完整的代码库包括一个帖子页面视图以及一个专门针对每个作者帖子的页面。在GitHub上查看完整的代码库，并通过将应用程序安装到Cosmic JS Bucket，只需单击几下即可从您的Cosmic JS仪表板部署该应用程序。

如果您有任何疑问可以在Twitter上与我们联系并在Slack 上加入我们的社区，我希望您喜欢本教程。

From: https://hackernoon.com/how-to-build-a-simple-blog-using-node-js-4ccdce39e78f