From 7362e373c886fc000be161a233ffa4fe0550b036 Mon Sep 17 00:00:00 2001 From: Emmanuel Antico Date: Sun, 4 Jun 2017 16:54:42 -0300 Subject: [PATCH] actually fixing the markdown --- README.md | 98 +++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 74 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 4b746b7..011425c 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,13 @@ A Handlebars template loader for Webpack
+ **Table of Contents** - [Installation](#installation) - [Usage](#usage) - [Loading templates](#loading-templates) +- [Using helpers](#using-helpers) - [Using partials](#using-partials) - [Options](#options) - [Prepending filename comment](#prepending-filename-comment) @@ -17,6 +19,7 @@ A Handlebars template loader for Webpack - [Compilation options](#compilation-options) - [Macros](#macros) - [require](#require) + - [include](#include) - [repeat](#repeat) - [Custom macros](#custom-macros) - [Disabling macros](#disabling-macros) @@ -27,20 +30,25 @@ A Handlebars template loader for Webpack
-# Installation + +# Installation #
-``` + +```bash npm install handlebars-template-loader ```
-Since version 0.5.4, this loaders does not include Handlebars in its dependency list. Make sure to install Handlebars before running webpack. Read https://github.com/npm/npm/issues/6565 for details. + +>Since version 0.5.4, this loaders does not include Handlebars in its dependency list. Make sure to install Handlebars before running webpack. Read https://github.com/npm/npm/issues/6565 for details.
-# Usage + +# Usage #
+ ```javascript module.exports = { //... @@ -58,15 +66,18 @@ module.exports = { ```
-# Loading templates + +# Loading templates #
+ ```html

Hello {{name}}

```
+ ```javascript // File: app.js var compiled = require('./hello.hbs'); @@ -74,9 +85,11 @@ return compiled({name: "world"}); ```
-####Using helpers + +# Using helpers #
+ ```javascript // File: helpers.js @@ -104,6 +117,7 @@ Handlebars.registerHelper('link', function(text, url) { ```
+ ```javascript // File: main.js @@ -112,9 +126,11 @@ require("./helpers.js"); ```
-# Using partials + +# Using partials #
+ ```javascript // Get Handlebars instance var Handlebars = require('handlebars-template-loader/runtime'); @@ -128,14 +144,19 @@ require("./helpers.js"); ```
-# Options + +# Options #
-## Prepending filename comment + +## Prepending filename comment ##
+ When debugging a large single page app with the DevTools, it's often hard to find the template that contains a bug. With the following config a HTML comment is prepended to the template with the relative path in it (e.g. ``). +
+ ```javascript module.exports = { //... @@ -155,9 +176,11 @@ module.exports = { ```
-## Images + +## Images ##
+ In order to load images you must install either the `file-loader` or the `url-loader` package. ```javascript @@ -176,6 +199,7 @@ module.exports = { ```
+ ```html @@ -185,6 +209,7 @@ module.exports = { ```
+ Images with an absolute path are not translated unless a `root` option is defined ```html @@ -196,6 +221,7 @@ Images with an absolute path are not translated unless a `root` option is define ```
+ In order to deactivate image processing define the `attributes` option as an empty array. ```javascript @@ -217,9 +243,11 @@ module.exports = { ```
+ You could also add which attributes need to be processed in the form of pairs *tag:attribute*.
+ ```javascript module.exports = { //... @@ -272,12 +300,15 @@ module.exports = { ```
-## Compilation options + +## Compilation options ##
+ Handlebars does support [additional compilation options](http://handlebarsjs.com/reference.html) that you can specify in your `query` object literal.
+ ```javascript module.exports = { //... @@ -299,19 +330,22 @@ module.exports = { ```
-# Macros + +# Macros #
Macros allow additional features like including templates or inserting custom text in a compiled templates.
-require -------- + +## require ##
+ The `require` macro expects a path to a handlebars template. The macro is then translated to a webpack require expression that evaluates the template using the same arguments.
+ ```html

Profile

@@ -324,9 +358,11 @@ Surname: {{surname}} ```
-## require + +## include ##
+ While the `require` macro expects a resource that returns a function, the `include` macro can be used for resources that return plain text. For example, we can include text loaded through the `html-loader` directly in our template. ```html @@ -339,9 +375,11 @@ While the `require` macro expects a resource that returns a function, the `inclu ```
-## repeat + +## repeat ##
+ The `repeat` macro will repeat the given string the amount of times as specified by the second argument (default to 1). It will only accept string literals. ```html @@ -352,12 +390,15 @@ The `repeat` macro will repeat the given string the amount of times as specified ```
-## Custom macros + +## Custom macros ##
+ We can include additional macros by defining them in the webpack configuration file. Remember that the value returned by a macro is inserted as plain javascript, so in order to insert a custom text we need to use nested quotes. For example, let's say that we want a macro that includes a copyright string in our template.
+ ```javascript // File: webpack.config.js module.exports = { @@ -379,9 +420,11 @@ module.exports = { ```
+ We then invoke our macro from within the template as usual.
+ ```html