资讯专栏INFORMATION COLUMN

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

littleGrow / 1350人阅读

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

本节将编写一些css实现对页面中内容的控制。

将内容放入容器

文件:themesraiseinfolayoutsdefault.htm



    
        
        October CMS - {{ this.page.title }}
        
        
        
        
        
        
        
        
        {% styles %}
    
    

        
        
{% page %}
{% framework extras %} {% scripts %}

添加类,让输出的内容在一个容器中。

 
        
{% page %}


页面内容进行了调整

为布局添加头部

首先,我们创建一个partial

为了让这段字符能够显示到网页上,需要在布局页面添加引用partial的语句


保存刷新页面

下面对这个头部partial进行适当格式化

刷新页面

为布局添加页脚

在布局页面中加入:

然后在themesraiseinfopageshomepage.htm中添加适当的内容,页面就显得比较协调了。

创建菜单

编辑:themesraiseinfopartialsheader.htm


点击菜单 Movies

此页没有头和尾,是因为我们没有给这个页面使用布局

再次查看Movies页面,则显示正常了

为当前页面菜单添加样式

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

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

相关文章

  • October CMS - 快速入门 7 显示列表和详情页

    摘要:在页面中显示的影片列表是最原始的格式显示的。那么我们对这个列表及其详情页进行格式化。因为影片介绍内容太长了,我们希望只显示其中的前个字符。下面我们创建详情页面。 在movies页面中显示的影片列表是最原始的格式显示的。那么我们对这个列表及其详情页进行格式化。themesraiseinfopagesmovies.htm如下所示,列表采用的是attribute来显示的 {% fo...

    qylost 评论0 收藏0
  • October CMS - 快速入门 2 基本概念

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

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

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

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

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

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

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

    xcold 评论0 收藏0

发表评论

0条评论

littleGrow

|高级讲师

TA的文章

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