第2章节，对html进行头尾分离，(typecho主题模板开发实战)
前言
如果你还没有了解，主题模板结构是什么，先看上一篇
[catle gid=155]
头尾分离工作
为什么要对模板进行头尾分离？
使用header.php和footer.php文件分离头部和底部内容是主题模板开发的常见实践。以下是这种做法的好处：
提高代码重用性：将头部和底部内容单独存储在不同的文件中，可以在不同的页面中重复使用，避免了重复编写代码的麻烦，提高了代码重用性。
方便主题开发：在进行主题开发时，可以通过修改header.php和footer.php文件中的内容来改变整个网站的头部和底部。这样可以更方便地进行主题开发，同时也避免了在每个页面中手动修改头部和底部的麻烦。
提高网站性能：将头部和底部内容分离，可以让服务器先加载头部内容，然后再加载页面主体内容，最后再加载底部内容，从而提高了网站的加载速度和性能。
一句话总结：
将头部和底部内容分离为header.php和footer.php文件可以让开发者更方便地对引用的样式和JS进行统一管理，确保网站的整体风格和代码的一致性。
开发前需要明白了解的东西
[catle gid=157]
实践开始
将html的头部，放在header.php
疑问一：代码到哪里算头部
回答：一般来说，到<body>就是头部，但是为了方便导航的管理，一般包括header标签这里（指导航结束位置）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gridx——个人投资组合的HTML模板</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="style/css/bf0e74bf7a4c47508090ba236924b0b2.css" rel="stylesheet">
<link rel="stylesheet" href="style/css/iconoir.css">
<link rel="stylesheet" href="style/css/bootstrap.min.css">
<link rel="stylesheet" href="style/css/aos.css">
<link rel="stylesheet" href="style/css/style.css">
</head>
<body>
<main class="main-homepage">
<!-- Header -->
<header class="header-area">
<div class="container">
<div class="gx-row d-flex align-items-center justify-content-between">
<a href="./index.html" class="logo">
<img src="style/images/logo.svg" alt="Logo">
</a>
<nav class="navbar">
<ul class="menu">
<li class="active"><a href="index.html">家</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="works.html">作品</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
<a href="./contact.html" class="theme-btn">让我们谈谈</a>
</nav>
<a href="./contact.html" class="theme-btn">让我们谈谈</a>
<div class="show-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</header>将html的内容部分，放在index.php
//code将html的底部部分反正footer.php
<!-- Footer -->
<footer class="footer-area">
<div class="container">
<div class="footer-content text-center">
<a href="./index.html" class="logo">
<img src="style/images/logo.svg" alt="Logo">
</a>
<ul class="footer-menu">
<li><a href="index.html">家</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="works.html">作品</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
<p class="copyright">
?版权所有<span>WordPress河</span>
</p>
</div>
</div>
</footer>
</main>
<script src="style/js/jquery-3.6.4.js"></script>
<script src="style/js/bootstrap.bundle.min.js"></script>
<script src="style/js/aos.js"></script>
<script src="style/js/main.js"></script>
</body>
</html>已经完成头尾分离的一半了
发现所有所有的CSS和JS资源都是404？
前面学习的知识中，我有讲过，使用<?php $this->options->themeUrl('style.css'); ?>获取资源
所以，我们填入进去
header.php
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gridx——个人投资组合的HTML模板</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="<?php $this->options->themeUrl('style/css/bf0e74bf7a4c47508090ba236924b0b2.css'); ?>" rel="stylesheet">
<link rel="stylesheet" href="<?php $this->options->themeUrl('style/css/iconoir.css'); ?>">
<link rel="stylesheet" href="<?php $this->options->themeUrl('style/css/bootstrap.min.css'); ?>">
<link rel="stylesheet" href="<?php $this->options->themeUrl('style/css/aos.css'); ?>">
<link rel="stylesheet" href="<?php $this->options->themeUrl('style/css/style.css'); ?>">
</head>
<body>
<main class="main-homepage">
<!-- Header -->
<header class="header-area">
<div class="container">
<div class="gx-row d-flex align-items-center justify-content-between">
<a href="./index.html" class="logo">
<img src="<?php $this->options->themeUrl('style/images/logo.svg'); ?>" alt="Logo">
</a>
<nav class="navbar">
<ul class="menu">
<li class="active"><a href="index.html">家</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="works.html">作品</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
<a href="./contact.html" class="theme-btn">让我们谈谈</a>
</nav>
<a href="./contact.html" class="theme-btn">让我们谈谈</a>
<div class="show-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</header>footer.php 也不要忘记替换
<!-- Footer -->
<footer class="footer-area">
<div class="container">
<div class="footer-content text-center">
<a href="./index.html" class="logo">
<img src="<?php $this->options->themeUrl('style/images/logo.svg'); ?>" alt="Logo">
</a>
<ul class="footer-menu">
<li><a href="index.html">家</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="works.html">作品</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
<p class="copyright">
?版权所有<span>WordPress河</span>
</p>
</div>
</div>
</footer>
</main>
<script src="<?php $this->options->themeUrl('style/js/jquery-3.6.4.js'); ?>"></script>
<script src="<?php $this->options->themeUrl('style/js/bootstrap.bundle.min.js'); ?>"></script>
<script src="<?php $this->options->themeUrl('style/js/aos.js'); ?>"></script>
<script src="<?php $this->options->themeUrl('style/js/main.js'); ?>"></script>
</body>
</html>
是不是很简单？
结束
typecho头尾分离教程已经结束。
声明：本站原创文章文字版权归本站所有，转载务必注明作者和出处；本站转载文章仅仅代表原作者观点，不代表本站立场，图文版权归原作者所有。如有侵权，请联系我们删除。