Octopress blog settings

Document directory

• Set Homepage
• Set up an article

In the previous article "building an Octopress blog in Windows", I introduced how to set up an Octopress blog in a Windows environment and how to deploy it to Github. This article mainly explains how to set up Octopress, for example, you can modify the blog title and add a sidebar.

Octopress file directory

First, let's take a look at the Octopress file directory, because many settings start from here.

The cloned Octopress source code does not have the last three files. When rake install is executed, the last three directories are generated.

• Source: The Directory is run after rake install from. source in the themes \ classic directory is copied and A _ posts directory is added. After rake new_post ['title'] is executed, the markdown file of the blog post is generated in _ post. Many of the following configuration pages are included in this directory;
• Sass: it is also copied from the source in the. themes \ classic directory after rake install is executed. Sass extends CSS3 and adds features such as rules, variables, ing, selector, and inheritance. Sass generates well-formatted CSS code, which is easy to organize and maintain.
• Public: when the source code is cloned, public is an empty directory. After rake generate is executed, the source content is compiled and the compiled content is copied to the public directory, after rake deploy is executed, the public content is pushed to the server, and the public content is finally accessed. You do not need to manually modify the content in this directory. Run rake generate to generate the content.

Basic settings

There is a file named _ config. yml in the Octopress directory:

Url: http://oec2003.github.io # website address
Title: Feng Wei's personal blog # website title
Subtitle
Author: Feng Wei # the author of the website, usually at the end of the page and the end of each article
Simple_search: http://google.com/search # Search Engine
Description: # description of the website, which appears in the meta on the HTML page

In the markdown file generated using rake new_post ['title'], you can make some settings for each blog post:

---
Layout: post
Title: "My first Octopress blog" # article title
Date: # Article release date
Comments: true # allow comments
Categories: Octopress # document category
---

Set the description and keywords of the website

Setting the meta element named description and keywords in the head of a webpage makes it easier for the search engine to search for the webpage, the following describes how to set the description and keywords of the home page and each blog in Octopress.

Set Homepage

Open the source/index.html file and add the corresponding content to the file header:

---
Layout: default
# The following content is added:
Description: "Feng Wei's personal blog"
Keywords: Asp. Net, C #
---

Set up an article

You can directly add the corresponding internal volume to the header of the markdown file corresponding to each article:

---
Layout: post
Title: "My first Octopress blog"
Date:
Comments: true
Categories: Octopress
# Add content below
Description: "My first Octopress blog"
Keywords: Octopress
---

Navigation bar settings

Open the file source \ _ includes \ custom \ navigation.html. The default value is as follows:

<Ul class = "main-navigation">
<Li> <a href = "{root_url}/"> Blog </a> </li>
<Li> <a href = "{root_url}/blog/archives"> Archives </a> </li>
</Ul>

You can change your Blog and Archives to homepage and archive, but remember to save files that contain Chinese characters as UTF-8 encoding formats without BOM. You can also add a tab here. For example, to add a tab, follow these steps:

Run the command rake new_page ['about'] to create a page with the path source \ about \ index. markdown;

Modify the navigation.html Of the role:

<Ul class = "main-navigation">
<Li> <a href = "{root_url}/"> homepage </a> </li>
<Li> <a href = "{root_url}/blog/archives"> archive </a> </li>
<Li> <a href = "{root_url}/about"> about </a> </li>
</Ul>

Add topic category

We know that there is a categories in the markdown file of the article that can be used to set the classification of the article. Articles with categories configured will display the classification link at the end of the article, to display all categories on the sidebar, follow these steps:

1. Create the category_list_tag.rb file in the plugins directory. The file content is as follows:

Module Jekyll
Class CategoryListTag <Liquid: Tag
Def render (context)
Html = ""
Categories = context. registers [: site]. categories. keys
Categories. sort. each do | category |
Posts_in_category = context. registers [: site]. categories [category]. size
Category_dir = context. registers [: site]. config ['category _ dir']
Category_url = File. join (category_dir, category. gsub (/_ | \ P {Word }/,'-'). gsub (/-{2 ,}/,'-'). downcase)
Html <"<li class = 'category '> <a href ='/# {category_url}/'>#{ category} (# {posts_in_category }) </a> </li> \ n"
End
Html
End
End
End

Liquid: Template. register_tag ('category _ list', Jekyll: CategoryListTag)

2. Add the source/_ uplodes/asides/category_list.html file with the following content:

<Section>
<H1> document Category <Ul id = "categories">
{% Category_list %}
</Ul>
</Section>

Again, the file contains Chinese characters that need to be saved as a UTF-8 without BOM format

3. Modify the _ config. yml file and add asides/category_list.html to the default_asides item. Values are separated by commas.

Default_asides: [asides/category_list.html, asides/recent_posts.html]

To change the Recent Posts of the latest article to Chinese, modify source \ _ shortdes \ asides \ recent_posts.html.

You can also add other components on the sidebar, such as Sina Weibo, my Douban, latest comments, and tag cloud. You can add pages and display them in a similar way, only when the content value is different.

Add Comment

Octopress itself does not support the comment function, but we can use a third-party comment system, which includes Disqus and domestic comments. The following describes how to use Disqus in Octopress.

First, register an account in Disqus, log on to the Dashboard, and add the site information.

Set the following in the _ config. yml file:

# Disqus Comments
Disqus_short_name: oec2003 # oec2003 is the Site Shortname
Disqus_show_comment_count: true

Add copyright notice

The copyright statement mentioned here refers to the copyright information after each article.

First, the license license.html file in the source \ _ shortdes \ postdirectory is as follows:

{% If site. post_license %}

<DIV style = "font-size: 12px; BORDER-BOTTOM: # bbbbbb 1px solid; BORDER-LEFT: # bbbbbb 1px solid; BACKGROUND: # f6f6f6; HEIGHT: 120px; BORDER-TOP: # bbbbbb 1px solid; BORDER-RIGHT: # bbbbbb 1px solid "class = oec2003right>
<DIV style = "MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 5px; MARGIN-RIGHT: 10px">
</DIV>
<DIV style = "LINE-HEIGHT: 200%; MARGIN-TOP: 10px, COLOR: #000000">
Author: <A href = "http://oec2003.github.io/"> Feng Wei </A> <BR>
Source: <A href = "http://oec2003.github.io/"> http://oec2003.github.io/</A>
<BR> Based on <a target = "_ blank" title = "Creative Commons Attribution 2.5 China Mainland License" href = "http://creativecommons.org/licenses/by/2.5/cn/">
Signature 2.5 mainland China </a> license agreement is published. You are welcome to reprint, interpret, or use it for commercial purposes, but you must keep the signature in this article
<A href = "http://oec2003.github.io/"> Feng Wei </a> (including links ). </DIV>
{% Endif %}

Add the following style information to sass \ custom \ _ styles. scss to control the style of copyright information.

. Oec2003right
{
Background: # C3D9FF;
Height: 120px;
Border: 1px solid # BBBBBB;
}

. Oec2003right a: link
{
Color: #0057b6;
Text-decoration: none;
}
. Oec2003right a: visited
{
Color: #0057b6;
Text-decoration: none;
}
. Oec2003right a: active, a: hover
{
Color: #0057b6;
Text-decoration: underline;
}

Modify the file source \ _ layouts \ post.html

Add a configuration item in _ config. yml to control whether the page's copyright information is displayed.

# Post License
Post_license: true

Final display effect:

Present the article in abstract form

By default, all content of each article is displayed on the blog homepage. More often, we only want to display part of the article content on the homepage. When you click to read the full text, we will go to the detailed page of the article, you can easily implement this function in Octopress:

1. Add <! -More->. After running rake generate, only <! -More-> the preceding text will show the Read on link after the text. Click it to go to the text details page;

2. If you want to change Read on to Chinese, you can modify the _ config. yml file.

# Excerpt_link: "Read on & rarr;" # "Continue reading" link text at the bottom of excerpted articles

Excerpt_link: "read the full text & rarr;" # "Continue reading" link text at the bottom of excerpted articles

References

Add the latest comment to the sidebar

Http://yanping.me/cn/blog/2012/02/07/comment-sidebar/

Add Tag Cloud

Http://codemacro.com/2012/07/18/add-tag-to-octopress/

Summary

In fact, the so-called settings are to modify some content of the Octopress source file, or add some pages according to the Octopress file organization mode, open each Octopress file and you will find out the basics.