[Create ZWiki skins from open web templates] (edit)

??changed:
-----------------------------------------------
-
-Here we try to give some hints on how to use a template from 
http://www.openwebdesign.org and turn it into a ZWiki skin.
-
-Step 1: Choose a template
-=============================
==============================================

.. sectnum::

Here we try to give some hints on how to use a template from 
http://www.openwebdesign.org and turn it into a ZWiki skin. 

Choose a template
---------------------------

??changed:
-Step 2: The "wikipage.pt" template
-======================================
The "wikipage.pt" template
-----------------------------------

??changed:
-Step 3: Macros and TAL
-========================
-
-Take a look through the contents of ZWiki/skins/zwiki/maintemplate.pt on the 
filesystem (in your copy of the ZWiki source code). From this source code we 
need some of the surrounding METAL structure. We will have to "mix" this METAL 
structure with the HTML markup from the openwebdesign template. 
Macros and TAL
-----------------

Take a look through the contents of ``!ZWiki/skins/zwiki/maintemplate.pt`` on 
the filesystem (in your copy of the ZWiki source code). From this source code 
we need some of the surrounding METAL structure. We will have to "mix" this 
METAL structure with the HTML markup from the openwebdesign template. 

??changed:
-1. For one thing we need the surrounding ``metal:block 
metal:define-macro="master"`` around the page, in order to set up the macros 
that will supply us with the wiki contents. So your wikipage.pt should after 
this step look something like this:
-
-::
"main" macro
~~~~~~~~~~~~~~
For one thing we need the surrounding ``metal:block 
metal:define-macro="master"`` around the page, in order to set up the macros 
that will supply us with the wiki contents. So your wikipage.pt should after 
this step look something like this::

??changed:
-    <!-- ... lots of stuff omitted ... -->

    ... lots of stuff omitted ...


??changed:
-2. The actual page content will be filled in wherever we put a tag with 
tal:content="structure options/body". Easy enough and the wiki code will do all 
the html details in the content. With a bit of luck, the template's CSS will 
style the wiki contents very well. So just find the proper place in the 
template where the main text is and put the tal-statement around it. An excerpt 
of our template could now look like this:
-
-::
Page Content
~~~~~~~~~~~~~~~~
The actual page content will be filled in wherever we put a tag with 
tal:content="structure options/body". Easy enough and the wiki code will do all 
the html details in the content. With a bit of luck, the template's CSS will 
style the wiki contents very well. So just find the proper place in the 
template where the main text is and put the tal-statement around it. An excerpt 
of our template could now look like this::

??changed:
-    <h1>Header as given from template</h1>
-    <p>Lots of sample content from the template...</p>
-    <p>Which is replaced by our tal:content...</p>
      <h1>Header as given from template</h1>
      <p>Lots of sample content from the template...</p>
      <p>Which is replaced by our tal:content...</p>

??changed:
-3. **subtopics**: If you want to put a "subtopics" listing someplace, there 
are multiple ways to do it, depending on the style you need. If you want a full 
"tree" of subtopics, like the standard zwiki displays, you can use a tag with 
tal:content="structure here/subtopics". 
Nested "subtopics" for Navigation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If you want to put a "subtopics" listing someplace, there are multiple ways to 
do it, depending on the style you need. If you want a full "tree" of subtopics, 
like the standard zwiki displays, you can use a tag with tal:content="structure 
here/subtopics". 

??changed:
-3a. The other option that I now mainly use in customizing zwiki skins is to 
make a loop over the child pages of the current page. Find the relevant listing 
of such links in the template and make it dynamic with some tal statements. 
Here is an example:
-
-::
Flat "subtopics" for Navigation
````````````````````````````````````
The other option that I now mainly use in customizing zwiki skins is to make a 
loop over the child pages of the current page. Find the relevant listing of 
such links in the template and make it dynamic with some tal statements. Here 
is an example::

??changed:
-    <span tal:omit-tag="" tal:repeat="sub subs">
-    <li><a href="#" tal:attributes="href sub/absolute_url" 
tal:content="sub/title">blog</a></li>
-    </span>
      <span tal:omit-tag="" tal:repeat="sub subs">
        <li><a href="#" tal:attributes="href sub/absolute_url" 
tal:content="sub/title">blog</a></li>
      </span>

