contentful-metalsmith, 从 Contentful API中提取内容的Metalsmith插件

分享于 

6分钟阅读

GitHub

  繁體 雙語
A plugin for Metalsmith that pulls content from the Contentful API
  • 源代码名称:contentful-metalsmith
  • 源代码网址:http://www.github.com/contentful/contentful-metalsmith
  • contentful-metalsmith源代码文档
  • contentful-metalsmith源代码下载
  • Git URL:
    git://www.github.com/contentful/contentful-metalsmith.git
    Git Clone代码到本地:
    git clone http://www.github.com/contentful/contentful-metalsmith
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/contentful/contentful-metalsmith
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    contentful-metalsmith

    Build StatusCoverage Status

    使用来自 Contentful的内容生成文件的Metalsmith插件。

    这个插件插件允许你使用存储在 Contentful的数据构建一个 static 站点。 它是构建在 Contentful JavaScript客户端的基础之上的。

    示例

    要了解这个工作原理,你可以查看一个示例博客站点,它是使用metalsmith生成的。

    启动

    安装

    $ npm install contentful-metalsmith

    配置所需的全局变量

    使用 metalsmith 时,编辑你的metalsmith.json 并在插件部分中添加 contentful-metalsmith

    // metalsmith.json{
     "source":"src",
     "destination":"build",
     "plugins": {
     "contentful-metalsmith": {
     "access_token":"YOUR_CONTENTFUL_ACCESS_TOKEN",
     "space_id":"YOUR_CONTENTFUL_SPACE_ID" }
     }
    }

    当你使用时,将添加到已经使用的插件中。

    metalsmith.source('src')metalsmith.destination('build')metalsmith.use(require('contentful-metalsmith')({ 'access_token':'YOUR_CONTENTFUL_ACCESS_TOKEN' }))

    全局参数:

    • access_token
    • space_id

    你可以在你的应用程序中找到 access_tokenspace_id at APIs -> Content delivery API Keys

    阅读所有全局参数并设置读取全局设置文档

    基于在源文件夹中定义的文件创建文件。

    我们考虑你使用 metalsmith布局文件呈现。 对于 layout 键,用于呈现的源文件和子模板。

    source/posts.html

    ---title: metalsmith-contentful filecontentful:
     content_type: postentry_filename_pattern: blog/post-${ sys.id }entry_template: post.htmllayout: posts.html---[OPTIONAL CONTENT]

    layouts/posts.html

    <!doctype html>
    <htmllang="en">
    <head>
     <metacharset="utf-8">
     <title>{{title}}</title>
     <metaname="description"content="No description">
     <metaname="author"content="Contentful">
     <linkrel="stylesheet"href="scss/style.css?v=1.0">
    </head>
    <body>
     <ul>
     <!-- available data fetched from contentful --> {{#each data.entries }}
     <li>
     <h2>{{fields.title}}</h2>
     <p>{{fields.description}}</p>
     <p><ahref="{{_fileName}}">Read more</a></p>
     </li>
     {{/each}}
     </ul>
     {{contents}}
    </body>
    </html>

    layouts/post.html

    <!doctype html>
    <htmllang="en">
    <head>
     <metacharset="utf-8">
     <title>{{data.fields.title}}</title>
     <metaname="description"content="No description">
     <metaname="author"content="Contentful">
     <linkrel="stylesheet"href="scss/style.css?v=1.0">
    </head>
    <body>
     <h1>{{data.fields.title}}<h1>
     <p>{{data.fields.description}}</p>
     {{contents}}
    </body>
    </html>

    这里示例的

    • 呈现 posts.html 提供内容类型 post的数据的数据
    • 使用模板 post.html 呈现几个单个文件,提供特定帖子的数据

    读取更多的源文件参数并设置读取源文件文档文档。

    命令行调试

    这个项目使用了调试引擎。 如果希望通过 contentful-metalsmith查看所有调试消息,可以通过设置通配符调试环境变量来实现。

    $ DEBUG=metalsmith-contentful* your command

    目前有两个不同的变量可以用于提供关于特定区域的信息:

    • metalsmith-contentful-files - 在处理之前/之后获取有关文件数据的信息
    • metalsmith-contentful-queries - 获取有关查询和相关文件的信息

    例如如果你想查看哪些文件进入插件并再次退出:

    $ DEBUG=metalsmith-contentful-files your command
    许可证

    MIT


    plugin  API  META  PULL  Metal  contentful  
    相关文章