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.

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

Board footer