Update templates.rst

This commit is contained in:
Qing Lei 2014-11-25 19:34:40 +08:00
parent 03dcee102f
commit 73b8e9d0e3

View file

@ -12,7 +12,7 @@ Just prepend api/ to the URL's path name to discover the JSON return. Any value

*A page's name corresponds to the template and language's filename (ex. ``http://domain.com/topic/xyz`` correlates to ``topic.tpl``). Sometimes this is not the case - ex. ``/user/xyz`` loads ``account.tpl``. Have a look at the ``custom_mapping`` section in ``public/templates/config.json`` for more details.

Templating Basics
模板基础
------------------------------------------------------

Using the API return as your guide, you can utilize any of those values in your template/logic. Using the above API call as an example, for anything in the root level of the return you can do something like:
@ -38,35 +38,35 @@ And finally you can loop through arrays and create blocks like so:

The above will create X copies of the above block, for each item in the posts array.

Templating Logic
模板逻辑
------------------------------------------------------

NodeBB's templating system implements some basic logic. Using the same API call as above for our example. You can write IF conditionals like so:
NodeBB 的模板系统实现了一些基础的逻辑。Using the same API call as above for our example. 可以像下面这样写条件判断(IF):

.. code:: html

<!-- IF unreplied -->
This thread is unreplied!
此帖不可回复!
<!-- ENDIF unreplied -->


Another example:
另一个例子:

.. code:: html

<!-- IF !disableSocialButtons -->
<button>Share on Facebook</button>
<button>分享到 Facebook</button>
<!-- ELSE -->
Sharing has been disabled.
分享已被禁用。
<!-- ENDIF !disableSocialButtons -->


We can check for the length of an array like so:
可以检查数组的长度,如下:

.. code:: html

<!-- IF posts.length -->
There be some posts
此处有回帖
<!-- ENDIF posts.length -->


@ -88,12 +88,12 @@ While looping through an array, we can check if our current index is the @first
For more advanced documentation, have a look at the `templates.js <https://github.com/psychobunny/templates.js>`_ repository


Exposing template variables to client-side JavaScript
传递模板参数给客户端 JavaScript
------------------------------------------------------

There are two ways of letting our JS know about data from the server-side, apart from WebSockets (TODO: will be covered in a different article).
有两种方式,让 JS 接收到客户端的数据, 除了 WebSockets 之外 (TODO: 将会在其他文章中叙述)。

Via jQuery.get
通过 jQuery.get
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

If we require data from a different page we can make a ``$.get`` call to any other API call. For example, if we wanted to know more about a specific user we could make a call like so:
@ -107,7 +107,7 @@ If we require data from a different page we can make a ``$.get`` call to any oth

See this API call in action: http://community.nodebb.org/api/user/psychobunny

Via Template Variables
通过模板变量
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

In topic.tpl for example, we can add a hidden input like so:
@ -124,7 +124,7 @@ The template system will immediately parse all of these and expose them via the

This is the ideal method of letting JS know about important variables within the template.

Internationalization
国际化
---------------------

The template engine interfaces with the internationalization system as well. We can embed variables into language strings. Let's use `this API call <http://community.nodebb.org/api/register>`_ as well as this `language file <http://community.nodebb.org/language/en_GB/register.json>`_ as an example. We can now do something like the following:
@ -145,7 +145,7 @@ to

A unique username between 2 and 16 characters

Advanced Topics
高级话题
---------------------

Dynamically requiring and rendering a template file from client-side JavaScript
@ -178,7 +178,7 @@ You can also access the invidual blocks inside each template, which is handy for
});


Rendering templates on server-side Node.js
在服务端 Node.js 中渲染模板
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

The templating system hooks into Express just like most other templating frameworks. Just use either ``app.render`` or ``res.render`` to parse the appropriate template.