From 6af6b597fa22ee3f924a1771516f7a9faba5e51a Mon Sep 17 00:00:00 2001 From: Heitor Pascoal de Bittencourt Date: Tue, 31 Oct 2023 18:03:20 -0300 Subject: [PATCH] Add OpenGraph support Add the necessary OpenGraph meta tags to all pages. Fix https://github.com/pawroman/zola-theme-terminimal/issues/3 --- README.md | 20 ++++++++++- config.toml | 5 +++ templates/404.html | 2 +- templates/index.html | 2 ++ templates/macros/head.html | 68 ++++++++++++++++++++++++++++++++++++++ 5 files changed, 95 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b74dc4d..20455f4 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,24 @@ Example: caption_style="font-weight: bold; font-style: italic;") }} ``` +## OpenGraph + +To add an image to a post, set the `og_image` extra option to the desired image +in the same directory of the markdown file: + +```toml +[extra] +og_image = "colocated_image.png" +``` + +Additionally, for the section pages and for posts to have a fallback image, add +`default_og_image` to the `[extra]` section: + +```toml +[extra] +default_og_image = "static/ocean.jpg" +``` + ## Configuration ### Colors @@ -358,7 +376,7 @@ This theme has been forked from https://github.com/panr/hugo-theme-terminal - Prism.js syntax highlighting is not supported (you can use [Zola's](https://www.getzola.org/documentation/content/syntax-highlighting/)). -- All references to social media (e.g. Twitter, OpenGraph) have been removed. +- All references to social media (e.g. Twitter) have been removed. - All references to external URLs (e.g. Google CDN) have been removed. This theme's static assets are meant to be served from where it's hosted. diff --git a/config.toml b/config.toml index 80337c9..cfcceca 100644 --- a/config.toml +++ b/config.toml @@ -96,3 +96,8 @@ use_full_hack_font = false # # Note that the main (index) page only has the main title. page_titles = "main_only" + +# Optional: default image to use for OpenGraph. +# If the page doesnt set og_image, use this one as fallback. Usefull +# for indexes and taxonomies' pages. +#default_og_image = "static/ocean.jpg" diff --git a/templates/404.html b/templates/404.html index b081fbc..cc2ba6e 100644 --- a/templates/404.html +++ b/templates/404.html @@ -1,7 +1,7 @@ {% extends "index.html" %} {% block title %} -404 +404 | {{ config.title }} {% endblock title %} {% block header_menu %} diff --git a/templates/index.html b/templates/index.html index 86cb0cd..94d668d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -11,6 +11,8 @@ {%- block title %}{{ config.title }}{% endblock title -%} {{ head_macros::head(config=config) }} + {%- block open_graph %}{{ head_macros::open_graph(config=config) }}{% endblock open_graph -%} + {%- if config.generate_feed %} {%- if "rss" in config.feed_filename %} {% set feed_type = 'rss+xml' %} diff --git a/templates/macros/head.html b/templates/macros/head.html index 187c57c..5a4d406 100644 --- a/templates/macros/head.html +++ b/templates/macros/head.html @@ -1,3 +1,5 @@ +{% import "macros/title.html" as title_macros -%} + {% macro head(config) %} @@ -24,3 +26,69 @@ {% endif -%} {% endmacro head %} + + +{# Extra Meta tags for OpenGraph and Twitter cards #} +{% macro open_graph(config) %} +{%- if page %} + {%- set permalink = page.permalink %} + {%- set title = title_macros::title(page_title=page.title, main_title=config.title) %} + {%- set description = page.description %} + {%- set type = "article" %} + {%- if page.extra and page.extra.og_image %} + {%- if page.colocated_path %} + {%- set og_image = page.colocated_path ~ page.extra.og_image %} + {%- else %} + {%- set og_image = page.extra.og_image %} + {% endif %} + {%- elif config.extra.default_og_image %} + {%- set og_image = config.extra.default_og_image %} + {%- endif %} +{%- elif section %} + {%- set permalink = section.permalink %} + {%- set title = title_macros::title(page_title=section.title, main_title=config.title) %} + {%- set description = section.description | default(value=config.description) %} + {%- set type = "website" %} + {%- if section.extra and section.extra.og_image %} + {%- set og_image = section.extra.og_image %} + {%- elif config.extra.default_og_image %} + {%- set og_image = config.extra.default_og_image %} + {%- endif %} +{%- else %} + {# For 404 and taxonomy pages #} + {%- if taxonomy %} + {% if term %} + {%- set permalink = term.permalink %} + {%- set title = title_macros::title(page_title=term.name, main_title=config.title) %} + {%- set description = "All posts for " ~ term.name %} + {% else %} + {%- set permalink = config.base_url ~ "/" ~ taxonomy.slug %} + {%- set title = title_macros::title(page_title=taxonomy.name, main_title=config.title) %} + {%- set description = "All " ~ taxonomy.name %} + {% endif %} + {%- else %} + {%- set permalink = config.base_url %} + {%- set title = title_macros::title(page_title="404", main_title=config.title) %} + {%- set description = "Page not found" %} + {%- endif %} + {%- set type = "website" %} + {%- if config.extra.default_og_image %} + {%- set og_image = config.extra.default_og_image %} + {%- endif %} +{%- endif -%}{# #} + + + + + + +{% if og_image %} + + +{% endif %} + + + + + +{% endmacro open_graph %}