0°

[教程]用PHP写纯静态博客.jpg+开源



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

接着是文章页面

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

教程

首先你需要新建这三个文件:head.phpindex.phpfooter.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://ikmoe.com/wp-content/themes/ik/images/app/favicon.png">
	<link rel="icon" sizes="192x192" href="https://ikmoe.com/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

预览地址:点我预览

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
等待编辑中
12 条回复 A 作者 M 管理员
  1. 签到成功!签到时间:下午4:35:07每日打卡,生活更精彩哦~

  2. I’m not positive the place you’re getting your information, but good topic.
    I needs to spend a while studying much more or understanding more.
    Thanks for wonderful information I was searching for this
    information for my mission.

    • wtfk>?

  3. Really when someone doesn’t be aware of then its up
    to other people that they will assist, so here it occurs.

  4. Currently it appears like Movable Type is the best blogging platform available right now.
    (from what I’ve read) Is that what you’re using on your blog?

  5. 签到成功!签到时间:下午10:12:56每日打卡,生活更精彩哦~

  6. 前端还是php啊

  7. 把我的眼睛都给抖瞎了。

  8. 签到成功!签到时间:08:37:32每日打卡,生活更精彩哦~

  9. 签到成功!签到时间:上午2:04:40每日打卡,生活更精彩哦~

  10. 签到成功!签到时间:上午1:46:30每日打卡,生活更精彩哦~

欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论