Page Layout | Yext Hitchhikers Platform
What You’ll Learn
In this section, you will learn:
- How to interpret the Page HBS file
- Common updates to the Pages layout
Understanding the [page].html.hbs Files
As you’ve learned through the previous trainings, whenever you fork a new Page, it generates two files: a pageName.json
file and a pageName.html.hbs
file. The hbs file is what controls the layout of the page, and is where you should look if you want to modify the HTML of the page. The file will look similar to the below:
{{#> layouts/html }}
<div>
{{#> script/core }}
{{> cards/all }}
{{> templates/vertical-standard/script/searchbar }}
{{> templates/vertical-standard/script/spellcheck }}
{{> templates/vertical-standard/script/navigation }}
{{> templates/vertical-standard/script/verticalresults }}
{{> templates/vertical-standard/script/pagination }}
{{> templates/vertical-standard/script/locationbias }}
{{!-- {{> templates/vertical-standard/script/sortoptions }} --}}
{{!-- {{> templates/vertical-standard/script/facets }} --}}
{{!-- {{> templates/vertical-standard/script/filterbox }} --}}
{{!-- {{> templates/vertical-standard/script/qasubmission }} --}}
{{/script/core }}
<div class="Answers AnswersVerticalStandard">
<div class="Answers-navWrapper">
<div class="Answers-container">
{{> templates/vertical-standard/markup/searchbar }}
{{> templates/vertical-standard/markup/navigation }}
</div>
</div>
<!-- Add "Answers-resultsWrapper--withFilters" to this class list if you want to include filters or facets -->
<div class="Answers-container Answers-resultsWrapper">
{{> templates/vertical-standard/markup/spellcheck }}
<div class="Answers-filtersAndResults">
{{!-- <div class="Answers-filtersWrapper"> --}}
{{!-- {{> templates/vertical-standard/markup/sortoptions }} --}}
{{!-- {{> templates/vertical-standard/markup/filterbox }} --}}
{{!-- {{> templates/vertical-standard/markup/facets }} --}}
{{!-- </div> --}}
{{> templates/vertical-standard/markup/verticalresults }}
</div>
{{> templates/vertical-standard/markup/pagination }}
{{!-- {{> templates/vertical-standard/markup/qasubmission }} --}}
</div>
</div>
<footer class="Answers-footer">
{{> layouts/yext-logo }}
{{> templates/vertical-standard/markup/locationbias }}
</footer>
</div>
{{/layouts/html }}
For a refresher about this file, refer back to the
Adding & Updating Pages unit
. Here, we learned that the {{/script/core }}
partial contains the scripts of the components, while the following portion contains the markup. Because we’re focused on the layout of the page, we’ll be focusing on the markup portion.
You’ve actually already edited the page layouts in your training - every time you modify the hbs file to add a component (like facets) or remove one, you’re updating the page layout.
Example: Adding Custom HTML
Let’s say we want to add custom HTML to the page, for example, add a custom banner on my FAQ page that directs emergency questions to a hotline.
You would first decide where you want this to display. In this case, we’d like to show this banner anytime results are displayed, so you’d place it in the Answers-resultsWrapper
div.
Here, we’ve added <div class="Answers-alertBanner">For urgent requests, please call our <a href="tel:999-999-9999">emergency hotline</a></div>
to add that banner.
<div class="Answers-container Answers-resultsWrapper">
{{> templates/vertical-standard/markup/spellcheck }}
<div class="Answers-alertBanner">For urgent requests, please call our <a href="tel:999-999-9999">emergency hotline</a></div>
<div class="Answers-filtersAndResults">
{{!-- <div class="Answers-filtersWrapper"> --}}
{{!-- {{> templates/vertical-standard/markup/sortoptions }} --}}
{{!-- {{> templates/vertical-standard/markup/filterbox }} --}}
{{!-- {{> templates/vertical-standard/markup/facets }} --}}
{{!-- </div> --}}
{{> templates/vertical-standard/markup/verticalresults }}
</div>
{{> templates/vertical-standard/markup/pagination }}
{{!-- {{> templates/vertical-standard/markup/qasubmission }} --}}
</div>
Next, we’ll need to style the newly added HTML. We can add the below CSS for the .Answers-alertBanner
class in our answers.scss file.
.Answers-alertBanner {
width: 100%;
text-align: center;
background: var(--yxt-color-brand-primary);
padding: 1rem;
margin-bottom: 1rem;
color: white;
font-weight: bold;
a {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}
By adding the desired text to the markup (bottom portion) of the faq.html.hbs file, and styling this text as a banner in the answers.scss file, we’re able to generate the below banner.
Example: Changing the Order of Components
Another use case would be changing the order of components on your page. For example, if we wanted to add the sort options above the search results, we could move the sort options component line {{> templates/vertical-standard/markup/sortoptions }}
underneath the spellcheck component.
<div class="Answers-container Answers-resultsWrapper">
{{> templates/vertical-standard/markup/spellcheck }}
{{> templates/vertical-standard/markup/sortoptions }}
<div class="Answers-filtersAndResults">
<div class="Answers-filtersWrapper">
{{!-- {{> templates/vertical-standard/markup/filterbox }} --}}
{{!-- {{> templates/vertical-standard/markup/facets }} --}}
</div>
{{> templates/vertical-standard/markup/verticalresults }}
</div>
{{> templates/vertical-standard/markup/pagination }}
{{!-- {{> templates/vertical-standard/markup/qasubmission }} --}}
</div>
If we add some additional CSS below in answers.scss:
.yxt-SortOptions-options {
margin: 0;
display: flex;
}
.yxt-SortOptions-option {
align-items: center;
margin: .125rem 0.5rem .125rem 0;
}
We’ll be able to display my sort options above the results in a row.