]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Explain "Custom Helpers" in Panini 7510/head
authorEthan Hackett <ehackett@tricoresolutions.com>
Sat, 12 Dec 2015 02:36:09 +0000 (21:36 -0500)
committerEthan Hackett <ehackett@tricoresolutions.com>
Sat, 12 Dec 2015 02:36:09 +0000 (21:36 -0500)
It took me a little while to track down how to add a custom helper and since it's such a powerful aspect to handlebars and panini I thought it deserved a how to in the docs to save others time in tracking down how to use it.

docs/pages/panini.md

index b7563f02558835d238484e32ea39b60dabdb22de..b343c49bf3d11c4b81b60eff68afabe5948131f7 100644 (file)
@@ -118,7 +118,7 @@ The `../` is added only on pages in a sub-folder, so the CSS can still be proper
 
 ## Helpers
 
-Helpers are special functions that manipulate content on the page. In addition to [Handlebars's built-in helpers](http://handlebarsjs.com/builtin_helpers.html), Panini includes a few custom helpers.
+Helpers are special functions that manipulate content on the page. In addition to [Handlebars's built-in helpers](http://handlebarsjs.com/builtin_helpers.html), Panini includes a few custom helpers and you can add your own.
 
 ### ifpage
 
@@ -171,6 +171,24 @@ Lorem ipsum [dolor sit amet](http://html5zombo.com), consectetur adipisicing eli
 {{/markdown}}
 ```
 
+### Custom Helpers
+
+If you don't see the right helper, you can write your own. Add a javascript file to 'src/helpers', restart npm, then call it in your templates.
+
+```
+// Example file src/helpers/bold.js
+module.exports = function(options) {
+  // options.fn(this) = Handelbars content between {{#bold}} HERE {{/bold}}
+  var bolder = '<strong>' + options.fn(this) + '</strong>';
+  return bolder;
+}
+```
+Then in your projects call your custom `{{#bold}}` helper
+
+```
+{{#bold}}ideas{{/bold}}
+```
+
 ---
 
 ## Custom Data