Basic WeCenter 2. x Template Development tutorial

Basic WeCenter 2. x Template Development tutorial

I. Description of the role of the template directory (taking the default template as an example)

/Views/default/

/Account-account templates, such as logon and Registration

/Admin-Background

/Block-General modules

/Config-configure the paging Style

/Favorite-my favorites

/Feature-topics

/Global-global common modules, such as header and bottom

/Home-homepage, found page

/Inbox-private message

/Install-install

/Invitation-invite friends

/M-mobile version Template

/Migrate-install upload directory settings

/Notifications-Notification

/People-personal page

/Publish-initiate

/Question-Problem

/Reader-reader

/Search-search

/Topic-topic

Note: In the ajax directory, the template is a data template.

Ii. Description of the roles of individual files in the Static directory:

Css (taking default as an example based on the image description)

Bootstrap.css-bootstrap framework

Icon image of glyphicons-halflings.png-bootstrap framework

Glyphicons-halflings-white.png-Same as above

Btn-sprite.css-button css

Common.css-template main css file

Ie7.css-ie7 compatibility css

Link.css-full site font color

Login.css-Logon page css

Register.css-registration page css

User-setting.css-user settings page css

User.css-user homepage css

2. javascript (image description)

Aw_template.js-common page template files, such as pop-up templates

Function. js-basic functions of the entire site

App. js-js called during page loading

/Editor-editor js

/Plug_module/plug-in_module.js-All Station basic framework js, connotation jQuery, bootstrap, attachment upload, Hogan template engine

Iii. template Inheritance Mechanism

4. Create a new template

Css creation: Create the Template Name directory newstyle under the static/css/directory, and create the css file with the corresponding name in the newstyle directory, if there is an image file of the corresponding template, create another img directory. If there is no image file, ignore it, as shown in

After creating a new css, you can add the css of the new template and overwrite the original css of default to overwrite it. Note: The css file name must be the same as the Template Name to create a template: Create a folder with the same Template Name under the views directory, as shown in

Suppose you want to create a new login page for the new template, You can first copy the corresponding directories and files under the default directory to the new template file and then modify it, as shown in:

The preceding operations are repeated to modify other templates. After creating a new template file, log on to the background and select a new template in the interface settings.

Note: The file directory location of the new template must be the same as that of the default template directory for overwriting.

5. Basic Page Structure

The page is generally composed of the header, the middle content, and the bottom. The header and the bottom are common. Some pages have a sidebar. Here are some examples of common module call methods.

Header call:

Bottom call:

Sidebar call: Because the page width is 940px, we have an aw-wecenter class to fix the width. css names are based on aw-prefix, you can modify the page layout as needed by referring to the layout method of the bs2.3.2 framework.

If you have any questions can go to bs Chinese official website to view the manual, http://www.bootcss.com/scaffolding.html

6. Common Code Analysis

Code structure of common modules

After the container is defined in the page layout, the code of the preceding two modules is nested, for example, the sidebar.

Common css code analysis

. Aw-wecenter limit page width

. Aw-main-content limits the width of main content

. Aw-side-bar limit the sidebar width

. Pull-left floating

. Pull-right floating right

. Clearfix clear floating

All icons are named after. aw-icon + icon, for example,. aw-icon. I-v (except for the built-in bs)

All btn names are named after. aw-btn + btn, for example,. aw-btn. B-new-user (excluding those included in bs)

All btn names are named after. aw-btn + btn, for example,. aw-btn. B-new-user (excluding those included in bs)