October CMS - 快速入门 7 显示列表和详情页

在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 %}