Config Guide
Table of Contents
- Use Amp Affiliately Theme As Remote Theme
- Global Configuration
- Theme Configuration
Use Amp Affiliately Theme As Remote Theme
-
Add
jekyll-remote-theme
as an array-value of the keyplugins
in your site’s_config.yml
file, like this:plugins: - jekyll-remote-theme
-
Add
gem "jekyll-remote-theme"
to the Bundler group your Gemfile, like this:group :jekyll_plugins do gem "jekyll-remote-theme" gem "another-jekyll-plugin" end
-
Run
bundle install
to install the plugin before building your site locally. -
Add
remote_theme: chriskyfung/amp-affiliately-jekyll-theme
to your_config.yml
file. -
Add Theme Configuration to your
_config.yml
file.
Note: You must update the jekyll-remote-theme
plugin to v0.4.2
or higher if you use Jekyll 4.0+.
You may also optionally specify a branch, tag, or commit to using by appending an @
and the Git ref (e.g., chriskyfung/amp-affiliately-jekyll-theme@v1.2.8
). If you don’t specify a Git ref, the master branch will be used.
Global Configuration
Attribute | Description |
---|---|
permalink | /:year/:month/:day/:title |
timezone | Any entry from the IANA Time Zone Database is valid, e.g. America/New_York. A list of all available values can be found here. |
paginate | (Optional) The maximum number of posts you’d like to be displayed per-page in the generated site, e.g. 10 . |
paginate_path | (Optional) The destination of the pagination pages. |
💡 Learn More:
Theme Configuration
You should include the following in the _config.yml
file to set up the theme.
Attribute | Description |
---|---|
title | Your site’s title. Also, used as the text of the first menu item if repostory is configured in the _config.yml |
url | The web address of your site including the protocol, subdomain, and domain name, e.g. https://yourdomain.com or https://www.yourdomain.com |
baseurl | The first route parameter after your domain name in the URL, e.g. '' if the site is deployed to www.yourdomain.com and /repo-1 if the root is www.yourdomain.com/repo-1/ . |
favicon | The path to the favicon file |
logo | The path to the (JPG/PNG/SVG) image that will be displayed on the navigation bar. The URL will also be included to JSON-LD structured data by Jekyll SEO Tag. |
name | Your site’s name used as the alt text of your logo image. Also, displayed in the copyright notice, if copyright.owner is not configured in the _config.yml . |
Note: Regarding to title
and url
, please alse read the documentation of Jekyll Feed and Jekyll SEO Tag.
Navigation Bar Settings
You will need to configure the navigation bar for this theme in the following hierarchy:
nav:
buttons:
... # Settings for menu buttons
...
global:
... # Settings for global/domain-Level menu items
...
local:
... # Settings for local/baseURL-level menu items
...
Settings for Menu Buttons v2.7
Use the following option to configure the menu buttons.
Attribute | Property | Description |
---|---|---|
buttons | ||
gh_sponsors | v2.7 Set true to show GitHub Sponsors button in the navigation bar, if social.github is also configured in in the _config.yml .Default: false . |
Example:
Settings for Global Menu Items
GitHub Pages allows you to deploy your multiple project pages under the same domain with different base URLs. In case, you may want to a menu item for back to the domain-level homepage and/or some principal menu items sharing across the sites for consistency. The following options provide the granular control to those menu items:
Attribute | Property | Description |
---|---|---|
global | ||
home | v2.0 Set false to disable rendering HOME menu item in the navigation menu.Default: true . | |
menu | v2.0 Set true to include menu items from global-menu.html for your entire site/domain.Default: false . | |
dropdown | v1.7.2 Set false to exclude global dropdown menus from the global menu.Default: true . |
When home
is not set to false
, the following extra settings will be available and become effective:
Attribute | Property | Key | Description |
---|---|---|---|
global | home | v2.0 | |
location | The location of HOME button in the navigation menu. Options: menu-start or menu-end .Default: menu-start . | ||
text | The text to display on the home menu item. Default: Home . |
Settings for Local Menu Items
Use the following options to configure the menu items that will be shown on the webpages under the same base URL.
Attribute | Property | Description |
---|---|---|
local | ||
max_title_length | v2.0 The maximun number of characters to display site.title in the navigation bar.Default: 40 . | |
items | v1.7.2 An array of simple menu items that consists of the name and url key-value pairs. | |
menu | v1.7.2 Set true to include menu items from local-menu.html .Default: false . |
For example,
nav:
local:
items:
- name: Page 1
url: /page-1.html
- name: Page 2
url: page-2.html
List Sorting Options v2.3
Attribute | Description |
---|---|
sort_categories | Set false to disable sorting the items of post’s categories.Default: true . |
sort_tags | Set false to disable sorting the items of post’s tags.Default: true . |
Post-Processing Options v2.0
Add Anchor Link For H2, H3 And H4 Headings
Attribute | Description |
---|---|
anchor_link | Set true to attach an anchor link to H2-H4 elements inside posts’ content similar to AnchorJS (View Demo).Default: false . |
Modify External Links To Open In New Tab
Attribute | Description |
---|---|
target_blank | Set true to insert rel="noopener noreferrer" and target="_blank" to each <a> element that links to an outbound URL inside posts’ content.Default: false . |
Sidebar Options
Site-Wide Display Featured And Recent Posts Sidebar Widgets v1.6
Attribute | Property | Description |
---|---|---|
sidebar | ||
featured | Add FEATURED widget to sidebar. Default: true . | |
recent_posts | Add RECENT POSTS widget to sidebar. Default: true . |
- Set
false
to disable the widgets as you need
Social Buttons
You can configure the links for social buttons by the following attributes.
v1.4 Deprecated
# Soical Buttons
facebook_id: your_facebook_username
pinterest_id: your_pinterest_username
github_id : your_github_username
medium_id: your_medium_username
v2.7
The social button will only show if the corresponding attribute is configured.
# Soical Buttons
social:
facebook: your_facebook_username
twitter: your_twitter_username
linkedin: your_linkedin_username
pinterest: your_pinerest_username
github : your_github_username
medium: your_medium_username
Footer Options
For detailed instructions on how to customize your site’s footer, visit our Footer Configuration page. This guide explains how to personalize the second and third footer columns by setting titles and link lists in the _config.yml
file. It also provides information on configuring other footer options like copyright notices and privacy policy links.
By following this guide, you can significantly enhance your site’s navigation and usability, ensuring that important information is easily accessible to your visitors. Improving your site’s footer not only boosts the overall user experience but also contributes to a more professional and polished appearance. Check out the Footer Configuration page to make the most of these features.
Cookie Consent v2.9
Attribute | Description |
---|---|
consent | Set true to enable the cookie consent UI.Default: false . |
consent_dev_mode | Set false to remove the data-ampdevmode attribute from the custom script.Default: true . |
Attribute | Property | Description |
---|---|---|
amp_optimizer | v2.9.1 Set true if you run AMP Optimizer after building the Jekyll site.Default: false . | |
script_hash | v2.9.1 | |
consent_gsc | The hash for the get_stored_consentStates script.💡 Calculating the script hash. |
SEO Configuration
AMP Affiliately Theme uses Jekyll SEO Tag to output machine-readable metadata for search engines and social networks to index and display. The following is recommended to configure in the _config.yml
file:
Attribute | Description |
---|---|
author | Global author informaiton |
description | A longer description used for the description meta tag |
locate | The locale these tags are marked up in. Default is en_US . Takes priority over existing config key lang |
tagline | A short description used as part of the title tag |
💡 Learn more about the usage of the SEO tag plugin from here.
Note: Regarding to author
and description
, please alse read the documentation of Jekyll Feed and Jekyll SEO Tag.
Moreover, it is a good idea to set a default image using Front Matter defaults,
provide a default Open Graph image (og:image
) and Twitter Card image (twitter:image
) to all of your posts and pages.
Here is a basic example from Jekyll SEO Tag’s Advanced usage:
defaults:
- scope:
path: ""
values:
image: /assets/images/default-card.png
Options For Third-Party Components
Google Services
Google Analytics
Google Analytics 4 (GA4) provides robust tracking capabilities to help you understand user interactions on your site. The following attributes and configurations are essential for effectively implementing GA4 with AMP:
Attribute | Description |
---|---|
ga4 | v2.6.1 Your ( G- ) Measurement ID 💡. Find your GA4 Measurement ID |
For more information about the use of GA4 in this theme, please refer to our Google Analytics 4 for AMP Features page.
Google Custom Search Engine (CSE)
Attribute | Description |
---|---|
cse_id | Your Search Engine ID 💡 Find your Google CSE ID |
- Note: Essential to feature the site’s search function
Google Adsense
Attribute | Property | Description |
---|---|---|
adsense | ||
client_id | Your Google Adsense client ID, which starts with ca-pub- | |
auto_ads | Set false to disable Auto ads in AdsenseDefault: true . | |
ad_slot | before_content - Slot ID of ad unit that places before contentsidebar - Slot ID of ad unit that places to sidebar | |
adstyle | Set false to not apply custom styles to indicate empty Ad containers.Default: true . |
💡 Read the Ads Settings documentation
Google Tag Manager (GTM)
Attribute | Description |
---|---|
gtm | Your GTM AMP container ID |
GitHub
Show Github Metadata Widget in Sidebar v1.2
This theme supports rendering GitHub Metadata by using the jekyll-github-metadata plugin. When you associate it with a GitHUb project repo, a sidebar widget named RESOURCES with a button link to the GitHub repository will be shown on the page.
You have to declare the repository name in the _config.yml
file, like this:
Attribute | Description |
---|---|
Repository | v1.2 Declare The Repository Name in the <Username>/<Project> . |
resources_widget | v2.0 Enable side-widely display Resourece widget in sidebar. Default: true . |