static site with dynamic two-level nav

nardo · 2005-10-11 06:15:59

One approach to a static site with dynamic two-level navigation (/section/title permalink mode)
based on the forum post Using Textpattern for brochureware sites?

1. set Permanent link mode to “/section/title”

2. go to Presentation/Sections :

the ‘article’ section will be used for home page content
now create your sections (e.g. ‘training-courses’, ‘services’), with a clean “name” for the URL and a good “title” for humans
for each of these ‘internal’ sections:
- use page “archive”
- set ‘on front page’ and ‘syndicate’ to “no”

3. time to dload some plugins:

4. go to Presentation/Forms and make new misc form called “nav-bar”:
<code><txp:ako_nav name=“Home,Services,About Us,Training Courses” url=”/,/services,/about,/training-courses” headon=“0” />
<txp:if_section name=”“>
<txp:else />
<ul id=“sub-nav”>
<txp:chh_article_custom listform=“nav-level-2” />
</ul>
</txp:if_section></code>

5. create another article form called “nav-level-2”:
<code><li class=”<txp:article_id />”><txp:permlink><txp:title /></txp:permlink></li></code>

6. at the top of both your page templates, insert <code><txp:output_form form=“nav-bar” /></code>

7. now, how do you want to use /section pages?

one way would be as menu – like your subnav – but expanded with introductory text & perhaps a thumbnail – so you would ‘write’ articles with an excerpt to use on this menu page, and use form / listform functionality to format results: so on ‘archive page template’ put <code><txp:article form=“show-article” listform=“show-excerpt-with-link” /></code> … you could use article_thumb, etc and get the most out of an article’s field options
or use a conditional plugin or call specific article IDs or use sticky articles… the above is more flexible I think

8. add content

…

Refinements to consider

Call your first custom field “weight” and use that to order your ‘subsections’ – most important at top, etc… <code><txp:article sortby=“custom_1” /></code>
ako_nav has plenty of options for css styling hooks – that’s no worries but… for the sub-nav, I chucked in an article ID as a class into each list item, so maybe that could be a hook for styling the active item

Those plugins

used chh_article_custom as couldn’t find another simpler section-sensitive article tag that would display articles by section on list and individual pages
a new custom plugin could probably do the above simpler and better

Something else

I had a go at this /section/title 2-layer nav system to compare it with another implementation that uses categories and category lists to make a static site – think I prefer that, with all the headaches, because each internal page (essentially a category list) can consist of a number of articles, each with their full complement of article images, custom fields, etc etc

and also, cos hopefully someone will come along and blow this out the water with a simple TXP damn-why-didn’t-I-think-of-that gotcha

Last edited by nardo (2006-01-14 04:18:27)

nardo · 2005-10-12 00:01:55

further to the above — just wanted to clarify that the nav I was going for was something like:

it’d be good also to have an option for a drop-down menu, so wishlist time… following is an outline of what a specialist plugin might do … basically a combination of ako_nav & a bit of chh_article_custom with some added bits

ako_nav is a nifty plugin – I like the way you set the NAMEs and URLs for your menu … you could pull sections out of the DB and just specify which ones you don’t want (like Greenrift’s section menu) but ako_nav allows you to set the order of items for your menu – !important

the good thing about using chh_article_custom in this context is also that you can order your list of static pages (or articles) … via TITLE, POSTED or CUSTOM fields… again, !important

so, a specialist 2-level section/title navigation bar plugin should

give two options for display: either
- two sequentially-output unordered lists (sections, followed by articles) to allow for the two-line nav bar (such as at the top of this comment)
- unordered list of sections with nested unordered list for articles allowing for drop down or fly-out menus
provide css hooks for the active section and article (and everything else! like ako_nav)
allow for user-defined sorting & ordering
with maybe a default which outputs all sections (ordered alphabetically) with their respective articles (ordered by post date) – to make it so easy it ain’t funny

obviously this sorta thing ain’t gonna scale to huge sites with hundreds of page – but good for simple static brochureware sites with maybe 5 – 20 pages all up

maniqui · 2005-10-18 04:34:11

Nice post and ideas for plug-in development.

You should explain why are you using the if_section tag. I would say you use it to not show a sub-nav if you arent in a section (oh, i’m a genius) but it took me thousound of nanoseconds to find that out…

>Call your first custom field “weight” and use that to order your ‘subsections’ – most important at top, etc… ><txp:article sortby=“custom_1” />

