epubjs

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html><html xmlns:epub="http://www.idpf.org/2007/ops" xmlns="http://www.w3.org/1999/xhtml"><head><title>Includes</title><link rel="stylesheet" type="text/css" href="epub.css"/></head><body data-type="book"><section data-type="chapter" epub:type="chapter" data-pdf-bookmark="Chapter 11. Includes"><div class="chapter" id="idp1316544"> <h1><span class="label">Chapter 11. </span>Includes</h1> <section data-type="sect1" data-pdf-bookmark="What are Includes?"><div class="sect1" id="idp1317728"> <h1>What are Includes?</h1> </div></section> <section data-type="sect1" data-pdf-bookmark="Using Includes In Your Project"><div class="sect1" id="idp1318896"> <h1>Using Includes In Your Project</h1> <p>There are a few <strong>includes</strong> built in to Atlas. These <strong>includes</strong> are documented <a href="#">here</a>. Let’s go over using two different <strong>includes</strong>.</p> <section data-type="sect2" data-pdf-bookmark="Basic Includes"><div class="sect2" id="idp1322400"> <h2>Basic Includes</h2> <p>The simplest <strong>include</strong> inserts HTML in its place. This can be useful for boilerplate content that is tiresome to type over and over.</p> <section data-type="sect3" data-pdf-bookmark="Syntax"><div class="sect3" id="idp1324464"> <h3>Syntax</h3> <p>The syntax for a basic <strong>include</strong> is as follows</p> <pre> {% include 'x' %} </pre> <p>Instead of typing <em>x</em>, type the name of the <strong>include</strong> you wish to use. The important parts of the above syntax are:</p> <ul> <li>Empty lines above and below the <strong>include</strong></li> <li>Starting with <code>{% include</code> and ending with <code>%}</code></li> <li>Surrounding the name of the <strong>include</strong> with quote marks.</li> </ul> </div></section> <section data-type="sect3" data-pdf-bookmark="Example"><div class="sect3" id="idp1331680"> <h3>Example</h3> <p>In this example we have an include named <em>oreillyaddress</em> that inserts O’Reilly Media’s mailing address.</p> <p>Typing the following into a file:</p> <pre data-type="programlisting">this is a sentence I wrote {% include 'oreillyaddress' %} this is another sentence</pre> <p>Will result in the following:</p> <pre data-type="programlisting"><p>this is a sentence I wrote</p> <p>O'Reilly Media, Inc.<br/> 1005 Gravenstein Hwy N<br/> Sebastopol, CA 95472</p> <p>this is another sentence</p></pre> </div></section> </div></section> <section data-type="sect2" data-pdf-bookmark="Includes with Variables"><div class="sect2" id="idp1336448"> <h2>Includes with Variables</h2> <p><strong>Includes</strong> can also use variables to create dynamic content, such as embedding a video from Youtube.</p> <section data-type="sect3" data-pdf-bookmark="Syntax"><div class="sect3" id="idp1338080"> <h3>Syntax</h3> <p>The syntax for an <strong>include</strong> with a variable is as follows:</p> <pre> {% include 'x' with 'y' %} </pre> <p>As in the Basic Include Syntax, replace <em>x</em> with the name of the <strong>include</strong>. And replace <em>y</em> with the value you wish to pass to the <strong>include</strong>. Be sure to keep the quote marks.</p> <ul> <li>Empty lines above and below the <strong>include</strong></li> <li>Starting with <code>{% include</code> and ending with <code>%}</code></li> <li>Surrounding the name of the <strong>include</strong> with quote marks.</li> <li>After the name of the <strong>include</strong> type <code>with</code></li> <li>After <code>with</code> type the value of the variable to pass to the <strong>include</strong>, surrounded in quotes.</li> </ul> </div></section> <section data-type="sect3" data-pdf-bookmark="Example"><div class="sect3" id="idp1348864"> <h3>Example</h3> <p>Atlas has a ‘youtube’ include that embeds a video for you when you give it the id of a video. Typing the following into a file:</p> <pre data-type="programlisting">this is a sentence I wrote {% include 'youtube' with 'txqiwrbYGrs' %} this is another sentence I wrote</pre> <p>Will result in the following:</p> <pre data-type="programlisting"><p>this is a sentence I wrote</p> <iframe width="420" height="315" src="//www.youtube.com/embed/txqiwrbYGrs" frameborder="0" allowfullscreen></iframe> <p>this is another sentence</p></pre> </div></section> </div></section> </div></section> <section data-type="sect1" data-pdf-bookmark="Writing Your Own Includes"><div class="sect1" id="idp1353024"> <h1>Writing Your Own Includes</h1> <p>To write your own <strong>include</strong>, follow these steps:</p> <ol> <li>Create a folder in your project at the top level named <code>includes</code>.</li> <li>Inside the new <code>includes</code> folder, create a file with a name following the format: <code>_something.liquid</code>. That is, create a file that starts with an underscore (<em>) and then the name of the <strong>include</strong> as you’d like to use it, _no spaces</em>. And finally, use the extension <code>.liquid</code>.</li> <li>Open the file you created, <code>includes/_something.liquid</code>, you can write a template here with a variable matching the name of the file. So if your file is named <code>_something.liquid</code> then the following would be a variable in that file: <code>{{ something }}</code></li> </ol> </div></section> <section data-type="sect1" data-pdf-bookmark="Disabling Includes and Templating"><div class="sect1" id="idp1361040"> <h1>Disabling Includes and Templating</h1> <p>If you would like to prevent '{{', '{%', '%}' and '}}' from triggering template calls, you can include the following in the <code>atlas.json</code> file:</p> <pre data-code-language="json" data-type="programlisting"><code class="s2">"templating"</code> <code class="err">:</code> <code class="s2">"false"</code></pre> </div></section> </div></section></body></html>