Add HTML based upon URL condition

[imag...@gmail.com]

Hi,

Is there a way to add a portion of HTML based upon a URL comparison, preferably, but not strictly, without JavaScript?

I would like to add a descritive "tab" on top o my main content DIV, describing the section currently viewed. The condition I'm thinking would be about something in the custom URL (fortunately) allowed by Tumblr. E.g:

myblog.tumblr.com/foo is a page and should display a "Foo tab"

myblog.tumblr.com/bar is another page and should display a "Bar tab"

Is there anything like that?

[Vladimir Starkov]

Can you visually show what you want to do?

[imag...@gmail.com]

Let me try to explain using images. Only writing was very confusing...

Consider two pages already created: /foo and /bar

As all the theme is just one single file, I'd like to condition what HTML would appear based in URL.

When accessing /foo page it would be:

When accessing /bar, the same markup would be:

And so on.

In the markup I would have something like (pseudo-code):

<div id="navigation"> 

 

IF currentURL CONTAINS 'foo' THEN 

 

    <ul>
        <li>Foo</li>
    </ul> 

 

ELSE IF currentURL CONTAINS 'bar' 

 

    <ul>
        <li>Bar</li>
    </ul> 

 

END IF 

 

</div>

[Sean Zhu]

There are a few ways to do this, but I think the following is the best way I know. Feel free to change class and id names, of course.

Also, if someone doesn't have JavaScript, do you want them to be shown by default? Here I assume you don't want them to be shown by default.

<style>

.hidden {display: none}

</style>

<div id="navigation"> 

    <ul id="foomenu" class="hidden">

        <li>Foo</li>

    </ul> 

     <ul id="barmenu" class="hidden">

        <li>Bar</li>

    </ul> 

</div>

<script>

if (location.pathname=='/foo') {document.getElementById('foomenu').className='' /*removes the hidden class name*/}

else if (location.pathname=='/bar') {document.getElementById('foomenu').className='' /*removes the hidden class name*/}

</script>

I've bolded the important part — the JavaScript conditions you're looking for.

[imag...@gmail.com]

Just checking... So nothing natively available, right?

I was afraid to depend on JavaScript to do so.

[Sean Zhu]

Well, you said "preferably, but not strictly, without JavaScript". So I assumed JavaScript was okay.

I know for tag pages, you can use {Tag}. But I don't think a similar variable is available for static pages.

[Vladimir Starkov]

There is no {Tag} variable for static pages, because they are cut version of permalink pages. Your solution seems to be the one and the best.

[imag...@gmail.com]

@Sean: Not complaining, just checking ;-)

Thanks for the help, it's implemented now.