1. Basic Blog

A basic blog layout with two columns: on left the post dates, and on right the post content.

Example of Asciidoc document. See source text
[https://raw.github.com/llaville/asciidoc-bootstrap-backend/master/examples/demo2.asciidoc]
.

In first post, we used :

  • role attribute to customize css rules

  • citetitle and attribution attributes to identify sources of article.

  • asciidoc text formatting, for left column to show post date and possible tags.

In second post, we used also :

  • role attribute to customize css rules

  • asciidoc text formatting, for left column to show post date and the image inline macro to illustrate article by a thumbnail.

We used additional css rules added by file blog1.css to give such design.

@import url(user.css);

span.medium { font-size: 1.4em; }

.title .label-warning {
    padding: 10px;
}

div.timeline > p {
    text-align: right;
    float: right;
    margin: 0;
}

blockquote.timeline > .attribution, blockquote.timeline > small {
    text-align: right;
    color: #d3d3d3;
}

blockquote.timeline {
    margin-bottom: 0;
}

blockquote.timeline div.paragraph:nth-child(2) {
    margin: 0.5em 0;
    font-size: 100%;
}

blockquote.timeline div.paragraph {
    font-size: 12px;
}

2. Result with flatly theme

Invoke the following command:

$ asciidoc
  -b bootstrap
  -f /path/to/examples/demo2.conf
  -o blog1-sample.html
  /path/to/examples/demo2.asciidoc

And here are the final result that you should get.

images/screenshots/blog1-sample.png
Figure 1. My Blog with flatly theme

3. About options to generate documents

We reused and group all common attributes to generate documents in a standard asciidoc configuration file called demo2.conf.

[attributes]
linkcss
tocmmenu
numbered
lang=en
jumbotron
jumbotron-fullwidth
totop
theme=flatly
stylesheet=blog1.css
iconsfont=font-awesome
footer!
footer-fullwidth

invoke the following command:

$ asciidoc
  -b bootstrap
  -f /path/to/examples/bootstrap3.conf
  /path/to/examples/{docfile}
See
[http://asciidoc.org/userguide.html#X60]
 for docfile attribute.

With this configuration file called bootstrap3.conf

[attributes]
linkcss
numbered
tocmmenu
toclevels=2
lang=en
jumbotron
jumbotron-fullwidth
totop
stylesheet=user.css
iconsfont=font-awesome
theme=readable
themeswitcher
themeswitcher-cookiethemename=adocbsexamples.bootstrapTheme.name
themeswitcher-cookiethemecss=adocbsexamples.bootstrapTheme.css
navbar=fixed
navinfo1
footer!
footer-fullwidth

And custom user stylesheet called user.css

a.toc-top-link {
    right: 0.5em;
    position: absolute;
}
.mm-menu {
    width: 70%;
}
.mm-listview .mm-next::before {
    border-left-style: none;
}
.jumbotron .toc-top-link {
    display: none;
}