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

最新推荐文章于 2024-06-11 09:36:57 发布

weixin_33686714

最新推荐文章于 2024-06-11 09:36:57 发布

阅读量410

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000015309941

版权

本节将编写一些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>

weixin_33686714

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
October CMS - 快速入门 6 基本模板

本节将编写一些css实现对页面中内容的控制。将内容放入容器文件：themesraiseinfolayoutsdefault.htm<!DOCTYPE html><html> <head> <meta charset="utf-8"> <t...
复制链接

扫一扫