Simple Site: Homepage

The homepage is the landing page for most users of your site — it should give the information the user wants in a simple and direct way.

Prerequisites: The previous labs on setting up the blog project, basic styles, and completing the header

Duration: 30 minutes

Overview

This lab covers the rest of the homepage. In the course of this lab, you will learn about two major functions: remove() and move_to().

Outline


Remove

On the desktop version of the Moovweb blog, there is an area to the left of every blog post title. It contains the date of the post, its category, plus any comments associated with the post.

On the mobile site, the icon should be removed. You will use the remove() function to achieve this.

Select the <div> with the class "meta". Write this code in the home.ts file, which is automatically set up in a Moovweb project to be imported only on the homepage of a project.

$$(".meta") {

}

Within that, use the remove() function to remove the image in the anchor with the class "icon".

$$(".meta") {
  remove("./a[@class='icon']/img")
}

Note that you should use XPath to specify the <img> in the argument. Refresh to see the icon removed from the page.

Icon removed

An alternative way to use the remove() function is to select the element first, then pass the remove() function without any arguments:

$$(".meta") {
  $$("> a.icon > img") {
   remove()
  }
}

Moving Items

The final Tritium function introduced in this lab set will be the move_to() function.

The meta information (category, time, comments) should be below the post. You can move this information using move_to(). The function takes two arguments: where you’re moving the element and the position to which you want to move it (i.e., to the top, bottom, before it, or after it).

Inspecting the meta information shows it’s in a <div> with the class "post-holder". It needs to be moved to the bottom of this element so it is below the post content. It only really needs to be moved to its parent — which can be specified in XPath with “..”:

$$(".meta") {
  $$("> a.icon > img") {
   remove()
  }
  move_to("..")
}

Then you can specify that you want to move the element to the bottom of its parent.

$$(".meta") {
  $$("> a.icon > img") {
   remove()
  }
  move_to("..", "bottom")
}

Refresh and the items will have been moved to below the post.

Data moved

Moving the items to the bottom means that the headline of the posts is more prominent, so the user can see more easily what the post is about.

Next Steps

In these labs, you have learned about the five most common Tritium functions:

You have used them to create a header and a homepage for a simple WordPress blog site.

If you feel like you are ready to build a full mobile site, you should try following a more complex lab.