1. 首页
  2. 宅源码, 网络干货

[教程]用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" rel="external noopener nofollow" >
</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" rel="external noopener nofollow" >首页</a></li> 
    <li><a href="" rel="external noopener nofollow"  rel="external noopener nofollow"  rel="external noopener nofollow" >分类1</a></li> 
    <li><a href="" rel="external noopener nofollow"  rel="external noopener nofollow"  rel="external noopener nofollow" >分类2</a></li> 
    <li><a href="" rel="external noopener nofollow"  rel="external noopener nofollow"  rel="external noopener nofollow" >关于</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" rel="external noopener nofollow" >阅读内容</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

预览地址:点我预览

文章目录
[打赏一下]
  • 版权声明:本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布,转载请遵循本协议
  • 文章链接:https://ikmoe.com/5031.html [复制] (转载时请注明本文出处及文章链接)
上一篇:
:下一篇

作者:月宅

介绍:今天也要看我装逼吗?

文章:2624篇
https://ikmoe.com/
最后更新:17-08-13

10 条评论

gravatar

  1. piala dunia viva 1
    初来乍到

    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.

    #倒数1楼
  2. togel sidney 1
    初来乍到

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

    #倒数2楼
  3. togel nagasaon 1
    初来乍到

    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?

    #倒数3楼
  4. 18G 2
    喜欢月宅

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

    #倒数4楼
  5. csdasda 1
    初来乍到

    :舔冰棍: :纳尼!:

    #倒数5楼
  6. 狂放 5
    正正正正

    前端还是php啊

    #倒数6楼
  7. April's Blog 1
    初来乍到

    把我的眼睛都给抖瞎了。

    #倒数7楼
  8. 情醉中国风 5
    正正正正

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

    #倒数8楼
  9. 某昴 4
    援交大佬

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

    #倒数9楼
  10. 月宅 7
    樱花!

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

    #倒数10楼
当前页面评论被关闭,原因如下: