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 - 快速入门 2 基本概念
October CMS    2018-10-22 18:54:42    280    0    0
emengweb   October CMS

项目源码地址: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"

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

可以很简单的体会到,我们通过后台管理系统可以很方便的设置这个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 这个单词。其编辑器右边会出现一个叉号图标:

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

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

<p class="info">
    Posted
    {% if post.categories.count %} in {% endif %}
    {% for category in post.categories %}
        <a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
    {% endfor %}
    on {{ post.published_at|date('M d, Y') }}
</p>

保存并刷新页面:

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

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


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


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


刷新页面:

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

上一篇: October CMS官方文档 1-安装 (Setup)

下一篇: OctoberCMS官方文档 8-组件 (Components)

280 人读过
文档导航