EMLOG学院

EMLOG模板快速入门

2015-1-10    分类: 功能技巧    1928次浏览

购买 (¥)

模板制作快速入门

模板的制作并非难事,只要你写好了HTML和CSS,嵌套模板就非常简单了,你无需了解标签的内部结构,你只要会使用,模板就能迅速完成。这篇文章只简单的介绍了常用标签的使用方法,希望能带你进入模板的世界,在学习文档之前,你要对html,css有一定的了解哦,如果有一定的php基础,学习起来会更加得心应手。

本篇文章以emlog都默认模板为例,您可以打开默认模板default边看边学习。该模板所在的路径为 content/templates/default
进入该目录后,我们可以看到有许多文件,别犯愁,我们将在下文一一介绍,所有在当前目录下的文件都能在后台的模板编辑页面进行编辑。

header.php

header.php文件为模板的头部文件,其中包括了网站的标题,关键词,描述,以及导航等相关代码。

<?php
/*
Template Name:默认模板
Description:默认模板,简洁优雅
Version:1.2
Author:emlog
Author Url:http://www.emlog.net
Sidebar Amount:1
*/
if(!defined('EMLOG_ROOT')) {exit('error!');}
require_once View::getView('module');
?>

以上为模板的一些相关信息,其中/*下面第一行为模板的名称,第二行是模板的描述相关,第三行则是模板的版本;Author表示模板的作者,下面一行为作者的网站,Sidebar Amount为模板有几个侧边栏,如默认模板,有一个侧边栏,则为一。如果是两栏式模板则为2.

*/下面是一个if语句,基本上此语句将在模板文件中都存在,其目的是为了防止代码所在的php脚本被直接执行。require_once View::getView('module');其作用是调用模板目录下的module.php文件。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php echo $site_title; ?></title>
<meta name="keywords" content="<?php echo $site_key; ?>" />
<meta name="description" content="<?php echo $site_description; ?>" />
<meta name="generator" 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; ?>main.css" rel="stylesheet" type="text/css" />
<link href="<?php echo BLOG_URL; ?>admin/editor/plugins/code/prettify.css" rel="stylesheet" type="text/css" />
<script src="<?php echo BLOG_URL; ?>admin/editor/plugins/code/prettify.js" type="text/javascript"></script>
<script src="<?php echo BLOG_URL; ?>include/lib/js/common_tpl.js" type="text/javascript"></script>
<!--[if IE 6]>
<script src="<?php echo TEMPLATE_URL; ?>iefix.js" type="text/javascript"></script>
<![endif]-->
<?php doAction('index_head'); ?>
</head>

接下来的代码从第一行开始基本属于html的范畴,大家不懂的可以自行学习html。此文只就emlog模板中的嵌套标签做介绍,首先看

<title><?php echo $site_title; ?></title>
网页标题位于浏览器顶部,其中$site_title将输出网站的标题,函数位于emlog核心文件,调用后台的网站标题相关作为显示。<?php ?>为php的表现格式,不懂的可以了解一下php教程。
<meta name="description" content="<?php echo $site_description; ?>" />
<meta name="keywords" content="<?php echo $site_key; ?>" />

输出网站的描述,以及关键词,其中$site_description为网站描述,$keywords为网站关键词。

<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; ?>main.css" rel="stylesheet" type="text/css" />
<link href="<?php echo BLOG_URL; ?>admin/editor/plugins/code/prettify.css" rel="stylesheet" type="text/css" />
<script src="<?php echo BLOG_URL; ?>admin/editor/plugins/code/prettify.js" type="text/javascript"></script>
<script src="<?php echo BLOG_URL; ?>include/lib/js/common_tpl.js" type="text/javascript"></script>
以上代码其中一二句为emlog离线写作接口,第三句为rss输出,第四句输出模板所需要的css文件,第五六七句输出模板所需要的JS与CSS文件,接下来将一一解释上述标签以及作用:

<?php echo BLOG_URL; ?>
输出网站的完整URL,带"/",如:http://vps.lantk.com/
<?php echo TEMPLATE_URL; ?>
输出主题所在的完整路径,如默认模板则输出:http://vps.lantk.com/content/templates/default


<?php doAction('index_head'); ?>为头部挂载点,通常可用户插件的CSS或JS输出。

<body>
<div id="wrap">
  <div id="header">
    <h1><a href="<?php echo BLOG_URL; ?>"><?php echo $blogname; ?></a></h1>
    <h3><?php echo $bloginfo; ?></h3>
  </div>
  <?php if(Option::get('topimg')): ?>
  <div id="banner"><a href="<?php echo BLOG_URL; ?>"><img src="<?php echo BLOG_URL.Option::get('topimg'); ?>" height="134" width="960" /></a></div>
  <?php endif;?>
  <div id="nav"><?php blog_navi();?></div>
接下来是body部分,至于其中的DIV就不多说了,不懂的可以先学习div+css布局。这里啰嗦一下,很多emer想学习模板,但是学习模板的必要条件一定要先熟悉html,div,css,不然是没有办法进行的,或者说在没有上面所说的东西作为基础是很难学习和理解的。所以希望大家一步一个脚印走踏实,不要好高骛远。其中
  <?php if(Option::get('topimg')): ?>
  <div id="banner"><a href="<?php echo BLOG_URL; ?>"><img src="<?php echo BLOG_URL.Option::get('topimg'); ?>" height="134" width="960" /></a></div>
  <?php endif;?>
表示默认模板的banner图片,几乎可以忽略。接下来解释一下上面html中的一些标签

<?php echo $blogname; ?>
输出博客名称
<?php echo bloginfo; ?>
输出网站的副标题
<?php blog_navi; ?>
输出导航(该函数位于module.php)
<?php echo TEMPLATE_URL; ?>
输出模板的完整url
<?php echo BLOG_URL; ?>
输出网站的完整url
结束语:

over,这篇简短的文章就到此结束了,主要解释了header.php中的一些常用标签,希望大家看着不累,主要是让大家明白其实html和css写好之后只需要嵌套相应的标签即可完成emlog模板。当然前提条件还是要懂得一些基本的html,php知识。

本文作者:陈子文

欢迎访问 EMLOG学院,本站致力于为您分享emlog优秀模板与常用函数。如果有任何疑问欢迎与我联系

版权所有:《EMLOG学院》 => 《EMLOG模板快速入门
本文地址:http://vps.lantk.com/?post=309
除非注明,文章均为 《EMLOG学院》 原创,欢迎转载!转载请注明本文地址,谢谢。

发表评论 您已登陆为:,注销,管理

...