October CMS - 快速入门 7 显示列表和详情页
October CMS    2018-10-23 10:51:54    88    0    0
emengweb   October CMS

在movies页面中显示的影片列表是最原始的格式显示的。那么我们对这个列表及其详情页进行格式化。
themesraiseinfopagesmovies.htm
如下所示,列表采用的是attribute来显示的

<ul class="record-list">
    {% for record in records %}
        <li>
            {# Use spaceless tag to remove spaces inside the A tag. #}
            {% spaceless %}
                {% if detailsPage %}
                    <a href="{{ detailsPage|page({ (detailsUrlParameter): attribute(record, detailsKeyColumn) }) }}">
                {% endif %}

                {{ attribute(record, displayColumn) }}

                {% if detailsPage %}
                    </a>
                {% endif %}
            {% endspaceless %}
        </li>
    {% else %}
        <li class="no-data">{{ noRecordsMessage }}</li>
    {% endfor %}
</ul>

我们可以试试下面的方式
可以得到相同的结果

<ul class="record-list">
    {% for record in records %}
        <li>
            {# Use spaceless tag to remove spaces inside the A tag. #}
            {% spaceless %}
                {% if detailsPage %}
                    <a href="{{ detailsPage|page({ (detailsUrlParameter): attribute(record, detailsKeyColumn) }) }}">
                {% endif %}

                <!--{{ attribute(record, displayColumn) }}-->
                {{ record.name }}

                {% if detailsPage %}
                    </a>
                {% endif %}
            {% endspaceless %}
        </li>
    {% else %}
        <li class="no-data">{{ noRecordsMessage }}</li>
    {% endfor %}
</ul>

同样道理,我们可以增加文章的简介字段

<ul class="record-list">
    {% for record in records %}
        <li>
            {# Use spaceless tag to remove spaces inside the A tag. #}
            {% spaceless %}
                {% if detailsPage %}
                    <a href="{{ detailsPage|page({ (detailsUrlParameter): attribute(record, detailsKeyColumn) }) }}">
                {% endif %}

                <!--{{ attribute(record, displayColumn) }}-->
                {{ record.name }}

                {% if detailsPage %}
                    </a>
                {% endif %}
            {% endspaceless %}

            {{ record.description }}
        </li>
    {% else %}
        <li class="no-data">{{ noRecordsMessage }}</li>
    {% endfor %}
</ul>

刷新页面,显示如下,description会以源码的形式显示,如果需要以Htm的格式显示需要
{{ record.description|raw }}

其变化是显而易见的吧。下面我们再给影片信息标题加上h3标签。

 
 <h3>
            {% spaceless %}
                {% if detailsPage %}
                    <a href="{{ detailsPage|page({ (detailsUrlParameter): attribute(record, detailsKeyColumn) }) }}">
                {% endif %}

                <!--{{ attribute(record, displayColumn) }}-->
                {{ record.name }}

                {% if detailsPage %}
                    </a>
                {% endif %}
            {% endspaceless %}
            </h3>

 

因为影片介绍内容太长了,我们希望只显示其中的前150个字符。

{{ html_limit(record.description,150)|raw }}​

为电影标题添加详情链接

下面我们查看下面的代码

{% spaceless %}
    {% if detailsPage %}
        <a href="{{ detailsPage|page({ (detailsUrlParameter): attribute(record, detailsKeyColumn) }) }}">
    {% endif %}

    <!--{{ attribute(record, displayColumn) }}-->
    {{ record.name }}

    {% if detailsPage %}
        </a>
    {% endif %}
{% endspaceless %}

代码{% if detailsPage %}的意思是,如果这个电影有描述信息,则显示为超链接,否则没有超链接。
但是,这里对于我们的影片是无效的,因为,我们没有创建影片的详情页面。下面我们创建详情页面。
根据下图创建

 

然后设置组件Record Details

保存模板

刷新页面后,发现没有生效,这是因为,仅仅建立详情页是不行的,必须进行相应的设置

刷新页面可以看见,标题的链接已经加上了

点击链接,则可以看见影片的详情页面

 

 


但是,页面中只是显示了影片的名称,其余的都没有显示,我们对详情页面进行设置

{% if record %}
<!--{{ attribute(record, displayColumn) }}-->
<h2>{{ record.name }}</h2>
<h4>{{ record.year }}</h4>
<h3>简介</h3>
<p>
    {{ record.description|raw }}
</p>
{% else %}
    {{ notFoundMessage }}
{% endif %}

 

 

上一篇: October CMS - 快速入门 8 slugs和分页

下一篇: October CMS - 快速入门 6 基本模板

88 人读过
文档导航