Skip to content

Latest commit

 

History

History
27 lines (22 loc) · 1.87 KB

02-create-page.md

File metadata and controls

27 lines (22 loc) · 1.87 KB

Create a new page

To create a new page for the website, you need to

  • Create a new HTML page frame inside the website's root directory, e.g. copy the how-to-vote.html file to my-new-page.html
  • Adopt the front matter (meta-data) of this new page frame (inside the HTML file):
    • layout selects the header/footer frame from _layouts/
    • title is optional and should only be given, if this new page shall be visible in the main header- & footer-menus. It specifies the translation key for the new page's title -> this key needs to be added (translated) in _i18n/en.yml -> pages:
    • namespace is a unique id of this page (same for all languages), and can be used to link to this page via the translate_link my-new-page macro
    • permalink is the browser visible URL of this page, should be SEO friendly
---
layout: default
title: pages.myNewPage

namespace: my-new-page
permalink: /my-new-page/
---
  • Create the file structure & markdown files needed for your page content, e.g. create a _i18n/en/my-new-page folder, which contains section1.md & section2.md
    • Include those markdown files inside the HTML page frame via the translate_file my-new-page/section1.md macro
    • Adopt the HTML structure/sections as needed (e.g. via Bootstrap CSS) and create corresponding markdown files inside your _i18n/en/my-new-page/ folder, which you include into your HTML via the translate_file macro.
  • Create an optional stylesheet inside _sass/my-new-page.scss and import it via _sass/custom.scss -> @import 'my-new-page.scss';
    • Also adopt the main CSS class of the my-new-page.html page frame (first line of HTML, directly after the front-matter): <div class="my-new-page">
    • This way you can write CSS rules inside my-new-page.scss, which only apply for this page, e.g.: .my-new-page p { color: red }