这是一篇比较有意思的文章。首先来看看月宅的粗糙完成品吧：首先是比较黄的首页界面。（月宅总是喜欢挖很多坑，然后慢慢填，更新其他东西只是时间问题，但并不会不管。）

接着是文章页面

在脱离各种php的后端，纯手撸博客是一种怎样的体验？接下来月宅带你进入到纯静态文章博客的手撸教程。

教程

首先你需要新建这三个文件：head.php、index.php、footer.php，这里可能要问了，说好的纯静态呢，其实新建php是为了后面的方便加载，说是伪静态但也不是。。说是纯静态。。也不是，唉我不说了！

我们需要先在head.php内录入下面的内容，月宅完全是为了seo方面的考虑，然后三件套不会丢。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>月宅酱的纯静态博客</title>
	<meta name="description" content="世界第一的哔哩哔哩放电博客-月宅酱敬上！"/>
	<meta name="keywords" content="月宅酱,二次元,博客,教程,干货"/>
	<link rel="icon" type="image/png" href="https://mikumoe.cn//wp-content/themes/ik/images/app/favicon.png">
	<link rel="icon" sizes="192x192" href="https://mikumoe.cn//wp-content/themes/ik/images/app/app-icon72x72@2x.png">
	<link rel="stylesheet" type="text/css" href="css/uz.css">
</head>
<body>
<!-- 整体布局 -->
<div class="uz-body">
<!-- 顶部标题与头像 -->
<div class="uz-ding-bu">
	<li class="uz-tou-x"></li>
	<li class="uz-biao-ti">
	月宅酱的静态博客
	∑奇葩设计，装逼，永无止境。
</div>
<!-- 顶部标题与头像结束 -->
<!-- 导航开始 -->
<div class="uz-dh">
	<ul id="uz-nav"> 
    <li><a href="index.php">首页</a></li> 
    <li><a href="">分类1</a></li> 
    <li><a href="">分类2</a></li> 
    <li><a href="">关于</a></li> 
</ul> 
</div>
<!-- 导航结束 -->

当头部完成后，我们需要去完成底部的内容：

</div>
<!-- JS网站统计代码 -->

<!-- 放在这里 -->

<!-- js统计代码结束 -->
<div class="uz-di-bu">页面By:月宅酱 2017</div>
</body>
</html>

在顶部和底部美化好后，我们打开index.php，这里是我们的文章列表处，不同的是，这里我们需要在第一行录入

<?php include("head.php");?>

最后一行录入

<?php include("footer.php");?>

为什么要这么做呢？魂淡啊！我难道真的要一篇新文章就重新复制一遍顶部和底部的内容吗！太制杖了！

那么中间，是我们的文章列表了，当写好了css框架后，其他内容都是复制黏贴啦，最后是美化你的css样式啦。

<!-- 文章单栏的主要框架 -->
<div class="uz-wen-z">
	<div class="uz-wen-z-biao-t">
		世界你好,这是一篇由全静态博客发表的文章。
		<a href="1.php">阅读内容</a>
	</div>
	<div class="uz-wen-z-nei-r">
		正如你所见这篇文章是由静态所写...
	</div>
</div>
<!-- 文章单栏结束，往后都是这样的格式 -->

然后自行进行控制，每页多少篇，当10个列表完成后，写下paga页面1/2/3进行翻页。

接下来是文章内容，也是第一行与最后一行分别录入

第一行<?php include("head.php");?>

内容最后一行<?php include("footer.php");?>

中间空的就是文章内容啦，怎样，是不是很简单，以后写文章只需要按照模板进行编写，那就毫无问题啦！

<!-- 文章内容样式 -->
<div class="uz-text">
<p>
  正如你所见这篇文章是由静态所写的，下面是一张黑丝预览图，怎样，是不是很棒棒啊！哈哈哈
如果你感兴趣，目前正在开源，你可以到我博客查看，月宅目前比较无聊，挖了一堆坑，还没来得及填，感兴趣的来继续完善吧233。可能以后会加入独立的用户系统lol！
</p>
<img src="img/wenz/slt1.jpg">


</div>

写一个纯静态的博客那都不是事啦，这样就完全 脱离数据库了喔，新的内容写完上传到文件夹就好啦！（如果文章很多，那么就要一个文章文件夹啦）加载后的源码内容：

好了，今天的内容就到这里啦！于是月宅又完成了一个新坑，这个坑在以后继续完善，如果时间很充裕的话，大概月宅会完成一个独立的博客系统吧-0-  （补一点，评论可以用第三方js插入就好了！）

下载

码云下载：http://git.oschina.net/uzhub/YueZhaiDeChunJingTaiBoKe/tree/master

预览地址：点我预览

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。