Version française

WebSitePP : HTML pre-processor


Complete example
Previous  Next 

This page shows a complete example and its result. It illustrates :
  • How to manage multiple languages (2 languages: fr and en)
  • How to locate pages in different directories (here, one directory per page)
  • How to create a menu without the link on the current page
  • An example of how to split page form and page content
This example is divided into two files:
  • the file lib.wspp describes the way pages look
  • the file main.wspp describes the content of the pages
Six web pages are generated, each with a menu and a link to the second language.
Note: The generated HTML code may be viewed by right-clicking and selecting "View Page Source"


Click here to display the web site resulting from the command 'webSitePP.py main.wspp'



Source du fichier main.wspp

/ * Defines the languages for this site * /
 <DEFINELANG fr /> 
 <DEFINELANG en />  

/ * Includes the library file (see source below) * /
 <INCLUDE lib.wspp />  


/ * Define a dummy test macro without parameters * /
 <DEFINE TEST_MACRO> 
  <p>
    <L fr>  Ceci est le texte de la macro de test  </L> 
    <L en>  This is the text of the test macro  </L> 
  </p>
 </DEFINE> 


/ * Defines the 3 site pages * /
/ * ======================== * /

/ * Define page 1 * /
 <PAGE DirA/MyPage1> 

  / * Call the PAGE_STRUCTURE macro, defined in lib.wspp. * /
   <PAGE_STRUCTURE> 
     / * First parameter is the page title * /
      <PARAM>   <L fr>  Ma page 1  </L> 
               <L en>  My page 1  </L>   </PARAM> 
 
    / * Second parameter is the page text background color * /
      <PARAM>  #DDEEFF  </PARAM> 

     / * Third parameter is the page text * /
      <PARAM> 
         <L fr> 
           <p>
	   Ceci est le texte français de la page 1.
           On peut y placer du <b>HTML</b> ou appeler des macros.
	   </p>
         </L>  

         <L en> 
           <p>
	   This is the English text of page 1.
           You can put <b>HTML</b> or call some macros.
	   </p>
         </L>  

         / * Call of the test macro * /
          <TEST_MACRO>            

      </PARAM>  / * End of the third parameter * /

 </PAGE> 


/ * Define page 2 * /
 <PAGE DirB/MyPage2> 
   <PAGE_STRUCTURE> 
      <PARAM>   <L fr>  Ma page 2  </L> 
	       <L en>  My page 2  </L>   </PARAM> 
      <PARAM>  #EEFFDD  </PARAM> 
      <PARAM> 
         <L fr> <p>Ceci est le texte français de la page 2.</p></L> 
         <L en> <p>This is the English text of page 2.</p></L> 
      </PARAM>  
 </PAGE> 


/ * Define page 3 * /
 <PAGE DirC/MyPage3> 
   <PAGE_STRUCTURE> 
      <PARAM>   <L fr>  Ma page 3  </L> 
               <L en>  My page 3  </L>   </PARAM> 
      <PARAM>  #FFDDEE  </PARAM> 
      <PARAM> 
         <L fr><p>Ceci est le texte français de la page 3.</p></L> 
         <L en><p>This is the English text of page 3.</p></L> 
      </PARAM>  
 </PAGE> 


Source du fichier lib.wspp

/ *
=================================================================
This file is part of an example for the webSitePP.py tool.

Content:
========
 It defines macros to avoid repeating code in the HTML pages:
      - Menu macros
      - Page structure macros

=================================================================
* /


/ * Three macros for the menu * /
/ * ========================= * /

/ * First: Define the color (red here) for
     the current page item in the menu * /
 <DEFINE CURRENT_ITEM_COLOR #FF0000 /> 


/ * Second: The MENU_ITEM macro creates the <li> code
    and adds the link to the page only if 
    not the current page, else set a special color.
   The parameters are (arbitrary choice):
	- parameter 0 : the page name
	- parameter 1 : the associated menu text * /
 <DEFINE MENU_ITEM> 

   <IF NEQUAL SELF_PAGENAME USEPARAM0 > 
      <a href=" <PAGEFILENAME USEPARAM0 SELF /> " > 
   <ELSE/> 
    <font color=" <CURRENT_ITEM_COLOR/> ">
   </IF> 

  / * Display the <li> line with the text inside * /
  <li> <p>  <USEPARAM 1 />  </p> </li>

   <IF NEQUAL SELF_PAGENAME USEPARAM0> 
    </a > 
   <ELSE/> 
    </font>
   </IF> 

 </DEFINE>  / * End of macro MENU_ITEM definition * /



/ * Third: The MENU macros defines a common menu to some site pages.
     It uses the previously defined MENU_ITEM macro.
     There is no parameter. * / 
 <DEFINE MENU> 
  <br><br><br><br>

  <ul>
   <MENU_ITEM> 
      <PARAM>  DirA/MyPage1  </PARAM> 
      <PARAM>   <L fr>  Cliquer pour voir ma page 1  </L> 
              <L en>  Click and see my page 1  </L> 
      </PARAM> 

   <MENU_ITEM> 
      <PARAM>  DirB/MyPage2  </PARAM> 
      <PARAM>   <L fr>  Cliquer pour voir ma page 2  </L> 
              <L en>  Click and see my page 2  </L> 
      </PARAM> 

   <MENU_ITEM> 
      <PARAM>  DirC/MyPage3  </PARAM> 
      <PARAM>   <L fr>  Cliquer pour voir ma page 3  </L> 
              <L en>  Click and see my page 3  </L> 
      </PARAM> 
  </ul>
  <br>

  / * Language selection * /
  <L fr><a href="<PAGEFILENAME SELF en>"> English version   </a></L>
  <L en><a href="<PAGEFILENAME SELF fr>"> Version française </a></L>  

 </DEFINE>  / * End of macro MENU definition * /




/ * One macro for the page structure * /
/ * ================================ * /

/ * This macro defines the structure of the pages in this example.
   By choice, we choose the following parameters:
       - Parameter 0 : the page title
       - Parameter 1 : The page text background color
       - Parameter 2 : The page text  * /
 <DEFINE PAGE_STRUCTURE> 

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   <html>
     <head>
       <meta content="text/html; charset=ISO-8859-1"
                      http-equiv="content-type"> 
       <meta name="description" content=" <USEPARAM 0> " />  
       <title>
           <USEPARAM 0>   
        </title>
     </head>

     <body>
       <br><br>

       / * Create a big table to put the menu and the page content * /
       <table width="100%">

         / * Display the menu in the first column * /
         <tr>

           <td align="left" nowrap="nowrap"
               width="30%" rowspan="2">
              <MENU> 
           </td>
 
           / * Display the title in the first row, second column * /
           <td align="center" valign="top" height="20%">
                <h1>  <USEPARAM 0>  </h1>  
           </td>
         </tr>
 
         / * Display the page content in the
	    second row, second column (colspan above...) * /
         <tr>
           <td align="center" bgcolor=" <USEPARAM 1> "> 
              <USEPARAM 2>  
           </td>
         </tr>

       <br><br>
     </body>
   </html>
 </DEFINE>  / * End of macro PAGE_STRUCTURE definition * /


Previous  Next 

visiteurs
Generated with webSitePP.py tool
Last updated on October 20, 2004