By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.
October CMS - 快速入门 7 显示列表和详情页
October CMS    2018-10-23 10:51:54    94    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 基本模板

94 人读过
文档导航