Property | Value |
---|---|
file | "/srv/home/renard/.emacs.d/el-get/o-blog/example/sample.org" |
buffer | #<buffer emacs.d:el-get/o-blog/example/sample.org> |
publish-dir | "out" |
template-dir | "/srv/home/renard/.emacs.d/el-get/o-blog/templates" |
style-dir | "style" |
posts-filter | "+TODO=\"DONE\"" |
static-filter | "+PAGE={.+.html}" |
snippet-filter | "+SNIPPET={.+}" |
title | "o-blog" |
description | "Description" |
post-build-shell | ("cmd 4" "cmd 3" "cmd 2" "cmd 1") |
Property | Value |
---|---|
id | 0 |
title | "Adding an image into a post" |
timespamp | (20531 18964) |
year | 2012 |
month | 8 |
day | 21 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil] [cl-struct-ob:tags "o-blog" "o-blog" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/08" |
filename | "adding-an-image-into-a-post" |
htmlfile | "tips/2012/08/21_adding-an-image-into-a-post.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil #+BEGIN_HTML <div class=\"row \"><div class=\"span8 \"> #+END_HTML Adding an image to a post is pretty simple since [[http://orgmode.org][Org-mode]] offers a special link scheme for that. Image source file can be stored anywhere since its path is valid. During the export process, the image file is copied into a folder related to the post and all links are corrected to point to its new location. #+BEGIN_HTML <div class=\"row \"><div class=\"span5 \"> #+END_HTML For example, the following piece of code will copy the =emacs-logo.png= from the current directory and is is then copied into it into =tips/2012/08/21_adding-an-image-into-a-post/emacs-logo.png=. #+BEGIN_HTML </div><div class=\"span3 \"> #+END_HTML #+BEGIN_SRC org file:emacs-logo.png #+END_SRC #+BEGIN_HTML </div></div> #+END_HTML #+BEGIN_HTML </div><div class=\"span4 \"> #+END_HTML [[file:../../../tips/2012/08/21_adding-an-image-into-a-post/emacs-logo.png]] #+BEGIN_HTML </div></div> #+END_HTML The HTML result is something similar to: #+BEGIN_SRC html <img src=\"21_adding-an-image-into-a-post/emacs-logo.png\" alt=\"21_adding-an-image-into-a-post/emacs-logo.png\" /> #+END_SRC A best practice is to have all files info a =/files= folder. Then you can create a sub-folder for each posts such as: - =/files/post1/file1= - =/files/post1/file2= - =/files/post2/file= - ... " |
content-html | "<div class=\"row \"><div class=\"span8 \"> <p> Adding an image to a post is pretty simple since <a href=\"http://orgmode.org\">Org-mode</a> offers a special link scheme for that. Image source file can be stored anywhere since its path is valid. During the export process, the image file is copied into a folder related to the post and all links are corrected to point to its new location. </p> <div class=\"row \"><div class=\"span5 \"> <p> For example, the following piece of code will copy the <code>emacs-logo.png</code> from the current directory and is is then copied into it into <code>tips/2012/08/21_adding-an-image-into-a-post/emacs-logo.png</code>. </p> </div><div class=\"span3 \"> <pre class=\"src src-org\"><span style=\"color: #00ffff; text-decoration: underline;\">file:emacs-logo.png</span> </pre> </div></div> </div><div class=\"span4 \"> <p> <img src=\"../../../tips/2012/08/21_adding-an-image-into-a-post/emacs-logo.png\" alt=\"../../../tips/2012/08/21_adding-an-image-into-a-post/emacs-logo.png\" /> </p> </div></div> <p> The HTML result is something similar to: </p> <pre class=\"src src-html\"><<span style=\"color: #edd400; font-weight: bold;\">img</span> <span style=\"color: #eeeeec;\">src</span>=<span style=\"color: #ad7fa8;\">\"21_adding-an-image-into-a-post/emacs-logo.png\"</span> <span style=\"color: #eeeeec;\">alt</span>=<span style=\"color: #ad7fa8;\">\"21_adding-an-image-into-a-post/emacs-logo.png\"</span> /> </pre> <p> A best practice is to have all files info a <code>/files</code> folder. Then you can create a sub-folder for each posts such as: </p><ul> <li><code>/files/post1/file1</code> </li> <li><code>/files/post1/file2</code> </li> <li><code>/files/post2/file</code> </li> <li>… </li> </ul> " |
Property | Value |
---|---|
id | 1 |
title | "Create static pages" |
timespamp | (20410 7520) |
year | 2012 |
month | 5 |
day | 21 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil] [cl-struct-ob:tags "Bootstrap" "bootstrap" nil nil] [cl-struct-ob:tags "o-blog" "o-blog" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/05" |
filename | "create-static-pages" |
htmlfile | "tips/2012/05/21_create-static-pages.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil #+BEGIN_HTML <div class=\"row \"><div class=\"span7 \"> #+END_HTML Static pages are create exactly like blog pages. The only thing you need to add is a =PAGE= property. The exported path is relative to =#+PUBLISH_DIR:=. You can also specify a custom template for your static page by adding a =TEMPLATE= property. The template path is relative to =#+TEMPLATE_DIR:=. #+BEGIN_HTML </div><div class=\"span4 \"> #+END_HTML #+BEGIN_SRC org ,* Static page , :PROPERTIES: , :PAGE: path/to/static/page.html , :TEMPLATE: static-page.html , :END: #+END_SRC #+BEGIN_HTML </div></div> #+END_HTML " |
content-html | "<div class=\"row \"><div class=\"span7 \"> <p> Static pages are create exactly like blog pages. The only thing you need to add is a <code>PAGE</code> property. The exported path is relative to <code>#+PUBLISH_DIR:</code>. </p> <p> You can also specify a custom template for your static page by adding a <code>TEMPLATE</code> property. The template path is relative to <code>#+TEMPLATE_DIR:</code>. </p> </div><div class=\"span4 \"> <pre class=\"src src-org\"><span style=\"color: #edd400; font-weight: bold;\">* Static page</span> <span style=\"color: #729fcf; font-weight: bold;\"> :PROPERTIES:</span> <span style=\"color: #729fcf; font-weight: bold;\">:PAGE:</span> path/to/static/page.html <span style=\"color: #729fcf; font-weight: bold;\">:TEMPLATE:</span> static-page.html <span style=\"color: #729fcf; font-weight: bold;\"> :END:</span> </pre> </div></div> " |
Property | Value |
---|---|
id | 2 |
title | "Add a custom font" |
timespamp | (20391 56904) |
year | 2012 |
month | 5 |
day | 7 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil] [cl-struct-ob:tags "Bootstrap" "bootstrap" nil nil] [cl-struct-ob:tags "o-blog" "o-blog" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/05" |
filename | "add-a-custom-font" |
htmlfile | "tips/2012/05/07_add-a-custom-font.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil [[http://www.google.com/webfonts][Google webfonts]] can be easily used in o-blog in 2 different ways: using the Google API, or by providing resources in the =templates/style= directory. #+BEGIN_HTML <div class=\"alert alert-warning\"><p class=\"alert-heading\">Caution</p> #+END_HTML Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage. #+BEGIN_HTML </div> #+END_HTML Both examples below use the [[http://www.yanone.de/typedesign/kaffeesatz/][Yanone Kaffeesatz]] font. ** Using Google API The [[http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:][quick use]] provides an import snippet such as: #+BEGIN_SRC css @import url(\"http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700&subset=latin,latin-ext\"); #+END_SRC That line should be included into the =templates/style/less/o-blog-default.less= file in which you should also add something like: #+BEGIN_SRC css h1, h2, h3, h4, h5, h6 { font-family: \"Yanone Kaffeesatz\", sans-serif; } #+END_SRC And that's it. ** Providing resources That is less efficient in terms of network resources but provides a good alternative for offline publications. The script =get-font= does all needed jobs. #+BEGIN_HTML <div class=\"o-blog-source\"><a class=\"btn btn-info\" data-toggle=\"modal\" data-target=\"#get-font\" ><i class=\"icon-file icon-white\"></i> get-font</a></div><div class=\"modal fade hide\" id=\"get-font\"><div class=\"modal-header\"><a class=\"close\" data-dismiss=\"modal\">×</a><h3>get-font</h3></div><div class=\"modal-body\"><pre> <span style=\"color: #888a85;\">#</span><span style=\"color: #888a85;\">!/bin/</span><span style=\"color: #729fcf; font-weight: bold;\">sh</span><span style=\"color: #888a85;\"> </span> <span style=\"color: #729fcf; font-weight: bold;\">if </span><span style=\"color: #729fcf;\">test</span> -z <span style=\"color: #ad7fa8;\">\"$1\"</span>; <span style=\"color: #729fcf; font-weight: bold;\">then</span> <span style=\"color: #729fcf;\">echo</span> <span style=\"color: #ad7fa8;\">\"Usage: $0 font-url\"</span> <span style=\"color: #729fcf; font-weight: bold;\">exit</span> 1 <span style=\"color: #729fcf; font-weight: bold;\">fi</span> <span style=\"color: #eeeeec;\">FONT_DIR</span>=templates/style/font <span style=\"color: #eeeeec;\">LESS_DIR</span>=templates/style/less <span style=\"color: #eeeeec;\">FONT_URL</span>=<span style=\"color: #ad7fa8;\">\"$1\"</span> <span style=\"color: #eeeeec;\">LESS_FILE</span>=$(<span style=\"color: #729fcf;\">echo</span> <span style=\"color: #ad7fa8;\">\"$FONT_URL\"</span> | sed -n <span style=\"color: #ad7fa8;\">'s/.*family=\\([^:]\\+\\).*/\\1/p'</span> | sed <span style=\"color: #ad7fa8;\">'s/+/-/g'</span>) <span style=\"color: #888a85;\"># </span><span style=\"color: #888a85;\">Wee need to provide a valid user agent to get woff fonts </span><span style=\"color: #eeeeec;\">UA</span>=<span style=\"color: #ad7fa8;\">'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.65 Safari/535.11'</span> <span style=\"color: #eeeeec;\">CSS</span>=$(curl -H <span style=\"color: #ad7fa8;\">\"${UA}\"</span> ${<span style=\"color: #eeeeec;\">FONT_URL</span>}) <span style=\"color: #729fcf;\">echo</span> <span style=\"color: #ad7fa8;\">\"${CSS}\"</span> | sed -n <span style=\"color: #ad7fa8;\">\"s#.*local('\\([^']\\+\\)'), url('\\([^']\\+\\)').*#curl -o ${FONT_DIR}/\\1.woff \\2#p\"</span> | sh - <span style=\"color: #729fcf;\">echo</span> <span style=\"color: #ad7fa8;\">\"${CSS}\"</span> | sed <span style=\"color: #ad7fa8;\">\"s#\\(.*\\)local('\\([^']\\+\\)'), url('\\([^']\\+\\)')\\(.*\\)#\\1local('\\2'), url('../font/\\2.woff')\\4#\"</span> > <span style=\"color: #ad7fa8;\">\"${LESS_DIR}/font-${LESS_FILE}.less\"</span> <span style=\"color: #729fcf;\">echo</span> <span style=\"color: #ad7fa8;\">\"You should add '@import \\\"font-${LESS_FILE}.less\\\";' to templates/style/less/o-blog-default.less\"</span> </pre></div></div> #+END_HTML You can run: #+BEGIN_SRC sh ./get-font 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700&subset=latin,latin-ext' #+END_SRC And add the font declaration in =templates/style/less/o-blog-default.less=: #+BEGIN_SRC css @import \"font-Yanone-Kaffeesatz.less\"; #+END_SRC Finally, declare its use as in the Google API version: #+BEGIN_SRC css h1, h2, h3, h4, h5, h6 { font-family: \"Yanone Kaffeesatz\", sans-serif; } #+END_SRC" |
content-html | "<p> <a href=\"http://www.google.com/webfonts\">Google webfonts</a> can be easily used in o-blog in 2 different ways: using the Google API, or by providing resources in the <code>templates/style</code> directory. </p> <div class=\"alert alert-warning\"><p class=\"alert-heading\">Caution</p> <p> Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage. </p> </div> <p> Both examples below use the <a href=\"http://www.yanone.de/typedesign/kaffeesatz/\">Yanone Kaffeesatz</a> font. </p> <div id=\"outline-container-1\" class=\"outline-3\"> <h3 id=\"sec-1\">Using Google API</h3> <div class=\"outline-text-3\" id=\"text-1\"> <p> The <a href=\"http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:\">quick use</a> provides an import snippet such as: </p> <pre class=\"src src-css\"><span style=\"color: #729fcf;\">@import</span> url(<span style=\"color: #ad7fa8;\">\"http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700&subset=latin,latin-ext\"</span>); </pre> <p> That line should be included into the <code>templates/style/less/o-blog-default.less</code> file in which you should also add something like: </p> <pre class=\"src src-css\"><span style=\"color: #edd400; font-weight: bold;\">h1, h2, h3, h4, h5, h6 </span>{ <span style=\"color: #eeeeec;\">font-family</span>: <span style=\"color: #ad7fa8;\">\"Yanone Kaffeesatz\"</span>, sans-serif; } </pre> <p> And that's it. </p> </div> </div> <div id=\"outline-container-2\" class=\"outline-3\"> <h3 id=\"sec-2\">Providing resources</h3> <div class=\"outline-text-3\" id=\"text-2\"> <p> That is less efficient in terms of network resources but provides a good alternative for offline publications. </p> <p> The script <code>get-font</code> does all needed jobs. </p> <div class=\"o-blog-source\"><a class=\"btn btn-info\" data-toggle=\"modal\" data-target=\"#get-font\" ><i class=\"icon-file icon-white\"></i> get-font</a></div><div class=\"modal fade hide\" id=\"get-font\"><div class=\"modal-header\"><a class=\"close\" data-dismiss=\"modal\">×</a><h3>get-font</h3></div><div class=\"modal-body\"><pre> <span style=\"color: #888a85;\">#</span><span style=\"color: #888a85;\">!/bin/</span><span style=\"color: #729fcf; font-weight: bold;\">sh</span><span style=\"color: #888a85;\"> </span> <span style=\"color: #729fcf; font-weight: bold;\">if </span><span style=\"color: #729fcf;\">test</span> -z <span style=\"color: #ad7fa8;\">\"$1\"</span>; <span style=\"color: #729fcf; font-weight: bold;\">then</span> <span style=\"color: #729fcf;\">echo</span> <span style=\"color: #ad7fa8;\">\"Usage: $0 font-url\"</span> <span style=\"color: #729fcf; font-weight: bold;\">exit</span> 1 <span style=\"color: #729fcf; font-weight: bold;\">fi</span> <span style=\"color: #eeeeec;\">FONT_DIR</span>=templates/style/font <span style=\"color: #eeeeec;\">LESS_DIR</span>=templates/style/less <span style=\"color: #eeeeec;\">FONT_URL</span>=<span style=\"color: #ad7fa8;\">\"$1\"</span> <span style=\"color: #eeeeec;\">LESS_FILE</span>=$(<span style=\"color: #729fcf;\">echo</span> <span style=\"color: #ad7fa8;\">\"$FONT_URL\"</span> | sed -n <span style=\"color: #ad7fa8;\">'s/.*family=\\([^:]\\+\\).*/\\1/p'</span> | sed <span style=\"color: #ad7fa8;\">'s/+/-/g'</span>) <span style=\"color: #888a85;\"># </span><span style=\"color: #888a85;\">Wee need to provide a valid user agent to get woff fonts </span><span style=\"color: #eeeeec;\">UA</span>=<span style=\"color: #ad7fa8;\">'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.65 Safari/535.11'</span> <span style=\"color: #eeeeec;\">CSS</span>=$(curl -H <span style=\"color: #ad7fa8;\">\"${UA}\"</span> ${<span style=\"color: #eeeeec;\">FONT_URL</span>}) <span style=\"color: #729fcf;\">echo</span> <span style=\"color: #ad7fa8;\">\"${CSS}\"</span> | sed -n <span style=\"color: #ad7fa8;\">\"s#.*local('\\([^']\\+\\)'), url('\\([^']\\+\\)').*#curl -o ${FONT_DIR}/\\1.woff \\2#p\"</span> | sh - <span style=\"color: #729fcf;\">echo</span> <span style=\"color: #ad7fa8;\">\"${CSS}\"</span> | sed <span style=\"color: #ad7fa8;\">\"s#\\(.*\\)local('\\([^']\\+\\)'), url('\\([^']\\+\\)')\\(.*\\)#\\1local('\\2'), url('../font/\\2.woff')\\4#\"</span> > <span style=\"color: #ad7fa8;\">\"${LESS_DIR}/font-${LESS_FILE}.less\"</span> <span style=\"color: #729fcf;\">echo</span> <span style=\"color: #ad7fa8;\">\"You should add '@import \\\"font-${LESS_FILE}.less\\\";' to templates/style/less/o-blog-default.less\"</span> </pre></div></div> <p> You can run: </p> <pre class=\"src src-sh\">./get-font <span style=\"color: #ad7fa8;\">'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700&subset=latin,latin-ext'</span> </pre> <p> And add the font declaration in <code>templates/style/less/o-blog-default.less</code>: </p> <pre class=\"src src-css\"><span style=\"color: #729fcf;\">@import</span> <span style=\"color: #ad7fa8;\">\"font-Yanone-Kaffeesatz.less\"</span>; </pre> <p> Finally, declare its use as in the Google API version: </p> <pre class=\"src src-css\"><span style=\"color: #edd400; font-weight: bold;\">h1, h2, h3, h4, h5, h6 </span>{ <span style=\"color: #eeeeec;\">font-family</span>: <span style=\"color: #ad7fa8;\">\"Yanone Kaffeesatz\"</span>, sans-serif; } </pre> </div> </div> " |
Property | Value |
---|---|
id | 3 |
title | "Some bootstrap features" |
timespamp | (20386 57104) |
year | 2012 |
month | 5 |
day | 3 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil] [cl-struct-ob:tags "Bootstrap" "bootstrap" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/05" |
filename | "some-bootstrap-features" |
htmlfile | "tips/2012/05/03_some-bootstrap-features.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil ** Hero-unit #+BEGIN_HTML <div class=\"row \"><div class=\"span7 \"> #+END_HTML #+BEGIN_SRC org ,#+begin_o_blog_hero_unit ,#+HTML: <h1>Heading</h1> , tagline ,#+BEGIN_HTML , <a class=\"btn btn-primary btn-large\"> , Learn more , </a> ,#+END_HTML ,#+end_o_blog_hero_unit #+END_SRC #+BEGIN_HTML </div><div class=\"span4 \"> #+END_HTML #+BEGIN_HTML <div class=\"hero-unit\"> #+END_HTML #+HTML: <h1>Heading</h1> tagline #+BEGIN_HTML <a class=\"btn btn-primary btn-large\"> Learn more </a> #+END_HTML #+BEGIN_HTML </div> #+END_HTML #+BEGIN_HTML </div></div> #+END_HTML ** Page header #+BEGIN_HTML <div class=\"row \"><div class=\"span7 \"> #+END_HTML #+BEGIN_SRC org ,#+begin_o_blog_page_header ,#+HTML: <h1>Page header</h1> ,Some text ,#+end_o_blog_page_header #+END_SRC #+BEGIN_HTML </div><div class=\"span4 \"> #+END_HTML #+BEGIN_HTML <div class=\"page-header\"> #+END_HTML #+HTML: <h1>Page header</h1> Some text #+BEGIN_HTML </div> #+END_HTML #+BEGIN_HTML </div></div> #+END_HTML ** Using labels Label and annotate text using a =label:TYPE= link prefix where =TYPE= is one of =default=, =success=, =warning=, =important=, =info= or =reverse=. The URL part of the link is used as the label text. #+BEGIN_HTML <div class=\"row \"><div class=\"span7 \"> #+END_HTML #+BEGIN_SRC txt [[ob-label:default][Default]] [[ob-label:success][Success]] [[ob-label:warning][Warning]] [[ob-label:important][Important]] [[ob-label:info][Info]] [[ob-label:inverse][Inverse]] #+END_SRC #+BEGIN_HTML </div><div class=\"span4 \"> #+END_HTML - [[ob-label:default][Default]] - [[ob-label:success][Success]] - [[ob-label:warning][Warning]] - [[ob-label:important][Important]] - [[ob-label:info][Info]] - [[ob-label:inverse][Inverse]] #+BEGIN_HTML </div></div> #+END_HTML ** Using badges Indicators and unread counts as for labels. Use the =badge:TYPE= link prefix. #+BEGIN_HTML <div class=\"row \"><div class=\"span7 \"> #+END_HTML #+BEGIN_SRC text [[ob-badge:default][Default]] [[ob-badge:success][Success]] [[ob-badge:warning][Warning]] [[ob-badge:important][Important]] [[ob-badge:info][Info]] [[ob-badge:inverse][Inverse]] #+END_SRC #+BEGIN_HTML </div><div class=\"span4 \"> #+END_HTML - [[ob-badge:default][Default]] - [[ob-badge:success][Success]] - [[ob-badge:warning][Warning]] - [[ob-badge:important][Important]] - [[ob-badge:info][Info]] - [[ob-badge:inverse][Inverse]] #+BEGIN_HTML </div></div> #+END_HTML ** Using progress bars For loading, redirecting, or action status. Use a =progress:TYPE= link where =TYPE= is one of =info=, =success=, =warning= or =danger=. Additional classes (=striped= or =active=) can be added using comma. The URL is the progress percent. #+BEGIN_HTML <div class=\"row \"><div class=\"span7 \"> #+END_HTML #+BEGIN_SRC text [[ob-progress:info][25]] [[ob-progress:success,striped][50]] [[ob-progress:warning,striped,active][75]] [[ob-progress:danger][100]] #+END_SRC #+BEGIN_HTML </div><div class=\"span4 \"> #+END_HTML [[ob-progress:info][25]] [[ob-progress:success,striped][50]] [[ob-progress:warning,striped,active][75]] [[ob-progress:danger][100]] #+BEGIN_HTML </div></div> #+END_HTML ** Well Use the well as a simple effect on an element to give it an inset effect. #+BEGIN_HTML <div class=\"row \"><div class=\"span7 \"> #+END_HTML #+BEGIN_SRC text , #+begin_o_blog_well , Look, I'm in a well! , #+end_o_blog_well #+END_SRC #+BEGIN_HTML </div><div class=\"span4 \"> #+END_HTML #+BEGIN_HTML <div class=\"well\"> #+END_HTML Look, I'm in a well! #+BEGIN_HTML </div> #+END_HTML #+BEGIN_HTML </div></div> #+END_HTML " |
content-html | "<div id=\"outline-container-1\" class=\"outline-3\"> <h3 id=\"sec-1\">Hero-unit</h3> <div class=\"outline-text-3\" id=\"text-1\"> <div class=\"row \"><div class=\"span7 \"> <pre class=\"src src-org\"><span style=\"color: #888a85;\">#+begin_o_blog_hero_unit</span> <span style=\"color: #888a85;\">#+HTML: <h1>Heading</h1></span> tagline <span style=\"color: #888a85;\">#+BEGIN_HTML</span> <a class=\"btn btn-primary btn-large\"> Learn more </a> <span style=\"color: #888a85;\">#+END_HTML</span> <span style=\"color: #888a85;\">#+end_o_blog_hero_unit</span> </pre> </div><div class=\"span4 \"> <div class=\"hero-unit\"> <h1>Heading</h1> <p> tagline </p> <a class=\"btn btn-primary btn-large\"> Learn more </a> </div> </div></div> </div> </div> <div id=\"outline-container-2\" class=\"outline-3\"> <h3 id=\"sec-2\">Page header</h3> <div class=\"outline-text-3\" id=\"text-2\"> <div class=\"row \"><div class=\"span7 \"> <pre class=\"src src-org\"><span style=\"color: #888a85;\">#+begin_o_blog_page_header</span> <span style=\"color: #888a85;\">#+HTML: <h1>Page header</h1></span> Some text <span style=\"color: #888a85;\">#+end_o_blog_page_header</span> </pre> </div><div class=\"span4 \"> <div class=\"page-header\"> <h1>Page header</h1> <p> Some text </p> </div> </div></div> </div> </div> <div id=\"outline-container-3\" class=\"outline-3\"> <h3 id=\"sec-3\">Using labels</h3> <div class=\"outline-text-3\" id=\"text-3\"> <p> Label and annotate text using a <code>label:TYPE</code> link prefix where <code>TYPE</code> is one of <code>default</code>, <code>success</code>, <code>warning</code>, <code>important</code>, <code>info</code> or <code>reverse</code>. The URL part of the link is used as the label text. </p> <div class=\"row \"><div class=\"span7 \"> <pre class=\"src src-txt\">[[ob-label:default][Default]] [[ob-label:success][Success]] [[ob-label:warning][Warning]] [[ob-label:important][Important]] [[ob-label:info][Info]] [[ob-label:inverse][Inverse]] </pre> </div><div class=\"span4 \"> <ul> <li><span class=\"label label-default\">Default</span> </li> <li><span class=\"label label-success\">Success</span> </li> <li><span class=\"label label-warning\">Warning</span> </li> <li><span class=\"label label-important\">Important</span> </li> <li><span class=\"label label-info\">Info</span> </li> <li><span class=\"label label-inverse\">Inverse</span> </li> </ul> </div></div> </div> </div> <div id=\"outline-container-4\" class=\"outline-3\"> <h3 id=\"sec-4\">Using badges</h3> <div class=\"outline-text-3\" id=\"text-4\"> <p> Indicators and unread counts as for labels. Use the <code>badge:TYPE</code> link prefix. </p> <div class=\"row \"><div class=\"span7 \"> <pre class=\"src src-text\">[[ob-badge:default][Default]] [[ob-badge:success][Success]] [[ob-badge:warning][Warning]] [[ob-badge:important][Important]] [[ob-badge:info][Info]] [[ob-badge:inverse][Inverse]] </pre> </div><div class=\"span4 \"> <ul> <li><span class=\"badge badge-default\">Default</span> </li> <li><span class=\"badge badge-success\">Success</span> </li> <li><span class=\"badge badge-warning\">Warning</span> </li> <li><span class=\"badge badge-important\">Important</span> </li> <li><span class=\"badge badge-info\">Info</span> </li> <li><span class=\"badge badge-inverse\">Inverse</span> </li> </ul> </div></div> </div> </div> <div id=\"outline-container-5\" class=\"outline-3\"> <h3 id=\"sec-5\">Using progress bars</h3> <div class=\"outline-text-3\" id=\"text-5\"> <p> For loading, redirecting, or action status. Use a <code>progress:TYPE</code> link where <code>TYPE</code> is one of <code>info</code>, <code>success</code>, <code>warning</code> or <code>danger</code>. Additional classes (<code>striped</code> or <code>active</code>) can be added using comma. The URL is the progress percent. </p> <div class=\"row \"><div class=\"span7 \"> <pre class=\"src src-text\">[[ob-progress:info][25]] [[ob-progress:success,striped][50]] [[ob-progress:warning,striped,active][75]] [[ob-progress:danger][100]] </pre> </div><div class=\"span4 \"> <p> <div class=\"progress progress-info\"><div class=\"bar\" style=\"width: 25%;\"></div></div> <div class=\"progress progress-success progress-striped\"><div class=\"bar\" style=\"width: 50%;\"></div></div> <div class=\"progress progress-warning progress-striped active\"><div class=\"bar\" style=\"width: 75%;\"></div></div> <div class=\"progress progress-danger\"><div class=\"bar\" style=\"width: 100%;\"></div></div> </p> </div></div> </div> </div> <div id=\"outline-container-6\" class=\"outline-3\"> <h3 id=\"sec-6\">Well</h3> <div class=\"outline-text-3\" id=\"text-6\"> <p> Use the well as a simple effect on an element to give it an inset effect. </p> <div class=\"row \"><div class=\"span7 \"> <pre class=\"src src-text\"> #+begin_o_blog_well , Look, I'm in a well! #+end_o_blog_well </pre> </div><div class=\"span4 \"> <div class=\"well\"> <p> Look, I'm in a well! </p> </div> </div></div> </div> </div> " |
Property | Value |
---|---|
id | 4 |
title | "Using Bootstrap grid" |
timespamp | (20276 25204) |
year | 2012 |
month | 2 |
day | 10 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil] [cl-struct-ob:tags "Bootstrap" "bootstrap" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/02" |
filename | "using-bootstrap-grid" |
htmlfile | "tips/2012/02/10_using-bootstrap-grid.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil [[http://twitter.github.com/bootstrap/scaffolding.html][Bootstrap scaffolding]] can be defined using both =#+begin_o_blog_row= and =#+end_o_blog_row= directives (or =<og= =TAB= shortcut). A new column can be started using =#+o_blog_row_column= single directive (or =<ogr= =TAB= shortcut). #+BEGIN_HTML <div class=\"row show-grid\"><div class=\"span6 \"> #+END_HTML *Example* #+begin_src org ,#+begin_o_blog_row 2 -1 show-grid ,Column 1 ,#+o_blog_row_column 2 ,Column 2 ,#+end_o_blog_row #+end_src #+BEGIN_HTML </div><div class=\"span6 \"> #+END_HTML *Output* #+BEGIN_HTML <div class=\"row show-grid\"><div class=\"span2 offset1\"> #+END_HTML Column 1 #+BEGIN_HTML </div><div class=\"span2 \"> #+END_HTML Column 2 #+BEGIN_HTML </div></div> #+END_HTML #+BEGIN_HTML </div></div> #+END_HTML The syntax is: #+begin_src org ,#+begin_o_blog_row SPAN OFFSET GRID-CLASS ,Column 1 ,#+o_blog_row_column SPAN OFFSET ,Column 2 ,... ,#+o_blog_row_column SPAN OFFSET ,Column n ,#+end_o_blog_row #+end_src " |
content-html | "<p> <a href=\"http://twitter.github.com/bootstrap/scaffolding.html\">Bootstrap scaffolding</a> can be defined using both <code>#+begin_o_blog_row</code> and <code>#+end_o_blog_row</code> directives (or <code><og</code> <code>TAB</code> shortcut). A new column can be started using <code>#+o_blog_row_column</code> single directive (or <code><ogr</code> <code>TAB</code> shortcut). </p> <div class=\"row show-grid\"><div class=\"span6 \"> <p> <b>Example</b> </p> <pre class=\"src src-org\"><span style=\"color: #888a85;\">#+begin_o_blog_row 2 -1 show-grid</span> Column 1 <span style=\"color: #888a85;\">#+o_blog_row_column 2</span> Column 2 <span style=\"color: #888a85;\">#+end_o_blog_row</span> </pre> </div><div class=\"span6 \"> <p> <b>Output</b> </p> <div class=\"row show-grid\"><div class=\"span2 offset1\"> <p> Column 1 </p> </div><div class=\"span2 \"> <p> Column 2 </p> </div></div> </div></div> <p> The syntax is: </p> <pre class=\"src src-org\"><span style=\"color: #888a85;\">#+begin_o_blog_row SPAN OFFSET GRID-CLASS</span> Column 1 <span style=\"color: #888a85;\">#+o_blog_row_column SPAN OFFSET</span> Column 2 ... <span style=\"color: #888a85;\">#+o_blog_row_column SPAN OFFSET</span> Column n <span style=\"color: #888a85;\">#+end_o_blog_row</span> </pre> " |
Property | Value |
---|---|
id | 5 |
title | "Adding icons" |
timespamp | (20276 21604) |
year | 2012 |
month | 2 |
day | 10 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil] [cl-struct-ob:tags "Bootstrap" "bootstrap" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/02" |
filename | "adding-icons" |
htmlfile | "tips/2012/02/10_adding-icons.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil Icons from [[http://glyphicons.com/][glyphicons]] are supported, by simply naming the icon using italics style forward-slashes: #+BEGIN_HTML <div class=\"row \"><div class=\"span6 \"> #+END_HTML *Source example* #+begin_src org ,/icon-calendar/ calendar #+end_src #+BEGIN_HTML </div><div class=\"span6 \"> #+END_HTML *Rendered output* /icon-calendar/ calendar #+BEGIN_HTML </div></div> #+END_HTML Icons can also be used for the top /navbar/ using something like: #+BEGIN_HTML <div class=\"row \"><div class=\"span6 \"> #+END_HTML *Source example* #+begin_src org ,- [[#][/icon-book icon-white/ Documentation]] , - [[file:../../../templates.html][Templates]] , - [[file:../../../structures.html][Structures]] , - [[file:../../../functions.html][Functions]] , - , - [[file:../../../faq.html][FAQ]] ,- [[#][/icon-file icon-white/ Blog]] , - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] , - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] , - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] , - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] , - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] ,- [[file:../../../tags/index.html][/icon-tags icon-white/ Tags]] #+end_src #+BEGIN_HTML </div><div class=\"span6 \"> #+END_HTML *Rendered output* #+begin_html <div class=\"navbar\"> <div class=\"navbar-inner\"> <div class=\"container\"> <div class=\"nav-collapse\"> #+end_html - [[#][/icon-book icon-white/ Documentation]] - [[file:../../../templates.html][Templates]] - [[file:../../../structures.html][Structures]] - [[file:../../../functions.html][Functions]] - - [[file:../../../faq.html][FAQ]] - [[#][/icon-file icon-white/ Blog]] - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] - [[file:../../../tags/index.html][/icon-tags icon-white/ Tags]] #+begin_html </div> </div> </div> </div> #+end_html Please note the blank line between menu items. If blanks are omitted, the rendered result might be damaged. #+BEGIN_HTML </div></div> #+END_HTML " |
content-html | "<p> Icons from <a href=\"http://glyphicons.com/\">glyphicons</a> are supported, by simply naming the icon using italics style forward-slashes: </p> <div class=\"row \"><div class=\"span6 \"> <p> <b>Source example</b> </p> <pre class=\"src src-org\"><span style=\"font-style: italic;\">/icon-calendar/</span> calendar </pre> </div><div class=\"span6 \"> <p> <b>Rendered output</b> </p> <p> <i>icon-calendar</i> calendar </p> </div></div> <p> Icons can also be used for the top <i>navbar</i> using something like: </p> <div class=\"row \"><div class=\"span6 \"> <p> <b>Source example</b> </p> <pre class=\"src src-org\">- <span style=\"color: #00ffff; text-decoration: underline;\">[[#][/icon-book icon-white/ Documentation]]</span> - <span style=\"color: #00ffff; text-decoration: underline;\">[[file:../../../templates.html][Templates]]</span> - <span style=\"color: #00ffff; text-decoration: underline;\">[[file:../../../structures.html][Structures]]</span> - <span style=\"color: #00ffff; text-decoration: underline;\">[[file:../../../functions.html][Functions]]</span> - - <span style=\"color: #00ffff; text-decoration: underline;\">[[file:../../../faq.html][FAQ]]</span> - <span style=\"color: #00ffff; text-decoration: underline;\">[[#][/icon-file icon-white/ Blog]]</span> - <span style=\"color: #00ffff; text-decoration: underline;\">[[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]]</span> - <span style=\"color: #00ffff; text-decoration: underline;\">[[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]]</span> - <span style=\"color: #00ffff; text-decoration: underline;\">[[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]]</span> - <span style=\"color: #00ffff; text-decoration: underline;\">[[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]]</span> - <span style=\"color: #00ffff; text-decoration: underline;\">[[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]]</span> - <span style=\"color: #00ffff; text-decoration: underline;\">[[file:../../../templates.html\">Templates</a> </li> <li><a href=\"../../../structures.html\">Structures</a> </li> <li><a href=\"../../../functions.html\">Functions</a> </li> <li> </li> <li><a href=\"../../../faq.html\">FAQ</a> </li> </ul> </li> <li><a href=\"#\"><i>icon-file icon-white</i> Blog</a> <ul> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\">Lisp error in nil: (void-variable "Tips")</a> </li> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\">Lisp error in nil: (void-variable "Tips")</a> </li> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\">Lisp error in nil: (void-variable "Tips")</a> </li> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\">Lisp error in nil: (void-variable "Tips")</a> </li> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\">Lisp error in nil: (void-variable "Tips")</a> </li> </ul> </li> <li><a href=\"../../../tags/index.html\"><i>icon-tags icon-white</i> Tags</a> </li> </ul> </div> </div> </div> </div> <p> Please note the blank line between menu items. If blanks are omitted, the rendered result might be damaged. </p> </div></div> " |
Property | Value |
---|---|
id | 6 |
title | "Using modal source code" |
timespamp | (20276 17644) |
year | 2012 |
month | 2 |
day | 9 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil] [cl-struct-ob:tags "Bootstrap" "bootstrap" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/02" |
filename | "using-modal-source-code" |
htmlfile | "tips/2012/02/09_using-modal-source-code.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil The [[http://twitter.github.com/bootstrap/javascript.html#modals][Modal]] bootstrap script can be used to display the content of an external file in a modal window. The magic line is: #+begin_src org ,#+O_BLOG_SOURCE: path/to/file [mode] #+end_src The /org template shorcut/ is =<os= =TAB=. Two parameters might be used: - The mandatory =/path/to/file= which is the path to the file from which content should be read. - The optional =mode= parameter, which can be determined if omitted. Here is an example of the =sample-init.el= file: #+BEGIN_HTML <div class=\"o-blog-source\"><a class=\"btn btn-info\" data-toggle=\"modal\" data-target=\"#sample-initel\" ><i class=\"icon-file icon-white\"></i> sample-init.el</a></div><div class=\"modal fade hide\" id=\"sample-initel\"><div class=\"modal-header\"><a class=\"close\" data-dismiss=\"modal\">×</a><h3>sample-init.el</h3></div><div class=\"modal-body\"><pre> <span style=\"color: #888a85;\">;;; </span><span style=\"color: #888a85;\">sample-init.el --- sample init file to be used to debug o-blog </span> <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Copyright © 2012 Sébastien Gross <seb•ɑƬ•chezwam•ɖɵʈ•org> </span> <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Author: Sébastien Gross <seb•ɑƬ•chezwam•ɖɵʈ•org> </span><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Keywords: emacs, </span><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Created: 2012-03-20 </span><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Last changed: 2012-08-23 17:48:21 </span><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Licence: WTFPL, grab your copy here: http://sam.zoy.org/wtfpl/ </span> <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">This file is NOT part of GNU Emacs. </span> <span style=\"color: #888a85;\">;;; </span><span style=\"color: #888a85;\">Commentary: </span><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\"> </span> <span style=\"color: #888a85;\">;;; </span><span style=\"color: #888a85;\">Code: </span> (<span style=\"color: #729fcf; font-weight: bold;\">defun</span> <span style=\"color: #edd400; font-weight: bold;\">ob-build-sample</span> () (<span style=\"color: #729fcf; font-weight: bold;\">let*</span> ((d default-directory) (sample (format <span style=\"color: #ad7fa8;\">\"%s/.emacs.d/o-blog/example/sample.org\"</span> d)) (debugger (<span style=\"color: #729fcf; font-weight: bold;\">lambda</span> (<span style=\"color: #8ae234; font-weight: bold;\">&rest</span> debugger-args) (<span style=\"color: #729fcf; font-weight: bold;\">let*</span> ((trace (<span style=\"color: #729fcf; font-weight: bold;\">with-temp-buffer</span> (insert (<span style=\"color: #729fcf; font-weight: bold;\">with-output-to-string</span> (backtrace))) (beginning-of-buffer) <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">error begins on line 16 </span> <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">line stats with \" signal(error ...\" </span> (goto-line 16) (goto-char (point-at-bol)) <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Remove null chars </span> (replace-regexp-in-string (char-to-string 0) <span style=\"color: #ad7fa8;\">\"^@\"</span> (buffer-substring (point) (point-max)))))) (o-blog-bug-report trace)))) (debug-on-error t) print-length print-level) (add-to-list 'load-path (format <span style=\"color: #ad7fa8;\">\"%s/.emacs.d/org-mode/lisp\"</span> d)) (add-to-list 'load-path (format <span style=\"color: #ad7fa8;\">\"%s/.emacs.d/org-mode/contrib/lisp\"</span> d)) (add-to-list 'load-path (format <span style=\"color: #ad7fa8;\">\"%s/.emacs.d/o-blog\"</span> d)) (<span style=\"color: #729fcf; font-weight: bold;\">require</span> '<span style=\"color: #8ae234;\">o-blog</span>) (print (concat (emacs-version) <span style=\"color: #ad7fa8;\">\"\\n\"</span> (org-version) <span style=\"color: #ad7fa8;\">\"\\n\"</span> (o-blog-version) <span style=\"color: #ad7fa8;\">\"\\n\"</span>)) (find-file sample) (org-publish-blog sample) (kill-emacs))) </pre></div></div> #+END_HTML " |
content-html | "<p> The <a href=\"http://twitter.github.com/bootstrap/javascript.html#modals\">Modal</a> bootstrap script can be used to display the content of an external file in a modal window. The magic line is: </p> <pre class=\"src src-org\"><span style=\"color: #888a85;\">#+O_BLOG_SOURCE: path/to/file [mode]</span> </pre> <p> The <i>org template shorcut</i> is <code><os</code> <code>TAB</code>. Two parameters might be used: </p><ul> <li>The mandatory <code>/path/to/file</code> which is the path to the file from which content should be read. </li> <li>The optional <code>mode</code> parameter, which can be determined if omitted. </li> </ul> <p> Here is an example of the <code>sample-init.el</code> file: </p> <div class=\"o-blog-source\"><a class=\"btn btn-info\" data-toggle=\"modal\" data-target=\"#sample-initel\" ><i class=\"icon-file icon-white\"></i> sample-init.el</a></div><div class=\"modal fade hide\" id=\"sample-initel\"><div class=\"modal-header\"><a class=\"close\" data-dismiss=\"modal\">×</a><h3>sample-init.el</h3></div><div class=\"modal-body\"><pre> <span style=\"color: #888a85;\">;;; </span><span style=\"color: #888a85;\">sample-init.el --- sample init file to be used to debug o-blog </span> <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Copyright © 2012 Sébastien Gross <seb•ɑƬ•chezwam•ɖɵʈ•org> </span> <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Author: Sébastien Gross <seb•ɑƬ•chezwam•ɖɵʈ•org> </span><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Keywords: emacs, </span><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Created: 2012-03-20 </span><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Last changed: 2012-03-26 16:36:31 </span><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Licence: WTFPL, grab your copy here: http://sam.zoy.org/wtfpl/ </span> <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">This file is NOT part of GNU Emacs. </span> <span style=\"color: #888a85;\">;;; </span><span style=\"color: #888a85;\">Commentary: </span><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\"> </span> <span style=\"color: #888a85;\">;;; </span><span style=\"color: #888a85;\">Code: </span> (<span style=\"color: #729fcf; font-weight: bold;\">defun</span> <span style=\"color: #edd400; font-weight: bold;\">ob-build-sample</span> () (<span style=\"color: #729fcf; font-weight: bold;\">let*</span> ((d default-directory) (sample (format <span style=\"color: #ad7fa8;\">\"%s/.emacs.d/o-blog/example/sample.org\"</span> d)) (debugger (<span style=\"color: #729fcf; font-weight: bold;\">lambda</span> (<span style=\"color: #8ae234; font-weight: bold;\">&rest</span> debugger-args) (<span style=\"color: #729fcf; font-weight: bold;\">let*</span> ((trace (<span style=\"color: #729fcf; font-weight: bold;\">with-temp-buffer</span> (insert (<span style=\"color: #729fcf; font-weight: bold;\">with-output-to-string</span> (backtrace))) (beginning-of-buffer) <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">error begins on line 16 </span> <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">line stats with \" signal(error ...\" </span> (goto-line 16) (goto-char (point-at-bol)) <span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Remove null chars </span> (replace-regexp-in-string (char-to-string 0) <span style=\"color: #ad7fa8;\">\"^@\"</span> (buffer-substring (point) (point-max)))))) (o-blog-bug-report trace)))) (debug-on-error t) print-length print-level) (add-to-list 'load-path (format <span style=\"color: #ad7fa8;\">\"%s/.emacs.d/org-mode/lisp\"</span> d)) (add-to-list 'load-path (format <span style=\"color: #ad7fa8;\">\"%s/.emacs.d/org-mode/contrib/lisp\"</span> d)) (add-to-list 'load-path (format <span style=\"color: #ad7fa8;\">\"%s/.emacs.d/o-blog\"</span> d)) (<span style=\"color: #729fcf; font-weight: bold;\">require</span> '<span style=\"color: #8ae234;\">o-blog</span>) (print (concat (emacs-version) <span style=\"color: #ad7fa8;\">\"\\n\"</span> (org-version) <span style=\"color: #ad7fa8;\">\"\\n\"</span> (o-blog-version) <span style=\"color: #ad7fa8;\">\"\\n\"</span>)) (find-file sample) (org-publish-blog sample) (kill-emacs))) </pre></div></div> " |
Property | Value |
---|---|
id | 7 |
title | "Alerts" |
timespamp | (20243 11152) |
year | 2012 |
month | 1 |
day | 15 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/01" |
filename | "alerts" |
htmlfile | "tips/2012/01/15_alerts.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil Alerts are declared in =o_blog_alert= blocks. There are 4 types of them: - info - success - warning - error #+begin_src org ,#+begin_o_blog_alert <TYPE> <title> ,Text of the alert ,#+end_o_blog_alert #+end_src #+BEGIN_HTML <div class=\"alert alert-error\"><p class=\"alert-heading\"></p> #+END_HTML Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. #+BEGIN_HTML </div> #+END_HTML #+BEGIN_HTML <div class=\"alert alert-error\"><p class=\"alert-heading\">Danger</p> #+END_HTML Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. #+BEGIN_HTML </div> #+END_HTML #+BEGIN_HTML <div class=\"alert alert-warning\"><p class=\"alert-heading\">Caution</p> #+END_HTML Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. #+BEGIN_HTML </div> #+END_HTML #+BEGIN_HTML <div class=\"alert alert-success\"><p class=\"alert-heading\">Tip</p> #+END_HTML Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. #+BEGIN_HTML </div> #+END_HTML #+BEGIN_HTML <div class=\"alert alert-info\"><p class=\"alert-heading\">Information</p> #+END_HTML Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. #+BEGIN_HTML </div> #+END_HTML " |
content-html | "<p> Alerts are declared in <code>o_blog_alert</code> blocks. There are 4 types of them: </p> <ul> <li>info </li> <li>success </li> <li>warning </li> <li>error </li> </ul> <pre class=\"src src-org\"><span style=\"color: #888a85;\">#+begin_o_blog_alert <TYPE> <title></span> Text of the alert <span style=\"color: #888a85;\">#+end_o_blog_alert</span> </pre> <div class=\"alert alert-error\"><p class=\"alert-heading\"></p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. </p> </div> <div class=\"alert alert-error\"><p class=\"alert-heading\">Danger</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. </p> </div> <div class=\"alert alert-warning\"><p class=\"alert-heading\">Caution</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. </p> </div> <div class=\"alert alert-success\"><p class=\"alert-heading\">Tip</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. </p> </div> <div class=\"alert alert-info\"><p class=\"alert-heading\">Information</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. </p> </div> " |
Property | Value |
---|---|
id | 8 |
title | "Some HTML5 samples" |
timespamp | (20236 38984) |
year | 2012 |
month | 1 |
day | 10 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "html 5" "html-5" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/01" |
filename | "some-html5-samples" |
htmlfile | "tips/2012/01/10_some-html5-samples.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil ** tag: <details> This tag works only with the Chrome browser. #+HTML: <details> #+HTML: <summary>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</summary> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. - Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. - Sed diam. - Nam vestibulum accumsan nisl. #+HTML: </details> #+begin_src org ,#+HTML: <details> ,#+HTML: <summary>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</summary> ,- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ,- Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. ,- Sed diam. ,- Nam vestibulum accumsan nisl. ,#+HTML: </details> #+end_src " |
content-html | "<div id=\"outline-container-1\" class=\"outline-3\"> <h3 id=\"sec-1\">tag: <details></h3> <div class=\"outline-text-3\" id=\"text-1\"> <p> This tag works only with the Chrome browser. </p> <details> <summary>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</summary> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li> <li>Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. </li> <li>Sed diam. </li> <li>Nam vestibulum accumsan nisl. </li> </ul> </details> <pre class=\"src src-org\"><span style=\"color: #888a85;\">#+HTML:</span><span style=\"color: #888a85;\"> </span><span style=\"color: #b3b3b3;\"><details></span> <span style=\"color: #888a85;\">#+HTML:</span><span style=\"color: #888a85;\"> </span><span style=\"color: #b3b3b3;\"><summary>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</summary></span> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. - Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. - Sed diam. - Nam vestibulum accumsan nisl. <span style=\"color: #888a85;\">#+HTML:</span><span style=\"color: #888a85;\"> </span><span style=\"color: #b3b3b3;\"></details></span> </pre> </div> </div> " |
Property | Value |
---|---|
id | 9 |
title | "Example of some org syntax" |
timespamp | (20232 7428) |
year | 2012 |
month | 1 |
day | 7 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil] [cl-struct-ob:tags "org" "org" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/01" |
filename | "example-of-some-org-syntax" |
htmlfile | "tips/2012/01/07_example-of-some-org-syntax.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil ** Titles This is a level 1 *** Level 2 This is a level 2 **** Level 3 This is a level 3 ***** Level 4 This is a level 4 ****** Level 5 This is a level 5 ******* Level 6 This is a level 6 Up to 6 levels of indentation can be used. ** Praragaphs Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. #+html: <div class=\"two-cols\"> Nullam eu ante vel est convallis dignissim. Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio. Nunc porta vulputate tellus. Nunc rutrum turpis sed pede. Sed bibendum. Aliquam posuere. Nunc aliquet, augue nec adipiscing interdum, lacus tellus malesuada massa, quis varius mi purus non odio. Pellentesque condimentum, magna ut suscipit hendrerit, ipsum augue ornare nulla, non luctus diam neque sit amet urna. Curabitur vulputate vestibulum lorem. Fusce sagittis, libero non molestie mollis, magna orci ultrices dolor, at vulputate neque nulla lacinia eros. Sed id ligula quis est convallis tempor. Curabitur lacinia pulvinar nibh. Nam a sapien. Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel tortor sodales tellus ultricies commodo. Suspendisse potenti. Aenean in sem ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue. Fusce commodo. Vestibulum convallis, lorem a tempus semper, dui dui euismod elit, vitae placerat urna tortor vitae lacus. Nullam libero mauris, consequat quis, varius et, dictum id, arcu. Mauris mollis tincidunt felis. Aliquam feugiat tellus ut neque. Nulla facilisis, risus a rhoncus fermentum, tellus tellus lacinia purus, et dictum nunc justo sit amet elit. #+html: </div> #+begin_verse Great clouds overhead Tiny black birds rise and fall Snow covers Emacs -- AlexSchroeder #+end_verse #+begin_quote Everything should be made as simple as possible, but not any simpler -- Albert Einstein #+end_quote #+BEGIN_CENTER Everything should be made as simple as possible, \\\\ but not any simpler #+END_CENTER ** Lists As taken from the Org-mode manual: My favorite scenes are (in this order) 1. The attack of the Rohirrim 2. Eowyn's fight with the witch king + this was already my favorite scene in the book + I really like Miranda Otto. 3. Peter Jackson being shot by Legolas - on DVD only He makes a really funny face when it happens. But in the end, no individual scenes matter but the film as a whole. Important actors in this film are: - Elijah Wood :: He plays Frodo - Sean Austin :: He plays Sam, Frodo's friend. I still remember him very well from his role as Mikey Walsh in The Goonies. ** Footnotes The Org-mode homepage[fn:1] now looks a lot better than it used to. [fn:1] The link is: http://orgmode.org ** Emphasis and monospace You can make words *bold*, /italic/, _underlined_, =code= and ~verbatim~, and, if you must, ‘+strike-through+’. Text in the code and verbatim string is not processed for Org-mode specific syntax; it is exported verbatim. ** Horizontal rules A line consisting of only dashes, and at least 5 of them, will be exported as a horizontal line (‘<hr/>’ in HTML and \\hrule in LaTeX). ------ As shown previously. ** Comment lines Lines starting with ‘#’ in column zero are treated as comments and will never be exported. If you want an indented line to be treated as a comment, start it with ‘#+ ’. Also, entire subtrees starting with the word ‘COMMENT’ will never be exported. Finally, regions surrounded by ‘#+BEGIN\\_COMMENT’ ... ‘#+END\\_COMMENT’ will not be exported. #+begin_comment C-c ; Toggle the COMMENT keyword at the beginning of an entry. #+end_comment ** Images and Tables Table #+CAPTION: This is the caption for the next table (or link) #+LABEL: tbl:basic-data |----------+----------+----------+----------+----------------------------------------------------------------------| | Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | |----------+----------+----------+----------+----------------------------------------------------------------------| | 1.1 | 1.2 | 1.3 | X | This /cell/ has a *very* =long= ~line~ _with_ _{special} ^{layouts} | | 2.1 | 2.2 | 3.3 | Y | | |----------+----------+----------+----------+----------------------------------------------------------------------| | 3.1 | 3.1 | C.1 | D.1 | E.1 | |----------+----------+----------+----------+----------------------------------------------------------------------| Image #+CAPTION: This is the caption for the next figure link (or table) #+LABEL: fig:SED-HR4049 [[file:../../../tips/2012/01/07_example-of-some-org-syntax/200px-Org-mode-unicorn.svg.png][file:../../../tips/2012/01/07_example-of-some-org-syntax/org-mode-unicorn.png]] ** Literal examples #+BEGIN_EXAMPLE Some example from a text file. #+END_EXAMPLE Here is an example : Some example from a text file. #+BEGIN_SRC emacs-lisp (defun org-xor (a b) \"Exclusive or.\" (if a (not b) b)) #+END_SRC #+BEGIN_SRC emacs-lisp -n -r (save-excursion (ref:sc) (goto-char (point-min))) (ref:jump) #+END_SRC In line [[(sc)]] we remember the current position. [[(jump)][Line (jump)]] jumps to point-min. ** Special symbols Angles are written as Greek letters \\alpha, \\beta and \\gamma. ** Subscripts and superscripts The mass of the sun is M_sun = 1.989 x 10^30 kg. The radius of the sun is R_{sun} = 6.96 x 10^8 m. ** links - outsite (page): [[https://github.com/renard/o-blog][/o-blog/ home]]. - [[Creating a blog]] - insite (file): [[file:o-blog.el]] - in page (anchor): [[Literal examples]]" |
content-html | "<div id=\"outline-container-1\" class=\"outline-3\"> <h3 id=\"sec-1\">Titles</h3> <div class=\"outline-text-3\" id=\"text-1\"> <p> This is a level 1 </p> </div> <div id=\"outline-container-1-1\" class=\"outline-4\"> <h4 id=\"sec-1-1\">Level 2</h4> <div class=\"outline-text-4\" id=\"text-1-1\"> <p> This is a level 2 </p> </div> <div id=\"outline-container-1-1-1\" class=\"outline-5\"> <h5 id=\"sec-1-1-1\">Level 3</h5> <div class=\"outline-text-5\" id=\"text-1-1-1\"> <p> This is a level 3 </p> </div> <div id=\"outline-container-1-1-1-1\" class=\"outline-6\"> <h6 id=\"sec-1-1-1-1\">Level 4</h6> <div class=\"outline-text-6\" id=\"text-1-1-1-1\"> <p> This is a level 4 </p> </div> <div id=\"outline-container-1-1-1-1-1\" class=\"outline-7\"> <h7 id=\"sec-1-1-1-1-1\">Level 5</h7> <div class=\"outline-text-7\" id=\"text-1-1-1-1-1\"> <p> This is a level 5 </p> </div> <div id=\"outline-container-1-1-1-1-1-1\" class=\"outline-8\"> <h8 id=\"sec-1-1-1-1-1-1\">Level 6</h8> <div class=\"outline-text-8\" id=\"text-1-1-1-1-1-1\"> <p> This is a level 6 </p> <p> Up to 6 levels of indentation can be used. </p> </div> </div> </div> </div> </div> </div> </div> <div id=\"outline-container-2\" class=\"outline-3\"> <h3 id=\"sec-2\">Praragaphs</h3> <div class=\"outline-text-3\" id=\"text-2\"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. </p> <div class=\"two-cols\"> <p> Nullam eu ante vel est convallis dignissim. Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio. Nunc porta vulputate tellus. Nunc rutrum turpis sed pede. Sed bibendum. Aliquam posuere. Nunc aliquet, augue nec adipiscing interdum, lacus tellus malesuada massa, quis varius mi purus non odio. Pellentesque condimentum, magna ut suscipit hendrerit, ipsum augue ornare nulla, non luctus diam neque sit amet urna. Curabitur vulputate vestibulum lorem. Fusce sagittis, libero non molestie mollis, magna orci ultrices dolor, at vulputate neque nulla lacinia eros. Sed id ligula quis est convallis tempor. Curabitur lacinia pulvinar nibh. Nam a sapien. </p> <p> Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel tortor sodales tellus ultricies commodo. Suspendisse potenti. Aenean in sem ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue. Fusce commodo. Vestibulum convallis, lorem a tempus semper, dui dui euismod elit, vitae placerat urna tortor vitae lacus. Nullam libero mauris, consequat quis, varius et, dictum id, arcu. Mauris mollis tincidunt felis. Aliquam feugiat tellus ut neque. Nulla facilisis, risus a rhoncus fermentum, tellus tellus lacinia purus, et dictum nunc justo sit amet elit. </p> </div> <p class=\"verse\"> Great clouds overhead<br/> Tiny black birds rise and fall<br/> Snow covers Emacs<br/> <br/> – AlexSchroeder<br/> </p> <blockquote> <p>Everything should be made as simple as possible, but not any simpler – Albert Einstein </p> </blockquote> <div style=\"text-align: center\"> <p>Everything should be made as simple as possible, <br/> but not any simpler </p> </div> </div> </div> <div id=\"outline-container-3\" class=\"outline-3\"> <h3 id=\"sec-3\">Lists</h3> <div class=\"outline-text-3\" id=\"text-3\"> <p> As taken from the Org-mode manual: </p> <p> My favorite scenes are (in this order) </p><ol> <li>The attack of the Rohirrim </li> <li>Eowyn's fight with the witch king <ul> <li>this was already my favorite scene in the book </li> <li>I really like Miranda Otto. </li> </ul> </li> <li>Peter Jackson being shot by Legolas <ul> <li>on DVD only </li> </ul> <p> He makes a really funny face when it happens. </p></li> </ol> <p>But in the end, no individual scenes matter but the film as a whole. Important actors in this film are: </p><dl> <dt>Elijah Wood</dt><dd>He plays Frodo </dd> <dt>Sean Austin</dt><dd>He plays Sam, Frodo's friend. I still remember him very well from his role as Mikey Walsh in The Goonies. </dd> </dl> </div> </div> <div id=\"outline-container-4\" class=\"outline-3\"> <h3 id=\"sec-4\">Footnotes</h3> <div class=\"outline-text-3\" id=\"text-4\"> <p> The Org-mode homepage<sup><a class=\"footref\" name=\"fnr.1\" href=\"#fn.1\">1</a></sup> now looks a lot better than it used to. </p> </div> </div> <div id=\"outline-container-5\" class=\"outline-3\"> <h3 id=\"sec-5\">Emphasis and monospace</h3> <div class=\"outline-text-3\" id=\"text-5\"> <p> You can make words <b>bold</b>, <i>italic</i>, <span style=\"text-decoration:underline;\">underlined</span>, <code>code</code> and <code>verbatim</code>, and, if you must, ‘+strike-through+’. Text in the code and verbatim string is not processed for Org-mode specific syntax; it is exported verbatim. </p> </div> </div> <div id=\"outline-container-6\" class=\"outline-3\"> <h3 id=\"sec-6\">Horizontal rules</h3> <div class=\"outline-text-3\" id=\"text-6\"> <p> A line consisting of only dashes, and at least 5 of them, will be exported as a horizontal line (‘<hr/>’ in HTML and \\hrule in LaTeX). </p> <hr/> <p> As shown previously. </p> </div> </div> <div id=\"outline-container-7\" class=\"outline-3\"> <h3 id=\"sec-7\">Comment lines</h3> <div class=\"outline-text-3\" id=\"text-7\"> <p> Lines starting with ‘#’ in column zero are treated as comments and will never be exported. If you want an indented line to be treated as a comment, start it with ‘#+ ’. Also, entire subtrees starting with the word ‘COMMENT’ will never be exported. Finally, regions surrounded by ‘#+BEGIN_COMMENT’ … ‘#+END_COMMENT’ will not be exported. </p> </div> </div> <div id=\"outline-container-8\" class=\"outline-3\"> <h3 id=\"sec-8\">Images and Tables</h3> <div class=\"outline-text-3\" id=\"text-8\"> <p> Table </p> <table class=\"org-table\" id=\"tbl-basic-data\"> <caption>This is the caption for the next table (or link)</caption> <colgroup><col class=\"right\" /><col class=\"right\" /><col class=\"left\" /><col class=\"left\" /><col class=\"left\" /> </colgroup> <thead> <tr><th scope=\"col\" class=\"right\">Header 1</th><th scope=\"col\" class=\"right\">Header 2</th><th scope=\"col\" class=\"left\">Header 3</th><th scope=\"col\" class=\"left\">Header 4</th><th scope=\"col\" class=\"left\">Header 5</th></tr> </thead> <tbody> <tr><td class=\"right\">1.1</td><td class=\"right\">1.2</td><td class=\"left\">1.3</td><td class=\"left\">X</td><td class=\"left\">This <i>cell</i> has a <b>very</b> <code>long</code> <code>line</code> <span style=\"text-decoration:underline;\">with</span> <sub>special</sub> <sup>layouts</sup></td></tr> <tr><td class=\"right\">2.1</td><td class=\"right\">2.2</td><td class=\"left\">3.3</td><td class=\"left\">Y</td><td class=\"left\"></td></tr> </tbody> <tbody> <tr><td class=\"right\">3.1</td><td class=\"right\">3.1</td><td class=\"left\">C.1</td><td class=\"left\">D.1</td><td class=\"left\">E.1</td></tr> </tbody> </table> <p> Image </p> <p> <a href=\"../../../tips/2012/01/07_example-of-some-org-syntax/200px-Org-mode-unicorn.svg.png\"><img src=\"../../../tips/2012/01/07_example-of-some-org-syntax/org-mode-unicorn.png\" alt=\"org-mode-unicorn.png\"/></a> </p> </div> </div> <div id=\"outline-container-9\" class=\"outline-3\"> <h3 id=\"sec-9\">Literal examples</h3> <div class=\"outline-text-3\" id=\"text-9\"> <pre class=\"example\">Some example from a text file. </pre> <p> Here is an example </p><pre class=\"example\"> Some example from a text file. </pre> <pre class=\"src src-emacs-lisp\">(<span style=\"color: #729fcf; font-weight: bold;\">defun</span> <span style=\"color: #edd400; font-weight: bold;\">org-xor</span> (a b) <span style=\"color: #888a85;\">\"Exclusive or.\"</span> (<span style=\"color: #729fcf; font-weight: bold;\">if</span> a (not b) b)) </pre> <pre class=\"src src-emacs-lisp\"><span id=\"coderef-sc\" class=\"coderef-off\"><span class=\"linenr\">1: </span>(<span style=\"color: #729fcf; font-weight: bold;\">save-excursion</span></span> <span id=\"coderef-jump\" class=\"coderef-off\"><span class=\"linenr\">2: </span> (goto-char (point-min)))</span> </pre> <p> In line <a href=\"#coderef-sc\" class=\"coderef\" onmouseover=\"CodeHighlightOn(this, 'coderef-sc');\" onmouseout=\"CodeHighlightOff(this, 'coderef-sc');\">1</a> we remember the current position. <a href=\"#coderef-jump\" class=\"coderef\" onmouseover=\"CodeHighlightOn(this, 'coderef-jump');\" onmouseout=\"CodeHighlightOff(this, 'coderef-jump');\">Line 2</a> jumps to point-min. </p> </div> </div> <div id=\"outline-container-10\" class=\"outline-3\"> <h3 id=\"sec-10\">Special symbols</h3> <div class=\"outline-text-3\" id=\"text-10\"> <p> Angles are written as Greek letters α, β and γ. </p> </div> </div> <div id=\"outline-container-11\" class=\"outline-3\"> <h3 id=\"sec-11\">Subscripts and superscripts</h3> <div class=\"outline-text-3\" id=\"text-11\"> <p> The mass of the sun is M<sub>sun</sub> = 1.989 x 10<sup>30</sup> kg. The radius of the sun is R<sub>sun</sub> = 6.96 x 10<sup>8</sup> m. </p> </div> </div> <div id=\"outline-container-12\" class=\"outline-3\"> <h3 id=\"sec-12\">links</h3> <div class=\"outline-text-3\" id=\"text-12\"> <ul> <li>outsite (page): <a href=\"https://github.com/renard/o-blog\"><i>o-blog</i> home</a>. </li> <li><a href=\"#Creating-a-blog\">Creating a blog</a> </li> <li>insite (file): <a href=\"o-blog.el\">o-blog.el</a> </li> <li>in page (anchor): <a href=\"#sec-9\">Literal examples</a> </li> </ul> <div id=\"footnotes\"> <h2 class=\"footnotes\">Footnotes: </h2> <div id=\"text-footnotes\"> <p class=\"footnote\"><sup><a class=\"footnum\" name=\"fn.1\" href=\"#fnr.1\">1</a></sup> The link is: <a href=\"http://orgmode.org\">http://orgmode.org</a> </p></div> </div> </div> </div> " |
Property | Value |
---|---|
id | 10 |
title | "How to use tags" |
timespamp | (20231 33664) |
year | 2012 |
month | 1 |
day | 7 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil] [cl-struct-ob:tags "o-blog" "o-blog" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/01" |
filename | "how-to-use-tags" |
htmlfile | "tips/2012/01/07_how-to-use-tags.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil Tags are useful to classify o-blog articles/posts (but not for pages). They are stored as [[http://orgmode.org/manual/Tags.html][Org-mode tags]] for each entry. To add or modify a tag for a post, just use =C-c C-c= when on an Org-mode headline, and enter the tag value. If an article has more than one tag, separate them by a colon (=:=). Special characters used in tags: - At sign (=@=) is converted to a dash (=-=). - Underscore (=_=) is converted to a blank (= =). " |
content-html | "<p> Tags are useful to classify o-blog articles/posts (but not for pages). They are stored as <a href=\"http://orgmode.org/manual/Tags.html\">Org-mode tags</a> for each entry. To add or modify a tag for a post, just use <code>C-c C-c</code> when on an Org-mode headline, and enter the tag value. </p> <p> If an article has more than one tag, separate them by a colon (<code>:</code>). </p> <p> Special characters used in tags: </p> <ul> <li>At sign (<code>@</code>) is converted to a dash (<code>-</code>). </li> <li>Underscore (<code>_</code>) is converted to a blank (<code> </code>). </li> </ul> " |
Property | Value |
---|---|
id | 11 |
title | "Creating a blog" |
timespamp | (20231 32764) |
year | 2012 |
month | 1 |
day | 7 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | ([cl-struct-ob:tags "usage" "usage" nil nil] [cl-struct-ob:tags "o-blog" "o-blog" nil nil]) |
template | "blog_post.html" |
filepath | "tips/2012/01" |
filename | "creating-a-blog" |
htmlfile | "tips/2012/01/07_creating-a-blog.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil In o-blog, a site is contained in a single Org-mode file specifying both pages and a blog; in turn, the blog consists of Org-mode entries, specifically, [[http://orgmode.org/manual/TODO-Items.html#TODO-Items][Org-mode TODO items]]. Each entry has a headline/title, some properties and some text. Exporting a blog means publishing all the entries of an Org-mode file (to their own HTML5 files) that are =TODO= items marked =DONE=. A minimal o-blog Org-mode file could look like: #+begin_src org ,#+TITLE: Lorem ipsum ,#+DESCRIPTION: dolor sit amet ,#+DATE: ,#+STARTUP: logdone ,#+URL: http://blog.example.com ,* DONE Lorem ipsum , CLOSED: [2012-01-07 Sat 00:13] , :PROPERTIES: , :tags: Lorem , :END: , Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit , tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt , et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et , magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec , vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan , nulla. Nullam rutrum. Nam vestibulum accumsan nisl. #+end_src Please note the blank line between the properties section and the text itself. Use =#+STARTUP: logdone= to automatically add a time stamp when closing an entry. " |
content-html | "<p> In o-blog, a site is contained in a single Org-mode file specifying both pages and a blog; in turn, the blog consists of Org-mode entries, specifically, <a href=\"http://orgmode.org/manual/TODO-Items.html#TODO-Items\">Org-mode TODO items</a>. Each entry has a headline/title, some properties and some text. Exporting a blog means publishing all the entries of an Org-mode file (to their own HTML5 files) that are <code>TODO</code> items marked <code>DONE</code>. </p> <p> A minimal o-blog Org-mode file could look like: </p> <pre class=\"src src-org\"><span style=\"color: #b3b3b3;\">#+TITLE:</span><span style=\"color: #888a85;\"> </span><span style=\"color: #afeeee; font-size: 144%; font-weight: bold;\">Lorem ipsum</span> <span style=\"color: #888a85;\">#+DESCRIPTION: dolor sit amet</span> <span style=\"color: #b3b3b3;\">#+DATE:</span> <span style=\"color: #888a85;\">#+STARTUP: logdone</span> <span style=\"color: #888a85;\">#+URL: http://blog.example.com</span> <span style=\"color: #edd400; font-weight: bold;\">* </span><span style=\"color: #228b22; font-weight: bold;\">DONE</span><span style=\"color: #edd400; font-weight: bold;\"> Lorem ipsum</span> <span style=\"color: #729fcf; font-weight: bold;\">CLOSED:</span> <span style=\"color: #00ffff; text-decoration: underline;\">[2012-01-07 Sat 00:13]</span> <span style=\"color: #729fcf; font-weight: bold;\"> :PROPERTIES:</span> <span style=\"color: #729fcf; font-weight: bold;\">:tags:</span> Lorem <span style=\"color: #729fcf; font-weight: bold;\"> :END:</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. </pre> <p> Please note the blank line between the properties section and the text itself. </p> <p> Use <code>#+STARTUP: logdone</code> to automatically add a time stamp when closing an entry. </p>" |
Property | Value |
---|---|
id | 0 |
title | "Quick start Guide" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | nil |
template | "blog_static_no_title.html" |
filepath | nil |
filename | "index" |
htmlfile | "index.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil #+BEGIN_HTML <div class=\"row \"><div class=\"span8 \"> #+END_HTML #+BEGIN_HTML <div class=\"hero-unit\"> #+END_HTML #+HTML: <h1>o-blog</h1> A stand-alone blog and publication tool for [[http://orgmode.org/][Org-mode]]. #+BEGIN_HTML </div> #+END_HTML #+HTML: <h1 style=\"font-size: 500%;\">Quick start guide</h1> #+BEGIN_HTML </div><div class=\"span4 \"> #+END_HTML #+HTML: <div class=\"hero-unit\" style=\"font-size: 200%;\"> [[file:./features.html][/icon-cog icon-white/ Features]] [[https://github.com/renard/o-blog][/icon-github-sign icon-white/ Github]] [[file:./testimonials.html][/icon-comments-alt icon-white/ Testimonials]] [[file:./changelog.html][/icon-pencil icon-white/ Changelog]] [[file:./bug-report.html][/icon-fire icon-white/ Bug report]] #+HTML: </div> #+BEGIN_HTML </div></div> #+END_HTML ** Setup First you need to install [[http://www.gnu.org/s/emacs][Emacs]] (tested with version 24, might work with 23) and [[http://orgmode.org/][Org-mode]] (tested with version 7.8.09, other /might/ work as well). Then you have 2 ways to install [[https://github.com/renard/o-blog][o-blog]]. #+BEGIN_HTML <div class=\"row \"><div class=\"span5 \"> #+END_HTML #+HTML: <h4>Using el-get</h4> If you are using [[https://github.com/dimitri/el-get][el-get]] it would be very easy to install. All you need to do is to add =o-blog= to =el-get-sources= and type: =M-x el-get-install o-blog= If you are using =el-get= 4 or greater, you only need to type: =M-x el-get-install o-blog=. #+BEGIN_HTML </div><div class=\"span6 \"> #+END_HTML #+HTML: <h4>Manual setup</h4> Start by cloning the /git/ repository from [[http://github.com][Github]]. #+begin_src bash cd ~/.emacs.d git clone https://github.com/renard/o-blog.git #+end_src And add following to your =~/.emacs.d/init.el= file: #+begin_src emacs-lisp (add-to-list 'load-path \"~/.emacs.d/o-blog\") (require 'o-blog) #+end_src #+BEGIN_HTML </div></div> #+END_HTML ** Publish Open the =~/.emacs.d/o-blog/example/sample.org= file and type =M-x org-publish-blog=. The result site would be published by default in =~/.emacs.d/o-blog/out=. See the [[file:Tips/index.html][tips]] for more details. " |
content-html | "<div class=\"row \"><div class=\"span8 \"> <div class=\"hero-unit\"> <h1>o-blog</h1> <p> A stand-alone blog and publication tool for <a href=\"http://orgmode.org/\">Org-mode</a>. </p> </div> <h1 style=\"font-size: 500%;\">Quick start guide</h1> </div><div class=\"span4 \"> <div class=\"hero-unit\" style=\"font-size: 200%;\"> <p> <a href=\"./features.html\"><i>icon-cog icon-white</i> Features</a> </p> <p> <a href=\"https://github.com/renard/o-blog\"><i>icon-github-sign icon-white</i> Github</a> </p> <p> <a href=\"./testimonials.html\"><i>icon-comments-alt icon-white</i> Testimonials</a> </p> <p> <a href=\"./changelog.html\"><i>icon-pencil icon-white</i> Changelog</a> </p> <p> <a href=\"./bug-report.html\"><i>icon-fire icon-white</i> Bug report</a> </p> </div> </div></div> <div id=\"outline-container-1\" class=\"outline-3\"> <h3 id=\"sec-1\">Setup</h3> <div class=\"outline-text-3\" id=\"text-1\"> <p> First you need to install <a href=\"http://www.gnu.org/s/emacs\">Emacs</a> (tested with version 24, might work with 23) and <a href=\"http://orgmode.org/\">Org-mode</a> (tested with version 7.8.09, other <i>might</i> work as well). Then you have 2 ways to install <a href=\"https://github.com/renard/o-blog\">o-blog</a>. </p> <div class=\"row \"><div class=\"span5 \"> <h4>Using el-get</h4> <p> If you are using <a href=\"https://github.com/dimitri/el-get\">el-get</a> it would be very easy to install. All you need to do is to add <code>o-blog</code> to <code>el-get-sources</code> and type: </p> <p> <code>M-x el-get-install o-blog</code> </p> <p> If you are using <code>el-get</code> 4 or greater, you only need to type: </p> <p> <code>M-x el-get-install o-blog</code>. </p> </div><div class=\"span6 \"> <h4>Manual setup</h4> <p> Start by cloning the <i>git</i> repository from <a href=\"http://github.com\">Github</a>. </p> <pre class=\"src src-bash\">cd ~/.emacs.d git clone https://github.com/renard/o-blog.git </pre> <p> And add following to your <code>~/.emacs.d/init.el</code> file: </p> <pre class=\"src src-emacs-lisp\">(add-to-list 'load-path <span style=\"color: #ad7fa8;\">\"~/.emacs.d/o-blog\"</span>) (<span style=\"color: #729fcf; font-weight: bold;\">require</span> '<span style=\"color: #8ae234;\">o-blog</span>) </pre> </div></div> </div> </div> <div id=\"outline-container-2\" class=\"outline-3\"> <h3 id=\"sec-2\">Publish</h3> <div class=\"outline-text-3\" id=\"text-2\"> <p> Open the <code>~/.emacs.d/o-blog/example/sample.org</code> file and type <code>M-x org-publish-blog</code>. The result site would be published by default in <code>~/.emacs.d/o-blog/out</code>. </p> <p> See the <a href=\"Tips/index.html\">tips</a> for more details. </p> </div> </div> " |
Property | Value |
---|---|
id | 1 |
title | "Articles by tags" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Blog details" "blog-details"] |
tags | nil |
template | "blog_post-by-tags.html" |
filepath | nil |
filename | "tags" |
htmlfile | "tags.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil " |
content-html | " " |
Property | Value |
---|---|
id | 2 |
title | "Changelog" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | nil |
template | "blog_static.html" |
filepath | nil |
filename | "changelog" |
htmlfile | "changelog.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil - 2012-06-21 - Add a post-sorter option. - 2012-06-05 - Update to - Font-Awesome 2.0.0-6-g35fca03 - bootstrap 2.0.4 - 2012-05-21 - Use responsive bootstrap features. - 2012-05-07 - Update to: - less.js v1.0-547-ga2df119 - Bootstrap widgets: - label - badge - progress bar - well - page header - hero unit - 2012-05-04 - Update to: - bootstrap v2.0.3-5-gb261f97. - 2012-04-17 - Update to: - less 1.3.0. - Font-Awesome v1.0.0-7-g563a6f3. - bootstrap v2.0.2-3-g6506ede. - 2012-04-10 - Add i18n support. - 2012-04-06 - Add org-mode CUSTOM\\_ID. - 2012-03-28 - Add support for [[http://en.wikipedia.org/wiki/QR_code][QR-code]]. - 2012-03-20 - Add [[http://disqus.com][Disqus]] support. - User can select the file name sanitizer function. - Add [[file:./bug-report.html][bug report howto]]. - 2012-03-06 - Add support for Font-Awesome - 2012-02-28 - Switched to bootstrap 2.0.1 - Switched to lesscss 1.2.2 - 2012-01-23 - Change tag system from \"Tags\" to org tagging system. " |
content-html | "<ul> <li>2012-06-21 <ul> <li>Add a post-sorter option. </li> </ul> </li> <li>2012-06-05 <ul> <li>Update to <ul> <li>Font-Awesome 2.0.0-6-g35fca03 </li> <li>bootstrap 2.0.4 </li> </ul> </li> </ul> </li> <li>2012-05-21 <ul> <li>Use responsive bootstrap features. </li> </ul> </li> <li>2012-05-07 <ul> <li>Update to: <ul> <li>less.js v1.0-547-ga2df119 </li> </ul> </li> <li>Bootstrap widgets: <ul> <li>label </li> <li>badge </li> <li>progress bar </li> <li>well </li> <li>page header </li> <li>hero unit </li> </ul> </li> </ul> </li> <li>2012-05-04 <ul> <li>Update to: <ul> <li>bootstrap v2.0.3-5-gb261f97. </li> </ul> </li> </ul> </li> <li>2012-04-17 <ul> <li>Update to: <ul> <li>less 1.3.0. </li> <li>Font-Awesome v1.0.0-7-g563a6f3. </li> <li>bootstrap v2.0.2-3-g6506ede. </li> </ul> </li> </ul> </li> <li>2012-04-10 <ul> <li>Add i18n support. </li> </ul> </li> <li>2012-04-06 <ul> <li>Add org-mode CUSTOM_ID. </li> </ul> </li> <li>2012-03-28 <ul> <li>Add support for <a href=\"http://en.wikipedia.org/wiki/QR_code\">QR-code</a>. </li> </ul> </li> <li>2012-03-20 <ul> <li>Add <a href=\"http://disqus.com\">Disqus</a> support. </li> <li>User can select the file name sanitizer function. </li> <li>Add <a href=\"./bug-report.html\">bug report howto</a>. </li> </ul> </li> <li>2012-03-06 <ul> <li>Add support for Font-Awesome </li> </ul> </li> <li>2012-02-28 <ul> <li>Switched to bootstrap 2.0.1 </li> <li>Switched to lesscss 1.2.2 </li> </ul> </li> <li>2012-01-23 <ul> <li>Change tag system from \"Tags\" to org tagging system. </li> </ul> </li> </ul> " |
Property | Value |
---|---|
id | 3 |
title | "Debug" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Documentation" "documentation"] |
tags | nil |
template | "debug.html" |
filepath | nil |
filename | "debug" |
htmlfile | "debug.html" |
path-to-root | "." |
sitemap | "f" |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil " |
content-html | " " |
Property | Value |
---|---|
id | 4 |
title | "Features" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Documentation" "documentation"] |
tags | nil |
template | "blog_static.html" |
filepath | nil |
filename | "features" |
htmlfile | "features.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil o-blog transforms the simple and powerful markup of Org-mode documents to a full-featured, easily deployed web site, ready to serve online to a wide range of devices. - Appearance - modern, dynamic, and customizable: - Dynamic template system (using elisp functions) with [[file:./debug.html][nice debugging features]] and easy embedded [[file:./bug-report.html][bug report tool]] - Syntax highlighting for exported code snippets - [[http://twitter.github.com/bootstrap/][Bootstrap 2]] support - [[http://fortaweso.me/font-awesome/][Font-Awesome]] support - [[http://lesscss.org/][LESS CSS]] support - [[http://jquery.com/][jQuery]] support - HTML5 / CSS3 ready - Custom [[http://www.google.com/webfonts][Google web fonts]] support - [[http://twitter.github.com/bootstrap/scaffolding.html#responsive][Responsive design]] for many devices - Blog - all the key features are here: - Static pages - [[file:./tags/index.html][Tag cloud]] - Multiple blogs - [[file:./archives.html][Archives]] - [[http://disqus.com][Disqus]] support - [[http://en.wikipedia.org/wiki/QR_code][QR code]] support - Publication - fast and convenient: - Both synchronous and asynchronous publication - Publish directly to the webserver (using tramp) - [[http://twitter.github.com/bootstrap/][Bootstrap]] flair and widgets: - Alert boxes - Icons ([[http://glyphicons.com/][glyphicons]]) support - Widgets such as labels, badges, progress bar, well, etc. " |
content-html | "<p> o-blog transforms the simple and powerful markup of Org-mode documents to a full-featured, easily deployed web site, ready to serve online to a wide range of devices. </p> <ul> <li>Appearance - modern, dynamic, and customizable: <ul> <li>Dynamic template system (using elisp functions) with <a href=\"./debug.html\">nice debugging features</a> and easy embedded <a href=\"./bug-report.html\">bug report tool</a> </li> <li>Syntax highlighting for exported code snippets </li> <li><a href=\"http://twitter.github.com/bootstrap/\">Bootstrap 2</a> support </li> <li><a href=\"http://fortaweso.me/font-awesome/\">Font-Awesome</a> support </li> <li><a href=\"http://lesscss.org/\">LESS CSS</a> support </li> <li><a href=\"http://jquery.com/\">jQuery</a> support </li> <li>HTML5 / CSS3 ready </li> <li>Custom <a href=\"http://www.google.com/webfonts\">Google web fonts</a> support </li> <li><a href=\"http://twitter.github.com/bootstrap/scaffolding.html#responsive\">Responsive design</a> for many devices </li> </ul> </li> <li>Blog - all the key features are here: <ul> <li>Static pages </li> <li><a href=\"./tags/index.html\">Tag cloud</a> </li> <li>Multiple blogs </li> <li><a href=\"./archives.html\">Archives</a> </li> <li><a href=\"http://disqus.com\">Disqus</a> support </li> <li><a href=\"http://en.wikipedia.org/wiki/QR_code\">QR code</a> support </li> </ul> </li> <li>Publication - fast and convenient: <ul> <li>Both synchronous and asynchronous publication </li> <li>Publish directly to the webserver (using tramp) </li> </ul> </li> <li><a href=\"http://twitter.github.com/bootstrap/\">Bootstrap</a> flair and widgets: <ul> <li>Alert boxes </li> <li>Icons (<a href=\"http://glyphicons.com/\">glyphicons</a>) support </li> <li>Widgets such as labels, badges, progress bar, well, etc. </li> </ul> </li> </ul> " |
Property | Value |
---|---|
id | 5 |
title | "Templates" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Documentation" "documentation"] |
tags | nil |
template | "blog_static.html" |
filepath | nil |
filename | "templates" |
htmlfile | "templates.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil Templates, which are a big part of the [[https://github.com/renard/o-blog][o-blog]] export process, are HTML-based files. Within templates, Lisp code can be interpreted as long as =<lisp>= tags surrounds the code. #+begin_src html <h1><lisp>(ob:blog-title BLOG)</lisp></h1> #+end_src The above would be exported to something like: #+begin_src html <h1>o-blog</h1> #+end_src #+BEGIN_HTML <div class=\"alert alert-info\"><p class=\"alert-heading\">Information</p> #+END_HTML [[https://github.com/renard/o-blog][o-blog]] only needs =blog_= prefixed templates, as long as they do not need any other templates (using =ob:insert-template= function). All other templates are defined for convenience. #+BEGIN_HTML </div> #+END_HTML ** Required templates =blog_= prefixed templates. - =blog_static.html=: Exports any static page (function =ob-write-static=). - =blog_post.html=: Exports a blog post (function =ob-write-posts=). - =blog_tags.html=: Exports a tag cloud page (function =ob-write-tags=). - =blog_tags-detail.html=: Exports page matching a specific tag (function =ob-write-tags=). - =blog_archive.html=: Exports the whole archives (all categories, all years, all months) page (function =ob-write-index=). - =blog_rss.html=: Exports the rss feed (function =ob-write-index=). - =blog_index_month.html= Export index page for a given month (function =ob-write-index=). - =blog_index_year.html= Export index page for a given year (function =ob-write-index=). - =blog_index_catery.html= Export index page for a given category (function =ob-write-index=). ** Index-page templates =index_= prefixed templates. They are used by all =blog_index_*.html= templates to generate a list of articles matching given category, year and month, and the entire archives. - =index_archives.html= - =index_category.html= - =index_month.html= - =index_year.html= ** Navigation templates =nav_= prefixed templates are used to generate navigation snippets: - =nav_links.html=: Used to generate navigation menu used in both the page header and footer. - =nav_tag-cloud.html=: Used to generate tag cloud on page bottom. ** Page templates =page_= prefixed templates used for both HTML header and footer. " |
content-html | "<p> Templates, which are a big part of the <a href=\"https://github.com/renard/o-blog\">o-blog</a> export process, are HTML-based files. Within templates, Lisp code can be interpreted as long as <code><lisp></code> tags surrounds the code. </p> <pre class=\"src src-html\"><<span style=\"color: #edd400; font-weight: bold;\">h1</span>><<span style=\"color: #edd400; font-weight: bold;\">lisp</span>>(ob:blog-title BLOG)</<span style=\"color: #edd400; font-weight: bold;\">lisp</span>></<span style=\"color: #edd400; font-weight: bold;\">h1</span>> </pre> <p> The above would be exported to something like: </p> <pre class=\"src src-html\"><<span style=\"color: #edd400; font-weight: bold;\">h1</span>><span style=\"font-weight: bold; text-decoration: underline;\">o-blog</span></<span style=\"color: #edd400; font-weight: bold;\">h1</span>> </pre> <div class=\"alert alert-info\"><p class=\"alert-heading\">Information</p> <p> <a href=\"https://github.com/renard/o-blog\">o-blog</a> only needs <code>blog_</code> prefixed templates, as long as they do not need any other templates (using <code>ob:insert-template</code> function). </p> <p> All other templates are defined for convenience. </p> </div> <div id=\"outline-container-1\" class=\"outline-3\"> <h3 id=\"sec-1\">Required templates</h3> <div class=\"outline-text-3\" id=\"text-1\"> <p> <code>blog_</code> prefixed templates. </p> <ul> <li><code>blog_static.html</code>: Exports any static page (function <code>ob-write-static</code>). </li> <li><code>blog_post.html</code>: Exports a blog post (function <code>ob-write-posts</code>). </li> <li><code>blog_tags.html</code>: Exports a tag cloud page (function <code>ob-write-tags</code>). </li> <li><code>blog_tags-detail.html</code>: Exports page matching a specific tag (function <code>ob-write-tags</code>). </li> <li><code>blog_archive.html</code>: Exports the whole archives (all categories, all years, all months) page (function <code>ob-write-index</code>). </li> <li><code>blog_rss.html</code>: Exports the rss feed (function <code>ob-write-index</code>). </li> <li><code>blog_index_month.html</code> Export index page for a given month (function <code>ob-write-index</code>). </li> <li><code>blog_index_year.html</code> Export index page for a given year (function <code>ob-write-index</code>). </li> <li><code>blog_index_catery.html</code> Export index page for a given category (function <code>ob-write-index</code>). </li> </ul> </div> </div> <div id=\"outline-container-2\" class=\"outline-3\"> <h3 id=\"sec-2\">Index-page templates</h3> <div class=\"outline-text-3\" id=\"text-2\"> <p> <code>index_</code> prefixed templates. They are used by all <code>blog_index_*.html</code> templates to generate a list of articles matching given category, year and month, and the entire archives. </p> <ul> <li><code>index_archives.html</code> </li> <li><code>index_category.html</code> </li> <li><code>index_month.html</code> </li> <li><code>index_year.html</code> </li> </ul> </div> </div> <div id=\"outline-container-3\" class=\"outline-3\"> <h3 id=\"sec-3\">Navigation templates</h3> <div class=\"outline-text-3\" id=\"text-3\"> <p> <code>nav_</code> prefixed templates are used to generate navigation snippets: </p> <ul> <li><code>nav_links.html</code>: Used to generate navigation menu used in both the page header and footer. </li> <li><code>nav_tag-cloud.html</code>: Used to generate tag cloud on page bottom. </li> </ul> </div> </div> <div id=\"outline-container-4\" class=\"outline-3\"> <h3 id=\"sec-4\">Page templates</h3> <div class=\"outline-text-3\" id=\"text-4\"> <p> <code>page_</code> prefixed templates used for both HTML header and footer. </p> </div> </div> " |
Property | Value |
---|---|
id | 6 |
title | "Structures" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Documentation" "documentation"] |
tags | nil |
template | "blog_static.html" |
filepath | nil |
filename | "structures" |
htmlfile | "structures.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil Some variables are available when publishing lisp parts of templates. These variables are defined using [[http://www.gnu.org/software/emacs/manual/html_node/cl/Structures.html][defstruct]], then any slot (or property) is available using a =(type-slot variable)= form. ** Structures *** Structures: =ob:blog= Structure used to define a blog: - =file=: The blog source file (read-only). - =buffer=: Buffer visiting the blog file (read-only). - =publish-dir=: Where to publish the blog, defined by the =#+PUBLISH_DIR:= header directive or =out= in the same directory as the blog source file. - =template-dir=: Location of the template directory defined by the =#+TEMPLATE_DIR:= header directive or the =templates= directory of the =o-blog= library. - =style-dir=: Path of the /css/ files defined by the =#STYLE_DIR:= header directive or =style=. This directory is relative to =template-dir=. - =posts-filter=: Default filter for posts defined by the =#POSTS_FILTER:= header directive or =+TODO={DONE}=. - =static-filter=: Default filter for static pages defined by the =#STATIC_FILTER:= header directive or =+PAGES={.*}=. - =snippet-filter= Default filter for snippets defined by the =#SNIPPET_FILTER:= header directive or =+SNIPPET={.*}=. - =title=: Blog title defined by the =#+TITLE:= header directive. - =description=: Blog description defined by the =#+DESCRIPTION:= header directive. - =url=: Blog base URL defined by the =#+URL:= header. - =default-category=: Default category for posts defined by the =#DEFAULT_CATEGORY:= header or =Blog=. - =disqus=: The [[http://docs.disqus.com/developers/universal/][Disqus]] account (called a forum on [[http://disqus.com][Disqus]]) this o-blog site belongs to. Defined by the =#+DISQUS:= header. - =filename-sanitizer=: A 1-argument function to be used to sanitize post filenames. Defined by =#+FILENAME_SANITIZER:= or =ob-sanitize-string=. - =post-sorter=: A 2-argument function to be used to sort the posts. Defined by =#+POST_SORTER:= or =ob-sort-posts-by-date=. Example: #+begin_src emacs-lisp ;; get the title of the current blog defined in variable BLOG. (ob:blog-title BLOG) #+end_src *** Structures: =ob:post= - =id=: The post's numerical id. Posts are sort by reversed chronological order. The most recent post get the id 0. - =title=: The post title, read from the entry title. - =timestamp=: The post timestamp given by the =CLOSED= property or the current time. - =year=: Numerical year computed from =timestamp=. - =month=: Numerical month computed from =timestamp=. - =day=: Numerical day computed from =timestamp=. - =category=: Category read from =CATEGORY= property org =blog=. - =tags=: List of =ob:tags=. - =template=: Template to use for current post read from =TEMPLATE= property or =blog_post.html=. - =filepath=: Relative path from the blog root directory to the post directory (directory only). - =filename=: Sanitized filename generated from =title=. - =htmlfile=: Full relative path to the post html file (file and directory). - =path-to-root=: Relative path from the post html file to the blog root. - =content=: Raw content of the post (Org-mode format). - =content-html=: HTML export of the post. Example: #+begin_src emacs-lisp ;; Get the HTML content of the post defined in variable POST. (ob:post-content-html POST) #+end_src *** Structures: =ob:tags= Structure used to define a tag: - =name=: The string defining the tag name. - =safe=: Web/URL-safe tag name. - =count=: How many times the tag is used across posts. - =size=: The font size in percent. Example: #+begin_src emacs-lisp ;; get the name of the tag defined in variable TAG. (ob:tags-name TAG) #+end_src ** Variables The following variables are always available when publishing a blog: - =BLOG= (=ob:blog=): Information about the blog being published. - =POSTS= (list of =ob:post=): List of all posts of the blog or restricted list of posts (depending on what is exported). - =ALL-POSTS=: A copy of =POSTS= except this *always* contains all the posts from the blog. - =STATIC= (list of =ob:post=): List of static pages. - =SNIPPETS= (list of =ob:post=): List of snippets pages. - =TAGS= (list of =ob:tags=): List of all tags. Some variables may be defined in some functions: - =POST= (=ob:post=): The post (or static page) being currently published. - =TAG= (=ob:tags=): The tag being currently published. - =CATEGORY= (=string=): The category being published. - =YEAR=, =MONTH (=integer=): The year and month being published. - =PATH-TO-ROOT= (=string=): (internal use only, use =ob:path-to-root= instead) Path to blog root used by =ob:path-to-root=. " |
content-html | "<p> Some variables are available when publishing lisp parts of templates. These variables are defined using <a href=\"http://www.gnu.org/software/emacs/manual/html_node/cl/Structures.html\">defstruct</a>, then any slot (or property) is available using a <code>(type-slot variable)</code> form. </p> <div id=\"outline-container-1\" class=\"outline-3\"> <h3 id=\"sec-1\">Structures</h3> <div class=\"outline-text-3\" id=\"text-1\"> </div> <div id=\"outline-container-1-1\" class=\"outline-4\"> <h4 id=\"sec-1-1\">Structures: <code>ob:blog</code></h4> <div class=\"outline-text-4\" id=\"text-1-1\"> <p> Structure used to define a blog: </p> <ul> <li><code>file</code>: The blog source file (read-only). </li> <li><code>buffer</code>: Buffer visiting the blog file (read-only). </li> <li><code>publish-dir</code>: Where to publish the blog, defined by the <code>#+PUBLISH_DIR:</code> header directive or <code>out</code> in the same directory as the blog source file. </li> <li><code>template-dir</code>: Location of the template directory defined by the <code>#+TEMPLATE_DIR:</code> header directive or the <code>templates</code> directory of the <code>o-blog</code> library. </li> <li><code>style-dir</code>: Path of the <i>css</i> files defined by the <code>#STYLE_DIR:</code> header directive or <code>style</code>. This directory is relative to <code>template-dir</code>. </li> <li><code>posts-filter</code>: Default filter for posts defined by the <code>#POSTS_FILTER:</code> header directive or <code>+TODO={DONE}</code>. </li> <li><code>static-filter</code>: Default filter for static pages defined by the <code>#STATIC_FILTER:</code> header directive or <code>+PAGES={.*}</code>. </li> <li><code>snippet-filter</code> Default filter for snippets defined by the <code>#SNIPPET_FILTER:</code> header directive or <code>+SNIPPET={.*}</code>. </li> <li><code>title</code>: Blog title defined by the <code>#+TITLE:</code> header directive. </li> <li><code>description</code>: Blog description defined by the <code>#+DESCRIPTION:</code> header directive. </li> <li><code>url</code>: Blog base URL defined by the <code>#+URL:</code> header. </li> <li><code>default-category</code>: Default category for posts defined by the <code>#DEFAULT_CATEGORY:</code> header or <code>Blog</code>. </li> <li><code>disqus</code>: The <a href=\"http://docs.disqus.com/developers/universal/\">Disqus</a> account (called a forum on <a href=\"http://disqus.com\">Disqus</a>) this o-blog site belongs to. Defined by the <code>#+DISQUS:</code> header. </li> <li><code>filename-sanitizer</code>: A 1-argument function to be used to sanitize post filenames. Defined by <code>#+FILENAME_SANITIZER:</code> or <code>ob-sanitize-string</code>. </li> <li><code>post-sorter</code>: A 2-argument function to be used to sort the posts. Defined by <code>#+POST_SORTER:</code> or <code>ob-sort-posts-by-date</code>. </li> </ul> <p> Example: </p> <pre class=\"src src-emacs-lisp\"><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">get the title of the current blog defined in variable BLOG.</span> (ob:blog-title BLOG) </pre> </div> </div> <div id=\"outline-container-1-2\" class=\"outline-4\"> <h4 id=\"sec-1-2\">Structures: <code>ob:post</code></h4> <div class=\"outline-text-4\" id=\"text-1-2\"> <ul> <li><code>id</code>: The post's numerical id. Posts are sort by reversed chronological order. The most recent post get the id 0. </li> <li><code>title</code>: The post title, read from the entry title. </li> <li><code>timestamp</code>: The post timestamp given by the <code>CLOSED</code> property or the current time. </li> <li><code>year</code>: Numerical year computed from <code>timestamp</code>. </li> <li><code>month</code>: Numerical month computed from <code>timestamp</code>. </li> <li><code>day</code>: Numerical day computed from <code>timestamp</code>. </li> <li><code>category</code>: Category read from <code>CATEGORY</code> property org <code>blog</code>. </li> <li><code>tags</code>: List of <code>ob:tags</code>. </li> <li><code>template</code>: Template to use for current post read from <code>TEMPLATE</code> property or <code>blog_post.html</code>. </li> <li><code>filepath</code>: Relative path from the blog root directory to the post directory (directory only). </li> <li><code>filename</code>: Sanitized filename generated from <code>title</code>. </li> <li><code>htmlfile</code>: Full relative path to the post html file (file and directory). </li> <li><code>path-to-root</code>: Relative path from the post html file to the blog root. </li> <li><code>content</code>: Raw content of the post (Org-mode format). </li> <li><code>content-html</code>: HTML export of the post. </li> </ul> <p> Example: </p> <pre class=\"src src-emacs-lisp\"><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">Get the HTML content of the post defined in variable POST.</span> (ob:post-content-html POST) </pre> </div> </div> <div id=\"outline-container-1-3\" class=\"outline-4\"> <h4 id=\"sec-1-3\">Structures: <code>ob:tags</code></h4> <div class=\"outline-text-4\" id=\"text-1-3\"> <p> Structure used to define a tag: </p> <ul> <li><code>name</code>: The string defining the tag name. </li> <li><code>safe</code>: Web/URL-safe tag name. </li> <li><code>count</code>: How many times the tag is used across posts. </li> <li><code>size</code>: The font size in percent. </li> </ul> <p> Example: </p> <pre class=\"src src-emacs-lisp\"><span style=\"color: #888a85;\">;; </span><span style=\"color: #888a85;\">get the name of the tag defined in variable TAG.</span> (ob:tags-name TAG) </pre> </div> </div> </div> <div id=\"outline-container-2\" class=\"outline-3\"> <h3 id=\"sec-2\">Variables</h3> <div class=\"outline-text-3\" id=\"text-2\"> <p> The following variables are always available when publishing a blog: </p> <ul> <li><code>BLOG</code> (<code>ob:blog</code>): Information about the blog being published. </li> <li><code>POSTS</code> (list of <code>ob:post</code>): List of all posts of the blog or restricted list of posts (depending on what is exported). </li> <li><code>ALL-POSTS</code>: A copy of <code>POSTS</code> except this <b>always</b> contains all the posts from the blog. </li> <li><code>STATIC</code> (list of <code>ob:post</code>): List of static pages. </li> <li><code>SNIPPETS</code> (list of <code>ob:post</code>): List of snippets pages. </li> <li><code>TAGS</code> (list of <code>ob:tags</code>): List of all tags. </li> </ul> <p> Some variables may be defined in some functions: </p> <ul> <li><code>POST</code> (<code>ob:post</code>): The post (or static page) being currently published. </li> <li><code>TAG</code> (<code>ob:tags</code>): The tag being currently published. </li> <li><code>CATEGORY</code> (<code>string</code>): The category being published. </li> <li><code>YEAR</code>, <code>MONTH (=integer</code>): The year and month being published. </li> <li><code>PATH-TO-ROOT</code> (<code>string</code>): (internal use only, use <code>ob:path-to-root</code> instead) Path to blog root used by <code>ob:path-to-root</code>. </li> </ul> </div> </div> " |
Property | Value |
---|---|
id | 7 |
title | "Functions" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Documentation" "documentation"] |
tags | nil |
template | "blog_static.html" |
filepath | nil |
filename | "functions" |
htmlfile | "functions.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil Basically any elisp function could be used within an o-blog template, as long as they are known when exporting. Meanwhile some functions are specifically made to be used within templates. These functions are prefixed by =ob:=. Descriptions are taken from function docstrings. ** Function: =(ob:get-posts &optional PREDICATE COUNT SORTFUNC COLLECT)= Return posts (from =POSTS= as defined in =org-publish-blog=) matching =PREDICATE=. Limit to =COUNT= results if defined and sorted using =SORTFUNC=. =PREDICATE= is a function that runs for each post, with the post itself as argument. If =PREDICATE= is nil, no filtering will be done on posts. =SORTFUNC= uses a =sort= =PREDICATE=. If =COLLECT= is defined, only returns the =COLLECT= field of a =ob:post= structure. Examples: Getting the last 10 posts: #+begin_src emacs-lisp (ob:get-posts nil 10) #+end_src Getting posts from January 2012: #+begin_src emacs-lisp (ob:get-posts (lambda (x) (and (= 2012 (ob:post-year x)) (= 1 (ob:post-month x))))) #+end_src Getting all categories: #+begin_src emacs-lisp (ob:get-posts nil nil nil 'category) #+end_src *** Template usages For archive navigation: #+begin_src html <nav id=\"archives\"> <h1>Archives</h1> <ul> <lisp> (loop for p in (ob:get-posts nil 10) do (insert (format \"<li><a href=\\\"%s/%s\\\">%s</a></li> \" (ob:path-to-root) (ob:post-htmlfile p) (ob:post-title p)))) </lisp> </ul> </nav> #+end_src ** Function: =(ob:get-post-by-id ID)= Return post whose id is =ID=. *** Template usages Posts navigation, setting up links to previous and next post: #+begin_src html <nav class=\"articles-nav\"> <ul> <lisp> (progn ;; Get previous post (let ((ppost (ob:get-post-by-id (1+ (ob:post-id POST))))) (if ppost (insert (format \"<li class=\\\"prev\\\"><a href=\\\"%s/%s\\\">%s</a></li>\" (ob:path-to-root) (ob:post-htmlfile ppost) (ob:post-title ppost))) (insert \"<li> </li>\"))) ;; Get next post (let ((npost (ob:get-post-by-id (1- (ob:post-id POST))))) (if npost (insert (format \"<li class=\\\"next\\\"><a href=\\\"%s/%s\\\">%s</a></li>\" (ob:path-to-root) (ob:post-htmlfile npost) (ob:post-title npost))) (insert \"<li> </li>\")))) </lisp> </ul> </nav> #+end_src ** Function: =(ob:get-snippet NAME)= Get first snippet matching =NAME=. *** Template usages Insert the /About/ section in page footer: #+begin_src html <h1>About</h1> <address> <lisp>(ob:post-content-html (ob:get-snippet \"About\"))</lisp> </address> #+end_src ** Function: =(ob:get-header HEADER &optional ALL)= Get =HEADER= from blog buffer as defined in =BLOG= global context variable. Returns only the first match, unless =ALL= is defined. *** Template usages Get the last updated header for RSS export: #+begin_src html <updated><lisp>(ob:format-date (ob:get-header \"DATE\"))</lisp></updated> #+end_src ** Function: =(ob:insert-template TEMPLATE)= Insert =TEMPLATE= in current buffer. *** Template usages Insert html header: #+begin_src html <lisp>(ob:insert-template \"page_header.html\")</lisp> #+end_src ** Function: =(ob:format-date DATE &optional FORMAT LOCALE)= Format =DATE= using =FORMAT= and =LOCALE=. =DATE= can either be a string suitable for =parse-time-string= or a list of integers using =current-time= format. =FORMAT= is a =format-time-string= compatible definition. If not set, ISO8601 =%Y-%m-%dT%TZ= format will be used. *** Template usages Add a human-readable timestamp for a post: #+begin_src html Posted on <time datetime=\"<lisp> (ob:format-date (ob:post-timestamp POST)) </lisp>\"> <lisp> (ob:format-date (ob:post-timestamp POST) \"%A %B, %d %Y at %H:%M:%S\") </lisp> </time>. #+end_src " |
content-html | "<p> Basically any elisp function could be used within an o-blog template, as long as they are known when exporting. Meanwhile some functions are specifically made to be used within templates. These functions are prefixed by <code>ob:</code>. </p> <p> Descriptions are taken from function docstrings. </p> <div id=\"outline-container-1\" class=\"outline-3\"> <h3 id=\"sec-1\">Function: <code>(ob:get-posts &optional PREDICATE COUNT SORTFUNC COLLECT)</code></h3> <div class=\"outline-text-3\" id=\"text-1\"> <p> Return posts (from <code>POSTS</code> as defined in <code>org-publish-blog</code>) matching <code>PREDICATE</code>. Limit to <code>COUNT</code> results if defined and sorted using <code>SORTFUNC</code>. </p> <p> <code>PREDICATE</code> is a function that runs for each post, with the post itself as argument. If <code>PREDICATE</code> is nil, no filtering will be done on posts. </p> <p> <code>SORTFUNC</code> uses a <code>sort</code> <code>PREDICATE</code>. </p> <p> If <code>COLLECT</code> is defined, only returns the <code>COLLECT</code> field of a <code>ob:post</code> structure. </p> <p> Examples: </p> <p> Getting the last 10 posts: </p> <pre class=\"src src-emacs-lisp\">(ob:get-posts nil 10) </pre> <p> Getting posts from January 2012: </p> <pre class=\"src src-emacs-lisp\">(ob:get-posts (<span style=\"color: #729fcf; font-weight: bold;\">lambda</span> (x) (and (= 2012 (ob:post-year x)) (= 1 (ob:post-month x))))) </pre> <p> Getting all categories: </p> <pre class=\"src src-emacs-lisp\">(ob:get-posts nil nil nil 'category) </pre> </div> <div id=\"outline-container-1-1\" class=\"outline-4\"> <h4 id=\"sec-1-1\">Template usages</h4> <div class=\"outline-text-4\" id=\"text-1-1\"> <p> For archive navigation: </p> <pre class=\"src src-html\"><<span style=\"color: #edd400; font-weight: bold;\">nav</span> <span style=\"color: #eeeeec;\">id</span>=<span style=\"color: #ad7fa8;\">\"archives\"</span>> <<span style=\"color: #edd400; font-weight: bold;\">h1</span>><span style=\"font-weight: bold; text-decoration: underline;\">Archives</span></<span style=\"color: #edd400; font-weight: bold;\">h1</span>> <<span style=\"color: #edd400; font-weight: bold;\">ul</span>> <<span style=\"color: #edd400; font-weight: bold;\">lisp</span>> (loop for p in (ob:get-posts nil 10) do (insert (format <span style=\"color: #ad7fa8;\">\"<li><a href=\\\"</span><span style=\"color: #eeeeec;\">%s</span>/<span style=\"color: #eeeeec;\">%s</span>\\<span style=\"color: #ad7fa8;\">\">%s</a></li> \"</span> (ob:path-to-root) (ob:post-htmlfile p) (ob:post-title p)))) </<span style=\"color: #edd400; font-weight: bold;\">lisp</span>> </<span style=\"color: #edd400; font-weight: bold;\">ul</span>> </<span style=\"color: #edd400; font-weight: bold;\">nav</span>> </pre> </div> </div> </div> <div id=\"outline-container-2\" class=\"outline-3\"> <h3 id=\"sec-2\">Function: <code>(ob:get-post-by-id ID)</code></h3> <div class=\"outline-text-3\" id=\"text-2\"> <p> Return post whose id is <code>ID</code>. </p> </div> <div id=\"outline-container-2-1\" class=\"outline-4\"> <h4 id=\"sec-2-1\">Template usages</h4> <div class=\"outline-text-4\" id=\"text-2-1\"> <p> Posts navigation, setting up links to previous and next post: </p> <pre class=\"src src-html\"><<span style=\"color: #edd400; font-weight: bold;\">nav</span> <span style=\"color: #eeeeec;\">class</span>=<span style=\"color: #ad7fa8;\">\"articles-nav\"</span>> <<span style=\"color: #edd400; font-weight: bold;\">ul</span>> <<span style=\"color: #edd400; font-weight: bold;\">lisp</span>> (progn ;; Get previous post (let ((ppost (ob:get-post-by-id (1+ (ob:post-id POST))))) (if ppost (insert (format <span style=\"color: #ad7fa8;\">\"<li class=\\\"</span>prev\\<span style=\"color: #ad7fa8;\">\"><a href=\\\"</span><span style=\"color: #eeeeec;\">%s</span>/<span style=\"color: #eeeeec;\">%s</span>\\<span style=\"color: #ad7fa8;\">\">%s</a></li>\"</span> (ob:path-to-root) (ob:post-htmlfile ppost) (ob:post-title ppost))) (insert <span style=\"color: #ad7fa8;\">\"<li>&nbsp;</li>\"</span>))) ;; Get next post (let ((npost (ob:get-post-by-id (1- (ob:post-id POST))))) (if npost (insert (format <span style=\"color: #ad7fa8;\">\"<li class=\\\"</span>next\\<span style=\"color: #ad7fa8;\">\"><a href=\\\"</span><span style=\"color: #eeeeec;\">%s</span>/<span style=\"color: #eeeeec;\">%s</span>\\<span style=\"color: #ad7fa8;\">\">%s</a></li>\"</span> (ob:path-to-root) (ob:post-htmlfile npost) (ob:post-title npost))) (insert <span style=\"color: #ad7fa8;\">\"<li>&nbsp;</li>\"</span>)))) </<span style=\"color: #edd400; font-weight: bold;\">lisp</span>> </<span style=\"color: #edd400; font-weight: bold;\">ul</span>> </<span style=\"color: #edd400; font-weight: bold;\">nav</span>> </pre> </div> </div> </div> <div id=\"outline-container-3\" class=\"outline-3\"> <h3 id=\"sec-3\">Function: <code>(ob:get-snippet NAME)</code></h3> <div class=\"outline-text-3\" id=\"text-3\"> <p> Get first snippet matching <code>NAME</code>. </p> </div> <div id=\"outline-container-3-1\" class=\"outline-4\"> <h4 id=\"sec-3-1\">Template usages</h4> <div class=\"outline-text-4\" id=\"text-3-1\"> <p> Insert the <i>About</i> section in page footer: </p> <pre class=\"src src-html\"><<span style=\"color: #edd400; font-weight: bold;\">h1</span>><span style=\"font-weight: bold; text-decoration: underline;\">About</span></<span style=\"color: #edd400; font-weight: bold;\">h1</span>> <<span style=\"color: #edd400; font-weight: bold;\">address</span>> <<span style=\"color: #edd400; font-weight: bold;\">lisp</span>>(ob:post-content-html (ob:get-snippet <span style=\"color: #ad7fa8;\">\"About\"</span>))</<span style=\"color: #edd400; font-weight: bold;\">lisp</span>> </<span style=\"color: #edd400; font-weight: bold;\">address</span>> </pre> </div> </div> </div> <div id=\"outline-container-4\" class=\"outline-3\"> <h3 id=\"sec-4\">Function: <code>(ob:get-header HEADER &optional ALL)</code></h3> <div class=\"outline-text-3\" id=\"text-4\"> <p> Get <code>HEADER</code> from blog buffer as defined in <code>BLOG</code> global context variable. </p> <p> Returns only the first match, unless <code>ALL</code> is defined. </p> </div> <div id=\"outline-container-4-1\" class=\"outline-4\"> <h4 id=\"sec-4-1\">Template usages</h4> <div class=\"outline-text-4\" id=\"text-4-1\"> <p> Get the last updated header for RSS export: </p> <pre class=\"src src-html\"><<span style=\"color: #edd400; font-weight: bold;\">updated</span>><<span style=\"color: #edd400; font-weight: bold;\">lisp</span>>(ob:format-date (ob:get-header <span style=\"color: #ad7fa8;\">\"DATE\"</span>))</<span style=\"color: #edd400; font-weight: bold;\">lisp</span>></<span style=\"color: #edd400; font-weight: bold;\">updated</span>> </pre> </div> </div> </div> <div id=\"outline-container-5\" class=\"outline-3\"> <h3 id=\"sec-5\">Function: <code>(ob:insert-template TEMPLATE)</code></h3> <div class=\"outline-text-3\" id=\"text-5\"> <p> Insert <code>TEMPLATE</code> in current buffer. </p> </div> <div id=\"outline-container-5-1\" class=\"outline-4\"> <h4 id=\"sec-5-1\">Template usages</h4> <div class=\"outline-text-4\" id=\"text-5-1\"> <p> Insert html header: </p> <pre class=\"src src-html\"><<span style=\"color: #edd400; font-weight: bold;\">lisp</span>>(ob:insert-template <span style=\"color: #ad7fa8;\">\"page_header.html\"</span>)</<span style=\"color: #edd400; font-weight: bold;\">lisp</span>> </pre> </div> </div> </div> <div id=\"outline-container-6\" class=\"outline-3\"> <h3 id=\"sec-6\">Function: <code>(ob:format-date DATE &optional FORMAT LOCALE)</code></h3> <div class=\"outline-text-3\" id=\"text-6\"> <p> Format <code>DATE</code> using <code>FORMAT</code> and <code>LOCALE</code>. </p> <p> <code>DATE</code> can either be a string suitable for <code>parse-time-string</code> or a list of integers using <code>current-time</code> format. </p> <p> <code>FORMAT</code> is a <code>format-time-string</code> compatible definition. If not set, ISO8601 <code>%Y-%m-%dT%TZ</code> format will be used. </p> </div> <div id=\"outline-container-6-1\" class=\"outline-4\"> <h4 id=\"sec-6-1\">Template usages</h4> <div class=\"outline-text-4\" id=\"text-6-1\"> <p> Add a human-readable timestamp for a post: </p> <pre class=\"src src-html\">Posted on <<span style=\"color: #edd400; font-weight: bold;\">time</span> <span style=\"color: #eeeeec;\">datetime</span>=<span style=\"color: #ad7fa8;\">\"<lisp> (ob:format-date (ob:post-timestamp POST)) </lisp>\"</span>> <<span style=\"color: #edd400; font-weight: bold;\">lisp</span>> (ob:format-date (ob:post-timestamp POST) <span style=\"color: #ad7fa8;\">\"%A %B, %d %Y at %H:%M:%S\"</span>) </<span style=\"color: #edd400; font-weight: bold;\">lisp</span>> </<span style=\"color: #edd400; font-weight: bold;\">time</span>>. </pre> </div> </div> </div> " |
Property | Value |
---|---|
id | 8 |
title | "Bug report" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Documentation" "documentation"] |
tags | nil |
template | "blog_static.html" |
filepath | nil |
filename | "bug-report" |
htmlfile | "bug-report.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil To report a bug please be sure your issue is =o-blog= related. You can bootstrap a simple clean environment: #+begin_src sh rm -rf ~/dev/.emacs.d mkdir -p ~/dev/.emacs.d cd ~/dev/.emacs.d git clone git://github.com/renard/o-blog.git git clone git://orgmode.org/org-mode.git #+end_src Then launch =emacs=: #+begin_src sh cd ~/dev rm -rf .emacs.d/o-blog/example/out emacs --debug-init -Q -l .emacs.d/o-blog/sample-init.el --eval \\ '(progn (setq browse-url-generic-program \"x-www-browser\" browse-url-browser-function (quote browse-url-generic)) (ob-build-sample))' #+end_src You can change =x-www-browser= to your favorite browser. If everything runs fine emacs will exit normally. Otherwise a buffer called =o-blog Bug-report= is created and its content is copied to primary X selection (if available). This buffer contains useful information for debugging your issue. A browser window will open to the [[https://github.com/renard/o-blog/issues/new][o-blog new issue page]]. Then you can either paste content of the =o-blog Bug-report= buffer, or use the X primary selection (middle click). Please describe as much as possible your issue (in English). Do not hesitate to paste your blog file to https://gist.github.com/ as this might be useful in debugging. " |
content-html | "<p> To report a bug please be sure your issue is <code>o-blog</code> related. </p> <p> You can bootstrap a simple clean environment: </p> <pre class=\"src src-sh\">rm -rf ~/dev/.emacs.d mkdir -p ~/dev/.emacs.d <span style=\"color: #729fcf;\">cd</span> ~/dev/.emacs.d git clone git://github.com/renard/o-blog.git git clone git://orgmode.org/org-mode.git </pre> <p> Then launch <code>emacs</code>: </p> <pre class=\"src src-sh\"><span style=\"color: #729fcf;\">cd</span> ~/dev rm -rf .emacs.d/o-blog/example/out emacs --debug-init -Q -l .emacs.d/o-blog/sample-init.el --eval <span style=\"color: #ad7fa8;\">\\</span> <span style=\"color: #ad7fa8;\">'(progn (setq browse-url-generic-program \"x-www-browser\"</span> <span style=\"color: #ad7fa8;\"> browse-url-browser-function (quote browse-url-generic))</span> <span style=\"color: #ad7fa8;\"> (ob-build-sample))'</span> </pre> <p> You can change <code>x-www-browser</code> to your favorite browser. </p> <p> If everything runs fine emacs will exit normally. Otherwise a buffer called <code>o-blog Bug-report</code> is created and its content is copied to primary X selection (if available). This buffer contains useful information for debugging your issue. A browser window will open to the <a href=\"https://github.com/renard/o-blog/issues/new\">o-blog new issue page</a>. Then you can either paste content of the <code>o-blog Bug-report</code> buffer, or use the X primary selection (middle click). </p> <p> Please describe as much as possible your issue (in English). Do not hesitate to paste your blog file to <a href=\"https://gist.github.com/\">https://gist.github.com/</a> as this might be useful in debugging. </p> " |
Property | Value |
---|---|
id | 9 |
title | "Testimonials" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Documentation" "documentation"] |
tags | nil |
template | "blog_static_no_title.html" |
filepath | nil |
filename | "testimonials" |
htmlfile | "testimonials.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil #+BEGIN_HTML <div class=\"row \"><div class=\"span6 \"> #+END_HTML #+HTML: <h1>Testimonials</h1> #+begin_quote /“o-blog, great static site generator from emacs Org-mode.”/ -- Pierre-Yves Ritschard [[https://twitter.com/pyr/status/160466727195521024][@pyr]] ([[http://openbds.org][OpenBSD]] relayd original author) -- Sergey Konoplev [[http://twitter.com/gray_hemp][@gray\\_hemp]] ([[http://PostgreSQL-Consulting.com][PostgreSQL Consultant]]) -- Olivier Berger [[http://twitter.com/olberger][@olberger]] ([[http://www.april.org][APRIL administrator]]) -- Dimitri Fontaine [[http://twitter.com/tapoueh][@tapoueh]] ([[http://tapoueh.org/projects.html][el-get and other]] author) -- Julien Danjou [[http://twitter.com/juldanjou][@juldanjou]] ([[http://awesome.naquadah.org/][Awesome window manager]] and [[http://julien.danjou.info/software/][other]] author) -- Daniel Farina [[http://twitter.com/danfarina][@danfarina]] (member of the [[http://www.heroku.com/][Heroku]] Department of Data) #+end_quote #+begin_quote /“o-blog, a cool static blog generator from org-mode markup with some nice Bootstrap integration.”/ -- [[http://from-the-cloud.com/en/Random/2012/06/17_sites-back.html][Fabián Ezequiel Gallina]] #+end_quote #+begin_quote /“Thank you so much for the truly excellent elisp app. I am learning many things from it.”/ -- [[https://github.com/priyadarshan][priyadarshan]] #+end_quote #+begin_quote /“o-blog looks awesome!”/ -- [[https://github.com/djcb][Dirk-Jan C. Binnema]] (Author of [[http://www.djcbsoftware.nl/code/mu4e][mu4e]] and [[http://emacs-fu.blogspot.com][emacs-fu]]) #+end_quote #+begin_quote /“o-blog is amazing. After using Wordpress seemingly since the dawn of time, then Jekyll for a couple of years, this is like a spring breeze after a long, cold winter.”/ -- [[https://github.com/fravashi][Farasha Euker]] #+end_quote #+BEGIN_HTML </div><div class=\"span6 \"> #+END_HTML #+BEGIN_HTML <div class=\"hero-unit\"> #+END_HTML #+HTML: <h1>They use it</h1> - [[http://renard.github.com/o-blog][O-blog Project]] - [[http://docs.chezwam.org][Mes doc à moi]] - [[http://from-the-cloud.com/][From the cloud]] - [[http://exaos.github.com/o-blog/][exaos]] - [[http://mikio.github.com/index.html][Mikio Kun]] - [[http://mimes.is/][Journal of the creative imagination]] - [[http://www.djcbsoftware.nl][DJCB Software]] - [[http://dimilar.com/de/index.html][Erlang Vision]] - [[http://pharos-alexandria.github.com][Pharos (Annette von Stockhausen)]] #+BEGIN_HTML </div> #+END_HTML #+BEGIN_HTML <div class=\"hero-unit\"> #+END_HTML If you do use o-blog, please [[https://github.com/renard/o-blog/issues/new][drop me a line]]. #+BEGIN_HTML </div> #+END_HTML #+BEGIN_HTML </div></div> #+END_HTML " |
content-html | "<div class=\"row \"><div class=\"span6 \"> <h1>Testimonials</h1> <blockquote> <p><i>“o-blog, great static site generator from emacs Org-mode.”</i> </p> <p> – Pierre-Yves Ritschard <a href=\"https://twitter.com/pyr/status/160466727195521024\">@pyr</a> (<a href=\"http://openbds.org\">OpenBSD</a> relayd original author) </p> <p> – Sergey Konoplev <a href=\"http://twitter.com/gray_hemp\">@gray_hemp</a> (<a href=\"http://PostgreSQL-Consulting.com\">PostgreSQL Consultant</a>) </p> <p> – Olivier Berger <a href=\"http://twitter.com/olberger\">@olberger</a> (<a href=\"http://www.april.org\">APRIL administrator</a>) </p> <p> – Dimitri Fontaine <a href=\"http://twitter.com/tapoueh\">@tapoueh</a> (<a href=\"http://tapoueh.org/projects.html\">el-get and other</a> author) </p> <p> – Julien Danjou <a href=\"http://twitter.com/juldanjou\">@juldanjou</a> (<a href=\"http://awesome.naquadah.org/\">Awesome window manager</a> and <a href=\"http://julien.danjou.info/software/\">other</a> author) </p> <p> – Daniel Farina <a href=\"http://twitter.com/danfarina\">@danfarina</a> (member of the <a href=\"http://www.heroku.com/\">Heroku</a> Department of Data) </p> </blockquote> <blockquote> <p><i>“o-blog, a cool static blog generator from org-mode markup with some nice Bootstrap integration.”</i> </p> <p> – <a href=\"http://from-the-cloud.com/en/Random/2012/06/17_sites-back.html\">Fabián Ezequiel Gallina</a> </p> </blockquote> <blockquote> <p><i>“Thank you so much for the truly excellent elisp app. I am learning many things from it.”</i> </p> <p> – <a href=\"https://github.com/priyadarshan\">priyadarshan</a> </p> </blockquote> <blockquote> <p><i>“o-blog looks awesome!”</i> </p> <p> – <a href=\"https://github.com/djcb\">Dirk-Jan C. Binnema</a> (Author of <a href=\"http://www.djcbsoftware.nl/code/mu4e\">mu4e</a> and <a href=\"http://emacs-fu.blogspot.com\">emacs-fu</a>) </p> </blockquote> <blockquote> <p><i>“o-blog is amazing. After using Wordpress seemingly since the dawn of time, then Jekyll for a couple of years, this is like a spring breeze after a long, cold winter.”</i> </p> <p> – <a href=\"https://github.com/fravashi\">Farasha Euker</a> </p> </blockquote> </div><div class=\"span6 \"> <div class=\"hero-unit\"> <h1>They use it</h1> <ul> <li><a href=\"http://renard.github.com/o-blog\">O-blog Project</a> </li> <li><a href=\"http://docs.chezwam.org\">Mes doc à moi</a> </li> <li><a href=\"http://from-the-cloud.com/\">From the cloud</a> </li> <li><a href=\"http://exaos.github.com/o-blog/\">exaos</a> </li> <li><a href=\"http://mikio.github.com/index.html\">Mikio Kun</a> </li> <li><a href=\"http://mimes.is/\">Journal of the creative imagination</a> </li> <li><a href=\"http://www.djcbsoftware.nl\">DJCB Software</a> </li> <li><a href=\"http://dimilar.com/de/index.html\">Erlang Vision</a> </li> <li><a href=\"http://pharos-alexandria.github.com\">Pharos (Annette von Stockhausen)</a> </li> </ul> </div> <div class=\"hero-unit\"> <p> If you do use o-blog, please <a href=\"https://github.com/renard/o-blog/issues/new\">drop me a line</a>. </p> </div> </div></div> " |
Property | Value |
---|---|
id | 10 |
title | "Roadmap" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Documentation" "documentation"] |
tags | nil |
template | "blog_static.html" |
filepath | nil |
filename | "roadmap" |
htmlfile | "roadmap.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil Here are some ideas for future versions - Use other source engines such as - [[http://www.methods.co.nz/asciidoc/][AsciiDoc]] - [[http://mwolson.org/projects/EmacsMuse.html][Emacs Muse]] - etc... - Find a other name for the project such as - Web Hypertext Otimized Rendering Easy System - Building the Interweb from Texts Classic Hypermedia - Build All Internet Standard E-documents - Publication Unifiée de Tous E-documents - el-site - el-sitemanage - el-sitepublish - el-sitepress If you have any ideas please [[https://github.com/renard/o-blog/issues/new][drop me a line]]. " |
content-html | "<p> Here are some ideas for future versions </p> <ul> <li>Use other source engines such as <ul> <li><a href=\"http://www.methods.co.nz/asciidoc/\">AsciiDoc</a> </li> <li><a href=\"http://mwolson.org/projects/EmacsMuse.html\">Emacs Muse</a> </li> <li>etc… </li> </ul> </li> <li>Find a other name for the project such as <ul> <li>Web Hypertext Otimized Rendering Easy System </li> <li>Building the Interweb from Texts Classic Hypermedia </li> <li>Build All Internet Standard E-documents </li> <li>Publication Unifiée de Tous E-documents </li> <li>el-site </li> <li>el-sitemanage </li> <li>el-sitepublish </li> <li>el-sitepress </li> </ul> </li> </ul> <p> If you have any ideas please <a href=\"https://github.com/renard/o-blog/issues/new\">drop me a line</a>. </p> " |
Property | Value |
---|---|
id | 11 |
title | "FAQ" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Documentation" "documentation"] |
tags | nil |
template | "blog_static.html" |
filepath | nil |
filename | "faq" |
htmlfile | "faq.html" |
path-to-root | "." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil ** Why does my page look ugly/un-styled? Maybe you are using [[https://www.google.com/chrome/][Google Chrome]] and you're trying to view your site locally using a =file:///path/to/your/site/out/index.html= scheme. Open the JavaScript console =Ctrl+Shift+I= and you should see something like: #+begin_example XMLHttpRequest cannot load file:///path/to/your/site/out/out/style/css/o-blog.less. Cross origin requests are only supported for HTTP. less-1.2.1.min.js:8Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 #+end_example If so, that is a known Chrome issue with loading local javascript files, and is actually a /security feature/ in Chrome. You can disable this with the =--allow-file-access-from-files= option in Chrome, or you can use another browser like Firefox, or setup a local webserver. To use a local webserver, there are many complex solutions such as [[http://nginx.org/][nginx]] or [[http://httpd.apache.org/][Apache]] or many [[http://en.wikipedia.org/wiki/Comparison_of_web_server_software][others]]. If you prefer a lighter and simpler solution using Python, simply run: #+begin_src sh cd /path/to/your/site && python -m SimpleHTTPServer #+end_src ...and browse http://localhost:8000 Or within Emacs you can run the [[https://github.com/jrhbailey/emacs-http-server][emacs-http-server]]: #+begin_src emacs-lisp (require 'httpd) (setq httpd-root \"/path/to/your/site\") (httpd-start) #+end_src ...and browse http://localhost:8080 Another alternative would be the use of [[http://www.emacswiki.org/emacs/Elnode][elnode]] but it seems to be more complex. ** Why html pages are not minified? HTML compression very tricky. Things can easily go wrong. Using a [[http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/][GZip compression]] would be more efficient. Anyway if you still want to minify your pages, you can have a look to [[http://code.google.com/p/htmlcompressor/][htmlcompressor]], [[http://developer.yahoo.com/yui/compressor/][yuicompressor]] and [[https://developers.google.com/closure/compiler/][Closure compiler]]. You can also read Juriy Zaytsev's articles on [[http://perfectionkills.com/optimizing-html/][optimizing HTML]] and [[http://perfectionkills.com/experimenting-with-html-minifier/][experimenting with html minifier]]. So here is the magic! Once your site is generated, you can run the following command: #+BEGIN_SRC sh htmlcompressor --compress-js --compress-css --recursive --mask '*.js;*.html;*.xml;*.css;*.less' -o /path/to/out/ /path/to/out #+END_SRC " |
content-html | "<div id=\"outline-container-1\" class=\"outline-3\"> <h3 id=\"sec-1\">Why does my page look ugly/un-styled?</h3> <div class=\"outline-text-3\" id=\"text-1\"> <p> Maybe you are using <a href=\"https://www.google.com/chrome/\">Google Chrome</a> and you're trying to view your site locally using a <code>file:///path/to/your/site/out/index.html</code> scheme. Open the JavaScript console <code>Ctrl+Shift+I</code> and you should see something like: </p> <pre class=\"example\">XMLHttpRequest cannot load file:///path/to/your/site/out/out/style/css/o-blog.less. Cross origin requests are only supported for HTTP. less-1.2.1.min.js:8Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 </pre> <p> If so, that is a known Chrome issue with loading local javascript files, and is actually a <i>security feature</i> in Chrome. </p> <p> You can disable this with the <code>--allow-file-access-from-files</code> option in Chrome, or you can use another browser like Firefox, or setup a local webserver. </p> <p> To use a local webserver, there are many complex solutions such as <a href=\"http://nginx.org/\">nginx</a> or <a href=\"http://httpd.apache.org/\">Apache</a> or many <a href=\"http://en.wikipedia.org/wiki/Comparison_of_web_server_software\">others</a>. If you prefer a lighter and simpler solution using Python, simply run: </p> <pre class=\"src src-sh\"><span style=\"color: #729fcf;\">cd</span> /path/to/your/site && python -m SimpleHTTPServer </pre> <p> …and browse <a href=\"http://localhost:8000\">http://localhost:8000</a> </p> <p> Or within Emacs you can run the <a href=\"https://github.com/jrhbailey/emacs-http-server\">emacs-http-server</a>: </p> <pre class=\"src src-emacs-lisp\">(<span style=\"color: #729fcf; font-weight: bold;\">require</span> '<span style=\"color: #8ae234;\">httpd</span>) (setq httpd-root <span style=\"color: #ad7fa8;\">\"/path/to/your/site\"</span>) (httpd-start) </pre> <p> …and browse <a href=\"http://localhost:8080\">http://localhost:8080</a> </p> <p> Another alternative would be the use of <a href=\"http://www.emacswiki.org/emacs/Elnode\">elnode</a> but it seems to be more complex. </p> </div> </div> <div id=\"outline-container-2\" class=\"outline-3\"> <h3 id=\"sec-2\">Why html pages are not minified?</h3> <div class=\"outline-text-3\" id=\"text-2\"> <p> HTML compression very tricky. Things can easily go wrong. Using a <a href=\"http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/\">GZip compression</a> would be more efficient. </p> <p> Anyway if you still want to minify your pages, you can have a look to <a href=\"http://code.google.com/p/htmlcompressor/\">htmlcompressor</a>, <a href=\"http://developer.yahoo.com/yui/compressor/\">yuicompressor</a> and <a href=\"https://developers.google.com/closure/compiler/\">Closure compiler</a>. You can also read Juriy Zaytsev's articles on <a href=\"http://perfectionkills.com/optimizing-html/\">optimizing HTML</a> and <a href=\"http://perfectionkills.com/experimenting-with-html-minifier/\">experimenting with html minifier</a>. </p> <p> So here is the magic! Once your site is generated, you can run the following command: </p> <pre class=\"src src-sh\">htmlcompressor --compress-js --compress-css --recursive --mask <span style=\"color: #ad7fa8;\">'*.js;*.html;*.xml;*.css;*.less'</span> -o /path/to/out/ /path/to/out </pre> </div> </div> " |
Property | Value |
---|---|
id | nil |
title | "Redirect from (Example of some org syntax)" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | nil |
template | "page_redirect.html" |
filepath | "tips/2012/01/07_example-of-some-org-syntax/" |
filename | "index" |
htmlfile | "tips/2012/01/07_example-of-some-org-syntax/index.html" |
path-to-root | "../../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil * Redirect from (Example of some org syntax) :PROPERTIES: :PAGE: tips/2012/01/07_example-of-some-org-syntax/index.html :TEMPLATE: page_redirect.html :END:" |
content-html | "<div id=\"outline-container-1\" class=\"outline-2\"> <h2 id=\"sec-1\">Redirect from (Example of some org syntax)</h2> <div class=\"outline-text-2\" id=\"text-1\"> </div> </div> " |
Property | Value |
---|---|
id | nil |
title | "Redirect from (Adding an image into a post)" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Tips" "tips"] |
tags | nil |
template | "page_redirect.html" |
filepath | "tips/2012/08/21_adding-an-image-into-a-post/" |
filename | "index" |
htmlfile | "tips/2012/08/21_adding-an-image-into-a-post/index.html" |
path-to-root | "../../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil * Redirect from (Adding an image into a post) :PROPERTIES: :PAGE: tips/2012/08/21_adding-an-image-into-a-post/index.html :TEMPLATE: page_redirect.html :END:" |
content-html | "<div id=\"outline-container-1\" class=\"outline-2\"> <h2 id=\"sec-1\">Redirect from (Adding an image into a post)</h2> <div class=\"outline-text-2\" id=\"text-1\"> </div> </div> " |
Property | Value |
---|---|
id | 0 |
title | "Copyright" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Blog details" "blog-details"] |
tags | nil |
template | "blog_post.html" |
filepath | "blog-details/2012/08" |
filename | "copyright" |
htmlfile | "blog-details/2012/08/23_copyright.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil Copyright © 2008-2012 [[mailto:seb%2520%E2%9D%A8%C9%91%C6%A6%C9%B5%CF%90%C9%91%CA%82%C9%9B%E2%9D%A9%2520chezwam%2520%E2%9D%A8%C6%A4%C9%B5%C9%A9%C9%B2%CA%88%E2%9D%A9%2520org][Sébastien Gross]]. Published under the therm of the [[http://creativecommons.org/licenses/by-nc-sa/2.0/fr/][Creative Commons Attribution-Noncommercial-Share Alike 2.0 France License]]. " |
content-html | "<p> Copyright © 2008-2012 <a href=\"mailto:seb%20❨ɑƦɵϐɑʂɛ❩%20chezwam%20❨Ƥɵɩɲʈ❩%20org\">Sébastien Gross</a>. Published under the therm of the <a href=\"http://creativecommons.org/licenses/by-nc-sa/2.0/fr/\">Creative Commons Attribution-Noncommercial-Share Alike 2.0 France License</a>. </p>" |
Property | Value |
---|---|
id | 1 |
title | "About" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Blog details" "blog-details"] |
tags | nil |
template | "blog_post.html" |
filepath | "blog-details/2012/08" |
filename | "about" |
htmlfile | "blog-details/2012/08/23_about.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil This is a sample blog to explain how [[https://github.com/renard/o-blog][o-blog]] works. " |
content-html | "<p> This is a sample blog to explain how <a href=\"https://github.com/renard/o-blog\">o-blog</a> works. </p>" |
Property | Value |
---|---|
id | 2 |
title | "Navigation" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Blog details" "blog-details"] |
tags | nil |
template | "blog_post.html" |
filepath | "blog-details/2012/08" |
filename | "navigation" |
htmlfile | "blog-details/2012/08/23_navigation.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil - [[file:../../../features.html][/icon-cog icon-white/ Features]] - [[#][/icon-book icon-white/ Documentation]] - [[file:../../../templates.html][Templates]] - [[file:../../../structures.html][Structures]] - [[file:../../../functions.html][Functions]] - - [[file:../../../faq.html][FAQ]] - - [[file:../../../bug-report.html][Bug report]] - [[#][/icon-file icon-white/ Tips]] - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] - [[file:Lisp error in nil: (void-variable "%s/%s")][Lisp error in nil: (void-variable "Tips")]] - [[file:../../../tags.html][/icon-tags icon-white/ Tags]] - [[file:../../../archives.html][/icon-list icon-white/ Archives]] - [[file:../../../testimonials.html][/icon-comments-alt icon-white/ Testimonials]] - [[file:../../../index.xml][/icon-rss icon-white/ RSS]] - [[file:../../../changelog.html][/icon-pencil icon-white/ Changelog]] - [[file:../../../roadmap.html][/icon-tasks icon-white/ Roadmap]] - [[file:../../../debug.html][(debug)]] " |
content-html | "<ul> <li><a href=\"../../../features.html\"><i>icon-cog icon-white</i> Features</a> </li> <li><a href=\"#\"><i>icon-book icon-white</i> Documentation</a> <ul> <li><a href=\"../../../templates.html\">Templates</a> </li> <li><a href=\"../../../structures.html\">Structures</a> </li> <li><a href=\"../../../functions.html\">Functions</a> </li> <li> </li> <li><a href=\"../../../faq.html\">FAQ</a> </li> <li> </li> <li><a href=\"../../../bug-report.html\">Bug report</a> </li> </ul> </li> <li><a href=\"#\"><i>icon-file icon-white</i> Tips</a> <ul> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\">Lisp error in nil: (void-variable "Tips")</a> </li> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\">Lisp error in nil: (void-variable "Tips")</a> </li> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\">Lisp error in nil: (void-variable "Tips")</a> </li> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\">Lisp error in nil: (void-variable "Tips")</a> </li> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\">Lisp error in nil: (void-variable "Tips")</a> </li> </ul> </li> <li><a href=\"../../../tags.html\"><i>icon-tags icon-white</i> Tags</a> </li> <li><a href=\"../../../archives.html\"><i>icon-list icon-white</i> Archives</a> </li> <li><a href=\"../../../testimonials.html\"><i>icon-comments-alt icon-white</i> Testimonials</a> </li> <li><a href=\"../../../index.xml\"><i>icon-rss icon-white</i> RSS</a> </li> <li><a href=\"../../../changelog.html\"><i>icon-pencil icon-white</i> Changelog</a> </li> <li><a href=\"../../../roadmap.html\"><i>icon-tasks icon-white</i> Roadmap</a> </li> <li><a href=\"../../../debug.html\">(debug)</a> </li> </ul> " |
Property | Value |
---|---|
id | 3 |
title | "Navigation Footer" |
timespamp | (20534 20656) |
year | 2012 |
month | 8 |
day | 23 |
category | [cl-struct-ob:category "Blog details" "blog-details"] |
tags | nil |
template | "blog_post.html" |
filepath | "blog-details/2012/08" |
filename | "navigation-footer" |
htmlfile | "blog-details/2012/08/23_navigation-footer.html" |
path-to-root | "../../.." |
sitemap | nil |
content | "#+OPTIONS: H:7 num:nil toc:nil d:nil todo:nil <:nil pri:nil tags:nil - [[file:../../../index.html][/icon-home icon-white/ Home]] - [[file:Lisp error in nil: (void-variable "%s/%s")][/icon-file icon-white/ Tips]] - [[file:../../../tags.html][/icon-tags icon-white/ Tags]] - [[file:../../../archives.html][/icon-list icon-white/ Archives]] - [[file:../../../testimonials.html][/icon-comments-alt icon-white/ Testimonials]] - [[file:../../../roadmap.html][/icon-tasks icon-white/ Roadmap]] - [[file:../../../index.xml][/icon-rss icon-white/ RSS]] " |
content-html | "<ul> <li><a href=\"../../../index.html\"><i>icon-home icon-white</i> Home</a> </li> <li><a href=\"Lisp error in nil: (void-variable "%s/%s")\"><i>icon-file icon-white</i> Tips</a> </li> <li><a href=\"../../../tags.html\"><i>icon-tags icon-white</i> Tags</a> </li> <li><a href=\"../../../archives.html\"><i>icon-list icon-white</i> Archives</a> </li> <li><a href=\"../../../testimonials.html\"><i>icon-comments-alt icon-white</i> Testimonials</a> </li> <li><a href=\"../../../roadmap.html\"><i>icon-tasks icon-white</i> Roadmap</a> </li> <li><a href=\"../../../index.xml\"><i>icon-rss icon-white</i> RSS</a> </li> </ul> " |