You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{ "date": "2025-12-18", "text": "Updated/improved the code of the layout base code in the 'How to load the same layout on every page' tutorial.", "link": "/coding/layout-base-code" },
3
5
{ "date": "2025-12-16", "text": "Changed relationship status to taken! :3 + other small changes and extended indie web contest deadline!", "link": "/contest" },
4
6
{ "date": "2025-12-07", "text": "Please consider donating to my ko-fi to help me finance raising a stray cat's kittens! Thank you!", "link": "https://ko-fi.com/petrastipjar/goal?g=0" },
5
7
{ "date": "2025-11-30", "text": "Advent calendar of digital challenges has been filled! Check it out tomorrow!", "link": "/fun/advent-calendar-2025" },
This is the page content, and the only element in the HTML file! The header and footer are both added via JavaScript, which means that the HTML code for them is in a singular JavaScript file
Tired of <ahref="/coding/common-questions.html#layout">having to update all of you HTML files every time you update your layout</a>? Here's an easy solution. We'll be using JavaScript to load a
18
18
header and footer on every page. We'll also take care of active links and relative paths.
19
19
</p>
20
-
<divclass="cw">Keep in mind that users who have deactivated JavaScript in their browser will not be able to navigate your site.</div>
21
20
21
+
<blockquoteclass="warning">Keep in mind that users who have deactivated JavaScript in their browser will not be able to navigate your site!</blockquote>
22
22
<!--
23
+
23
24
<blockquote class="contact">
24
25
<p>
25
26
If you have questions or feedback regarding the tutorial, please use the <a href="#comments">comment section</a> at the end of the page! Don't be shy; I know it's frustrating when you're stuck,
26
27
and I'd love to help.
27
28
</p>
28
29
</blockquote>
29
-
-->
30
+
30
31
31
32
<blockquote class="warning">
32
33
<p>Please note that due to the nested HTML generated by <b>sadgrl's layout maker</b> you can't use the code on this page as-is if you're using a layout generated with her layout maker!</p>
33
34
</blockquote>
34
-
35
+
-->
35
36
<blockquoteclass="tip">
36
-
Alternatively, you could also use a static site generator such as Eleventy (11ty). See <ahref="/coding/eleventy-tutorial">my tutorial here</a>. It's more difficult to set up but the result is
37
-
better!
37
+
Alternatively to this you could also use a static site generator such as Eleventy (11ty). See <ahref="/coding/eleventy-tutorial">my tutorial here</a>. It's much more difficult to set up but the
38
+
result is better, and works for those who have deactivated JavaScript too!
38
39
</blockquote>
39
40
40
-
<divid="toc">
41
+
<divid="toc"data-two-levels="true">
41
42
<b>Table of Contents:</b>
42
-
<ol>
43
-
<li><ahref="#what-it-will-do">What it will do</a></li>
44
-
<li><ahref="#tutorial">Tutorial</a></li>
45
-
<li><ahref="#comments">Comments</a></li>
46
-
</ol>
43
+
<ul>
44
+
<li>
45
+
<ahref="#what-it-will-do">What it will do</a>
46
+
<ul></ul>
47
+
</li>
48
+
<li>
49
+
<ahref="#tutorial">Tutorial</a>
50
+
<ol>
51
+
<li><ahref="#the-script">The Script</a></li>
52
+
<li><ahref="#loading-the-script">Loading the script</a></li>
53
+
<li><ahref="#insert-your-layout-code-in-the-javascript">Insert your layout code in the JavaScript</a></li>
54
+
<li><ahref="#prepare-your-pages">Prepare your pages</a></li>
<li>For your index file, or any other page that is not in a folder: <code><script src="layout.js"></script></code></li>
218
-
<li>For any file that is in a folder: <code><script src="../layout.js"></script></code></li>
219
-
<li>For files that are in a subfolder use <code>../../layout.js</code> , and so on. (add another ../ for every subfolder)</li>
220
-
</ul>
221
-
<p>This line should be inserted into the head of your HTML file (before </head>).</p>
222
-
</details>
280
+
<ul>
281
+
<li>For your index file, or any other page that is not in a folder: <code><script src="layout.js"></script></code></li>
282
+
<li>For any file that is in a folder: <code><script src="../layout.js"></script></code></li>
283
+
<li>For files that are in a subfolder use <code><script src="../../layout.js"></script></code> , and so on. (add another ../ for every subfolder)</li>
284
+
</ul>
285
+
<p>(This line should be inserted into the head of your HTML file (= inbetween <head> and </head>).)</p>
<p>Paste your header and footer inbetween the ticks (``) of the variables headerEl and footerEl.</p>
228
-
<blockquoteclass="tip">
229
-
<p>If you have a <b>sidebar</b>, either include it inside of your header element, or add it after the header element (but still in the headerEl JavaScript variable) (see code).</p>
230
-
</blockquote>
231
-
<p>Use <code>${nesting}</code> to output a . or .. or ../.. etc according to the current page's folder depth. This is helpful when you want to use relative paths to images.</p>
232
-
<p>Example:</p>
289
+
<h3data-step="3">Insert your layout code in the JavaScript</h3>
290
+
<p>In the javascript file, paste your header and footer inbetween the ticks (``) of the variables <i>headerEl</i> and <i>footerEl</i>.</p>
291
+
292
+
<h4>Sidebars</h4>
293
+
294
+
<p>If you have a <b>sidebar</b>, you have three options. Choose the best depending on how your original layout was structured:</p>
295
+
<ul>
296
+
<li>Include it inside of your header element</li>
297
+
<li>or: Add it after the header element (but still in the <i>headerEl</i> variable) like shown in the code above.</li>
298
+
<li>or: Use the <i>wrapperEl</i> variable (make sure to adjust the CSS selector!) to get your element in the HTML file and add additional elements inside it.</li>
299
+
</ul>
300
+
301
+
<h4>Images</h4>
302
+
<p>
303
+
Use <code>${nesting}</code> to output <code>.</code> or <code>..</code> or <code>../..</code> etc according to the current page's folder depth. This is helpful when you want to use relative paths
<p>Now, style your layout with CSS like you would normally do.</p>
333
+
<p>You don't need to make any changes in the CSS.</p>
259
334
<p>
260
-
My code adds the class "active" to any links that are linked to the current page. This makes it easy to style active menu links. Just make a CSS rule that checks for the "active" class,
<b>Tip: </b>My code adds the class "active" to any links that are linked to the current page. This makes it easy to style active menu links. Just make a CSS rule that checks for the "active"
336
+
class, e.g. <code>.active { font-weight:bold; }</code>
0 commit comments