https://github.com/toh82/hbs-blog
Handlebarsjs helper collection to create a blog
https://github.com/toh82/hbs-blog
blog frontmatter handlebars-js hbs-blog static-site-generator
Last synced: 5 months ago
JSON representation
Handlebarsjs helper collection to create a blog
- Host: GitHub
- URL: https://github.com/toh82/hbs-blog
- Owner: toh82
- License: mit
- Created: 2017-04-05T10:44:02.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-25T17:50:53.000Z (over 8 years ago)
- Last Synced: 2025-09-22T08:46:06.056Z (10 months ago)
- Topics: blog, frontmatter, handlebars-js, hbs-blog, static-site-generator
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/hbs-blog
- Size: 17.6 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/toh82/hbs-blog/issues)
[](https://codeclimate.com/github/toh82/hbs-blog)
# hbs-blog
Handlebarsjs helper to create a static blog
## Install
The best way to install this module is by npm:
`npm install hbs-blog`
[hbs-blog on npm](https://www.npmjs.com/package/hbs-blog)
## Handlebarsjs helper
### Article list
The article list helper gives you the possibility to render a list from documents, within a given folder. Documents which should be listed needs a **FrontMatter** header.
The helper reads and provides the following data:
- index
- headline
- subline
- author
- date
- dateCode
- tags
- lang
- intro (read from a html with id `intro-text`)
- link (this is the link to the document)
- sticky (is used for position of the article within the article list)
- previewImage
If the helper has parameter for **respect sticky** set to true it will put the articles, which have set the property `sticky: true` within Front-Matter data, to the beginning of the list.
**Example**
```
{{#articleList '[base folder like ./src/]' '[folder of blog posts like posts/]' [respect sticky:true|false]}}
{{headline}}
{{author}}
...
{{/articleList}}
```
### Sticky list (see Article list)
The sticky list is a wrapper for the article list, which gives back only sticky articles (articles which have `sticky: true` property within **Front-Matter** header).
**Example**
```
{{#stickyList '[base folder like ./src/]' '[folder of blog posts like posts/]'}}
{{headline}}
{{author}}
...
{{/stickyList}}
```
### Tag navigation
The tag navigation helper walks through all files given in defined folder and reads the `tags` property from **FrontMatter** to generate a list of all available tags.
- title (title of the tag)
**Example**
```
Filter blog posts by tags:
```
### Markdown
The Markdown helper uses **Remarkable** to format markdown code to html. Yet not settings are added and be aware that, if there is a newline at the beginning of you text, the output will be messed up. Therefore, start your first line directly after the helper placeholder.
**Example**
```
{{#markdown}}#your markdown text{{/markdown}}
```
### Format tags
The **Format Tags** helper takes a comma separated list of tags and render them with the given html code.
- tag (tagname)
**Example**
```
```
### Format time (uses moment.js)
The **Format time** helper transform a date into a user-friendly format. It uses the [moment.js library](https://momentjs.com/docs/).
The `date` and `format` parameters are documented respectively [here](https://momentjs.com/docs/#/parsing/string/) and [here](https://momentjs.com/docs/#/parsing/string-format/).
**Example 1**
```
{{formatTime date format}}
```
**Example 2**
```
```
## Document Data Module (uses FrontMatter)
The document data module extends the `data` object with useful information which you can directly use as **handlebarsjs variables**. The main purpose is to push the [**FrontMatter**](https://www.npmjs.com/package/front-matter) properties into the `data` object but it also has system properties.
**System properties:**
- relativePath (provides the path to the file)
### Reading FrontMatter data from a document
In order to read data from a document use `lib/read-document-data`. It takes the document content as string and, if wanted, the data property name, which should be returned. If you don't pass the property name it will return all **FrontMatter** attributes, which can be read from the document.
### Gulp usage of document data
To read **FrontMatter** data from the document in the pipe, use `gulp/load-document-data`. It will read the data and pass it into the object `file.data` which can be accessed with handlebar placeholders. After processing with handlebars you should trigger `remove-document-data` what will remove the **FrontMatter** data from the output.
**Example:**
```
gulp.task('hbs', function () {
return gulp.src('./src/**/*.html')
.pipe(loadDocumentData())
.pipe(handlebars(pageConfig, options))
.pipe(removeDocumentData())
.pipe(gulp.dest('web'))
})
```