emlog主题模板制作教程：通用头部制作 [转]

首页 > IT > Windows 作者：eehello 2014年6月17日 15:44 星期二浏览：20191 字号：小中大评论：0 条

时间：2014-6-17 15:44 浏览：20191 评论：0 条

在上一篇文章中我们做好了准备工作，这一篇文章我们将正式进行emlog的模板制作过程。

我们先把上篇中准备好的IKUJIA文件夹全部复制到emlog模板目录下，接着打开目标站首页，“右键”→“查看原代码”（也可以浏览器上的“查看”→“源文件”）。

打代码全选后复制，打开DW（Dreamweaver简称），把DW下的代码全部清除后粘贴，然后保存到我们的IKUJIA文件夹下，我命名为index.htm。然后我们把CSS和JS部分改成IKUJIA文件夹下的CSS和JS文件路径。

效果如图：

　　接着我们在DW的“设计模式”下选取头部部分，选取后，我们可以看到“代码模式”下的代码也被选取了，OK这就是我们要提取的头部部分，复制代码，我们再新建一PHP文件，命名为：header.php保存到ikujia文件夹下（忘了说：记得全部操作页面属性都是UTF-8）。

再把方才复制的代码粘贴到header.php文件里，然后开始加EMLOG标签，这是我提取出来的代码：（里面的所有连接我都改成了#）。

<div id="loading">Loading...</div> <div id="page_wrap"> <div id="topbar"> <ul class="right"> <li class="feed"><a href="#" title="订阅 imotta.cn">RSS Feed</a> <li class="twitter"><a href="#" title="Follow me on twitter">twitter</a></li> <li class="flickr"><a href="#" title="View my flickr">flick<span class="flickr_r">r</span></a></li> <li class="contact"><a href="#/" title="联系方式">Contact</a></li> </li> </ul> <div class="clear"></div> </div><!-- end topbar --> <div id="header"> <div class="blog_title"> <h1><a href="#">motta’s here</a></h1> </div> <div class="clear"></div> </div><!-- end header --> <div id="main_navi"> <ul class="left"> <li class="home"><a href="#/">Home</a></li> <li class="archives"><a href="#/">Archives</a></li> <li class="links"><a href="#/">Links</a></li> <li class="about"><a href="#/">About</a></li> </ul> <div class="clear"></div> </div><!-- end main_navi -->

这是我加上EMLOG标签后的代码：标签使用可以参考emlog默认模板或《emlog主题模板制作教程：标签分析》。

<?php
/*
Template Name:ikujia
Description:ikujia提供模板，简洁优雅 ……
Author:ikujia
Author Url:http://www.ikujia.com
Sidebar Amount:1
*/
if(!defined('EMLOG_ROOT')) {exit('error!');}
require_once View::getView('module');
?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title><?php echo $blogtitle; ?></title> <meta name="keywords" content="<?php echo $site_key; ?>" /> <meta name="description" content="<?php echo $description; ?>" /> <meta name="description" content="emlog" /> <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" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo BLOG_URL; ?>rss.php" /> <link href="<?php echo TEMPLATE_URL; ?>css_reset.css" rel="stylesheet" type="text/css" /> <link href="<?php echo TEMPLATE_URL; ?>style.css" rel="stylesheet" type="text/css" /> <script src="<?php echo BLOG_URL; ?>include/lib/js/common_tpl.js" type="text/javascript"></script> <script type='text/javascript' src='<?php echo TEMPLATE_URL; ?>js/l10n.js?ver=20101110'></script> <script type='text/javascript' src='<?php echo TEMPLATE_URL; ?>js/jquery.js?ver=1.4.4'></script> <?php doAction('index_head'); ?> </head> <body> <div id="loading">Loading...</div> <div id="page_wrap"> <div id="topbar"> <ul class="right"> <li class="feed"><a href="<?php echo BLOG_URL; ?>rss.php" title="订阅 ikujia.com">RSS Feed</a> <?php 
    foreach ($navibar as $key => $val):
    if ($val['hide'] == 'y'){continue;}
    if (emptyempty($val['url'])){$val['url'] = Url::log($key);}
    ?> <li class="feed"><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="archives">', '</li>'); ?> </ul> <div class="clear"></div> </div><!-- end topbar --> <div id="header"> <div class="blog_title"> <h1><a href="<?php echo BLOG_URL; ?>"><?php echo $blogname; ?></a></h1> </div> <div class="clear"></div> </div><!-- end header --> <div id="main_navi"> <ul class="left"> <li class="home"><a href="<?php echo BLOG_URL; ?>">Home</a></li> <?php if($istwitter == 'y'):?> <li class="archives"><a href="<?php echo BLOG_URL; ?>t/"><?php echo Option::get('twnavi');?></a></li> <?php endif;?>
    <?php if(ROLE == 'admin' || ROLE == 'writer'): ?> <li class="archives"><a href="<?php echo BLOG_URL; ?>admin/write_log.php">Writing</a></li> <li class="archives"><a href="<?php echo BLOG_URL; ?>admin/">Conac</a></li> <li class="archives"><a href="<?php echo BLOG_URL; ?>admin/?action=logout">Exit</a></li> <?php else: ?> <li class="archives"><a href="<?php echo BLOG_URL; ?>admin/">Enter</a></li> <?php endif; ?> </ul> <div class="clear"></div> </div><!-- end main_navi -->

这里我们说下大概的意思：（个人理解，高手请指点）。

        <li class="feed"><a href="<?php echo BLOG_URL; ?>rss.php" title="订阅 ikujia.com">RSS Feed</a> <?php foreach ($navibar as $key => $val): if ($val['hide'] == 'y'){continue;} if (emptyempty($val['url'])){$val['url'] = Url::log($key);} ?> <li class="feed"><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="archives">', '</li>'); ?>

上面这里是输出自定义页面和插件

<?php if($istwitter == 'y'):?> <li class="archives"><a href="<?php echo BLOG_URL; ?>t/"><?php echo Option::get('twnavi');?></a></li> <?php endif;?>

上面这里是输出碎语

<?php if(ROLE == 'admin' || ROLE == 'writer'): ?> <li class="archives"><a href="<?php echo BLOG_URL; ?>admin/write_log.php">Writing</a></li> <li class="archives"><a href="<?php echo BLOG_URL; ?>admin/">Conac</a></li> <li class="archives"><a href="<?php echo BLOG_URL; ?>admin/?action=logout">Exit</a></li> <?php else: ?> <li class="archives"><a href="<?php echo BLOG_URL; ?>admin/">Enter</a></li> <?php endif; ?>

上面的是验证登陆与否，登陆了就显示写日志和管理中心，没有就显示登陆，最后我们看看在后台应用IKUJIA主题的效果，呵呵，只有头部。

登陆前