In the web, as
it turned out, not too much information on how to create your own
themes for the blogging platform from Google, at least, in RuNet. There are some stubby posts about how to configure a separate property of the widgets, and more. Therefore, in this article I have decided to consolidate knowledge on the subject.
In general, the Blogger template is an XML-file containing HTML-pages (CSS-format is also included in this file). It looks like this (some details are omitted for simplicity):
Blocks
Thus, the main component of any Blogger template is his body -
Each section of the template is opened and closed by a special tag, it looks like this:
<b:section> Tag can have the following attributes (it is obligatory only id):
Sections can only contain widgets: if you want the extra code between widgets in one section, then this section will be divided into several parts.
Widget, in fact, is a single tag that is inserted in the place where the page should display the contents of this widget: the actual content is stored in a database and extract Blogger while rendering on the server side. Below are some examples of widgets:
The widget can have the following attributes (only the first two of which are optional):
And here is the promised types of widgets that you can use in your template:
Each of them can be described in brief (provided above), or the extended form, detailing the contents. To learn how to configure and modify a particular widget, discussed in the next section. So far, I want to note that after applying a template to blog all items
Just stick a widget to the topic - not interested. It is interesting to customize them to suit your needs. To do this, first of all, you need to replace the single tag to a double:
The fact that you can put in the middle, it will go further.
Filling the widget contained in the block «includable» in the following format:
Only two attributes: id and var. C id we are familiar, and var - is another identifier that is used to refer to this block in the inner sections (more on this later).
Each widget must have one includable with id = 'main'. Most often it is the only element that will contain all necessary information. If you describe more than one indoor unit, they will not show up automatically. For example, if you created a block with id = 'new', then display it in the main you will need to write
Tag
Below is a simple example of a combination includable-blocks (the cycles will be discussed below):
One unit includable can be inserted in several places pages or inserted anywhere else if it does not yet want to display.
So, we got to the core element of the ones we are interested to data:
It's a few examples of how easy it is to use the tag data. In the first case, we simply substitute the value of the header at the right place and in the second - the attribute url element photo (this is similar to accessing a field object in OOP). What kind of "field" have any "objects" in Blogger, we consider later.
To write cycles in templates Blogger used the tag
As you can see, it is quite simple: as specified variable var serving iterator and values we record collection, which will sort out. An illustrative example:
Conditions, paradoxically, in the Blogger recorded using tags
Tag
As a condition can use any expression that evaluates to true or false. Some examples at last:
As mentioned earlier, there are many predefined tags that retrieve data from a database Blogger'a. All of them are written in the form:
It is important to remember that the data-tags on a particular widget, can be accessed only within the widget, for example, can not apply to photo.url, while the widget BlogArchive, because he "does not know" about any photo, and the fact more about her address. However, there is an exception - so-called global data available. The information in this category can be anywhere within a template, refer to it in this form:
The remaining data tags are not global and are divided into categories according to the existing widgets in Blogger:
I will not describe each category, as they are all very similar. Read details about them can be here .
That's about all. Now you have a general idea about the architecture of the skin for Blogger. In any case, tell me, where you can see examples of patterns, and how to upload your own. To do this, go to the settings of your blog, in the "template." There will need to click on the "Edit HTML». Voila - you'll get a window with the code applied at the moment the template.
The basic elements of the template
In general, the Blogger template is an XML-file containing HTML-pages (CSS-format is also included in this file). It looks like this (some details are omitted for simplicity):
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <title> ... </title> <b:skin> ... </b:skin> <b:template-skin> ... </b:template-skin> </head> <body> ... </body> </html> Blocks
<b:skin> and <b:template-skin>
, responsible for the CSS-design, I will not be considered, since I
personally do to create templates using the new Twitter Bootstrap. Let us now better the part that is responsible for displaying the content. Thus, the main component of any Blogger template is his body -
<body> . It consists mainly of sections and widgets. Sections are the key elements of the page: header, sidebar, footer, and the like.
Well, and widgets - are individual blocks pages, such as messages,
pictures or any other item that can be added to the tab "Page Elements"
in the template editor. Section may surround any custom HTML-code required. Each section of the template is opened and closed by a special tag, it looks like this:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section>
<b:section> Tag can have the following attributes (it is obligatory only id):
- id - a unique name that contains only letters and numbers;
- class - the usual name of the class in terms of HTML;
- maxwidgets - as the name implies, this is the maximum number of items that may appear in this section;
- showaddelement - a boolean field, which can be set to «yes» or «no» («yes» - by default), to determine whether the tab "Page Elements" display button "Add a Page Element" in this section;
- growth - the last option with the possible values «horizontal» or «vertical» («vertical» - by default), which defines how to widgets in this section.
Sections can only contain widgets: if you want the extra code between widgets in one section, then this section will be divided into several parts.
Widget, in fact, is a single tag that is inserted in the place where the page should display the contents of this widget: the actual content is stored in a database and extract Blogger while rendering on the server side. Below are some examples of widgets:
<b:widget id="header" type='HeaderView' locked="yes"/> <b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/> <b:widget id="BlogArchive1" locked="false" mobile="yes" title="Blog Archive" type="BlogArchive"/>
The widget can have the following attributes (only the first two of which are optional):
- id - the unique identifier of the widget can not be changed without deleting the widget and create a new one;
- type - defines the type of widget from the list of allowed types (more on this below);
- locked - a boolean field («no» - by default), which determines whether this widget to be moved or deleted on the tab "Page Elements";
- title - title of the widget;
- pageType - be «all», «archive», «main», or «item» (from «all» by default), specifies which pages to display this blog widget;
- mobile - can be set to «yes», «no» or «only» («default» default), and determines whether the widget display a mobile version of your blog.
And here is the promised types of widgets that you can use in your template:
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
Each of them can be described in brief (provided above), or the extended form, detailing the contents. To learn how to configure and modify a particular widget, discussed in the next section. So far, I want to note that after applying a template to blog all items
<b:section> and <b:widget> will be replaced with divs with certain identifiers, that is, the elements can freely go in CSS, for example, div#header or div#myList . Expansion and modification of widgets
Just stick a widget to the topic - not interested. It is interesting to customize them to suit your needs. To do this, first of all, you need to replace the single tag to a double:
<b:widget [...attributes...]> ... </b:widget>
The fact that you can put in the middle, it will go further.
Inserts
Filling the widget contained in the block «includable» in the following format:
<b:includable id='main' var='thiswidget'> ... </b:includable>
Only two attributes: id and var. C id we are familiar, and var - is another identifier that is used to refer to this block in the inner sections (more on this later).
Each widget must have one includable with id = 'main'. Most often it is the only element that will contain all necessary information. If you describe more than one indoor unit, they will not show up automatically. For example, if you created a block with id = 'new', then display it in the main you will need to write
<b:include name='new' /> . Tag
b:include can have the following attributes: name (mandatory) and data.
Name must match the id of an existing includable, and data - is an
expression or data that will be transferred to the includable (as the
value of var). Below is a simple example of a combination includable-blocks (the cycles will be discussed below):
<b:includable id='main'> <b:loop var='i' values='posts'> <b:include name='post' data='i'/> </b:loop> </b:includable> <b:includable id='post' var='p'> Title: <data:p.title/> </b:includable>
One unit includable can be inserted in several places pages or inserted anywhere else if it does not yet want to display.
Data
So, we got to the core element of the ones we are interested to data:
-
<data:title/> -
<data:photo.url/> - etc.
It's a few examples of how easy it is to use the tag data. In the first case, we simply substitute the value of the header at the right place and in the second - the attribute url element photo (this is similar to accessing a field object in OOP). What kind of "field" have any "objects" in Blogger, we consider later.
Cycles
To write cycles in templates Blogger used the tag
b:loop , which has the following syntax: <b:loop var='identifier' values='set-of-data'> ... </b:loop>
As you can see, it is quite simple: as specified variable var serving iterator and values we record collection, which will sort out. An illustrative example:
<b:loop var='i' values='data:posts'> <h2><data:i.title/></h2> </b:loop>
Ramification
Conditions, paradoxically, in the Blogger recorded using tags
b:if and b:else . The general format of the conditions is as follows: <b:if cond='condition'> [content to display if condition is true] <b:else/> [content to display if condition is false] </b:if>
Tag
b:else , however, can not be, if the counter-term we do not need. As a condition can use any expression that evaluates to true or false. Some examples at last:
-
<b:if cond='data:post.showBacklinks'> -
<b:if cond='data:blog.pageType == "item"'> -
<b:if cond='data:displayname != "Fred"'> -
<b:if cond='data:post.numComments > 1'>
Data-tags
As mentioned earlier, there are many predefined tags that retrieve data from a database Blogger'a. All of them are written in the form:
<data:name/> or <data:name1.name2/> , depending on the depth of nesting of certain information. It is important to remember that the data-tags on a particular widget, can be accessed only within the widget, for example, can not apply to photo.url, while the widget BlogArchive, because he "does not know" about any photo, and the fact more about her address. However, there is an exception - so-called global data available. The information in this category can be anywhere within a template, refer to it in this form:
<data:blog.*/> (where the asterisk is written we are interested in an attribute). This category includes the following attributes: - title - title of the blog;
- pageType - type of page can be «item», «archive» or «index»;
- url - the address of the current page;
- homepageUrl - my home page;
- pageTitle - the page title;
- encoding - encoding a blog, for example, UTF-8;
- languageDirection - text direction can be «ltr» (left to right) or «rtl» (vice versa);
- feedLinks - autodiscovery link to the page title.
The remaining data tags are not global and are divided into categories according to the existing widgets in Blogger:
- Page Header
- Blog Posts
- Blog Archives
- Profile
- Text / HTML / JavaScript
- Feed
- Picture
- Labels
- List
- Link List
- Logo
I will not describe each category, as they are all very similar. Read details about them can be here .
Conclusion
That's about all. Now you have a general idea about the architecture of the skin for Blogger. In any case, tell me, where you can see examples of patterns, and how to upload your own. To do this, go to the settings of your blog, in the "template." There will need to click on the "Edit HTML». Voila - you'll get a window with the code applied at the moment the template.
Articles
0 commentaires:
Enregistrer un commentaire