标签-October CMS

October CMS - 快速入门 14 保存Form Widget的数据

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

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

【database】

【Models】

【Models】——【Forms】

【Models】——【Lists】

【Models】——【Backend Menu】

【Models】——【Contro

查看

October CMS - 快速入门 11 Inverse Relations

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 - 快速入门 10 Relations

October CMS 2018-10-23 12:42:13 133 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 - 快速入门 9 Images And Galleries

October CMS 2018-10-23 11:11:32 119 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 - 快速入门 8 slugs和分页

October CMS 2018-10-23 11:06:43 290 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 - 快速入门 7 显示列表和详情页

October CMS 2018-10-23 10:51:54 94 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 - 快速入门 6 基本模板

October CMS 2018-10-23 10:48:56 74 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>

查看

emengweb 's Blog