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