??changed:
-4. **main menu**: For the main site menu (which most templates have), I use a 
similar strategy. What I do is to get the child pages of the wikis front page, 
and have each one as one entry in the main menu. If the layout is restricted to 
a certain number of entries, we can restrict the number of entries in our TAL 
statements. Which pages are in the main menu and the order of them is defined 
by the zwiki structure (where each page has a parent page set) and by the 
ordering of the subpages of the front page. Here is an example that defines a 
main menu and restricts it to the first 6 entries:
-
-::
main menu
~~~~~~~~~~~~~
For the main site menu (which most templates have), I use a similar strategy. 
What I do is to get the child pages of the wikis front page, and have each one 
as one entry in the main menu. If the layout is restricted to a certain number 
of entries, we can restrict the number of entries in our TAL statements. Which 
pages are in the main menu and the order of them is defined by the zwiki 
structure (where each page has a parent page set) and by the ordering of the 
subpages of the front page. Here is an example that defines a main menu and 
restricts it to the first 6 entries::

??changed:
-    <li tal:repeat="sub python:subs[0:min(len(subs),6)]">
-    <a href="onecol.html" tal:attributes="href sub/absolute_url">
-    <span tal:replace="sub/title">Big Title</span><br />
-    </a>
-    </li>
      <li tal:repeat="sub python:subs[0:min(len(subs),6)]">
        <a href="onecol.html" tal:attributes="href sub/absolute_url">
          <span tal:replace="sub/title">Big Title</span><br />
        </a>
      </li>

??changed:
-5. **Sibling pages**: Again in a similar style we can make links on each page, 
pointing to all the pages that have the same parent page. Currently the zwiki 
method we use does not list our own current page, which may be unusual for 
normal, non-wiki pages. Here is an example of how I do it. Note that I do not 
have the code appear at all if there are no "sibling" pages:
-
-::
Sibling pages
~~~~~~~~~~~~~~~~
Again in a similar style we can make links on each page, pointing to all the 
pages that have the same parent page. Currently the zwiki method we use does 
not list our own current page, which may be unusual for normal, non-wiki pages. 
Here is an example of how I do it. Note that I do not have the code appear at 
all if there are no "sibling" pages::

??changed:
-    <ul class="extras" tal:condition="python:len(sublinks) >= 1">
-    <li><a href="#" tal:content="context/title">My own page</a></li>
-    <li tal:repeat="sublink sublinks">
-    <a href="" tal:attributes="href sublink/absolute_url" 
tal:content="sublink/title"></a></li>
-    </ul>
      <ul class="extras" tal:condition="python:len(sublinks) >= 1">
        <li><a href="#" tal:content="context/title">My own page</a></li>
        <li tal:repeat="sublink sublinks">
          <a href="" tal:attributes="href sublink/absolute_url" 
tal:content="sublink/title"></a>
        </li>
      </ul>

??changed:
-6. The **wiki functionality links**: The links that handle the wiki 
functionality (edit, subscribe, backlinks,...) are copied over from 
ZWiki/skins/zwiki/links.pt. You will likely insert them in a suitable place 
where the layout designer made dummy links. For "nautica" I chose to use only 
the ones where I could reasonably support the functionality, which means that 
not all ZWiki functionality is properly exposed. We do not display those links 
if the visitor does not have the privilege to use them. Here is an example of 
how that may look:
-
-::
The wiki functionality links
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The links that handle the wiki functionality (edit, subscribe, backlinks,...) 
are copied over from ``!ZWiki/skins/zwiki/links.pt``. You will likely insert 
them in a suitable place where the layout designer made dummy links. For 
"nautica" I chose to use only the ones where I could reasonably support the 
functionality, which means that not all ZWiki functionality is properly 
exposed. We do not display those links if the visitor does not have the 
privilege to use them. Here is an example of how that may look::

??changed:
-    <a href="./editpage"
-    tal:attributes="href string:${context/absolute_url}/editform">Edit</a> | 
-    <a href="./backlinks"
-    tal:attributes="href python:here.pageUrl() + '/backlinks'"
-    >Backlinks</a> |
-    ... and so on ...
      <a href="./editpage"
      tal:attributes="href string:${context/absolute_url}/editform">Edit</a> | 
      <a href="./backlinks"
      tal:attributes="href python:here.pageUrl() + '/backlinks'"
      >Backlinks</a> |

      ... and so on ...


--
forwarded from 
http://zwiki.org/CreateZWikiSkinsFromOpenWebTemplates#msg20061116002344-0800@xxxxxxxxx