Use emacs org-mode to write a blog & post it to the blog Garden

Use emacs org-mode to write a blog & post it to the blog Garden

My blog: http://blog.striveforfreedom.net

Table of Contents

• 1 Overview
• 2. problems encountered when posting a blog to the blog Garden
  • 2.1 some template indentation exceptions
  • 2.2 more titles
  • 2.3 too many blank lines before the title
• 3 Summary

1 Overview

I recently wanted to write a blog (mainly a technical blog), record my daily life and work thoughts and problems, searched the internet, and found that the blog Park is quite good, so I planned to camp in the blog garden. Because we usually use emacs to write code, we naturally plan to use emacs (version 24.2) org-mode (version 7.8.11) to write a blog, however, I found several problems in my blog test and published a blog. After a few days of exploration, I finally solved them. Therefore, I hope this article will help my friends who have encountered similar problems.

2. problems encountered when posting a blog to the blog Garden

I encountered the following three problems when I posted a test blog on my blog. I wanted to give up my blog, but another blog I tested was worse, in contrast, the blog Park is still able to be transformed, so we had to calm down and solve the problem. Fortunately, the problem was finally solved.

2.1 some template indentation exceptions

The blog template I initially set is AnotherEon001. After posting a blog, the indentation on the left side is abnormal, as shown below:

The red lines enclose abnormal indentation. There are articles on the Internet that it is okay to use the template displayed on the left. I changed the template kubrick displayed on the left (this template is used now ), this problem does not exist. However, I found that some of the articles displayed on the left have this problem. I found an article on the blog garden to solve the conflict between the Org and blog garden templates, this article provides the cause and solution of the problem. Follow the modification instructions and use the template AnotherEon001. The cause of this problem is that the id of An <div> element in html exported by org-mode is "content ", the blog garden template defines a style for the element whose id value is "content" (in my example, a large margin-left value is defined ), as a result, the effect is shown. No code is provided in that article. I will give it here to help unfamiliar friends:

(add-hook 'org-mode-hook (lambda()                           (setq org-export-html-content-div nil)                           (setq org-export-html-divs '("preamble" "org-content" "postamble"))))

The org-export-html-divs variable defines the id values of the three <div> elements. The original value is ("preamble" "content" "postamble "), here it is changed to ("preamble" "org-content" "postamble ").

2.2 more titles

The html code exported by using emacs has a small problem, that is, a title is displayed, and the display effect is as follows:

The red lines enclose redundant titles. Although this is a small problem, it seems awkward and intolerable. After several attempts, we found that the cause of this title is that the html code exported by emacs contains the <title> element. The blog garden system generates this title based on the <title> element, it is easy to find the cause and modify it. Just make the exported html not contain the <title> element. The html export function is completed by the org-export-as-html function, find this function and remove the <title> element generation, as shown in:

You just need to delete the area of the red line.

2.3 too many blank lines before the title

After the above problem is solved, there is still a large blank area in front of the title, which is very unattractive, as shown in:

By viewing the post-published blog html code, we found that there were two codes that led to empty lines. The first part is:

<p>&nbsp;</p>

The reason is that the xml declaration is exported by emacs, and the above Code is generated after the blog garden system processes it. You can modify the org-export-as-html function to avoid the above Code Generation and eliminate empty lines:

Delete the line break after % s. Otherwise, empty lines cannot be deleted ). The second part is:

<div id="preamble">&nbsp;</div>

This is because emacs exports an empty <div> element, and the above Code is generated after the blog garden system processes it. You can modify the project attribute: html-preamble to avoid exporting empty <div> elements, thus eliminating empty rows. The Code is as follows (for clarity, the setting code for other attributes is omitted ):

(add-hook 'org-mode-hook (lambda()                           (setq org-publish-project-alist '(("cnblogs" :html-preamble nil)))))      

3 Summary

After solving these problems, the blog interface is much more comfortable, and some details are displayed. You can use the CSS custom Page Style Function of the blog garden to improve the style. I will not go into details here.