How to set up an index page

Admin Requests, General Enquiries and Forum Issues
Post Reply
User avatar
Site Admin
Posts: 4888
Joined: Thu, 22 Jan 2009, 20:32
Real Name: Mike Van Emmerik
Location: Brisbane

How to set up an index page

Post by coulomb »

Our MX-5 build thread has a growing index page. When a build thread gets past a few pages, it becomes useful to have such an index page, so that readers interested in a particular part of the thread (e.g. pictures of the motor) can find it without having to search every page. Build threads often have a lot of images, and these can be slow to load, so this can save considerable time.

The main thing you need is the ability to link to specific parts of your build thread. At the top of evey AEVA post is a small icon, usually a blue dot, but it becomes a yellow star for posts that you have not read yet.


The above example is using Firefox, but much the same applies to all browsers. Use the right mouse button (or equivalent on a Mac) over this icon to bring up the context menu. Select "copy link location" or equivalent (note: NOT copy image location; that will give you the URL for the image of the icon, not the post!) to copy a URL specific to that post to the clipboard. You can test the link if you like by opening up a new window or tab, and pasting (often control-V) into the address bar. The browser might not jump directly to the selected post immediately, especially if it's a large page and/or the selected post is near the end of the page. When your browser says "Done" or equivalent, the selected post should be scrolled to near the top of the browser page. (It might not be the first post on the page if it's right near the end; unmaximising the browser page might help convincing yourself that the link is pointing to the selected post.)

Ok, let's say we have our link in the clipboard. Now we need to edit the first post of the build thread. Remember that you can only edit your own posts; if you share a build (as Weber and I do), make sure that the person who will be doing the index makes the first post. The "Edit post" option will be under the Post Options menu, replacing the Report Post option if it is not your own post. Obviously, you have to be logged in to the AEVA forums for the system to recognise you.


Note: the system very occasionally gets into a state where it won't let you edit your own posts. This seems to go away after a while, so if this happens, you could either post a message to the Admin Notices forum (this forum) and hope that an admin is watching, or just try again in an hour or two. I've never had this problem when I wanted to edit the index page, but I guess it could happen.

Ok, when you select edit post, you will get a page something like this:


Since this is the first post of a thread, you can edit the thread subject. There are a lot of icons and options here, but you only need ordinary text editing and the "Update Post" button (when finished) to change the index.

Notice that the first thing on the page is a link to our EV Album page. The text of the link ("EVAlbum entry") is surrounded by a URL tag. This is the link that that we'll be needing for index entries, so let's review how it works. All such tags are in square brackets ("[" and "]"); the case (capital letters or not) of the text is unimportant. Every tag has a keyword that has to be spelled correctly. In this case, the keyword is URL. The ending tag has to be the same as the starting tag, with a forward slash before the name. So if the opening tag is [FOO], then the closing tab has to be [/FOO].

NOTE: In real tags, there must be no space between the keyword and the brackets. In some of my examples, I will insert spaces, so that it will display at all; if there are no spaces, the tag becomes "live" and it tries to do what I tell it to do, and won't display the tags as text. FOO is not a valid tag, so it prints OK, even with no spaces. You can see the URL tags without spaces in the image above, because, well, it's an image, not actual text in this post.

The URL tag is one that takes an argument. It's a rare tag in that the tag is optional. If you don't supply an argument, then the text between the tags is treated as a link. For example:

[ URL ][ /URL ]

Note: All URLs (Uniform Resource Locators, i.e. web addresses) require the "http://" prefix. If you forget this, the system assumes that it is relative to the AEVA host, or something.

This will produce a link to google, like this:

(This is the same text as above, without the spaces. See what I mean about examples of this stuff?)

We can change the text, so the user doesn't have to see the details of the URL, which can sometimes be quite long, unlike my example. So:

[ URL= ]Google Australia[ /URL ]

This produces:

Google Australia

Now you can understand the format of the EVAlbum example.

Ok, another quick revision; the next line is:

[ SIZE=3 ][ U ]Table of Contents[ /U ][ /SIZE ]

Again, in a real post, don't insert spaces inside the square brackets. This is an example of nested tags. In other words, there is a tag inside a tag. This is quite valid, but used only occasionally. The outer tag is the size tag. It says to make the text slightly larger than normal (normal size is 2, there is only one smaller than normal size, 1). The inner tags are U for underline. So the above produces:

Table of Contents

For special text that is not nested, you can use the toolbar buttons above the text box where you are editing the post. Choose the toolbar button first, then type the text with special attributes (special size or bolded, etc) into the box that pops up, and the text will appear at the end o the message (you may need to scroll down to get to the end of the message). I find it's much quicker to just type the tags myself.

Ok, now we get to the index itself. All the tags from the third line down are part of the index. I have highlighted one such line (by dragging the mouse over the text). It's of the form

[ URL=blah ]Text[ /URL ]

So this is just like the EVAlbum or Google examples, except that the URL ("blah") is a URL with an anchor (I hope that's the right name; it has a "#" in the URL). That's what allows you to point into the middle of a page. If you delete the "#" and everything past it (the "anchor"), then you end up with a valid URL to the start of the page (as opposed to a URL to a specific point within the page). You can't just make up something to put after the "#"; there has to be a special HTML tag with the name after the # for it to work. Fortunately, the AEVA web software automatically puts such anchors on the page for us, and using the right mouse button over the blue dot technique (see top of this post for details) gets us a URL with the correct anchor in it.

So let's assume we have this special URL in the clipboard. To create an index item, we just type something like this:

[ URL=^V ]Motor arrives[ /URL ]

where "^V" represents typing control-V (or whatever pastes the contents of the clipboard on your system). Again, no spaces are allowed. If there is a space in the URL, you can surround it with double quote (") characters.

That's all there is to it!

At any time, you can test your page using the Preview Post button. It will bring up a smallish window of what your post will look like. You can test the links as well (I like to use control-click, so the link opens in the test window, not the main browser). Check that the links work before posting. If the link doesn't work, check that you haven't snuck in a space.

Note that if you don't close the Preview Post window and press Preview Post again later, the system uses the same window that you used last time, and updates it. Quite possibly, that window may be covered by the browser window, so if you press Preview Post and nothing seems to happen, check to see if there is a window behind the browser with the updated contents.

You may notice that my links don't have "" at the front. For links to pages on the AEVA web site, this is an allowed shortcut. Well, it's not really a short cut, since you'll get the whole link and have to delete the part up to the first forward slash by hand. I do this compulsively; it makes the posts very slightly shorter. I suggest you don't do this unless you have a compulsive nature like me.

If all goes well, you can now repeat the process; go to another tab or window to find another page to link to, gets its URL to the clipboard using the Copy Link As menu item as before, and add another line below the one you just entered.

If you want, you can get a little fancy, e.g.

[ URL=foo ]Pictures of BMUs[ /URL] and [ URL=bar ]the circuit diagram[/URL]

This puts two related links on the same line. I do this a bit on the MX-5 index, since even the index is getting a bit big these days.

I suggest only making one to three changes before you press the "Update Post" button to actually save your changes. As with any edit, it may be worth while selecting all the text in the post (^A on Firefox for Windows) to copy the post's text to the clipboard. This is just an insurance policy in case the post doesn't work. Once it's in the clipboard, if the post doesn't work, you can save the text to a file (using an editor or Notepad-like application) so that you can edit again later, and just copy and paste the text from the saved file to the editor window. I wouldn't bother with this unless you've made a lot of changes.

I hope that some readers will see how easy it is to make index pages as a result of this post.
MG ZS EV 2021 April 2021.
Nissan Leaf 2012 with new battery May 2019.
5650 W solar, 2xPIP-4048MS inverters, 16 kWh battery.
1.4 kW solar with 1.2 kW Latronics inverter and FIT.
Patching PIP-4048/5048 inverter-chargers.
User avatar
Posts: 67
Joined: Mon, 25 May 2009, 20:45
Real Name: Ben
Location: Sydney - West

How to set up an index page

Post by Geerant »

Wow Thanks Coulomb This is very informative. Ill be posting my build in the next week, waiting for the weekend to take some pics of the current progress.
Working on the "Magnatron".

[]Email[/url] me for more details.
Post Reply