Skip to content

Latest commit

 

History

History
181 lines (131 loc) · 6.23 KB

tweakingThePageStructure.md

File metadata and controls

181 lines (131 loc) · 6.23 KB

{% set title = "Tweaking the Page Structure" %} {% set filename = "tweakingThePageStructure" %} {{ title }}

title: "User Guide: {{ title }}" layout: userGuide.md pageNav: 3 [_User Guide → {{ title }}_]({{ filename }}.html)

Tweaking the Page Structure

MarkBind offers several ways to easily tweak the overall structure of a page, for example, using headers, footers, scripts, or stylesheets.

Layouts

MarkBind layouts can be used to provide structure and content around pages easily.

To add a layout, first add any source file to the _markbind/layouts folder. Then, specify the layout the page will use using one of the following:

If no layout is specified, the page defaults to the default layout (default.md).

When using markbind init, a default layout is provided in the _markbind/layouts folder.

Next, edit the layout file to your liking, and add the {% raw %}{{ content }}{% endraw %} variable where you want the page content to be rendered.

{% raw %}<head-bottom>
  <!-- Use head-top and head-bottom tags to insert content into the html <head> tag -->
  <link rel="stylesheet" href="{{baseUrl}}/css/main.css">
</head-bottom>

<!-- Create a sticky header using the sticky attribute in a <header> tag -->
<header sticky>
  <navbar type="dark">
    <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand">
      <img src="{{baseUrl}}/images/logo-darkbackground.svg" height="20">
    </a>
    <li>
      <a highlight-on="exact" href="{{baseUrl}}/index.html" class="nav-link">HOME</a>
    </li>
    <li tags="environment--ug">
      <a highlight-on="sibling-or-child" href="{{baseUrl}}/userGuide/index.html" class="nav-link">USER GUIDE</a>
    </li>
    <li tags="environment--dg">
      <a highlight-on="sibling-or-child" href="{{baseUrl}}/devGuide/index.html" class="nav-link">DEVELOPER GUIDE</a>
    </li>
    <li slot="right">
      <form class="navbar-form">
        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
      </form>
    </li>
  </navbar>
</header>

<div id="flex-body">
  <nav id="site-nav">
    <div class="site-nav-top">
      <div class="fw-bold mb-2" style="font-size: 1.25rem;">User Guide</div>
    </div>
    <div class="nav-component slim-scroll">
      <site-nav>
* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)
  * **Authoring Contents** :expanded:
  * [Overview]({{baseUrl}}/userGuide/authoringContents.html)
  * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)
  * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)
  * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)
  * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)
      </site-nav>
    </div>
  </nav>
  <div id="content-wrapper">
    <!-- Insert the page's content into the layout using the {{ content }} variable -->
    {{ content }}
  </div>
  <nav id="page-nav">
    <div class="nav-component slim-scroll">
      <!-- Insert a page navigation menu using the <page-nav /> component -->
      <page-nav />
    </div>
  </nav>
</div>

<footer>
  <div class="text-center">
    <small>[Generated by {{MarkBind}} on {{timestamp}}]</small><br>
    <small>This site is powered by <a href="https://www.netlify.com/">Netlify</a>.</small>
  </div>
</footer>{% endraw %}

<!-- Insert content after the html <body> tag using the <script-bottom> tag -->
<script-bottom>
  <script>
    alert('Hi!')
  </script>
</script-bottom>

The rest of this section explains the other convenient features MarkBind provides in its layouts system, and references the above code snippet.


Inserting content into the <head>

You can insert code into the <head> section of the generated HTML page, for example, to add links to custom JavaScript or CSS files.

You may do so by inserting the html <head> content into <head-top> and <head-bottom> tags in the layout file, which are inserted at the top and bottom (after MarkBind's assets) of the <head> tag respectively.

The above example shows the use of the <head-bottom> tag to insert a custom stylesheet (main.css).

Inserting scripts after the <body> tag

You may also insert html code after the <body> section of the generated HTML page. This is useful for including custom scripts. Simply insert the code / <script> tags into a <script-bottom> tag.

The above example shows the use of the <script-bottom> tag to show a browser alert box with the message 'Hi!'.

The scripts inserted here are processed last, after all of MarkBind's processing.

If you wish insert scripts at the bottom, before MarkBind's scripts, simply insert them into the bottom of the layout file.

Sticking the header to the top

Headers are commonly included inside the html <header> tag. In encouraging this, a convenient interface to implement sticky headers using the <header> tag is provided that ensures page anchors are positioned correctly.

Simply add the sticky attribute to your <header> element in the layout per the above example.

Constructing a site navigation menu easily


Constructing a page navigation menu


true
##

{% from "njk/common.njk" import previous_next %} {{ previous_next('usingHtmlJavaScriptCss', 'reusingContents') }}