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

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

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

基本界面

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

clipboard.png
内容管理系统:这里可以设置页面、部件、布局、内容块、资源和组件。

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

clipboard.png

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

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

基本概念

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

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

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

clipboard.png

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

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

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

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

clipboard.png

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

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

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

clipboard.png

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

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

clipboard.png
其代码则是:

clipboard.png

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

clipboard.png

clipboard.png

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

组件的使用

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

clipboard.png

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

clipboard.png

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

创建新的分类:
clipboard.png

创建新的帖子:
clipboard.png

为这个帖子设置分类:
clipboard.png

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

如何显示这些博客信息:
进入内容管理系统,为博客建立一个页面:这里显示博客的列表,并使用默认布局。
点击左侧的组件,
clipboard.png
可以看见“帖子列表”,鼠标点住帖子列表,拖动到编辑器内,释放鼠标,你可以看见如下图所示的界面。在代码中出现了:{% component 'blogPosts' %} 。在上部出现了一个悬浮框,名称为帖子列表。
clipboard.png

点击“保存”。
然后在浏览器中输入 http://octobermovie.dev.raise…
clipboard.png
然后你就可以看见刚才后台中的两个帖子的列表。

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

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

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

保存并刷新页面:
clipboard.png

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

然后,我们打开页面,找到Blog页面,设置帖子页面为我们刚刚创建的blog-post
clipboard.png
刷新前端页面,点击帖子的标题:
clipboard.png
可以看见可以显示帖子的内容信息了。只是没有了页眉和页脚了,这是因为,blog-post的页面没有设置布局。
设置布局
clipboard.png
刷新页面:
clipboard.png

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

 

from:https://segmentfault.com/a/1190000015307107