分类 - OctoberCMS

October CMS    2018-10-23 10:51:54    87    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    69    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>
 
October CMS    2018-10-23 10:47:46    73    0    0

创建插件对于October来讲是很简单的事情,因为,October提供了一个插件构建器:RainLab.Builder

具体步骤这里就不赘述了。

安装完成后,会出现上图所示的菜单Bulider

创建自己的插件的方法是:点击如下图所示的小按钮。

会出现如下所示的界面:点击【Create Plugin】

如下图填写插件属性

创建完成后的插件如下图所示

下面需要对插件进行配置:

1.为插件提供存储数据的表

点击保存,系统将提示数据迁移界面,也就是说刚才的操作就是创建数据迁移文件的过程。关于数据迁移,请大家参考laravel的基础知识。

点击【save & apply】关闭对话框即可。

这个插件会在工程项目文件夹里面生成插件目录,如下图所示。

2.创建Models

创建模型的对话框中输入模型的名字:一般约定为数据库表名的单数形式,强烈推荐遵守这个约定。

创建完成后,会出现如下图所示的界面:

其中Forms提供表单界面,用于用户输入和修改Movies表的信息,Lists为提供列表界面,为用户以表格的形式展示Movies表的数据。

3.创建Form

下面我们创建一个表单用于添加电影信息,将鼠标放到Forms上,右边会出现一个【+】,点击即可添加Form

点击添加Form后,会出现添加form的操作界面

创建表单,主要设置下图所示的几个属性

4.创建列表

5.创建后台菜单

根据下图设置:Label,Icon,URL暂时默认即可

6.创建控制器:


现在回到后台菜单选项,进行如下修改,刷新页面,打开刚刚创建的【视频】菜单

后台菜单就可以使用了

7.添加记录

点击【视频】菜单,可以进行视频的维护操作。如下图所示

试着添加记录,点击【创建】


再添加几条记录

试着搜索一下

前端显示

回到【内容管理系统】为视频创建页面

访问URL:http://octobermovie.dev.raise...

如果想进一步定制显示效果,可以定制下面的代码


October CMS    2018-10-23 10:20:10    76    0    0
## **October CMS官方文档** https://octobercms.com/docs/cms/themes ## **October CMS模板标记文档** https://octobercms.com/docs/markup/templating ## **Watch and Learn Series** #### October CMS入门教程 1~47 http://
October CMS    2018-10-23 10:05:58    76    0    0

创建主题有两种方法:
1、在octobermovie/themes目录中创建以主题名称为目录名的目录,然后创建主题文件,例如:demo/theme.yaml

name: Demo
description: 'Demo OctoberCMS theme. Demonstrates the basic concepts of the front-end theming: layouts, pages, partials, components, content blocks, AJAX framework.'
author: OctoberCMS
homepage: 'http://octobercms.com'
code: ''

2、使用后台管理工具创建主题,也是今天要讲的方法。
如图,选择【设置】——【前端主题】——【创建空白主题】

点击创建空白主题:根据如下所示填写主题的各个属性。

打开编辑器,可以看到themes目录下多出一个主题目录

下面激活主题:

刷新前端页面:是要提示页面没有找到。

这是因为主题是依赖于页面的。如果主题没有定义任何页面,则会提示上述信息。

另外我们要需要一个布局文件,我们可以使用系统demo中默认的布局文件

我们对布局文件内容进行适当修改。这里我们只是测试页面所以删除header、partial。因为我们需要使用bootstrap和Jquery,所以,需要把demo的资源目录assets也一起复制到新的主题对应目录中。


布局创建好后,刷新页面还是会出现上述错误,这是因为,我们没有创建对应页面。
点击【内容管理系统】——【页面】——【增加】

刷新页面:


October CMS    2018-10-22 18:54:42    132    0    0

项目源码地址(themes目录可下载教程源码):https://gitee.com/494901823/OctoberCMS-learn/

视频:http://www.365yg.com/i6567340771932897796/#mid=96183025285

 

按照laravel开发环境的要求安装环境,必不可少的是composer了。
在命令行执行

composer create-project october/october octobermovie​

上述命令完成后,进入对应的目录,这里执行 

cd octobermovie
php artisan october:install​

根据提示输入您对应的开发环境参数。

在浏览器输入绑定的域名或者虚拟目录访问前端即可
http://octobermovie.dev

访问后台管理系统:
http://octobermovie.dev/backend


登录后台,切换到中文模式:
点击右上角的用户图标,可以选择“back-end preferences” 选择 简体中文UTC+8 Asia/Shanghai,然后点击下方的save,F5刷新页面即可转换为中文界面

 

October CMS    2018-10-22 18:54:42    185    0    0

项目源码地址:https://gitee.com/494901823/OctoberCMS-learn

文章视频:http://www.365yg.com/i6567357620548534797/#mid=96183025285

基本界面


October CMS 的后台管理很简单,没有多余的功能。
首页部分是【仪表盘】显示了系统的基本信息。


内容管理系统:

这里可以设置页面、部件、布局、内容块、资源和组件。


媒体:

是用于管理系统中的各种媒体资源,包括图片、音频、视频、文档等。默认是存储在服务器本地的。我们可以上传这些内容到服务器,也可以建立更多的目录对这些资源进行分别存储。

设置:

默认情况下设置里面没有太多的设置,默认包含邮件、日志以及系统和内容功能。我们可以在系统中进行管理员的管理,用于控制用户具有的权限。后面,我们将学习插件是如何工作的。


点击右上角的用户图标,我们可以查看用户的配置文件。并且,我们可以从这里退出当前用户。

基本概念


这个网站的首页是如何生成的呢,如何进行管理这些页面呢?


这部分就是October的核心,页面里面包含了404页面、ajax页面、500错误页面,首页和演示插件。从其显示的URL可以知道,我们的首页内容是Demonstration这个页面。
我们点击这个条目,就可以看到如下的界面:


我们也可以看到【标题】和【URL】分别就是设置页面名称和访问URL的。我们可以非常方便的进行修改。在【设置】选项卡,我们可以看见,URL为 / 的对应的文件名为home.htm,使用的布局是 default 。再下面黑色部分就是代码编辑器。
home.htm是一个真实存在的页面。它就存在于文件系统中。如下图所示。

通过查看这里的home.htm文件,我们就可以很简单的知道,我们的主页其实就是一个静态页面。如果我们自定义这些页面、部件、布局、内容等,就可以自己定义自己的前端页面了。

title = "Demonstration"
url = "/"
layout = "default"
==

home.htm中的顶部这些代码就是定义页面的一些属性。我们通过修改这些属性,他们会同时体现在后台系统中。

title = "Homepage"
url = "/"
layout = "default"

修改完成后,在编辑器里面保存此文件。然后在后台刷新页面,然后再次打开【页面】菜单,我们将看到我们的修改生