I didnt understand that.

nardo, this thread remembered me something I saw at Drupal (¡satanás!) site: a <a href=“http://drupal.org/node/31896”>Site configuration challenge: corporate brochure</a>

It would be nice to organize a similar challenge with TXP.

nardo · 2005-10-18 04:54:09

hombre

> You should explain why are you using the if_section tag

<txp:if_section name=""><txp:else /></txp:if_section> chunk means ‘if you’re on the home page (mi casa) don’t show subnav; if you’re not, do’

> custom field “weight” – I didnt understand that.

say you want your subnav to look like this:
Surf Training | Fish Gutting | [Mountain Running] | COBOL Development

you could change the post date of each article to achieve this order – and sortby “posted” – or you could give “Surf Training” a weight of 1, “Fish Gutting” a weight of 2 … and order by that custom field:

<txp:article sortby="custom_1" />

I hope to write up something about making static sites using section/category (more versatile) but again it’s a bit of mess using a bunch of different plugins, some of which use and some of which don’t use category titles … should be easier if/when section/category URLs are available from the core

kalius · 2005-10-18 13:10:05

I’m Working on a site with 2 level navigation, but that can scale to unlimited dept.
What I did was remove the sections totally from site navigation, Sections are only used for content type/layout. I was able to do it with <stw_category_tree /> (a little hacked) , and a small edit to publish.php. The “plugin” and code need more testing and cleaning up and ill probably realease it, after I finish my cache plugin(will be done this week).

maniqui · 2005-10-18 13:25:16

Nardo, man-machine,

How would you consider create an about section with some ‘subsections’ or maybe ‘subarticles’?
Something simple like:

…about us
……our work
……our proposal
……our team

I have thinked two approaches:

One:
…about us —> section
……our work —> 1 article
……our proposal —> 1 article
……our team —> 1 article

Two
…about us —> not a real a section, maybe just a heading somewhere
……our work —> 1 section with 1 article
……our proposal —> 1 section with 1 article
……our team —> 1 section with 1 article

I’m just thinking loud.

nardo · 2005-10-18 13:35:13

One is simpler — and is the approach taken with the initial post
otherwise u end up with 6 million sections

kalius — sounds interesting

kalius · 2005-10-18 13:56:26

you can see it here: semop . com, pardon the mess the layout and site aren’t finished yet.

the main nav is the top categories, when you are on a category a secondary nav shows, they are the sub catgories, in teory it should scale up in nesting but haven’t tested yet.

Right now it adds 2 lines to publish.php I don’t think there will be a way around this, and edit 2 lines on publish.php, I’m trying to find a way to not to have to do this.

maniqui · 2005-10-18 18:28:52

I come with another approach to generate a subnav (conditioned by current section) from articles title, without the need of chh_article_custom (that was something i was trying to avoid, dont ask me why, because I dont know) and with the help of my first-chosen-first-installed favourite plug-in -> <a href=“http://www.textpattern.org/plugins/14/mdnifsection”>mdm_if_section</a> (but I think it can be done with the buit-in txp:if_section)

Following nardo’s step (note for nardo: please, can you correct the steps number? step 3 is twice):

1. same as nardo (see above)

2. go to Presentation/Sections :

the ‘default’ section will be used for all pages, controlling each section with the help of <a href=“http://www.textpattern.org/plugins/14/mdnifsection”>mdm_if_section</a> plug-in
now create your sections (e.g. ‘training-courses’, ‘services’), with a clean “name” for the URL and a good “title” for humans
for each of these ‘internal’ sections:
- use page “default”
- set ‘on front page’ and ‘syndicate’ to “no”

3. time to dload some plugins:

ako_nav
mdn_if_section

4. go to Presentation/Forms and make new misc form called “nav-bar”
I think two methods for doing this step:

4.A) The short:By using a <code>notsection=“default”</code> attribute in mdn_if_section tag and by using <code><txp:article /></code> (section sensitive). This method is more general, because it affects all sections that are not default. You can add more values separated by comma.

Edit: this one doesnt work because in an individual article page, you dont get the full article list in the subnav, and if you try to use article_custom, you wont achieve the goal, because article_custom needs a section attribute to show the articles for a specific section. And the following code tried to be a general snippet for all sections. My mistake. Sorry.

