activate-asciidoc-content.adoc

Activate AsciiDoc content

Table of Contents

• Configure Asciidoctor
• Create a page in AsciiDoc format
• Add About link to navbar
• Make it Sassy!
• Clean and preview site to see changes
• Next: Configure a theme for AsciiDoc and the website

Previous: Configure website name, title, author and organization

Tutorial 6

This tutorial…​

Configure Asciidoctor

_config/site.yml

# append
asciidoctor:
  :safe: safe
  :attributes:
    sitename: WriteAdapt
    base_url: ''
    ctx_path: ''
    idprefix: ''
    idseparator: '-'
    sectanchors: ''
    icons: font

Create a page in AsciiDoc format

about.adoc (NOT about.adoc.txt) in project folder

= About {sitename} (1)
Your Name
:page-layout: base (2)
:showtitle: (3)

[.lead]
{sitename} was founded by {author} during a conference workshop.
It's quickly becoming much bigger than this humble beginning.

This page is written in http://asciidoc.org[AsciiDoc].
It's transformed by http://awestruct.org[Awestruct] and http://asciidoctor.org[Asciidoctor] into a webpage for this static website.

1. Becomes main heading on the page

2. Specifies the layout to use to frame this content

3. Shows the page title as an h1 heading

Note	AsciiDoc does not require a special "front-matter" header. Instead, regular AsciiDoc attribute entries can be used. Attribute names that begin with page- are passed to Awestruct as front-matter variables.

Add About link to navbar

_layouts/base.html.haml

        %li.divider
          %li
            %a(href="#{site.ctx_path}/about.html") About

Make it Sassy!

Append to stylesheets/app.scss

.paragraph.lead > p {
  @extend %lead;
}

Clean and preview site to see changes

$ rake clean preview

Next: Configure a theme for AsciiDoc and the website