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

时间 2019-11-11

标签 october cms 快速入门基本模板栏目 CMS 繁體版

原文原文链接

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

将内容放入容器

文件：themesraiseinfolayoutsdefault.htmcss

<!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>

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

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

页面内容进行了调整
java

为布局添加头部

首先，咱们建立一个partial

为了让这段字符可以显示到网页上，须要在布局页面添加引用partial的语句jquery

保存刷新页面bootstrap

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

刷新页面
app

为布局添加页脚

在布局页面中加入：ide

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

建立菜单

编辑：themesraiseinfopartialsheader.htmthis

<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>