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

qylost 发布于2019-07-01 10:09 / 3516人阅读

摘要：在页面中显示的影片列表是最原始的格式显示的。那么我们对这个列表及其详情页进行格式化。因为影片介绍内容太长了，我们希望只显示其中的前个字符。下面我们创建详情页面。

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


    {% for record in records %}
        
            {# Use spaceless tag to remove spaces inside the A tag. #}
            {% spaceless %}
                {% if detailsPage %}
                    
                {% endif %}

                {{ attribute(record, displayColumn) }}

                {% if detailsPage %}
                    
                {% endif %}
            {% endspaceless %}
        
    {% else %}
        {{ noRecordsMessage }}
    {% endfor %}

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


    {% for record in records %}
        
            {# Use spaceless tag to remove spaces inside the A tag. #}
            {% spaceless %}
                {% if detailsPage %}
                    
                {% endif %}

                
                {{ record.name }}

                {% if detailsPage %}
                    
                {% endif %}
            {% endspaceless %}
        
    {% else %}
        {{ noRecordsMessage }}
    {% endfor %}

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


    {% for record in records %}
        
            {# Use spaceless tag to remove spaces inside the A tag. #}
            {% spaceless %}
                {% if detailsPage %}
                    
                {% endif %}

                
                {{ record.name }}

                {% if detailsPage %}
                    
                {% endif %}
            {% endspaceless %}

            {{ record.description }}
        
    {% else %}
        {{ noRecordsMessage }}
    {% endfor %}

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

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

 
            {% spaceless %}
                {% if detailsPage %}
                    
                {% endif %}

                
                {{ record.name }}

                {% if detailsPage %}
                    
                {% endif %}
            {% endspaceless %}

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

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

为电影标题添加详情链接

下面我们查看下面的代码

{% spaceless %}
    {% if detailsPage %}
        
    {% endif %}

    
    {{ record.name }}

    {% if detailsPage %}
        
    {% endif %}
{% endspaceless %}

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

然后设置组件Record Details

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

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

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

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

{% if record %}

{{ record.name }}
{{ record.year }}
简介

    {{ record.description|raw }}

{% else %}
    {{ notFoundMessage }}
{% endif %}

云服务器 GPU云服务器普通和列表显示详情页淘宝详情页分析仿淘宝详情页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28861.html

October CMS - 快速入门 8 slugs和分页

摘要：另外我们将对分页进行讲解。添加字段首先打开，选择原来创建的插件。作为解决办法进行如下操作，在后加，表示可选参数分页代码在在显示影片详情的时候，我们采用id作为链接到详情页面。这次我们将采用slug的方式链接到详情页面。另外我们将对分页进行讲解。添加slug字段首先打开Builder，选择原来创建的Movies插件。 showImg(https://segmentfault.com...

Stardustsky 2019-07-01 10:09 评论0 收藏0
October CMS - 快速入门 11 Inverse Relations

摘要：下面创建风格页面，来显示某一风格对应的所有视频的信息。为了让他显示所有的视频信息，我们需要设置反向关联。模型中间表再次刷新页面 showImg(https://segmentfault.com/img/bVbcplC?w=766&h=781); 视频的详细信息里面列出了影片的风格，能不能在点击这些风格的时候，可以显示所有对应这个风格的视频呢？这就涉及反向的多对多关系。下面创建风格页面...

Ocean 2019-07-01 10:09 评论0 收藏0
October CMS - 快速入门 6 基本模板

摘要：本节将编写一些实现对页面中内容的控制。将内容放入容器文件添加类，让输出的内容在一个容器中。创建菜单编辑点击菜单此页没有头和尾，是因为我们没有给这个页面使用布局再次查看页面，则显示正常了为当前页面菜单添加样式本节将编写一些css实现对页面中内容的控制。将内容放入容器文件：themesraiseinfolayoutsdefault.htm ...

littleGrow 2019-07-01 10:09 评论0 收藏0
October CMS - 快速入门 5 创建插件

摘要：创建插件对于来讲是很简单的事情，因为，提供了一个插件构建器具体步骤这里就不赘述了。安装完成后，会出现上图所示的菜单创建自己的插件的方法是点击如下图所示的小按钮。创建插件对于October来讲是很简单的事情，因为，October提供了一个插件构建器：RainLab.Builder showImg(https://segmentfault.com/img/bVbcoxL?w=1266&h...

macg0406 2019-07-01 10:09 评论0 收藏0
October CMS - 快速入门 9 Images And Galleries

摘要：关系，用于将图片附加到表上再次刷新页面，现在可以进行图片上传了。如何显示上传的图片简介查看视频页面会出现上面图片显示的信息，图片并没有显示出来。我们要是显示这些图片，则在进行代码修改图集当然我们可以使用插件进行显示和展示。这一部分我们将为影片创建图片和图片库首先我们将分页改为每页10个影片 showImg(https://segmentfault.com/img/bVbco9R?w=...

dadong 2019-07-01 10:09 评论0 收藏0