Config Guide

Table of Contents

• Use Amp Affiliately Theme As Remote Theme
• Global Configuration
• Theme Configuration
  • Navigation Bar Settings
    • Settings for Menu Buttons v2.7
    • Settings for Global Menu Items
    • Settings for Local Menu Items
  • List Sorting Options v2.3
  • Post-Processing Options v2.0
    • Add Anchor Link For H2, H3 And H4 Headings
    • Modify External Links To Open In New Tab
  • Sidebar Options
    • Site-Wide Display Featured And Recent Posts Sidebar Widgets v1.2
  • Social Buttons
    • v1.4 ^(Deprecated)
    • v2.7
  • Footer Options v2.0
  • SEO Configuration
  • Options For Third-Party Components
    • Google Services
      • Google Analytics
      • Google Custom Search Engine (CSE)
      • Google Adsense
      • Google Tag Manager (GTM)
    • GitHub
    • Show Github Metadata Widget in Sidebar v2.0

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

💡 Learn More:

• Configuration Options | Jekyllrb
• Default Configuration | Jekyllrb
• Render Paginated Posts

Theme Configuration

You should include the following in the _config.yml file to set up the theme.

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.

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:

When home is not set to false, the following extra settings will be available and become effective:

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.

List Sorting Options v2.3

Post-Processing Options v2.0

Add Anchor Link For H2, H3 And H4 Headings

Modify External Links To Open In New Tab

Sidebar Options

Site-Wide Display Featured And Recent Posts Sidebar Widgets v1.2

• 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

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:

💡 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

• 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)

• Note: Essential to feature the site’s search function

Google Adsense

💡 Read the Ads Settings documentation

Google Tag Manager (GTM)

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: