October CMS - 快速入门 6 基本模板
October CMS    2018-10-23 10:48:56    69    0    0
emengweb   October CMS

本节将编写一些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>
        <script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>
        <script src="{{ 'assets/javascript/app.js'|theme }}"></script>
        {% framework extras %}
        {% scripts %}

    </body>
</html>

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

<!-- Content -->
        <section id="layout-content" class="container clearfix">
            {% page %}
        </section>​

页面内容进行了调整

为布局添加头部

首先,我们创建一个partial

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

 

保存刷新页面

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

 

刷新页面

为布局添加页脚

在布局页面中加入:

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

创建菜单

编辑:themesraiseinfopartialsheader.htm

<nav id="layout-nav" class="navbar navbar-inverse navbar-fixed-top navbar-autohide">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="{{ 'homepage'|page }}">October Movies</a>
        </div>
        <div class="collapse navbar-collapse navbar-main-collapse pull-right">
            <ul class="nav navbar-nav">
                <li><a href="{{ 'homepage'|page }}">Home</a></li>
                <li><a href="{{ 'movies'|page }}">Movies</a></li>
            </ul>
        </div>
    </div>
</nav>​ 

点击菜单 Movies

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

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

为当前页面菜单添加样式

<nav id="layout-nav" class="navbar navbar-inverse navbar-fixed-top navbar-autohide">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="{{ 'homepage'|page }}">October Movies</a>
        </div>
        <div class="collapse navbar-collapse navbar-main-collapse pull-right">
            <ul class="nav navbar-nav">
                <li class="{% if this.page.id == 'homepage' %}active{% endif %}"><a href="{{ 'homepage'|page }}">Home</a></li>
                <li class="{% if this.page.id == 'movies' %}active{% endif %}"><a href="{{ 'movies'|page }}">Movies</a></li>
            </ul>
        </div>
    </div>
</nav>​

 


上一篇: October CMS - 快速入门 7 显示列表和详情页

下一篇: October CMS - 快速入门 5 创建插件

69 人读过
文档导航