Wecenter Two-time development tutorial (i): familiar with template structure

<1> program File directory description :

app– application Directory

models– Model Catalog

plugins– Plugin Directory

static– Static files

system– System Directory

views– Template Catalog

Our simple page Two development is mainly concerned about the static and views of the two files. The following is a description of the file in the corresponding directory function

Static inside files are:

Admin: Background Control Panel of Css,js, picture these files;

Common: Public pictures of the site, such as the community's default avatar image;

CSS: The main introduction of Css/default CSS file features:

link.css– full station font color;

common.css– template main css file;

login.css– Login Page CSS

register.css– Register page CSS

user-setting.css– User Settings page CSS

user.css– User Homepage CSS

JS: The template js file, contains some common JS files and some control the function of the JS file,

Where the app file contains the control template corresponding to the function of the JS file,

Mobile.js is the mobile version of the JS file;

aw_template.js– page generic template file, such as pop-up window template;

function.js– Basic function function of the whole station;

app.js– page load when the call JS;

/editor– Editor JS;

/plug_module/plug-in_module.js– whole station Basic frame JS, connotation jquery,bootstrap, attachment upload, Hogan template engine.

Next look at the views file corresponding content:

Actually views is to put the corresponding template file, the program comes with two templates-default and black Classblack,

Where you may find that Classblack file content is empty, here you want to understand the Wecenter template inheritance mechanism, wecenter system of the default main template, the user's custom template only need to change a few files to achieve the program interface customization.

Specific as follows:

<2> say again how to create a new template:

1. Create a template directory below views. If you do not want to adjust the structure of the template, you can not put the content, if you want to adjust the layout of the program's structure of these things, you need to copy the corresponding files from the default in the new template file and then in the two modification development, not recommended directly in the default changes. The corresponding file function in the default template (Views/default):

/account– account related templates, such as login, registration, etc.
/admin– Backstage
/article
/block– Universal Module
/config– Configuring page-out Styles
/favorite– my collection.
/feature– Special Topics
/global– Global Universal module, such as head, bottom
/home– Home, Discover page
/inbox– Private Messages
/install– Installation
/invitation– Invite Friends
/m– Mobile Version Template
/migrate– Install upload directory settings
/notifications– Notice
/people– personal page
/publish– initiated
/question– problems
/reader– Reader
/search– Search
/topic– topics

Note: The directory under the Ajax directory template for the data template

2. Under static/css/to create the same directory as the template (the file name is the same, take your template name as the file name), and then start to create CSS files inside, the same CSS file name is also your template name, here we do not recommend directly modify the default template CSS file, Because it inherits the properties from the default common.css, you just need to write all the CSS you need to change in your new CSS file.

<3> describes the basic structure of the page:

The page is usually composed of the head, the middle content, the bottom, the sidebar. Where the head and bottom include some sidebar are generic, are implemented by calling the module:

Head Call: <?php tpl::output (' global/header.tpl.htm ');?>

Bottom call: <?php tpl::output (' global/footer.tpl.htm ');?>

Side bar Call: <?php tpl::output (' block/sidebar_menu.tpl.htm ');?>

The middle content part is basically to get the data content through Ajax, because Wecenter uses the bootstrap framework, so the overall framework layout of the content is inserted in the code framework such as the diagram:

{{{
<div class= "Container" >
<div class= "Row" >
<div class= "col-md-12 col-sm-12" >

</div>
</div>
</div>
}}}

Into the content of the specific code structure, we are using such a module structure:

{{{
<div class= "Aw-mod" >
<div class= "Aw-mod-head" >
</div>
<div class= "Aw-mod-body" >
</div>
<div class= "Aw-mod-footer" >
</div>
</div>
}}}

The side bar structure, we will replace the. Aw-mod. Aw-side-bar-mod. Where AW is the program prefix, the new template if you need to add or change the structure can be another prefix to facilitate the maintenance of late modification.

Wecenter Two-time development tutorial (i): familiar with template structure