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

October CMS    2018-10-24 13:09:22    145    0    0

上节我们只是建立了小插件,但是数据是模拟的,我们希望将数据存储起来,那么我们就需要通过关联表将数据与视频表关联并保存,下面我们打开Builder,创建演员表

【database】

【Models】

【Models】——【Forms】

【Models】——【Lists】

【Models】——【Backend Menu】

【Models】——【Contro

October CMS    2018-10-23 12:45:33    56    0    0


视频的详细信息里面列出了影片的风格,能不能在点击这些风格的时候,可以显示所有对应这个风格的视频呢?这就涉及反向的多对多关系。

下面创建风格页面,来显示某一风格对应的所有视频的信息。

为视频详情页添加风格的链接

{% for genre in record.genres %}
    <a href="/genres/{{ genre.slug }}">
    {{ genre.genre_title }}
    </a>
{% endfor %}

现在点击这些链接,结果是:

下面我们将对genre.htm进行修改

{% for movie in record.movies %}
<a href="/genres/{{ genre.slug }}">
    test
</a>
{% endfor %}

我们将循环体设置为movies查看输出结果:

你会发现什么都没有显示,这是因为,我们没有对genre设置反向关系。为了让他显示所有的视频信息,我们需要设置反向关联。

File:pluginsraiseinfomoviesmodelsGenre.php

    public $belongsToMany = [
        'movies' => [
            'Raiseinfo\Movies\Models\Movie',    // 模型
            'table' => 'raiseinfo_movies_movies_genres',    // 中间表
            'order' => 'name'
        ]
    ];

再次刷新页面

{% for movie in record.movies %}
<p>
    <a href="/genres/{{ genre.slug }}">
        <h3>{{ movie.name }}</h3>
    </a>
    <p>{{ movie.description|raw }}</p>
</p>
{% endfor %}

 

October CMS    2018-10-23 12:42:13    113    0    0

在上一节中,我们使用一对一、一对多的关系,用于给movies表附加图片和相册图集。这一节我们将创建类似标签的表,用来描述视频的类型。通过这个例子了解多多的关系。

创建数据库表

创建模型

添加后台菜单

创建控制器

创建风格条目

到此为止,我们为视频风格创建了表及相关的models、controller等,并输入了数据,存储了若干条目。那么,如何才能给电影设置视频风格呢,在视频编辑界面中,没有关于风格的设置。

创建中间表

用于movies表和genres表之间的关联,这个表里面分别存储两者的id。

为Models——Movie——Forms——fields添加部件【Relation】

打开【视频】菜单,编辑视频的时候,会出现如下错误

这个错误非常熟悉吧,pluginsraiseinfomoviesmodelsMovie.php

    public $belongsToMany = [
        'genres' => [
            'Raiseinfo\Movies\Models\Genre',    // 模型
            'table' => 'raiseinfo_movies_movies_genres',    // 中间表
            'order' => 'genre_title'
        ]
    ];

保存后刷新:

前端显示风格

<h3>风格</h3>

{% for genre in record.genres %}
<label class="label label-success">{{ genre.genre_title }}</label>
{% endfor %}
 

 

October CMS    2018-10-23 11:11:32    117    0    0

这一部分我们将为影片创建图片和图片库
首先我们将分页改为每页10个影片

设置图片

下面,我们将设置图片,点击菜单【builder】选择【Movies】选择【Models】选择【Forms】中的fields.yaml
添加一个上传表单,而且我们不需要为此创建数据库字段,October会自动处理

现在我们点击【视频】菜单,选择一个视频编辑

会出现如下错误说明没有定义poster

我们需要在代码编辑器中,修改文件:pluginsraiseinfomoviesmodelsMovie.php

为poster添加一个关系,关联到系统的图片表,把图片附加到视频表上。

    /**
     * 关系,用于将图片附加到Movies表上
     */
    public $attachOne = [
        'poster' => 'System\Models\File'
    ];

再次刷新页面,现在可以进行图片上传了。

如何显示上传的图片:
themesraiseinfopagesmovie-single.htm

{{ record.poster }}
{% if record %}
<!--{{ attribute(record, displayColumn) }}-->
<h2>{{ record.name }}</h2>

{{ record.poster }}

<h4>{{ record.year }}</h4>

<h3>简介</h3>

<p>
    {{ record.description|raw }}
</p>

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

查看视频页面:http://octobermovie.dev.raise...

会出现上面图片显示的信息,图片并没有显示出来。

如果我们使用{{ record.poster.path }}
则显示图片地址,到这里,你或许就明白了,我们需要构建一个img标签,把这个地址作为img的标签属性即可。

<img src="{{ record.poster.path }}" alt="">

再次刷新:

但是,我们发现图片太大了。好的,我们可以继续设置。

<img src="{{ record.poster.thumb(200,auto) }}" alt="">

再比如:对图像进行200x20

October CMS    2018-10-23 11:06:43    270    0    0

在显示影片详情的时候,我们采用id作为链接到详情页面。这次我们将采用slug的方式链接到详情页面。另外我们将对分页进行讲解。

添加slug字段

首先打开Builder,选择原来创建的Movies插件。


添加一个新的列【slug】

修改表单

打开Models,选择Forms中的fields

修改记录

点击【视频】菜单

修改Movies页面

打开内容管理系统,打开Movies single

打开Movies

保存后刷新页面:
可以发现影片的链接地址变成诸如下面的样式
http://octobermovie.dev.raise...
不再是以id为参数的了。

创建分页

打开内容管理系统,打开Movies页面,设置每页大小为1.

刷新页面,会出现分页导航栏,但是,如果点击页码则不会有任何变化。

因此,我们需要再做些设置

刷新页面,则会出现如下提示,这是因为我们缺少了参数page,而page是必须的参数,不能省略,所以才出现如下错误。

下面我们试试:http://octobermovie.dev.raise...

这样就验证了上述的解释。作为解决办法进行如下操作,在page后加?,表示可选参数

分页代码在:themesraiseinfopagesmovies.htm

{% if records.lastPage > 1 %}
    <ul class="pagination">
        {% if records.currentPage > 1 %}
            <li><a href="{{ this.page.baseFileName|page({ (pageParam): (records.currentPage-1) }) }}">← Prev</a></li>
        {% endif %}

        {% for page in 1..records.lastPage %}
            <li class="{{ records.currentPage == page ? 'active' : null }}">
                <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
            </li>
        {
October CMS    2018-10-23 10:51:54    93    0    0

在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="{{ det
October CMS    2018-10-23 10:48:56    72    0    0

本节将编写一些css实现对页面中内容的控制。

将内容放入容器

文件:themesraiseinfolayoutsdefault.htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>October CMS - {{ this.page.title }}</title>
        <meta name="description" content="{{ this.page.meta_description }}">
        <meta name="title" content="{{ this.page.meta_title }}">
        <meta name="author" content="OctoberCMS">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="generator" content="OctoberCMS">
        <link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}">
        <link href="{{ 'assets/css/vendor.css'|theme }}" rel="stylesheet">
        <link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">
        {% styles %}
    </head>
    <body>

        <!-- Content -->
        <section id="layout-content">
            {% page %}
        </section>


        <!-- Scripts -->
        <script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>