Org HTML Export

org

Table of Contents

This website is generated by exporting orgmode files to html. A small python script then adds headers, footers and a backlink section to each page.

Install htmlize for export to html and require / configure a few packages. 

(use-package htmlize)

(require 'ox-publish)
(require 'ox-html)
(setq org-export-htmlize-output-type 'css)
(setq org-html-htmlize-output-type 'css)
(setq org-export-with-sub-superscripts nil)

(setq org-html-doctype "html5")
(setq blog-base-path "/home/leon/org/website/")

Date Metadata Advice

The HTML exporter adds <meta> tags for the file's author and keyword. Add an advice around it to also include the date. 

(defadvice org-html--build-meta-info (after my-html--build-meta-info)
  (let* ((info (ad-get-arg 0))
         (date (plist-get info :date))
         (protect-string
          (lambda (str)
            (replace-regexp-in-string
             "\"" "&quot;" (org-html-encode-plain-text str)))))
    (pp date)
    (if date
        (setq ad-return-value
              (concat
               ad-return-value
               (org-html-close-tag
                "meta"
                (format
                 "name=\"date\" content=\"%s\""
                 (funcall
                  protect-string
                  (if (stringp (car date))
                      (car date)
                    (org-element-property :raw-value (car date)))))
                info)
               "\n")))))

(ad-activate 'org-html--build-meta-info)

Footnote Section

I don't like the ":" after the footnote section header. 

(setq org-html-footnotes-section "<div id=\"footnotes\">
<h2 class=\"footnotes\">%s</h2>
<div id=\"text-footnotes\">
%s
</div>
</div>")

Publishing Configuration

Using the inheritance pattern from the org-publish html tutorial .

This deals only with converting org files to html, pdf and txt formats, copying static files is handled by the python site generator script. 

(setq org-publish-project-alist
      '(
         ("org"
         :base-directory "~/org/"
         :base-extension "org"
         :publishing-directory "~/org/html/"
         :recursive t
         ;; :html-head nil
         :publishing-function org-html-publish-to-html
         :headline-levels 4
         :html-extension "html"
         :html-preamble nil
         :html-postamble nil
         :html-doctype "html5"
         :html-html5-fancy t
         :html-head-include-default-style nil
         :html-head-include-scripts nil

         :section-numbers nil
         :with-toc nil
         :with-title nil
         :with-date t

         :makeindex nil)
         ("pages"
         :base-directory "~/org/pages/"
         :base-extension "org"
         :publishing-directory "~/org/html/pages/"
         :recursive t
         ;; :html-head nil
         :publishing-function org-html-publish-to-html
         :headline-levels 4
         :html-extension "html"
         :html-preamble nil
         :html-postamble nil
         :html-doctype "html5"
         :html-html5-fancy t
         :html-head-include-default-style nil
         :html-head-include-scripts nil

         :section-numbers nil
         :with-toc nil
         :with-title nil
         :with-date t

         :makeindex nil)
        ("website-org-txt"
         :base-directory "~/org/pages/"
         :base-extension "org"
         :publishing-directory "~/org/html/pages/"
         :publishing-function org-ascii-publish-to-ascii
         :headline-levels 4
         :section-numbers t
         :with-toc t)
        ("website-org-pdf"
         :base-directory "~/org/pages/"
         :base-extension "org"
         :publishing-directory "~/org/html/pages/"
         :publishing-function org-latex-publish-to-pdf
         :headline-levels 4
         :section-numbers t
         :with-toc t)
        ("website" :components
         ("org"
          "website-org-txt"
          "website-org-pdf"))))

SVG Images

By default, the org html export wraps .svg images in a <object> tag.

I just redefine the function to use <img> tags for all images. 

(defun org-html--format-image (source attributes info)
  "Return \"img\" tag with given SOURCE and ATTRIBUTES.
SOURCE is a string specifying the location of the image.
ATTRIBUTES is a plist, as returned by
`org-export-read-attribute'.  INFO is a plist used as
a communication channel."
  (org-html-close-tag
   "img"
   (org-html--make-attribute-string
    (org-combine-plists
     (list :src source
           :alt (if (string-match-p "^ltxpng/" source)
                    (org-html-encode-plain-text
                     (org-find-text-property-in-string 'org-latex-src source))
                  (file-name-nondirectory source)))
     attributes))
   info))

Backlinks

If you have an idea how this page could be improved or a comment send me a mail.