codecamp

Harp 如何创建帖子列表

这篇文章教你如何创建你的博客贴子的一个列表,每一个条目包含标题、链接以及贴子内容。

目录结构

给定一个这样的目录结构:

/public
  /posts
    _data.json
    my-first-post.md
    my-second-post.md
  /index.jade    <-- or index.ejs

帖子数据

添加一个这样的 /public/posts/_data.json :

{
  "my-second-post": {
    "title": "My second post"
  },
  "my-first-post": {
    "title": "My first post"
  }
}

使用 Jade 列出

你可以在 Jade 中这样遍历你的贴子:

for post, slug in public.posts._data
  h2: a(href="/posts/#{ slug }")= post.title
  != partial("posts/" + slug)

使用 EJS 列出

或者在 EJS 中:

<% for(var slug in public.posts._data){ %>
  <h2><a href="/posts/<%= slug %>"><%= public.posts._data[slug].title %></a></h2>
  <%- partial("posts/" + slug) %>
<% }; %>

工作原理

我们正在使用 for 迭代器来遍历 /public/posts/_data.json 中的数据。可以通过 public.posts._data 获取到贴子数据对象。


Harp 部署到Microsoft Azure
Harp 如何获取每页的自定义标题和描述
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }