碼上歡樂
相關內容    簡體    繁體

一鍵靜態化【一鍵生成靜態網頁】

本文轉載自   查看原文   2018-03-08 17:14   1496 

 

項目首頁 HTML頁  需要全屏輪播展示，要求通過管理平台能夠選擇展示的圖片。開始時使用 Ajax 獲取數據庫表中圖片地址展示，結果只能輪播一次無法循環輪播，最后通過一鍵靜態化實現此功能

 一，案例展示 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 5.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模板頁</title>

    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/fullplay.js"></script>
 
    <script type="text/javascript">

        var widthint = 1920;
        var heightint = 980;
        $(document).ready(function (e) {
            $("#bodyPage").fullImages({
                ImgWidth: widthint,
                ImgHeight: heightint,
                autoplay: 3500,  //自動播放
                fadeTime: 1500   //褪色 時間
            });
        });



    </script>
    <style type="text/css">
        html
        {
            margin: 0;
            padding: 0;
        }

        body
        {
            margin: 0;
            padding: 0;
        }

        #bodyPage
        {
            width: 100%;
            min-height: 100%;
            height: auto !important;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        img.bg
        {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
            display: none;
            height: 100%;
            width: 100%;
        }

        footer
        {
            position: fixed;
            bottom: 0px;
            height: 10%;
            width: 100%;
            z-index: 9999;
        }

            footer marquee
            {
                font: 2.5vw "華文行楷";
                color: #f00;
            }
    </style>
</head>
<body>
    <section id="bodyBox">
        <div id="bodyPage">
            {$imgList$}
          
        </div>
    </section>
    <footer>
        <article>

            <marquee scrollamount="10">  XXXXXXX 系統  </marquee>
        </article>
    </footer>

</body>
</html>

<script type="text/javascript">

    $("body").click(function () {

        window.location.href = "NavigationInfo.html";
    });
</script>
HTML 模板頁 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 5.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模板頁</title>

    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/fullplay.js"></script>



    <script type="text/javascript">

        var widthint = 1920;
        var heightint = 980;
        $(document).ready(function (e) {
            $("#bodyPage").fullImages({
                ImgWidth: widthint,
                ImgHeight: heightint,
                autoplay: 3500,  //自動播放
                fadeTime: 1500   //褪色 時間
            });
        });



    </script>
    <style type="text/css">
        html
        {
            margin: 0;
            padding: 0;
        }

        body
        {
            margin: 0;
            padding: 0;
        }

        #bodyPage
        {
            width: 100%;
            min-height: 100%;
            height: auto !important;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        img.bg
        {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
            display: none;
            height: 100%;
            width: 100%;
        }

        footer
        {
            position: fixed;
            bottom: 0px;
            height: 10%;
            width: 100%;
            z-index: 9999;
        }

            footer marquee
            {
                font: 2.5vw "華文行楷";
                color: #f00;
            }
    </style>
</head>
<body>
    <section id="bodyBox">
        <div id="bodyPage">
            <img class="bg" src="/UpLoadFiles/20180307/2018030716220622.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716223467.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716224437.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716225115.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716225737.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716230370.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716230949.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716221741.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716222305.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716222856.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716211971.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716234059.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716235859.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716240816.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716250642.png" /><img class="bg" src="/UpLoadFiles/20180307/2018030716341533.png" />
          
        </div>
    </section>
    <footer>
        <article>

            <marquee scrollamount="10"> XXXXXXX 系統</marquee>
        </article>
    </footer>

</body>
</html>

<script type="text/javascript">

    $("body").click(function () {

        window.location.href = "NavigationInfo.html";
    });
</script>
一鍵生成

 使用 .aspx 作為網站的后台管理

<asp:Button ID="show" runat="server" Text="生成展示頁" />

 //一鍵靜態化
        void show_Click(object sender, EventArgs e)
        {

            //替換掉模板中的特征字符     \..\showcasing\Webpages\ScreenInfo_Temp.html
            string mbPath = Server.MapPath("../showcasing/Webpages/ScreenInfo_Temp.html");
            Encoding code = Encoding.GetEncoding("UTF-8");
            StreamReader sr = null;
            StreamWriter sw = null;

            string str = null;              //字符串為空
            //讀取     
            try
            {
                sr = new StreamReader(mbPath, code);
                str = sr.ReadToEnd();          //注意：這里是‘tempstr’而不是‘str’,不要混了
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                sr.Close();
            }


            string fileName = "../showcasing/Webpages/ScreenInfo.html";
            string imglistStr = GetListStr();

            str = str.Replace("{$imgList$}", imglistStr);
            //生成靜態文件     
            try
            {
                sw = new StreamWriter(Server.MapPath("~/Webpages/") + fileName, false, code);
                sw.Write(str);
                sw.Flush();
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                sw.Close();

                JscriptPrint("生產成功啦！", "ShowimagesList.aspx?" + CombUrlTxt(this.channelId, this.keywords) + "page=0", "Success");
            }


        }
一鍵靜態化方法 
 private String GetListStr()
        {
            string listStr = string.Empty;
            ShowImagesBLL ShowImagesBLL = new ShowImagesBLL();
            ShowImagesEntity ShowImagesEntity = new ShowImagesEntity();
            DataTable dt = ShowImagesBLL.GetList("Islook>0 order by Islook asc");
            foreach (DataRow dr in dt.Rows)
            {
                ShowImagesEntity = new ShowImagesEntity(dr);
                listStr += "<img class=\"bg\" src=\"" + ShowImagesEntity.ImageURL + "\" />";

            }
            return listStr;
        }
GetListStr()

 

二、實例說明 《轉》

 

一，先建立一個模版頁

為了適應實際應用功能，一個網站往往需要最終用戶自定義靜態化的模版，本文對這方面不作過多描述，主要只是增刪改查功能，此章僅作拋磚引玉用！！！
前端界面如下

aspx.cs頁面代碼也只簡單實現對模版的保存

[csharp]  view plain  copy
 
  1. /// <summary>  
  2. /// Saves the data.  
  3. /// </summary>  
  4. /// <param name="id">The id.</param>  
  5. private void SaveData(int id)  
  6. {  
  7.     Model.C_Template model = GetData(id);  
  8.     if (model != null)  
  9.     {  
  10.         long x = 0;  
  11.         if (id <= 0)  
  12.         {  
  13.             x = model.id = _BLL.Add(model);  
  14.         }  
  15.         else  
  16.         {  
  17.             x = _BLL.Update(model) ? 1 : 0;  
  18.         }  
  19.         //other code  
  20.   
  21.         //show message  
  22.         if (x > 0)  
  23.         {  
  24.             MessageBox.Show(string.Format(_jsonResult, "true", "保存成功", _returnUrl, id.ToString()), MessageEnum.Error);  
  25.         }  
  26.         else  
  27.         {  
  28.             MessageBox.Show(string.Format(_jsonResult, "false", "保存失敗，請稍候再試...", "", id.ToString()), MessageEnum.Error);  
  29.         }  
  30.     }  
  31.     else  
  32.     {  
  33.         //有錯誤  
  34.         MessageBox.Show(string.Format(_jsonResult, "false", _pageMsg, "", id.ToString()), MessageEnum.Error);  
  35.     }  
  36. }  

 

二，根據對應模版，靜態出一個include頁面

ok，好吧，其實我這里取巧了，先跳過，后面總結里再詳說。
為了使本例簡單，現在先假設模版頁已經生成了html格式。代碼如下
[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>{$title} - {$classcName} - <!--#include file="/include/common/siteTitle.html" --></title>  
  6.     <meta name="description" content="{$seoDescription},<!--#include file="/include/common/siteDescription.html" -->" />  
  7.     <meta name="keywords" content="{$seoKeyWords},<!--#include file="/include/common/siteKeyWords.html" -->" />  
  8.     <link href="/css/layout.css" rel="stylesheet" type="text/css" />  
  9.     <link href="/css/layout_sub.css" rel="stylesheet" type="text/css" />  
  10.     <script src="/js/jquery/jquery.js" type="text/javascript"></script>  
  11.     <script src="/js/jquery/myJS.js" type="text/javascript"></script>  
  12.     <!--[if lte IE 6]>  
  13.     <script type="text/javascript" src="/js/ie6png.js"></script>  
  14.     <![endif]-->  
  15.     <script type="text/javascript">  
  16.         $(function () {  
  17.             $(".hotSchool .tabs").tabs(".hotSchool div.contentC", { event: 'click', effect: 'fade' });  
  18.         });  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <div id="bgImgWrap">  
  23.         <img src="/images/back1.jpg" alt="" />  
  24.     </div>  
  25.     <!--#include file="/include/common/picStory.html" -->  
  26.     <div class="bigWrap">  
  27.         <div class="sideWrapBg png"></div>  
  28.         <div class="sideWrap png">  
  29.             <div class="logo noTxt clearfix"></div>  
  30.             <!--#include file="/include/common/sideNav.html" -->  
  31.         </div>  
  32.         <div class="mainWrap png">  
  33.             <!-- top search /-->  
  34.             <!--#include file="/include/common/head.html" -->  
  35.   
  36.             <!-- 頻道頁頂部導航 /-->  
  37.             <div class="cWrap subTop clearfix">  
  38.                 <div class="left subTitle">{$channelname}</div>  
  39.                 <div class="left subNav">  
  40.                     <!--{$subNav}-->  
  41.                 </div>  
  42.             </div>  
  43.   
  44.             <!-- sub wrap -->  
  45.             <div class="cWrap subWrap pie png clearfix">  
  46.                 <!-- 文章詳細 /-->  
  47.                 <div class="detailWrap newsListWrap newsDetailWrap clearfix">  
  48.                     <div class="subNavWrap clearfix">  
  49.                         <div class="subNav left">{$locationget}</div>  
  50.                     </div>  
  51.                     <h1>{$title}</h1>  
  52.                     <div class="infoWrap clearfix">  
  53.                         <div class="shareWrap">   
  54.                             <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">  
  55.                                 <span class="left">分享本頁：</span>  
  56.                                 <a class="bds_qzone"></a>  
  57.                                 <a class="bds_tsina"></a>  
  58.                                 <a class="bds_tqq"></a>  
  59.                                 <a class="bds_renren"></a>  
  60.                                 <a class="bds_douban"></a>  
  61.                                 <span class="bds_more"></span>  
  62.                             </div>  
  63.                         </div>  
  64.                         <div class="dateWrap">發表：{$addDate} </div>  
  65.                         <div class="readWrap">閱讀：<span id="viewNums">...</span></div>  
  66.                     </div>  
  67.                     <div class="clearfix"></div>  
  68.                     <div class="subHR clearfix png"></div>  
  69.                     <!-- Intro /-->  
  70.                     <div class="introWrap clearfix">  
  71.                          {$intro}  
  72.                     </div>  
  73.                     <!-- 正文 /-->  
  74.                     <div class="txtWrap clearfix minArticle">  
  75.                         {$content}  
  76.                     </div>  
  77.   
  78.   
  79.                     <!-- 相關文章 /-->  
  80.                     <div>  
  81.                     </div>  
  82.                 </div>  
  83.             </div>  
  84.             <!--/ sub wrap -->  
  85.   
  86.             <!-- footer /-->  
  87.             <!--#include file="/include/common/foot.html" -->  
  88.         </div>  
  89.     </div>  
  90. </body>  
  91. </html>  
ok，現在我們把這個頁面命名為“CS1.html”，放在根目錄下的“Template”文件夾下，那么，我們建一個“include.aspx”頁面，作用戶輸入文章用，那么
[csharp]  view plain  copy
 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="include.aspx.cs" validateRequest="false" Inherits="Admin_CMS_include" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.   
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>文章輸入頁面</title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">    
  10.     <div>  
  11.         文章標題：<asp:TextBox ID="txtTitle" runat="server" Height="26px" Width="350px"></asp:TextBox><br />      
  12.         文章摘要：<asp:TextBox ID="txtIntro" runat="server" Height="26px" Width="350px"></asp:TextBox><br />      
  13.         文章內容：<asp:TextBox ID="txtContent" runat="server" Height="179px" TextMode="MultiLine" Width="350px"></asp:TextBox><br />    
  14.         <br />    
  15.         <asp:Button ID="btnInclude" runat="server" OnClick="btnInclude_Click" Text="生成靜態頁" />    
  16.     </div>    
  17.     </form>    
  18. </body>  
  19. </html>  
aspx.cs頁面代碼如下，記得引用
[csharp]  view plain  copy
 
  1. using System.IO;  
  2. using System.Text;  
那么，主要代碼如下：
[csharp]  view plain  copy
 
  1. protected void btnInclude_Click(object sender, EventArgs e)  
  2.   {  
  3.       //other code;  
  4.       //Get date into dataSource;      
  5.   
  6.       string mbPath = Server.MapPath("~/Web/Template/CS1.html");  
  7.       Encoding code = Encoding.GetEncoding("UTF-8");  
  8.       StreamReader sr = null;  
  9.       StreamWriter sw = null;  
  10.       string str = null;      
  11.       try  
  12.       {  
  13.           sr = new StreamReader(mbPath, code);  
  14.           str = sr.ReadToEnd();  
  15.       }  
  16.       catch (Exception ex)  
  17.       {  
  18.           throw ex;  
  19.       }  
  20.       finally  
  21.       {  
  22.           sr.Close();  
  23.       }  
  24.       string fileName = DateTime.Now.ToString("MMddHHmm") + ".html";//保存靜態頁面的擴展名  
  25.   
  26.       //整章的關鍵點，替換掉相應字符串   
  27.       str = str.Replace("{$Title}", txtTitle.Text);  
  28.       str = str.Replace("{$intro}", txtIntro.Text);  
  29.       str = str.Replace("{$content}", txtContent.Text);    
  30.   
  31.       //生成靜態文件      
  32.       try  
  33.       {  
  34.           sw = new StreamWriter(Server.MapPath("~/html/") + fileName, false, code);  
  35.           sw.Write(str);  
  36.           sw.Flush();  
  37.       }  
  38.       catch (Exception ex)  
  39.       {  
  40.           throw ex;  
  41.       }  
  42.       finally  
  43.       {  
  44.           sw.Close();  
  45.           Response.Write("<a href=/Web/html/" + fileName + " mce_href=" + fileName + " target=_blank>" + fileName + "</a>已經生成！");  
  46.       }  
  47.   }    

三，總結

ok，原理已經明白了。那么，從效益出發，實際應用中應該是怎樣的呢？

一：每先建一個靜態頁面模版，就相應生成一個靜態模版頁；

二：或者直接從數據庫中讀取模版的數據流，然后相應替換；

三：確定保存文章的時候，立刻生成一個相應的靜態文章頁；

四：在網站后台管理中，嵌入“一鍵生成靜態頁面”中，重新檢索生成漏掉或者有更改的靜態頁面。

       那么，其它比如是否細分類別來實現對應的靜態化功能，就以自己實際項目來考慮了

最后，附最后的效果圖。。。。

 

 

  

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 一鍵生成微信跳轉鏈接，可以自動跳轉瀏覽器打開URL網頁 JSP生成靜態html網頁 一鍵自動格式化你的代碼 利用freemarker 靜態化網頁 JAVAEE——宜立方商城10：使用freemarker實現網頁靜態化、ActiveMq同步生成靜態網頁、Sso單點登錄系統分析 每日預約送貨/提貨時間配置一鍵生成 Python | 一鍵生成九宮格圖片 Mac軟件：批量制作字幕 ，一鍵生成工具 “一鍵”生成HTML——Emmet插件常用語法 文章一鍵生成器 在線偽原創?
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM