Yesterday, I accidentally figured out that you can use a Jade template “block” in more than one location, and any content you put into the block will show up in all of the locations. It’s a pretty simple trick, but it made setting the page
and <h1> title blocks in <a href="http://signalleaf.com">SignalLeaf</a> a lot easier than I expected.</p>
<h2 id="setup-the-blocks">Setup The Blocks</h2>
<p>In your layout.jade file, add a <code>block title</code> to your <code><title></code> tag, and also in the body of your document where you want the page title to be displayed.</p>
<script src="https://gist.github.com/6918552.js?file=layout.jade"></script>
<p>Notice the extra info that I included in the <code><title></code> tag. You can put whatever you want prior to, inside of, and after the <code>block title</code> The resulting <code><title></code> tag will contain all of the content that you specify, including the content within the block, by default. This gives you a default page title for any page that forgets to include a <code>block title</code>.</p>
<h2 id="set-the-title-in-a-page">Set The Title In A Page</h2>
<p>Once you have the layout set up, you can specify a <code>block title</code> in any content page that extends from the layout.</p>
<script src="https://gist.github.com/6918552.js?file=somePage.jade"></script>
<p>When you do this, the result is a page that has both the <code><title></code> tag and the page’s <code><h1></code> title set to the same content.</p>
</span>
</div>
<div style="margin-top:15px; margin-bottom:10px">
<span class="next">
←
<a href="/derickbailey/2013/09/23/getting-audio-file-information-with-htmls-file-api-and-audio-element/">
Getting Audio File Information With HTML’s File API And Audio Element
</a>
</span>
<div style="float:right">
<span class="prev" >
<a href="/derickbailey/2013/10/15/im-speaking-at-codemash-2014-solid-javascript-for-a-wobbly-world-wide-web/">
I’m Speaking At CodeMash 2014: SOLID JavaScript For A Wobbly World (wide web)
</a>
→
</span>
</div>
</div>
</div>
<div class="column is-4">
<div class="sidebar">
<div id="recentAuthorPostsContainer" class="widget">
<div class="card">
<header class="card-header">
<p class="card-header-title nice-title">
Recent Author Posts
</p>
</header>
<div class="card-content">
<div class="content nice-text">
<ul id="recentAuthorPosts"></ul>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="card">
<header class="card-header">
<p class="card-header-title nice-title">
Recent Site Posts
</p>
</header>
<div class="card-content">
<div class="content nice-text">
<ul id="recentPosts"></ul>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="card">
<header class="card-header">
<p class="card-header-title nice-title">
Authors
</p>
</header>
<div class="card-content">
<div class="content nice-text">
<ul id="authors"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<a class="icon" href="mailto:lostechies@gmail.com">
<i class="fa fa-envelope" title="Email"></i>
</a>
</p>
<p class="consent-footer-link">
<a href="#cookie-preferences" id="cookie-preferences-link">Cookie preferences</a>
</p>
</div>
</div>
</footer>
<div id="consent-banner"
class="consent-banner"
role="dialog"
aria-labelledby="consent-banner-title"
aria-describedby="consent-banner-text"
hidden>
<div class="consent-banner-content">
<p id="consent-banner-title" class="consent-banner-title">Cookies & analytics</p>
<p id="consent-banner-text" class="consent-banner-text">
This site uses Google Analytics to understand which posts get read. No analytics cookies are set unless you accept. Nothing here is required for the site to work.
</p>
<div class="consent-banner-buttons">
<button type="button" class="button is-small consent-decline">Decline non-essential</button>
<button type="button" class="button is-small is-dark consent-accept">Accept all</button>
</div>
</div>
</div>
<script src="/assets/js/fetch.js"></script>
<script src="/assets/js/collections.js"></script>
<script src="/assets/js/dom.js"></script>
<script src="/assets/js/nav.js"></script>
<script src="/assets/js/theme.js"></script>
<script src="/assets/js/search.js"></script>
<script src="/assets/js/feed.js"></script>
<script src="/assets/js/load-authors.js"></script>
<script src="/assets/js/load-recent-posts.js"></script>
<script>
window.GA_MEASUREMENT_ID = "G-6DK8Y2SBT2";
</script>
<script src="/assets/js/consent.js"></script>
<script src="/assets/js/load-recent-author-posts.js"></script>
<script>
var page_collection = "derickbailey";
var collectionFeed = "";
var collection = collections.find(function(col) {
return col.label === "derickbailey";
});
loadAuthors("authors");
loadRecentPosts("recentPosts");
loadRecentAuthorPosts("recentAuthorPosts", "recentAuthorPostsContainer");
</script>
</body>
</html>
