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:
Property | Key | Description |
---|---|---|
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 . |
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.2
Attribute | Property | Description |
---|---|---|
sidebar | v1.2 Enable/disable built-in the following sidebar widgets: | |
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 v2.0
Attribute | Property | Description |
---|---|---|
copyright | Your custom setting of copyright notice: | |
prepend | v2.0 The text prepend to the year. Default: Copyright © . | |
owner | The name of the copyright holder. Default: site.name . | |
link | The URL to go when clicking on the copyright notice. Default: / . | |
append | v2.0 The text at the end of the copyright notice. Default: . All rights reserved. . |
Default format:
{{ prepend }}{{ CURRENT YEAR }} <a href="{{ link }}">{{ owner }}<a>{{ append }}
Copyright © 2021 Chris KY FUNG’s Blog. All rights reserved.
Example 1:
copyright:
prepend: "© 2020-"
owner: "Chris KY FUNG"
link: https://github.com/chriskyfung/
© 2020-2021 Chris KY FUNG. All rights reserved.
Example 2:
copyright:
prepend: "GitHub ©"
owner: ""
append: ""
Github © 2021
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
Attribute | Description |
---|---|
google_analytics | Your (UA- ) Tracking ID 💡 Find your Google Analytics ID |
-
Note: Google Analytics 4 (GA4) is not yet supported in AMP.
-
When
google_analytics
is configured, an attribute calleddata-vars-event-label
will be added to every<a>
tag that links to an external URL by the post-processing of posts’ content.
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 v2.0
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 . |