<txp:mdn_if_section notsection=“default”> <ul id=“sub-nav”> <txp:article status=“sticky” form=“nav-level-2” sortby=“custom_1” sortdir=“asc” /> <!—dinamically generated items and sensitive for each section —> </ul>
</txp:mdn_if_section>

</pre></div>
 
 
4.B) The long: By using a <code>section=“section_name”</code> in mdn_if_section tag and <code><txp:article_custom section=“section_name” /></code> (not section sensitive if youu dont specify a section). This method is more powerful (but also it implies more coding) because you can have different types of sub-nav in each section, or dont have anyone, if you dont want. You can also add more values separated by comma to mdn_if_section <code>section=”“</code>.

Edit: the following seems to work.

<txp:mdn_if_section section=“services”> <ul id=“sub-nav”> <txp:article_custom section=“services” status=“sticky” form=“nav-level-2” sortby=“custom_1” sortdir=“asc” /> <!—dinamically generated items—> </ul>
</txp:mdn_if_section>

<txp:mdn_if_section section=“training-courses”> <ul id=“sub-nav”> <txp:article_custom section=“training-courses”“ status=“sticky” form=“nav-level-2”
sortby=“custom_1” sortdir=“asc” /> <!—dinamically generated items—> </ul>
</txp:mdn_if_section>
</pre></div>
 
 
Maybe, this second method would be preferred if you only have one or few sections with static articles.

5. same as nardo (see above)

6. same as nardo (see above)

7. same as nardo (see above)

… finish (at least, by now)…

Notes:
1. In step 2, I suggest to use just the ‘default’ page template and control it with mdn_if_section plug-in. This can be done this way (a ultra simplified example)
<div style=“font-size:85%;overflow:auto;”>
<pre>
<body>
<div id=“contenedor”> <txp:output_form form=“nav-bar” /> <!—this will output the nav-bar we created above—>

<txp:mdn_if_section section=“default”> … dinamically generated content for default (homepage) section… </txp:mdn_if_section> <txp:mdn_if_section section=“services”> …dinamically generated content for services section… this can be, as suggested in step 6, to output our list of articles in “services”: <txp:article form=“show-article” listform=“show-excerpt-with-link” /> </txp:mdn_if_section> <txp:mdn_if_section section=“training-course”> …dinamically generated content for training-course… </txp:mdn_if_section>

</div>
</body>/</pre></div>
 
2. <code><txp:article /></code> and <code><txp:article_custom /></code> can use <code>sortby=“custom_n”</code> attribute, but that is not in the documentation yet. The value for sortby must be of the kind custom_n, where n is the number of the custom field you want to use for sort the articles.
Right now, you can use the custom field name you chosed in sortby, i.e. you can use <code>sortby=“weight”</code> if your custom_1 field name is “weight”. I have already suggest this feature to be included, so you dont have to remember in wich custom field do you have your sorter value. You just remember the name of the custom field.
<hr>
If someone test this suggestion, please, some feedback would be appreciated.

Well, I think that’s all… i going to press “Submit” now… I hope nothing screw up… I hate to write code in forum…

Thanks and excuse my english

Edit: deleted some lines in the code examples (see below) because comments about it seems a manually hardcoded solution.

Last edited by maniqui (2005-10-19 05:00:05)

maniqui · 2005-10-18 18:48:28

Arrrrgh… I said it: I hate to write code in this forum. I still dont know wich is the correct way.
If you read a complete mess in the above post (the large one), dont worry, while you are reading, i’m behind it “debugging” the post. ;)

Edit: Post already debbuged. Waiting for feedback.

Last edited by maniqui (2005-10-18 19:08:47)

kalius · 2005-10-18 20:29:11

Your method is good, but I believe the main advantage for using a CMS and templates is not to have to hardcode everything, Adding a section or changing a section name will make me edit all templates and conditionals, etc.

Sencer · 2005-10-18 20:30:14

yeah, maniqui, doing the menu manally is the more obvious solution, it’s also very fiddly. Hence why nardo wrote a post on dynamic two-level nav, where dynamic means less manual fiddling.
And I think nardo’s proposed solution is currently the “shortest way” to get that.

maniqui · 2005-10-18 21:15:47

<blockquote>kalius wrote:
Your method is good, but I believe the main advantage for using a CMS and templates is not to have to hardcode everything, Adding a section or changing a section name will make me edit all templates and conditionals, etc.
Sencer wrote:
Hence why nardo wrote a post on dynamic two-level nav, where dynamic means less manual fiddling. 
</blockquote>

Thanks for replying, but excuse me kalius and sencer:

Where did I suggest something made manually or hardcoded?
are you talking about this lines?
<div style=“font-size:85%;”>
<pre>
<txp:mdn_if_section section=“about-us”>
<ul id=“sub-nav”> <!—some hardcoded subnav or content —> <li><a href=”“>me</a></li> <li><a href=”“>he</a></li> <li><a href=”“>she</a></li>
</ul>
</txp:mdn_if_section>
</pre></div>

I put that just as an example more related to the use of “mdn_if_section”, showing that you dont need to use the sub-nav dinamically created everywhere.
I would delete that chunk right now, because I think it is confusing.

If isnt that, I cant see the “menu manually hardcoded” part of my solution (or are you talking about ako_nav hardcoded menu? see comments below in this post).

“Deep” explanation:

My solution is based in nardo’s proposed solution.
I think nardo’s proposed solution is a good one. In fact, I based my solution in nardo’s work.

First: my step 4.A achieves the same results that nardo’s solution.
They are very similar yet not the same. For output the subnav, mine uses an built-in TXP tag (<code>txp:article</code>), and <code>mdn_if_section </code>can also be replaced by a built-in TXP tag.
Another possible advantage: mine uses “sticky” articles, that is more semantically meaningful to the goal of achieve an static page.

But nardo’s solution is very general, and I think it has some limitation:

What will you do (following nardo’s method) if you want a different (or none) navigation in a section that has articles?
nardo’s method needs a “negative” condition (to not be the “default” page) to output the nav. He use and empty conditional to display nothing if you are in default section. is that a clean approach?. (note: mine 4A step method uses this “negative” condition method too)
What about doing different types of sub-nav? not just sub-nav list pulled from articles titles, but list of categories or others?
needs

My solution:

can be achieved with built-in TXP tags (or am I wrong?)
it has two methods: one short and general (step 4A) and one long and powerful (step 4B)
lets you dinamically generate subnavs:
- in the sections you need, with two methods:
 - short and “negative” method : “if this is not section ‘default’ output my subnav” (same subnav to all not-default sections)
 - long and “negative” method : “if this is section ‘YYY’ output my subnav” (customized subnav for that YYY section)
- only if you need it
- using different types of subnav
- you use just one page template (‘default’) and manage the sections by using mdn_if_section plug-in
- you dont need chh_article_custom plugin, and dont need to hack it.
- that can be made with built-in TXP tags, without needing of modding a plug-in

Comments:

both solutions (nardo and mine) have a manually hardcoded element: the ako_nav generated menu is, from my point of view, a hardcoded menu in a nice way. I mean, it doesnt generate the menu items from the sections in the database. It’s just a menu hardcoded in a plug-in tag, but it’s cool, because TXP has some limitation when generating section menus. (ok, I should wait for 4.0.2+ for <a href=“http://textpattern.com/weblog/91/improved-section-and-category-nav-tags”>new improvements on this</a>)
maybe that is what you considered as “menu manually hardcoded”?

So, Sencer, kalius, I would appreciate if you can read and follow my solution and give me new feedback, and please, correct me if I’m wrong.

I dont want to sound rude, buy my english isnt the best and I dont want to hijack this thread in a “mine is bigger and better than yours”.

BTW, nardo’s work is great and is a similar approach… and with nardo, we share similar feelings about Drupal… . ¡Te amo, nardo! ¡horses for courses!

Last edited by maniqui (2005-10-18 21:54:55)

Sencer · 2005-10-18 21:50:06

What I meant is that you replaced:

with (just with different section names each time):
<code>
<txp:mdn_if_section section=“training-courses”> <ul id=“sub-nav”> <txp:article_custom section=“training-courses”“ status=“sticky” form=“nav-level-2”
sortby=“custom_1” sortdir=“asc” /> <!—dinamically generated items—> </ul>
</txp:mdn_if_section>
<txp:mdn_if_section section=“training-courses”> <ul id=“sub-nav”> <txp:article_custom section=“training-courses”“ status=“sticky” form=“nav-level-2”
sortby=“custom_1” sortdir=“asc” /> <!—dinamically generated items—> </ul>
</txp:mdn_if_section>
<txp:mdn_if_section section=“training-courses”> <ul id=“sub-nav”> <txp:article_custom section=“training-courses”“ status=“sticky” form=“nav-level-2”
sortby=“custom_1” sortdir=“asc” /> <!—dinamically generated items—> </ul>
</txp:mdn_if_section>
<txp:mdn_if_section section=“training-courses”> <ul id=“sub-nav”> <txp:article_custom section=“training-courses”“ status=“sticky” form=“nav-level-2”
sortby=“custom_1” sortdir=“asc” /> <!—dinamically generated items—> </ul>
</txp:mdn_if_section>
(… repeat for as many sections as there are …)
</code>

This means a lot of repetition. And yes, having to manually repeat it everytime allows you to make changes for each item.
I am not saying it is bad, just that for the common case, nardo’s solution is shorter and easier to maintain changes with, IMHO.

maniqui · 2005-10-18 22:27:02

Sencer, ok, you are talking about the method in step 4B. This is the long and powerful method, because it lets you add or not a different subnav or nothing in each section, if you want, and BTW you dont have to “repeat for as many sections as there are” as you said. If you dont want subnav in a particular section, just dont put a conditional if_section for that one).

