当前位置:首页 > PHP教程 > php应用 > 列表

php生成静态页面并实现预览功能

发布:smiling 来源: PHP粉丝网  添加日期:2021-11-28 18:28:35 浏览: 评论:0 

一、前言

这篇文章主要是记录一下php生成静态页面的大致步骤,关于页面静态化,大家想必都听说过,但是真正用的时候反而不是很多。有些页面考虑到访问量比较大,页面结构又不常改动的,比如新闻公告等,可以考虑做成静态页面放在服务器上,这样第一是能抗住大流量的访问,第二也是更加安全一些,打开速度上有保证。

二、正文

1、什么是静态化

就比如我们平时写项目的时候,大部分的页面都是会传参数进去,通过php标签把这些参数展示出来。因为我们的参数随时可以变化,所以页面上的内容也跟着参数变化,这就是动态化的页面。与之相反,静态化就是纯粹的html,页面上的内容不需要通过php或者java等编程语言来改变。

关于静态化的优点,网上也都说的很清楚了,这边不再一一赘述,总之就是打开速度够快,能抗住大流量访问。

2、静态化写法

(1)第一种写法是通过ob_start()缓存来输出

在php文件中编写html代码,然后用bo_get_content获取到,然后输出到html文件,类似于:

  1. <?php 
  2. //打开输出控制缓存 
  3. ob_start(); 
  4. echo "<html><head><title>test页面</title></head><body>Hello world</body></html>"
  5. //获取缓冲区的内容 
  6. $out = ob_get_contents(); 
  7. //关闭输出缓存 
  8. ob_end_clean(); 
  9. //打开test.html文件开启写入权限 
  10. $fp = fopen("test.html""w"); 
  11. if (!$fp) { 
  12. echo "Fail";die
  13. else { 
  14. //写入文件 
  15. fwrite($fp$out); 
  16. //关闭文件 
  17. fclose($fp); 
  18. echo "Success"

参考:php输出控制函数和输出函数生成静态页面

这种写法个人感觉会稍微乱一点,而且如果页面复杂的话,写出来的php+html代码会有些杂乱,所以博主选用的是第二种方法。

(2)提前写好模板页,然后进行替换

先准备好静态文件,然后把要替换的部分标出来,如{title},在php程序中用file_get_content获取html文件的内容,然后进行替换,替换之后保存为文件。

模板页:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.  <meta charset="utf-8"
  5.  <title>{top_title}</title> 
  6.  <link rel="stylesheet" href=" " rel="external nofollow" > 
  7. </head> 
  8. <body> 
  9. <div class="news-details-template"
  10.  <h1>{title}</h1> 
  11.  <div class="author">{author}</div> 
  12.  
  13.  <div class="date">{show_time}</div> 
  14.  <div class="line"></div> 
  15.  <div> 
  16.  {content} 
  17.  </div> 
  18. </div> 
  19. </body> 
  20. </html> 

我们先编写好模板页面,包括都有哪部分需要替换,基本的样式等,提前写好

php替换:

  1. $path = \Yii::getAlias('@xxx').'/views/site/notice-detail.php'
  2. $content = file_get_contents($path); //引入模板 
  3.  //获取要替换的值进行字符串的替换 
  4.  $content = str_replace('{top_title}',$title,$content); 
  5.  $content = str_replace('{title}',$title,$content); 
  6.  ....... 
  7.  $dir = $path ."/html/"
  8.  if (!file_exists($dir)) { 
  9.  mkdir($dir); 
  10.  } 
  11. $filename=$dir.'/'.$filename//这里就不判断html是否存在了,因为写入会覆盖 
  12. $result = file_put_contents($filename,$content);//写入内容到对应静态文件中 

大概就是先通过file_get_contents获取模板页的内容,然后通过str_replace进行标签的替换,替换完成之后,通过file_pu_contents写入到新文件即可。生成的html,我们可以生成多个html,让前端根据不同的页面去访问不同的html即可。

三、生成预览

生成html之后,一般来说是需要预览给工作人员看看的,毕竟人家也不懂技术,不知道到底生成的是啥

1、使用dialog打开窗口

静态页:

  1. //这是我们要打开的窗口,先隐藏 
  2. <div id="dialog-form-record" style="display:none;"
  3.  <div id="Content_record"
  4.    
  5.  </div> 
  6.  </div> 

JS定义底部按钮:

  1. var arrButton = { 
  2. "Release": { 
  3. 'text''按钮名称'
  4. 'priority''secondary'
  5. 'class''btn btn-success'
  6. 'id':''
  7. 'click':点击事件 
  8. }, 
  9. "Cancel": { 
  10. 'text''Cancel'//取消按钮 
  11. 'priority''secondary'
  12. "id":'xxx'
  13. 'click'function () { 
  14. dialogRecord.dialog( "close" ); 
  15.  
  16. }; 
  17. //定义宽高 
  18. dialogRecord = $( "#dialog-form-record" ).dialog({ 
  19. autoOpen: false
  20. height: 800, 
  21. width: 1400, 
  22. modal: true
  23. buttons:arrButton, 
  24. close: function() { 
  25. $( "#Content_record" ).html(""); 
  26. dialogRecord.dialog( "close" ); 
  27. }); 

JS打开窗口:

  1. //定义标题和窗口大小 
  2.  $( "#dialog-form-record" ).dialog( "option""title""Preview Html" ); 
  3.  
  4.  $( "#dialog-form-record" ).dialog({ 
  5.  modal: true
  6.  height: 800, 
  7.  width: 1400 
  8.  }); 

2、使用iframe引入刚才生成的静态文件

(1)js引入iframe

  1. //加个时间戳,防止缓存 
  2. for (i in response.) 
  3.  iframe += "<iframe class='news_iframe' id='iframe"+ i +"' src='"+ response.url.url +"/news/html/"+ response.zh[i] + "?timestamp= " + new Date().getTime() + "'></iframe>"
  4.     
  5.  }  
  6. //把iframe写入到html 
  7.  
  8. $( "#en_content" ).html(iframe);  

3、注意:

(1)iframe的src里面不能有空格之类的东西

(2)iframe去除边框

(3)iframe加载速度慢,所以加个onload事件,当iframe加载完之后再显示

  1. var iframe = document.getElementById("iframe" + count); 
  2.  checkFinishedDownload(iframe); 
  3.    
  4. function checkFinishedDownload(ifr) { 
  5.  if (ifr.attachEvent) { 
  6.  ifr.attachEvent("onload"function() { 
  7.  //iframe加载完成后你需要进行的操作 
  8.  }); 
  9.  } else { 
  10.  ifr.onload = function() { 
  11.  //iframe加载完成后你需要进行的操作 
  12.    
  13.  }; 
  14.  } 

最终效果:

php生成静态页面

以上就是从生成静态页面到预览的整个流程了,博主也是第一次做静态页面相关的东西,还是挺有意思的,打卡记录一下。

Tags: php生成静态页面

分享到: