资讯专栏INFORMATION COLUMN

October CMS - 快速入门 2 基本概念

kycool / 2479人阅读

摘要:项目源码地址文章视频基本界面的后台管理很简单,没有多余的功能。首页部分是仪表盘显示了系统的基本信息。修改完成后,在编辑器里面保存此文件。在上部出现了一个悬浮框,名称为帖子列表。

项目源码地址:https://gitee.com/494901823/O...

文章视频:http://www.365yg.com/i6567357...

基本界面


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"

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

可以很简单的体会到,我们通过后台管理系统可以很方便的设置这个Home.htm文件的内容了。另外,我们通过下面的【元素】选项卡,可以设置有关SEO的内容,如meta标题和描述信息。

下面我们将建立一个about页面对象。看看操作具体怎么做。

在上图中,点击增加,则会出现在右侧一个新的选项卡【新页面】
填写标题为About,则


选择布局为default,并在代码编辑部分写上些什么,然后保存并刷新页面。

然后我们打开编辑器,可以看见,系统新建了一个文件


如何访问这个页面呢?
http://octobermovie.dev.raise...


通过上面的页面信息,我们可以看到这个页面包含了头部信息和尾部信息。那么这个about信息就是对应的layout中的{% page %}

我们进一步研究home.html,可以看见


{% content "welcome.htm" %}
对应的就是


其代码则是:

因此,我们可以知道,调用/content/welcome.html的方法就是:{% content "welcome.htm" %}
同样道理,我们调用header和footer则是调用部件site/header site/footer
{% partial "site/header" %}
{% partial "site/footer" %}

通过上面的介绍,我们知道了如何使用页面、部件、布局和内容块。下面是组件
我们演示一个关于组件的管理和使用:

组件的使用


打开设置——更新——可以看到检查更新、安装插件、管理插件;点击安装插件,并在搜索框中输入“Blog”,并安装插件。

安装完成后,系统将出现一个新的菜单“博客”。点击菜单:

在这个界面中,可以创建帖子、查看已有的帖子,管理分类等。

创建新的分类:

创建新的帖子:

为这个帖子设置分类:

设置这个帖子的其他信息:诸如发布时间、摘要或者图片。

如何显示这些博客信息:
进入内容管理系统,为博客建立一个页面:这里显示博客的列表,并使用默认布局。
点击左侧的组件,

可以看见“帖子列表”,鼠标点住帖子列表,拖动到编辑器内,释放鼠标,你可以看见如下图所示的界面。在代码中出现了:{% component "blogPosts" %} 。在上部出现了一个悬浮框,名称为帖子列表。

点击“保存”。
然后在浏览器中输入 http://octobermovie.dev.raise...

然后你就可以看见刚才后台中的两个帖子的列表。

如果我们想自定义这个帖子显示的内容和格式怎么办?
回到 内容管理系统 选择Blog页面,然后把鼠标点击编辑器中的 component 这个单词。其编辑器右边会出现一个叉号图标:

点击这个叉号图标,通过下面显示的代码,我们可以很容易的找到显示帖子的标题、发布时间、分类及正文的相关内容:

比如,我们在标题上面显示发布时间,则将下面的代调换一个位置就可以了

Posted {% if post.categories.count %} in {% endif %} {% for category in post.categories %} {{ category.name }}{% if not loop.last %}, {% endif %} {% endfor %} on {{ post.published_at|date("M d, Y") }}

保存并刷新页面:

当我们点击帖子的标题链接时,你会发现,它始终是显示当前的界面。并没有引导我们展示帖子的内容。因此,我们需要创建一个显示帖子内容的页面:
进入“内容管理系统”——“页面”——“新建页面”
根据上面的学习内容,分别设置页面标题为“Blog post”;URL:“/blog/:slug”;添加插件“帖子”。

然后,我们打开页面,找到Blog页面,设置帖子页面为我们刚刚创建的blog-post

刷新前端页面,点击帖子的标题:

可以看见可以显示帖子的内容信息了。只是没有了页眉和页脚了,这是因为,blog-post的页面没有设置布局。
设置布局

刷新页面:

以上就是October中如何使用【页面】【部件】【布局】【内容】【组件】的方法。

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

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

相关文章

  • October CMS - 快速入门 6 基本模板

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

    littleGrow 评论0 收藏0
  • October CMS - 快速入门 16 - 建立简单的组件

    摘要:首先传入演员列表,并循环输出刷新首页,就看见显示的演员的列表到目前为止,最简单的组件我们就创建好了,我们可以继续扩展其功能。 本节将创建有关actor的组件:首先创建一下目录结构 showImg(https://segmentfault.com/img/bVbcqwE?w=313&h=405); 首先创建插件的基本功能 namespace RaiseinfoMoviesComponen...

    1fe1se 评论0 收藏0
  • October CMS - 快速入门 5 创建插件

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

    macg0406 评论0 收藏0
  • October CMS - 快速入门 1 安装

    摘要:项目源码地址视频按照开发环境的要求安装环境,必不可少的是了。在命令行执行上述命令完成后,进入对应的目录,这里执行根据提示输入您对应的开发环境参数。 项目源码地址:https://gitee.com/494901823/O... 视频:http://www.365yg.com/i6567340... 按照laravel开发环境的要求安装环境,必不可少的是composer了。在命令行执行c...

    xcold 评论0 收藏0
  • October CMS - 快速入门 14 保存Form Widget的数据

    摘要:下面修改部件,实现数据保存首先需要准备数据变量,给小部件使用接下来就可以修改插件了现在显示了演员表中的所有演员的名,但是,没有显示所有演员的姓。 上节我们只是建立了小插件,但是数据是模拟的,我们希望将数据存储起来,那么我们就需要通过关联表将数据与视频表关联并保存,下面我们打开Builder,创建演员表 【database】 showImg(https://segmentfault.co...

    GT 评论0 收藏0

发表评论

0条评论

kycool

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<