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>