Now, is there any difference (aside the tag/plug-ins implied) between nardo’s method and the followings?

Solution 4A (with a plug-in and a TXP built-in tag):
<div style=“font-size:85%;”>
<pre>
<txp:mdn_if_section notsection=“default”> <ul id=“sub-nav”> <txp:article status=“sticky” form=“nav-level-2” sortby=“custom_1” sortdir=“asc” /> </ul>
</txp:mdn_if_section>
</pre></div>

Solution 4A.bis (doesnt need plug-ins and use two TXP built-in tags, and using meaningful “sticky” articles):
<div style=“font-size:85%;”>
<pre>
<txp:if_section name=”“> <!— use name=”“ for default section —>
<txp:else /> <ul id=“sub-nav”> <txp:article status=“sticky” form=“nav-level-2” sortby=“custom_1” sortdir=“asc” /> </ul>
</txp:if_section>
</pre></div>

That one also can grow up if you use if_section per each section you have conditional content.

Edit: none of the above solutions seems to work, because in an individual article page, you dont get the full article list in the subnav.

¿Comments?

<hr />
The step 4B method (“the long and powerful”)

<div style=“font-size:85%;”>
<pre>
[…ako_nav stuff]
<txp:mdn_if_section section=“services”> <ul id=“sub-nav”> <txp:article_custom section=“services” status=“sticky” form=“nav-level-2” sortby=“custom_1” sortdir=“asc” /> </ul>
</txp:mdn_if_section>
[…more mdn_if_section_stuff]
</pre></div>

<del>There is no need of <code><txp:article_custom section=“section_name”… /></code>, because if you are parsing and if_section tag is because you are in a section context, so <code><txp:article /></code> is enough.</del>
<ins>Sorry. This was a big mistake by me: if you dont use <code><txp:article_custom /></code>, you wont get the full article list in the subnav in an individual article page.</ins>

Last edited by maniqui (2005-10-19 04:53:46)

Textpattern CMS

Textpattern CMS support forum

#1 2005-10-11 06:15:59

static site with dynamic two-level nav

#2 2005-10-12 00:01:55

Re: static site with dynamic two-level nav

#3 2005-10-18 04:34:11

Re: static site with dynamic two-level nav

#4 2005-10-18 04:54:09

Re: static site with dynamic two-level nav

#5 2005-10-18 13:10:05

Re: static site with dynamic two-level nav

#6 2005-10-18 13:25:16

Re: static site with dynamic two-level nav

#7 2005-10-18 13:35:13

Re: static site with dynamic two-level nav

#8 2005-10-18 13:56:26

Re: static site with dynamic two-level nav

#9 2005-10-18 18:28:52

Re: static site with dynamic two-level nav

#10 2005-10-18 18:48:28

Re: static site with dynamic two-level nav

#11 2005-10-18 20:29:11

Re: static site with dynamic two-level nav

#12 2005-10-18 20:30:14

Re: static site with dynamic two-level nav

#13 2005-10-18 21:15:47

Re: static site with dynamic two-level nav

#14 2005-10-18 21:50:06

Re: static site with dynamic two-level nav

#15 2005-10-18 22:27:02

Re: static site with dynamic two-level nav

Board footer