Config Guide

Config Guide

Table of Contents


Use Amp Affiliately Theme As Remote Theme

  1. Add jekyll-remote-theme as an array-value of the key plugins in your site’s _config.yml file, like this:

    plugins:
       - jekyll-remote-theme
    
  2. 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
    
  3. Run bundle install to install the plugin before building your site locally.

  4. Add remote_theme: chriskyfung/amp-affiliately-jekyll-theme to your _config.yml file.

  5. 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.


You will need to configure the navigation bar for this theme in the following hierarchy:

nav:
   global:
      ... # Settings for global/domain-Level menu items
      ...
   local:
      ... # Settings for local/baseURL-level menu items
      ...

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

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.
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.

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

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 called data-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 Adsense
Default: true.
  ad_slot before_content - Slot ID of ad unit that places before content
sidebar - 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.
Loading Disqus Comments...
Please enable JavaScript to view the comments powered by Disqus.