قالب وردپرس درنا توس
Home / IOS Development / Beautifying Templated Websites with Leaf and Bootstrap

Beautifying Templated Websites with Leaf and Bootstrap



In the guide, Templating With Leaf, you started to build a powerful, dynamic website with Leaf. However, the web pages only use simple HTML and are not styled – they do not look good!

In this tutorial you will learn how to use the Bootstrap frame to add styling to your pages. You also learn to add templates so you only have to make changes in one place. Finally, you also see how to serve files with Damp.

Note : This tutorial assumes that you have experience using Damp to build web apps. See Getting Started with Server Page Swift with Steam if you are new to Steam. You must at least use the steps of that tutorial to install the Steam Toolbox to follow this tutorial. It will also be of great benefit to you if you first work through the Templating With Leaf guide.

Getting Started

First, download the home screen project for this tutorial using the Download Materials button at the top or bottom of the page. You can open the startup project in Xcode by running the following command from the root directory of the project:

  damp xcode -y

Currently, if you change the index page template to add styling, you only affect the current page. You need to duplicate the styling on the acronym details page, and all other future pages.

The sheet allows you to insert templates into other templates. This allows you to create a "base" template that contains the code that is common to all pages and uses it throughout the site.

In Resources / Views create a new file, base.leaf . Copy the contents to index.leaf to base.leaf . Remove everything between the tags and . This remaining code is similar to the following:




  
    # (title) | Acronyms 





This forms your basic template and will be the same for all pages. Between and tags add:

  #get (content)

This uses Leafs #get () tag to retrieve the variable content . To create this variable, open index.leaf replace the content with the following:

  #set ("content") {



> acronym #if (acronyms) { #for (acronym in acronyms) { }
Short Long
# (acronym.short) # (acronym.long)
} other {

There are no acronyms yet!

} }

The changes that were made were:

  • Remove HTML now residing in base.leaf .
  • Wrap the remaining HTML with the Leafs #set () tag and call the contents created . You must package the variable name in #set () with quotes for Leaf to record it.

Finally at the bottom of index.leaf add:

  #embed ("base")

This incorporates the base.leaf template into the page and makes it. base.leaf template uses #get () to obtain the content indicated above.

Before running the app, you must have PostgreSQL on the system. You run the Postgres server in a Docker container. Open `Terminal` and enter the following command:

  docker run - name postgres -e POSTGRES_DB = steam
-e POSTGRES_USER = vapor -e POSTGRES_PASSWORD = password
-p 5432: 5432 -d postgres

To verify that your database is running, enter the following in Terminal to list all active containers:

  docker ps

To add acronyms to the database, use the instructions for RESTed macOS app in the guide.

Save the .leaf files in Xcode, then build and run the app. Open your web browser and enter URL http: // localhost: 8080 / . The page goes as before:

 Acronyms page

Then, acronym.leaf opens and changes it to use the base template by replacing the content with the following:

 ] #set ("contents") {

# (akronym.short)

# (akronym.lang)

Created by # (username)

} #embed ("base")

Again, the changes were made:

  • Remove all HTML that now resides in the base template.
  • Save the remaining HTML file in the content variable using Leafs #set () tag.
  • Enter the base template to bring in the common code and give content .

Save the file, and in your browser, navigate to an acronym page. The page becomes as before with the new base template:

 Running with new base template

Note : In debug mode, you can update pages to retrieve page changes. In the release mode, the Leaf caches the performance pages, so you need to restart the program to see changes.

Bootstrap

Bootstrap is an open-source, front-end framework for websites, originally built by Twitter. It makes it easy to use components that you add to web pages. It is a mobile first library and makes it easy to build a website that works on screens of all sizes.

To use Bootstrap, go to getbootstrap.com and click Get Started . Bootstrap provides a CSS file to provide styling and Javascript files that provide functionality for Bootstrap components. You must include these files on all pages. Since you have created a base.leaf template, this is easy to do!

On the page Getting Started you find Starter template section.

In the starter's section, the two codes – labeled "Mandatory Meta Codes" and mark for the CSS tag "Bootstrap CSS." Replace the current tag in base.leaf with the new tags.

At the bottom of the start template, copy the three

also applies to an edge on the top of the container. If you save the file and update your web page, you will see that the page now has some space around the pages and top, and no longer looks cramped:

 Adding a container

Navigation

] The TIL website currently consists of two pages: a website and an acronym detail page. As more and more pages are added, it may be difficult to find your way around the site. At the moment, if you go to the detail of an acronym, it's not easy to get back to the homepage! Adding navigation to a website makes the site more user-friendly for users.

HTML defines an item