EMLOG风格制作教程(结构分析之header篇)

Dec 07 2009

EMLOG风格制作教程(结构分析之header篇)

Kuma

分类：About Designs 文章评论

1条评论

已被围观 2418 次

上一讲讲了EMLOG默认模板的主体结构，从这一讲开始我将给大家讲解EMLOG默认模板的各个文件的具体结构，好让大家最细致地了解EMLOG模板的脉络。而适逢本教程进行的时候EMLOG发布了3.4的新版本，本教程跟随官方进度，将以3.4的默认模板为例，3.4以下模板不适用。本讲将和大家一起分析EMLOG默认模板的header.php。

前面说了，header.php一般是生成博客界面的上半部分，一般来说包括了博客名字，博客介绍，博客的各个菜单。有时候会包含一个搜索栏。其实大多网站在结构上都包括这这几个部分：header、content、footer。还有很多会包含sider。我们现在就来分析默认模板的header。

现在用网页编辑软件打开默认模板的header.php，不要用记事本，用DW或者Notepad++以及其他网页编辑软件都可以，建议使用Notepad++。

打开header之后，你会发现header事实上可以分为2个部分：模板信息和主题体HTML标记。这两部分以<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">为划分，上面部分为模板信息，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">及其下半部分为主体HTML标记。

模板信息

模板信息写在第一个PHP标签里面，即是第1到11行。模板信息主要是给后台的模板预览时读取模板信息使用的。下面来分析模板信息的各个项，括号内红色字体是我的注释：

Template Name:默认模板（这里是模板的名字，例如此时你在后台看到的模板名字就是“默认模板”）
Description:这是emlog的默认模板，简洁明快 ……（这是模板的简介）
Author:emlog开发小组（这是作者名字）
Author Url:http://www.emlog.net（这是作者的主页）
Sidebar Amount:1（这是边栏个数，如果你的模板有2个边栏，即是3栏式的话，这里就填2，默认模板是1个边栏，所以为1）

主体HTML标记

主体HTML标记又可以分为2个部分，及包含在<head></head>标签内的为一个部分，包含在标签<body>后的为一个部分。下面分析两个部分的每一行，括号内的是我的分析注释。HTML标签我将不会讲解，看下面的部分请自学HTML标记。PHP代码已被我用蓝色标记。

head部分

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="<?php echo $site_key; ?>" />（博客的关键字，这里的PHP代码提取的是你在后台博客设置里面“博客关键字”里面填写的信息。）
<meta name="description" content="<?php echo $bloginfo; ?>" />（博客的描述，这里的PHP调用的是后台“博客描述”里面的信息）
<meta name="generator" content="emlog" />（generator公共头像服务预留位置）
<title><?php echo $blogtitle; ?></title>（博客名字）
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<?php echo BLOG_URL; ?>xmlrpc.php?rsd" />（远程过程调用开放接口，用于支持离线写作）
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="<?php echo BLOG_URL; ?>wlwmanifest.xml" />（专门为Live Writer开放的离线写作接口）
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo BLOG_URL; ?>rss.php">（RSS输出接口）
<link href="<?php echo TEMPLATE_URL; ?>main.css" rel="stylesheet" type="text/css" />（主体CSS样式加载，PHP代码为模板的网络绝对路径）
<script src="<?php echo BLOG_URL; ?>lib/js/common_tpl.js" type="text/javascript"></script>（前台公用JS文件加载，PHP代码为博客的网络绝对路径）
<?php doAction('index_head'); ?> （header挂载点）
</head>

body部分

<body>
<div class="main">
<div class="header">
<ul>
<li id="title"><h1><a href="<?php echo BLOG_URL; ?>"><?php echo $blogname; ?></a></h1></li>（博客名字）
<li id="tagline"><?php echo $bloginfo; ?></li>（博客描述）
</ul>
<ul id="menus">（菜单开始标记）
<li class="menus1"><a href="<?php echo BLOG_URL; ?>">首页</a></li>（首页）
<?php （从这里开始将循环读取你的所有自定义页面的标题，并加入菜单中,例如你自定义了一个“留言”页面，那么这里将读取这个页面的标题“留言”将其加入到菜单里面）
foreach ($navibar as $key => $val):
if ($val['hide'] == 'y'){continue;}
if (empty($val['url'])){$val['url'] = BLOG_URL.'?post='.$key;}
?>
<li class="menus2"><a href="<?php echo $val['url']; ?>" target="<?php echo $val['is_blank']; ?>"><?php echo $val['title']; ?></a></li>
<?php endforeach;?>（循环读取自定义页面标题结束）
<?php doAction('navbar', '<li class="menus2">', '</li>'); ?>（这里是将读取你所有插件生成的菜单，例如你安装了相册插件，并设置使之在菜单里出现“相册”，那么这里将读取“相册”到菜单里）
<?php if(ROLE == 'admin' || ROLE == 'writer'): ?>（这里开始将后台登陆链接加入到菜单中，删掉本部分代码菜单中将不会显示“登陆”链接）
<li class="menus2"><a href="<?php echo BLOG_URL; ?>admin/write_log.php">写日志</a></li>
<li class="menus2"><a href="<?php echo BLOG_URL; ?>admin/">管理中心</a></li>
<li class="menus2"><a href="<?php echo BLOG_URL; ?>admin/?action=logout">退出</a></li>
<?php else: ?>
<li class="menus2"><a href="<?php echo BLOG_URL; ?>admin/">登录</a></li>
<?php endif; ?>（后台登陆链接结束）
</ul>（菜单结束标记）
<div class="clear"></div>
</div>

好了，header.php分析结束，重要的东西我都标注完了。这里没有讲HTML和DIV+CSS知识，不会的朋友可以自己看看相关书籍。在header.php里面我们需要特别注意这两个参数：<?php echo BLOG_URL;> 和<?php echo TEMPLATE_URL; ?>.前者是博客的网络绝对路径，如我的博客绝对路径即是“http://mouselife.cn/”。需要说明的是这里面已经包含了域名后面的那个斜杠，所以在使用的时候不要再多加一个斜杠了。后者是模板的网络绝对路径，也包含了“/”，使用的时候不要再加上“/”了，例如上面加载CSS的时候路径写的是“<?php echo TEMPLATE_URL; ?>main.css”而不是“<?php echo TEMPLATE_URL; ?>/main.css”。

header.php相对于3.3的主要变化即是上面这两个参数，3.3使用的博客路径是相对路径，3.4变为了绝对路径。而模板路径的参数名字改变了，由<?php echo TPL_PATH; ?>变为<?php echo TEMPLATE_URL; ?>。另外新增了两个离线写作接口。

《 EMLOG风格制作教程(结构分析之header篇)》就到这里结束了，有不懂的请在这篇博文下面留言，我会尽力一一回答。敬请期待《 EMLOG风格制作教程(结构分析之log_list篇)》。

分类：About Designs
标签: emlog theme 风格教程

通告: http://mouselife.net/tb.php?sc=e2fe83&id=43

【上一篇】夜起
【下一篇】EMLOG风格制作教程(主体结构分析篇)

相关日志：

新模板一枚，欢迎下载

准备着手建立Artmemory网站

White-magazine-v1推迟发布

支持EMLOG的taotao采集插件

关于一个成功的插件开发方法的思考

EMLOG风格制作教程(结构分析之header篇)

评论：

最新日志

最新评论

标签云

日历

日志分类

日志存档

友情链接