网站开发（十二）前台栏目模块分配
后台差不多完成了，接下去将是对前台栏目各模块进行分配和操作
首先是观察前台各个模块
前台header
前台侧边栏
前台底部
以上三个模块是而每个页面都有，所以需要分离公共页面
一、分离公共页面
1. 修改index
在Home/View/Index下的index.html中将header，right，footer分离出来并且include进去
在Home/View下新建Common，存放三个分离出来的html文件
index.html代码
<!doctype html>
<html lang="zh-CN" prefix="og: http://ogp.me/ns#">
<head>
<title>XulinJie</title>
<style type="text/css">
.b-page {
background: #fff;
box-shadow: 0px 1px 2px 0px #E2E2E2;
}
.page {
width: 95%;
padding: 30px 15px;
background: #FFF;
text-align: right;
overflow: hidden;
}
.page .first,
.page .prev,
.page .current,
.page .num,
.page .current,
.page .next,
.page .end {
padding: 8px 16px;
margin: 0px 5px;
display: inline-block;
color: #008CBA;
border: 1px solid #F2F2F2;
border-radius: 5px;
}
.page .first:hover,
.page .prev:hover,
.page .current:hover,
.page .num:hover,
.page .current:hover,
.page .next:hover,
.page .end:hover {
text-decoration: none;
background: #F8F5F5;
}
.page .current {
background-color: #008CBA;
color: #FFF;
border-radius: 5px;
border: 1px solid #008CBA;
}
.page .current:hover {
text-decoration: none;
background: #008CBA;
}
.page .not-allowed {
cursor: not-allowed;
}
</style>
<include file="Common:header"/>
<div class="body">
<div class="wrapper cls">
<div class="main">
<volist name="list" id="vo">
<div class="list">
<ul>
<li>
<h1 class="title"><a href="__CONTROLLER__/article/id/{$vo.f_id}" >{$vo.f_title}</a></h1>
<div class="info"><span>{$vo.time|date="Y-m-d",###}</span></div>
<div class="thumb">
<a href="#" >
<if condition="$vo["f_pic"] neq null">
<img width="1200" height="630" src="__ROOT__{$vo.f_pic}" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" />
<else/>
<img width="1200" height="630" src="__ROOT__/Uploads/暂无图片.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" />
</if>
</a></div>
</li>
</ul>
</div>
</volist>
<div class="list page b-page">
{$page}
</div>
</div>
<include file="Common:right"/>
<include file="Common:footer"/>
2.添加公共部分代码
在Home/View/Common下建三个html文件，分别是header.html,right.html,footer.html代码
header.html代码
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="__PUBLIC__/Home/style/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/style/font.css">
<script type="text/javascript" src="__PUBLIC__/Home/style/jquery-1.11.3.min.js"></script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
</head>
<body class="p-blog zh">
<!-- Desktop Header -->
<!-- 导航啦开始 -->
<header>
<div class="header">
<div class="logo">
<div class="title">
<a href="#">
<!-- <img src="https://blog.360totalsecurity.com/wp-content/themes/360TotalSecurity/img/blog_logo.png" alt="360 Total Security Blog Logo" title="360 Total Security Blog Logo" width="126" height="45" /> -->
<h1>XuLinJie</h1>
</a>
</div>
</div>
<nav class="navbar" role="navigation">
<ul class="nav">
<!-- <li><a class="active" href="#">最新文章</a></li> -->
<volist name="navers" id="vo">
<li><a href="__MODULE__/<if condition="$vo["cate_id"] eq 1">index<elseif
condition="$vo["cate_id"] eq 2"/>article</if>/index"
<if condition="$cateids["cate_id"] eq $vo["cate_id"]">class="active"</if>
>{$vo.cate_name}</a></li>
</volist>
<!-- <li><a href="#">公司新闻</a></li> -->
</ul>
</nav>
</div>
</header>
<div class="anchor-bar">
<ul>
<li class="active"><a href="#">最新文章</a></li>
<li><a href="#">相关</a></li>
<li><a href="#">##</a></li>
<li>
<a class="download" data-ga="download|anchor-bar|ts|" href="#">登录</a>
</li>
</ul>
</div>
<!-- 导航栏结束 -->导航栏的a标签也在了即超链接
right.html代码
<div class="sticky-content-spacer">
<div id="sidebar" class="side">
<!-- Desktop Sidebar -->
<div class="widget-download">
<div class="free-download">
<a class="title" data-ga="download|sidebar|ts|360 Total Security 博客" target="_blank" title="免费下载 360 Total Security" href="#">XuLinJie</a>
<span class="os">推荐专栏</span>
</div>
</div>
<!-- 热门文章 -->
<div class="pop">
<div class="title">热门文章</div>
<ul>
<volist name="arem" id="vo">
<li>
<div class="thumb"><a href="__MODULE__/article/index/id/{$vo.a_id}">
<img width="1350" height="675" src="__ROOT__/{$vo.a_pic}" class="attachment-post-thumbnail size-post-thumbnail wp-post-image"/></a>
</div>
<h2 class="topic"><a href="__MODULE__/article/index/id/{$vo.a_id}">{$vo.a_title}</a></h2>
<div class="clear"></div>
</li>
</volist>
</ul>
</div>
<!-- 热门文章end -->
<div class="fb-page" data-href="https://www.facebook.com/360safe" data-width="293" data-height="320" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/360safe"><a href="https://www.facebook.com/360safe">推荐专栏</a></blockquote></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
footer.html代码
<footer>
<div class = "footer">
<div class="row">
<span class="copyright">© XuLinJie_</span>
</div>
</div>
</footer>
<script>
$(function($){
$("[data-ga]").click(function() {
var e = $(this).attr("data-ga").split("|");
ga("send", "event", e[0], e[1], e[2]);
});
});
$(function() {
"use strict";
var $window = $(window);
$window.scroll(checkAnchorBar);
checkAnchorBar();
function checkAnchorBar() {
var $anchorBar = $(".anchor-bar");
var scrollTop = $window.scrollTop();
var $anchorStartElem = $("header");
var attachedClass = "attached";
var threshold = $anchorStartElem.offset().top + $anchorStartElem.height();
if (!$anchorBar.hasClass(attachedClass) && scrollTop >= threshold) {
$anchorBar.addClass(attachedClass);
} else if ($anchorBar.hasClass(attachedClass) && scrollTop < threshold) {
$anchorBar.removeClass(attachedClass);
}
}
});
</script>
<div id="fb-root"></div>
</body>
</html>
创建Article文件夹
在Home/View下建立Article文件夹（原本有Index文件夹），代表两个首页导航模块
Article下建立index.html代码
代码如下
<!doctype html>
<html lang="zh-CN" prefix="og: http://ogp.me/ns#">
<head>
<title>XuLinjie</title>
<include file="Common:header"/>
<div class="body">
<div class="wrapper cls">
<div class="main">
<div class="list">
<ul>
<li>
<h1 class="title"><a href="#" >########</a></h1>
<div class="info"><span>2017/3/16</span><span>360TS</span></div>
<div class="thumb"><a href="#" >
<img width="1200" height="630" src="https://blog.360totalsecurity.com/wp-content/uploads/2017/03/170310_fb_blog_tookit_2.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /></a></div>
<div class="intro">
<a href="#" ><p>##################…</p>
</a>
</div>
</li>
</ul>
</div>
</div>
<include file="Common:right"/>
<include file="Common:footer"/>这样文章模块和首页模块的前端代码解决
接下去就是要写它们的控制器了
二、写前台首页栏目的控制器
有两个栏目（首页和文章），分别命名IndexController.class.php,ArticleController.class.php.栏目还有公共的，所以分离公共的也需要控制器CommonController.class.php
IndexController.class.php代码
<?php
namespace HomeController;
use ThinkController;
class IndexController extends CommonController {
public function index(){
$cate=D("cate");
$cateid=1;
$cateids=$cate->find($cateid);
$this->assign("cateids",$cateids);
}
ArticleController.class.php代码
<?php
namespace HomeController;
use ThinkController;
class ArticleController extends CommonController {
public function index(){
$cate=D("cate");
$cateid=2;
$cateids=$cate->find($cateid);
$this->assign("cateids",$cateids);
$this->display();
}
}CommonController.class.php代码（只要控制器中有公共的部分，代码就按下面的写）
<?php
namespace HomeController;
use ThinkController;
class CommonController extends Controller {
public function __construct(){
parent::__construct();
$this->nav();
}
public function nav(){
$cate=D("cate");
$navers=$cate->select();
$this->assign("navers",$navers);
// $this->display();
}
}
前台栏目模块分配完成了
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 前端控制器
- 下一篇： 移动端web及app设计尺寸
