When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.
Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.
Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:
{{< figure
src="abstract.jpg"
alt="Abstract purple artwork"
diff --git a/docs/index.json b/docs/index.json
index 62499a21d..7979c677b 100644
--- a/docs/index.json
+++ b/docs/index.json
@@ -1 +1 @@
-[{"content":" Blowfish brings your content to life. 😍 This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example taxonomy listing page.\nSidenote: This page is just a standard Blowfish article listing and Hugo has been configured to generate a samples content type and display article summaries.\n","date":"26 September 2022","permalink":"/blowfish/samples/","section":"Content Samples","summary":"Blowfish brings your content to life. 😍 This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example taxonomy listing page.","title":"Content Samples"},{"content":"","date":"26 September 2022","permalink":"/blowfish/tags/sample/","section":"Tags","summary":"","title":"sample"},{"content":"Blowfish has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.\nThis area could be used to add some extra decriptive text to each taxonomy. Check out the advanced tag below to see how to take this concept even further.\n","date":"26 September 2022","permalink":"/blowfish/tags/","section":"Tags","summary":"Blowfish has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.","title":"Tags"},{"content":"","date":"26 September 2022","permalink":"/blowfish/tags/thumbnail/","section":"Tags","summary":"","title":"thumbnail"},{"content":"A quick example of how to start using Thumbnails in your articles.\nIf your average directory for an article looks like this:\ncontent └── awesome_article.md You need to change it from a single markdown file into a folder. Create a directory with the same name of the article, inside create a index.md file. You\u0026rsquo;ll get a structure similar to what\u0026rsquo;s below.\ncontent └── awesome_article └── featured.png Inside the article you can now add an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature*. Example below.\ncontent └── awesome_article ├── index.md └── featured.png This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for oEmbed cards across social platforms. As an example, you can try copy pasting the URL of this article into a platform that shows oEmbeds (e.g. Twitter, WhatsApp, Telegram, etc) and see what is displayed.\n","date":"26 September 2022","permalink":"/blowfish/samples/thumbnail_sample/","section":"Content Samples","summary":"A quick example of how to start using Thumbnails in your artciles.","title":"Thumbnails"},{"content":" A powerful, lightweight theme for Hugo built with Tailwind CSS. This is a demo site built entirely using Blowfish. It also contains a complete set of theme documentation. Blowfish is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.\nThis is a demo of the profile layout. Switch layout \u0026orarr; Explore the sample pages to get a feel for what Blowfish can do. If you like what you see, check out the project on Github or read the Installation guide to get started.\n","date":"26 September 2022","permalink":"/blowfish/","section":"Welcome to Blowfish! 🎉","summary":"A powerful, lightweight theme for Hugo built with Tailwind CSS. This is a demo site built entirely using Blowfish. It also contains a complete set of theme documentation. Blowfish is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.","title":"Welcome to Blowfish! 🎉"},{"content":"","date":"13 June 2022","permalink":"/blowfish/posts/","section":"Posts","summary":"","title":"Posts"},{"content":"","date":"19 January 2022","permalink":"/blowfish/tags/docs/","section":"Tags","summary":"","title":"docs"},{"content":" Simple, yet powerful. Learn how to use Blowfish and its features. This section contains everything you need to know about Blowfish. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.\n","date":"19 January 2022","permalink":"/blowfish/docs/","section":"Documentation","summary":"Simple, yet powerful. Learn how to use Blowfish and its features. This section contains everything you need to know about Blowfish. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.","title":"Documentation"},{"content":"","date":"19 January 2022","permalink":"/blowfish/tags/new/","section":"Tags","summary":"","title":"new"},{"content":" Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision.\nTailwind CSS 3.0 # Tailwind CSS is at the heart of Blowfish and this release contains the very latest Tailwind CSS version 3. It brings with it performance optimisations and support for some great new CSS features.\nMultilingual support # A highly requested feature, Blowfish is now multilingual! If you publish your content in multiple languages, the site will be built with all the translations available.\n🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩 Thanks to submissions from the community, Blowfish has already been translated into eight languages with more to be added over time. By the way, pull requests for new languages are always welcome!\nRTL language support # One of the benefits of the new Tailwind and Multilingual features is the ability to add RTL language support. When enabled, the entire site will reflow content from right-to-left. Every element in the theme has been restyled to ensure it looks great in this mode which aids authors who wish to generate content in RTL languages.\nRTL is controlled on a per-language basis so you can mix and match both RTL and LTR content in your projects and the theme will respond accordingly.\nAutomatic image resizing # A big change in Blowfish 2.0 is the addition of automatic image resizing. Using the power of Hugo Pipes, images in Markdown content are now automatically scaled to different output sizes. These are then presented using HTML srcset attributes enabling optimised file sizes to be served to your site visitors.\n\u0026lt;!-- Markdown:  --\u0026gt; \u0026lt;img srcset=\u0026#34; /image_320x0_resize_q75_box.jpg 320w, /image_635x0_resize_q75_box.jpg 635w, /image_1024x0_resize_q75_box.jpg 1024w, /image_1270x0_resize_q75_box.jpg 2x\u0026#34; src=\u0026#34;/image_635x0_resize_q75_box.jpg\u0026#34; alt=\u0026#34;My image\u0026#34; /\u0026gt; Best of all there\u0026rsquo;s nothing you need to change! Simply insert standard Markdown image syntax and let the theme do the rest. If you want a little more control, the figure shortcode has been completely rewritten to provide the same resizing benefits.\nSite search # Powered by Fuse.js, site search allows visitors to quickly and easily find your content. All searches are performed client-side meaning there\u0026rsquo;s nothing to configure on the server and queries are performed super fast. Simply enable the feature in your site configuration and you\u0026rsquo;re all set. Oh, and it also supports full keyboard navigation!\nTables of contents # A highly requested feature, Blowfish now supports tables of contents on article pages. You can see it in action on this page. The contents are fully responsive and will adjust to take advantage of the space available at different screen resolutions.\nAvailable on a global or per article basis, the table of contents can be fully customised using standard Hugo configuration values, allowing you to adjust the behaviour to suit your project.\nAccessibility improvements # From adding ARIA descriptions to more items or simply adjusting the contrast of certain text elements, this release is the most accessible yet.\nVersion 2 also introduces \u0026ldquo;skip to content\u0026rdquo; and \u0026ldquo;scroll to top\u0026rdquo; links that enable quick navigation. There\u0026rsquo;s also keyboard shortcuts for enabling items like search without reaching for the mouse.\nThe new image resizing features also provide full control over alt and title elements enabling an accessible experience for all visitors.\nA whole lot more # There\u0026rsquo;s countless other features to explore. From being able to display taxonomies on articles and list pages, to using the new headline author parameter to customise your homepage. There\u0026rsquo;s also improved JSON-LD strucured data which further optimises SEO performance.\n","date":"19 January 2022","permalink":"/blowfish/docs/welcome/","section":"Documentation","summary":"Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision.","title":"Welcome to Blowfish 🐡"},{"content":"","date":"16 August 2020","permalink":"/blowfish/tags/installation/","section":"Tags","summary":"","title":"installation"},{"content":"Simply follow the standard Hugo Quick Start procedure to get up and running quickly.\nDetailed installation instructions can be found below. Instructions for updating the theme are also available.\nInstallation # These instructions will get you up and running using Hugo and Blowfish from a completely blank state. Most of the dependencies mentioned in this guide can be installed using the package manager of choice for your platform.\nInstall Hugo # If you haven\u0026rsquo;t used Hugo before, you will need to install it onto your local machine. You can check if it\u0026rsquo;s already installed by running the command hugo version.\nMake sure you are using Hugo version 0.87.0 or later as the theme takes advantage of some of the latest Hugo features. You can find detailed installation instructions for your platform in the Hugo docs.\nCreate a new site # Run the command hugo new site mywebsite to create a new Hugo site in a directory named mywebsite.\nNote that you can name the project directory whatever you choose, but the instructions below will assume it\u0026rsquo;s named mywebsite. If you use a different name, be sure to substitute it accordingly.\nDownload the Blowfish theme # There several different ways to install the Blowfish theme into your Hugo website. From easiest to most difficult to install and maintain, they are:\nHugo module (recommended) Git submodule Manual file copy If you\u0026rsquo;re unsure, choose the Hugo module method.\nInstall using Hugo # This method is the quickest and easiest for keeping the theme up-to-date. Hugo uses Go to initialise and manage modules so you need to ensure you have go installed before proceeding.\nDownload and install Go. You can check if it\u0026rsquo;s already installed by using the command go version.\nMake sure you are using Go version 1.12 or later as Hugo requires this for modules to work correctly. From your Hugo project directory (that you created above), initialise modules for your website:\n# If you\u0026#39;re managing your project on GitHub hugo mod init github.com/\u0026lt;username\u0026gt;/\u0026lt;repo-name\u0026gt; # If you\u0026#39;re managing your project locally hugo mod init my-project Add the theme to your configuration by creating a new file config/_default/module.toml and adding the following:\n[[imports]] path = \u0026#34;github.com/nunocoracao/blowfish\u0026#34; Start your server using hugo server and the theme will be downloaded automatically.\nContinue to set up the theme configuration files.\nInstall using git # For this method you\u0026rsquo;ll need to ensure you have Git installed on your local machine.\nChange into the directory for your Hugo website (that you created above), initialise a new git repository and add Blowfish as a submodule.\ncd mywebsite git init git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish Then continue to set up the theme configuration files.\nInstall manually # Download the latest release of the theme source code.\nDownload from Github Extract the archive, rename the folder to blowfish and move it to the themes/ directory inside your Hugo project\u0026rsquo;s root folder.\nContinue to set up the theme configuration files.\nSet up theme configuration files # In the root folder of your website, delete the config.toml file that was generated by Hugo. Copy the *.toml config files from the theme into your config/_default/ folder. This will ensure you have all the correct theme settings and will enable you to easily customise the theme to your needs.\nNote: You should not overwrite the module.toml file if one already exists in your project! Depending on how you installed the theme you will find the theme config files in different places:\nHugo Modules: In the Hugo cache directory, or download a copy from GitHub Git submodule or Manual install: themes/blowfish/config/_default Once you\u0026rsquo;ve copied the files, your config folder should look like this:\nconfig/_default/ ├─ config.toml ├─ markup.toml ├─ menus.toml ├─ module.toml # if you installed using Hugo Modules └─ params.toml Important: If you didn\u0026rsquo;t use Hugo Modules to install Blowfish, you must add the line theme = \u0026quot;blowfish\u0026quot; to the top of your config.toml file. Next steps # The basic Blowfish installation is now complete. Continue to the Getting Started section to learn more about configuring the theme.\nInstalling updates # From time to time there will be new releases posted that apply fixes and add new functionality to the theme. In order to take advantage of these changes, you will need to update the theme files on your website.\nHow you go about this will depend on the installation method you chose when the theme was originally installed. Instructions for each method can be found below.\nHugo module Git submodule Manual file copy Update using Hugo # Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:\nhugo mod get -u Hugo will automatically update any modules that are required for your project. It does this by inspecting your module.toml and go.mod files. If you have any issues with the update, check to ensure these files are still configured correctly.\nThen simply rebuild your site and check everything works as expected.\nUpdate using git # Git submodules can be updated using the git command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:\ngit submodule update --remote --merge Once the submodule has been updated, rebuild your site and check everything works as expected.\nUpdate manually # Updating Blowfish manually requires you to download the latest copy of the theme and replace the old version in your project.\nNote that any local customisations you have made to the theme files will be lost during this process. Download the latest release of the theme source code.\nDownload from Github Extract the archive, rename the folder to blowfish and move it to the themes/ directory inside your Hugo project\u0026rsquo;s root folder. You will need to overwrite the existing directory to replace all the theme files.\nRebuild your site and check everything works as expected.\n","date":"16 August 2020","permalink":"/blowfish/docs/installation/","section":"Documentation","summary":"Simply follow the standard Hugo Quick Start procedure to get up and running quickly.\nDetailed installation instructions can be found below. Instructions for updating the theme are also available.\nInstallation # These instructions will get you up and running using Hugo and Blowfish from a completely blank state.","title":"Installation"},{"content":" This section assumes you have already installed the Blowfish theme. The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.\nBasic configuration # Before creating any content, there are a few things you should set for a new installation. Starting in the config.toml file, set the baseURL and languageCode parameters. The languageCode should be set to the main language that you will be using to author your content.\n# config/_default/config.toml baseURL = \u0026#34;https://your_domain.com/\u0026#34; languageCode = \u0026#34;en\u0026#34; The next step is to configure the language settings. Although Blowfish supports multilingual setups, for now, just configure the main language.\nLocate the languages.en.toml file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to languages.fr.toml.\nNote that the language code in the language config filename should match the languageCode setting in config.toml. # config/_default/languages.en.toml title = \u0026#34;My awesome website\u0026#34; [author] name = \u0026#34;My name\u0026#34; image = \u0026#34;img/author.jpg\u0026#34; headline = \u0026#34;A generally awesome human\u0026#34; bio = \u0026#34;A little bit about me\u0026#34; links = [ { twitter = \u0026#34;https://twitter.com/username\u0026#34; } ] The [author] configuration determines how the author information is displayed on the website. The image should be placed in the site\u0026rsquo;s assets/ folder. Links will be displayed in the order they are listed.\nIf you need extra detail, further information about each of these configuration options, is covered in the Configuration section.\nColour schemes # Blowfish ships with a number of colour schemes out of the box. To change the scheme, simply set the colorScheme theme parameter. Valid options are blowfish (default), avocado, fire, ocean and slate.\n# config/_default/params.toml colorScheme = \u0026#34;blowfish\u0026#34; Blowfish defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in Tailwind.\nBlowfish (default) # Avocado # Fire # Congo # Slate # Neon # Redemption # Terminal # Mario # Noir # Although these are the default schemes, you can also create your own. Refer to the Advanced Customisation section for details.\nOrganising content # By default, Blowfish doesn\u0026rsquo;t force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer pages for a static site, posts for a blog, or projects for a portfolio.\nHere\u0026rsquo;s a quick overview of a basic Blowfish project. All content is placed within the content folder:\n. ├── assets │ └── img │ └── author.jpg ├── config │ └── _default ├── content │ ├── _index.md │ ├── about.md │ └── posts │ ├── _index.md │ ├── first-post.md │ └── another-post │ ├── aardvark.jpg │ └── index.md └── themes └── blowfish It\u0026rsquo;s important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the official Hugo docs for more information.\nBlowfish is also flexible when it comes to taxonomies. Some people prefer to use tags and categories to group their content, others prefer to use topics.\nHugo defaults to using posts, tags and categories out of the box and this will work fine if that\u0026rsquo;s what you want. If you wish to customise this, however, you can do so by creating a taxonomies.toml configuration file:\n# config/_default/taxonomies.toml topic = \u0026#34;topics\u0026#34; This will replace the default tags and categories with topics. Refer to the Hugo Taxonomy docs for more information on naming taxonomies.\nWhen you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.\nMenus # Blowfish has two menus that can be customised to suit the content and layout of your site. The main menu appears in the site header and the footer menu appears at the bottom of the page just above the copyright notice.\nBoth menus are configured in the menus.en.toml file. Similarly to the languages config file, if you wish to use another language, rename this file and replace en with the language code you wish to use.\n# config/_default/menus.toml [[main]] name = \u0026#34;Blog\u0026#34; pageRef = \u0026#34;posts\u0026#34; weight = 10 [[main]] name = \u0026#34;Topics\u0026#34; pageRef = \u0026#34;topics\u0026#34; weight = 20 [[footer]] name = \u0026#34;Privacy\u0026#34; url = \u0026#34;https://external-link\u0026#34; The name parameter specifies the text that is used in the menu link. You can also optionally provide a title which fills the HTML title attribute for the link.\nThe pageRef parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the url parameter can be used.\nMenu links will be sorted from lowest to highest weight, and then alphabetically by name.\nBoth menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.\nThumbnails # Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature* inside your article folder. And that\u0026rsquo;s it, Blowfish will then able to both use the image as a thumbnail within your website as well as for oEmbed cards across social platforms.\nHere is also a guide with more info and a sample if you want to see how you can do it.\nDetailed configuration # The steps above are the bare minimum configuration. If you now run hugo server you will be presented with a blank Blowfish website. Detailed configuration is covered in the Configuration section.\n","date":"15 August 2020","permalink":"/blowfish/docs/getting-started/","section":"Documentation","summary":"This section assumes you have already installed the Blowfish theme. The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.","title":"Getting Started"},{"content":"","date":"14 August 2020","permalink":"/blowfish/tags/config/","section":"Tags","summary":"","title":"config"},{"content":"Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.\nThe theme ships with a default configuration that gets you up and running with a basic blog or static website.\nConfiguration files bundled with the theme are provided in TOML format as this is the default Hugo syntax. Feel free to convert your config to YAML or JSON if you wish.\nThe default theme configuration is documented in each file so you can freely adjust the settings to meet your needs.\nAs outlined in the installation instructions, you should adjust your theme configuration by modifying the files in the config/_default/ folder of your Hugo project and delete the config.toml file in your project root. Site configuration # Standard Hugo configuration variables are respected throughout the theme, however there are some specific things that should be configured for the best experience.\nThe site configuration is managed through the config/_default/config.toml file. The table below outlines all the settings that the Blowfish takes advantage of.\nNote that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. outputs.home refers to [outputs] home).\nName Default Description theme \u0026quot;blowfish\u0026quot; When using Hugo Modules this config value should be removed. For all other installation types, this must be set to blowfish for the theme to function. baseURL Not set The URL to the root of the website. defaultContentLanguage \u0026quot;en\u0026quot; This value determines the default language of theme components and content. Refer to the language and i18n section below for supported language codes. enableRobotsTXT true When enabled, a robots.txt file will be created in the site root that allows search engines to crawl the entire site. If you prefer to provide your own pre-made robots.txt, set to false and place your file in the static directory. For complete control, you may provide a custom layout to generate this file. paginate 10 The number of articles listed on each page of the article listing. summaryLength 0 The number of words that are used to generate the article summary when one is not provided in the front matter. A value of 0 will use the first sentence. This value has no effect when summaries are hidden. outputs.home [\u0026quot;HTML\u0026quot;, \u0026quot;RSS\u0026quot;, \u0026quot;JSON\u0026quot;] The output formats that are generated for the site. Blowfish requires HTML, RSS and JSON for all theme components to work correctly. permalinks Not set Refer to the Hugo docs for permalink configuration. taxonomies Not set Refer to the Organising content section for taxonomy configuration. Thumbnails # Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature* inside your article folder. And that\u0026rsquo;s it, Blowfish will then able to both use the image as a thumbnail within your website as well as for oEmbed cards across social platforms.\nHere is also a guide with more info and a sample if you want to see how you can do it.\nLanguage and i18n # Blowfish is optimised for full multilingual websites and theme assets are translated into several languages out of the box. The language configuration allows you to generate multiple versions of your content to provide a customised experience to your visitors in their native language.\nThe theme currently supports the following languages by default:\nLanguage Code 🇬🇧 English en 🇧🇩 Bengali bn 🇨🇳 Simplified Chinese (China) zh-cn 🇹🇼 Traditional Chinese (Taiwan) zh-tw 🇫🇮 Finnish fi 🇫🇷 French fr 🇩🇪 German de 🇮🇱 Hebrew he 🇭🇺 Hungarian hu 🇮🇹 Italian it 🇯🇵 Japanese ja 🇧🇷 Portuguese (Brazil) pt-br 🇵🇹 Portuguese (Portugal) pt-pt 🇷🇴 Romanian ro 🇪🇸 Spanish (Spain) es 🇹🇷 Turkish tr The default translations can be overridden by creating a custom file in i18n/[code].yaml that contains the translation strings. You can also use this method to add new languages. If you\u0026rsquo;d like to share a new translation with the community, please open a pull request.\nConfiguration # In order to be as flexible as possible, a language configuration file needs to be created for each language on the website. By default Blowfish includes an English language configuration at config/_default/languages.en.toml.\nThe default file can be used as a template to create additional languages, or renamed if you wish to author your website in a language other than English. Simply name the file using the format languages.[language-code].toml.\nNote: Ensure the defaultContentLanguage parameter in the site configuration matches the language code in your language config filename. Name Default Description languageCode \u0026quot;en\u0026quot; The Hugo language code for this file. It can be a top-level language (ie. en) or a sub-variant (ie. en-au) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the isoCode parameter which is case-sensitive. languageName \u0026quot;English\u0026quot; The name of the language. displayName \u0026quot;EN\u0026quot; The name used when the language appears on the website. isoCode \u0026quot;en\u0026quot; The ISO language code for HTML metadata purposes. It can be a top-level language (ie. en) or a sub-variant (ie. en-AU). weight 1 The weight determines the order of languages when building multilingual sites. rtl false Whether or not this is a RTL language. Set to true to reflow content from right-to-left. Blowfish fully supports using RTL and LTR languages at the same time and will dynamically adjust to both. dateFormat \u0026quot;2 January 2006\u0026quot; How dates are formatted in this language. Refer to the Hugo docs for acceptable formats. title \u0026quot;Blowfish\u0026quot; The title of the website. This will be displayed in the site header and footer. description Not set The website description. This will be used in the site metadata. copyright Not set A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Blowfish will automatically generate a copyright string using the site title. author.name Not set The author\u0026rsquo;s name. This will be displayed in article footers, and on the homepage when the profile layout is used. author.image Not set Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site\u0026rsquo;s assets/ folder. author.headline Not set A Markdown string containing the author\u0026rsquo;s headline. It will be displayed on the profile homepage under the author\u0026rsquo;s name. author.bio Not set A Markdown string containing the author\u0026rsquo;s bio. It will be displayed in article footers. author.links Not set The links to display alongside the author\u0026rsquo;s details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in assets/icons/. Menus # Blowfish also supports language-specific menu configurations. Menu config files follow the same naming format as the languages file. Simply provide the language code in the file name to tell Hugo which language the file relates to.\nMenu config files are named with the format menus.[language-code].toml. Always ensure that the language code used in the menus configuration matches the languages configuration.\nThe Getting Started section explains more about the structure of this file. You can also refer to the Hugo menu docs for more configuration examples.\nTheme parameters # Blowfish provides a large number of configuration parameters that control how the theme functions. The table below outlines every available parameter in the config/_default/params.toml file.\nMany of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the Front Matter section for further details.\nName Default Description colorScheme \u0026quot;blowfish\u0026quot; The theme colour scheme to use. Valid values are blowfish (default), avocado, ocean, fire and slate. Refer to the Colour Schemes section for more details. defaultAppearance \u0026quot;light\u0026quot; The default theme appearance, either light or dark. autoSwitchAppearance true Whether the theme appearance automatically switches based upon the visitor\u0026rsquo;s operating system preference. Set to false to force the site to always use the defaultAppearance. enableSearch false Whether site search is enabled. Set to true to enable search functionality. Note that the search feature depends on the outputs.home setting in the site configuration being set correctly. enableCodeCopy false Whether copy-to-clipboard buttons are enabled for \u0026lt;code\u0026gt; blocks. The highlight.noClasses parameter must be set to false for code copy to function correctly. Read more about other configuration files below. logo Not set The relative path to the site logo file within the assets/ folder. The logo file should be provided at 2x resolution and supports any image dimensions. mainSections Not set The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used. robots Not set String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to Google\u0026rsquo;s docs for valid values. header.layout \u0026quot;basic\u0026quot; The layout of the page header and menu. Valid values are basic, hamburger or custom. When set to custom, you must provide your own layout by creating a /layouts/partials/header/custom.html file. footer.showCopyright true Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the copyright parameter in the languages configuration. footer.showThemeAttribution true Whether or not to show the \u0026ldquo;powered by\u0026rdquo; theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page). footer.showAppearanceSwitcher false Whether or not to show the appearance switcher in the site footer. The browser\u0026rsquo;s local storage is used to persist the visitor\u0026rsquo;s preference. footer.showScrollToTop true When set to true the scroll to top arrow is displayed. homepage.layout \u0026quot;page\u0026quot; The layout of the homepage. Valid values are page, profile or custom. When set to custom, you must provide your own layout by creating a /layouts/partials/home/custom.html file. Refer to the Homepage Layout section for more details. homepage.showRecent false Whether or not to display the recent articles list on the homepage. homepage.showRecentItems 5 How many articles to display if showRecent is true. If variable is set to 0 or if it isn\u0026rsquo;t defined the system will default to 5 articles. homepage.showMoreLink \u0026lsquo;false\u0026rsquo; Wether or not to display a show more link at the end of your posts that takes the user to a predefined place. homepage.showMoreLinkDest \u0026lsquo;/posts\u0026rsquo; The destination of the show more button. article.showDate true Whether or not article dates are displayed. article.showViews false Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. article.showLikes false Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. article.showDateUpdated false Whether or not the dates articles were updated are displayed. article.showAuthor true Whether or not the author box is displayed in the article footer. article.showBreadcrumbs false Whether or not breadcrumbs are displayed in the article header. article.showDraftLabel true Whether or not the draft indicator is shown next to articles when site is built with --buildDrafts. article.showEdit false Whether or not the link to edit the article content should be displayed. article.editURL Not set When article.showEdit is active, the URL for the edit link. article.editAppendPath true When article.showEdit is active, whether or not the path to the current article should be appended to the URL set at article.editURL. article.showHeadingAnchors true Whether or not heading anchor links are displayed alongside headings within articles. article.showPagination true Whether or not the next/previous article links are displayed in the article footer. article.invertPagination false Whether or not to flip the direction of the next/previous article links. article.showReadingTime true Whether or not article reading times are displayed. article.showTableOfContents false Whether or not the table of contents is displayed on articles. article.showTaxonomies false Whether or not the taxonomies related to this article are displayed. article.showWordCount false Whether or not article word counts are displayed. article.showComments false Whether or not the comments partial is included after the article footer. article.sharingLinks Not set Which sharing links to display at the end of each article. When not provided, or set to false no links will be displayed. list.showBreadcrumbs false Whether or not breadcrumbs are displayed in the header on list pages. list.showTableOfContents false Whether or not the table of contents is displayed on list pages. list.showSummary false Whether or not article summaries are displayed on list pages. If a summary is not provided in the front matter, one will be auto generated using the summaryLength parameter in the site configuration. list.groupByYear true Whether or not articles are grouped by year on list pages. sitemap.excludedKinds [\u0026quot;taxonomy\u0026quot;, \u0026quot;term\u0026quot;] Kinds of content that should be excluded from the generated /sitemap.xml file. Refer to the Hugo docs for acceptable values. taxonomy.showTermCount true Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing. firebase.apiKey Not set Firebase apiKey, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.authDomain Not set Firebase authDomain, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.projectId Not set Firebase projectId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.storageBucket Not set Firebase storageBucket, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.messagingSenderId Not set Firebase messagingSenderId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.appId Not set Firebase appId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.measurementId Not set Firebase measurementId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish fathomAnalytics.site Not set The site code generated by Fathom Analytics for the website. Refer to the Analytics docs for more details. fathomAnalytics.domain Not set If using a custom domain with Fathom Analytics, provide it here to serve script.js from the custom domain. verification.google Not set The site verification string provided by Google to be included in the site metadata. verification.bing Not set The site verification string provided by Bing to be included in the site metadata. verification.pinterest Not set The site verification string provided by Pinterest to be included in the site metadata. verification.yandex Not set The site verification string provided by Yandex to be included in the site metadata. Other configuration files # The theme also includes a markup.toml configuration file. This file contains some important parameters that ensure that Hugo is correctly configured to generate sites built with Blowfish.\nAlways ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to fucntion incorrectly and could result in unintended behaviour.\n","date":"14 August 2020","permalink":"/blowfish/docs/configuration/","section":"Documentation","summary":"Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.\nThe theme ships with a default configuration that gets you up and running with a basic blog or static website.","title":"Configuration"},{"content":"","date":"14 August 2020","permalink":"/blowfish/tags/icons/","section":"Tags","summary":"","title":"icons"},{"content":"Blowfish has built-in support for a number of FontAwesome 6 icons. These can be included in your website through either the icon partial or icon shortcode.\nAdditionally, custom icons are also fully supported. Simply provide your own SVG icon assets by placing them in the assets/icons/ directory in the root of your project. Any icons in the icons directory will then be available to use throughout the theme.\nThe full list of built-in icons and their corresponding names can referenced below.\nIcon name Preview amazon apple bars blogger bug check circle-info codepen comment dev discourse dribbble edit email facebook flickr foursquare github gitlab goodreads google hackernews hashnode instagram keybase kickstarter lastfm lightbulb link linkedin list mastodon medium microsoft moon music orcid patreon pencil pinterest reddit researchgate search skull-crossbones slack snapchat soundcloud stack-overflow steam sun tag telegram tiktok triangle-exclamation tumblr twitch twitter whatsapp xmark youtube ","date":"14 August 2020","permalink":"/blowfish/samples/icons/","section":"Content Samples","summary":"Blowfish has built-in support for a number of FontAwesome 6 icons. These can be included in your website through either the icon partial or icon shortcode.\nAdditionally, custom icons are also fully supported.","title":"Icons"},{"content":"","date":"14 August 2020","permalink":"/blowfish/tags/shortcodes/","section":"Tags","summary":"","title":"shortcodes"},{"content":"","date":"14 August 2020","permalink":"/blowfish/tags/users/","section":"Tags","summary":"","title":"users"},{"content":" Real websites that are built with Blowfish. Website Auth Details nunocoracao.com Nuno Personal site - Theme author Blowfish user? To add your site to this list, submit a pull request.\n","date":"14 August 2020","permalink":"/blowfish/users/","section":"Welcome to Blowfish! 🎉","summary":"Real websites that are built with Blowfish. Website Auth Details nunocoracao.com Nuno Personal site - Theme author Blowfish user? To add your site to this list, submit a pull request.","title":"Users"},{"content":"","date":"13 August 2020","permalink":"/blowfish/tags/homepage/","section":"Tags","summary":"","title":"homepage"},{"content":"Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.\nThe layout of the homepage is controlled by the homepage.layout setting in the params.toml configuration file. Additionally, all layouts have the option to include a listing of recent articles.\nPage layout # The default layout is the page layout. It\u0026rsquo;s simply a normal content page that displays your Markdown content. It\u0026rsquo;s great for static websites and provides a lot of flexibility.\nTo enable the page layout, set homepage.layout = \u0026quot;page\u0026quot; in the params.toml configuration file.\nProfile layout # The profile layout is great for personal websites and blogs. It puts the author\u0026rsquo;s details front and centre by providing an image and links to social profiles.\nThe author information is provided in the languages configuration file. Refer to the Getting Started and Language Configuration sections for parameter details.\nAdditionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.\nTo enable the profile layout, set homepage.layout = \u0026quot;profile\u0026quot; in the params.toml configuration file.\nCustom layout # If the built-in homepage layouts aren\u0026rsquo;t sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.\nTo enable the custom layout, set homepage.layout = \u0026quot;custom\u0026quot; in the params.toml configuration file.\nWith the configuration value set, create a new custom.html file and place it in layouts/partials/home/custom.html. Now whatever is in the custom.html file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.\nTo include recent articles on the custom layout, use the recent-articles.html partial.\nAs an example, the homepage on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the GitHub repo to see how it works.\nRecent articles # All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the homepage.showRecent setting to true in the params.toml configuration file.\nThe articles listed in this section are derived from the mainSections setting which allows for whatever content types you are using on your website. For instance, if you had content sections for posts and projects you could set this setting to [\u0026quot;posts\u0026quot;, \u0026quot;projects\u0026quot;] and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: [\u0026quot;blog\u0026quot;].\nThumbnails # Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature* inside your article folder. And that\u0026rsquo;s it, Blowfish will then able to both use the image as a thumbnail within your website as well as for oEmbed cards across social platforms.\nHere is also a guide with more info and a sample if you want to see how you can do it.\n","date":"13 August 2020","permalink":"/blowfish/docs/homepage-layout/","section":"Documentation","summary":"Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.","title":"Homepage Layout"},{"content":"","date":"13 August 2020","permalink":"/blowfish/tags/layouts/","section":"Tags","summary":"","title":"layouts"},{"content":"","date":"12 August 2020","permalink":"/blowfish/tags/front-matter/","section":"Tags","summary":"","title":"front matter"},{"content":"In addition to the default Hugo front matter parameters, Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.\nFront matter parameter default values are inherited from the theme\u0026rsquo;s base configuration, so you only need to specify these parameters in your front matter when you want to override the default.\nName Default Description title Not set The name of the article. description Not set The text description for the article. It is used in the HTML metadata. externalUrl Not set If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website. editURL article.editURL When showEdit is active, the URL for the edit link. editAppendPath article.editAppendPath When showEdit is active, whether or not the path to the current article should be appended to the URL set at editURL. groupByYear list.groupByYear Whether or not articles are grouped by year on list pages. menu Not set When a value is provided, a link to this article will appear in the named menus. Valid values are main or footer. robots Not set String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to Google\u0026rsquo;s docs for valid values. sharingLinks article.sharingLinks Which sharing links to display at the end of this article. When not provided, or set to false no links will be displayed. showAuthor article.showAuthor Whether or not the author box is displayed in the article footer. showBreadcrumbs article.showBreadcrumbs or list.showBreadcrumbs Whether the breadcrumbs are displayed in the article or list header. showDate article.showDate Whether or not the article date is displayed. The date is set using the date parameter. showDateUpdated article.showDateUpdated Whether or not the date the article was updated is displayed. The date is set using the lastmod parameter. showEdit article.showEdit Whether or not the link to edit the article content should be displayed. showHeadingAnchors article.showHeadingAnchors Whether or not heading anchor links are displayed alongside headings within this article. showPagination article.showPagination Whether or not the next/previous article links are displayed in the article footer. invertPagination article.invertPagination Whether or not to flip the direction of the next/previous article links. showReadingTime article.showReadingTime Whether or not the article reading time is displayed. showTaxonomies article.showTaxonomies Whether or not the taxonomies that relate to this article are displayed. showTableOfContents article.showTableOfContents Whether or not the table of contents is displayed on this article. showWordCount article.showWordCount Whether or not the article word count is displayed. showComments article.showComments Whether or not the comments partial is included after the article footer. showSummary list.showSummary Whether or not the article summary should be displayed on list pages. showViews article.showViews Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check this page for a guide on how to integrate Firebase into Blowfish showLikes article.showLikes Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check this page for a guide on how to integrate Firebase into Blowfish summary Auto generated using summaryLength (see site configuration) When showSummary is enabled, this is the Markdown string to be used as the summary for this article. xml true unless excluded by sitemap.excludedKinds Whether or not this article is included in the generated /sitemap.xml file. ","date":"12 August 2020","permalink":"/blowfish/docs/front-matter/","section":"Documentation","summary":"In addition to the default Hugo front matter parameters, Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.","title":"Front Matter"},{"content":"Thumbnails # Blowfish was enhanced in order to make it easy to add visual support to your posts. To do so, you just need to place an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature* inside your article main directory as shown in the example below.\ncontent └── awesome_article ├── index.md └── featured.png This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for oEmbed cards across social platforms.\nFolder Strucutre # If you are using single .md files for your articles and have a file structure similar to this:\ncontent └── awesome_article.md You need to change it from a single markdown file into a folder. Create a directory with the same name of the article, inside create a index.md file. You\u0026rsquo;ll get a structure similar to what\u0026rsquo;s below.\ncontent └── awesome_article └── featured.png The you just need to add an image like explain earlier. If you want to see a sample of this you can consult this sample.\n","date":"12 August 2020","permalink":"/blowfish/docs/thumbnails/","section":"Documentation","summary":"Thumbnails # Blowfish was enhanced in order to make it easy to add visual support to your posts. To do so, you just need to place an image file (almost all formats are supported bue we recommend .","title":"Thumbnails"},{"content":"","date":"11 August 2020","permalink":"/blowfish/tags/icon/","section":"Tags","summary":"","title":"icon"},{"content":"","date":"11 August 2020","permalink":"/blowfish/tags/lead/","section":"Tags","summary":"","title":"lead"},{"content":"","date":"11 August 2020","permalink":"/blowfish/tags/mermaid/","section":"Tags","summary":"","title":"mermaid"},{"content":"In addition to all the default Hugo shortcodes, Blowfish adds a few extras for additional functionality.\nAlert # alert outputs its contents as a stylised message box within your article. It\u0026rsquo;s useful for drawing attention to important information that you don\u0026rsquo;t want the reader to miss.\nThe input is written in Markdown so you can format it however you please.\nBy default, the alert is presented with an exclaimation triangle icon. To change the icon, include the icon name in the shortcode. Check out the icon shortcode for more details on using icons.\nExample:\n{{\u0026lt; alert \u0026gt;}} **Warning!** This action is destructive! {{\u0026lt; /alert \u0026gt;}} {{\u0026lt; alert \u0026#34;twitter\u0026#34; \u0026gt;}} Don\u0026#39;t forget to [follow me](https://twitter.com/nunocoracao) on Twitter. {{\u0026lt; /alert \u0026gt;}} Warning! This action is destructive! Don\u0026rsquo;t forget to follow me on Twitter. Badge # badge outputs a styled badge component which is useful for displaying metadata.\nExample:\n{{\u0026lt; badge \u0026gt;}} New article! {{\u0026lt; /badge \u0026gt;}} New article! Button # button outputs a styled button component which can be used to highlight a primary action. It has two optional variables href and target which can be used to specify the URL and target of the link.\nExample:\n{{\u0026lt; button href=\u0026#34;#button\u0026#34; target=\u0026#34;_self\u0026#34; \u0026gt;}} Call to action {{\u0026lt; /button \u0026gt;}} Call to action Chart # chart uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of different chart styles and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest.\nRefer to the official Chart.js docs for details on syntax and supported chart types.\nExample:\n{{\u0026lt; chart \u0026gt;}} type: \u0026#39;bar\u0026#39;, data: { labels: [\u0026#39;Tomato\u0026#39;, \u0026#39;Blueberry\u0026#39;, \u0026#39;Banana\u0026#39;, \u0026#39;Lime\u0026#39;, \u0026#39;Orange\u0026#39;], datasets: [{ label: \u0026#39;# of votes\u0026#39;, data: [12, 19, 3, 5, 2, 3], }] } {{\u0026lt; /chart \u0026gt;}} You can see some additional Chart.js examples on the charts samples page.\nFigure # Blowfish includes a figure shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.\nWhen a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.\nThe figure shortcode accepts six parameters:\nParameter Description src Required. The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a page resource bundled with the page; then an asset in the assets/ directory; then finally, a static image in the static/ directory. alt Alternative text description for the image. caption Markdown for the image caption, which will be displayed below the image. class Additional CSS classes to apply to the image. href URL that the image should be linked to. default Special parameter to revert to default Hugo figure behaviour. Simply provide default=true and then use normal Hugo shortcode syntax. Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:\n Example:\n{{\u0026lt; figure src=\u0026#34;abstract.jpg\u0026#34; alt=\u0026#34;Abstract purple artwork\u0026#34; caption=\u0026#34;Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)\u0026#34; \u0026gt;}} \u0026lt;!-- OR --\u0026gt;  on [Unsplash](https://unsplash.com/)\u0026#34;) Photo by Jr Korpa on Unsplash Icon # icon outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.\nExample:\n{{\u0026lt; icon \u0026#34;github\u0026#34; \u0026gt;}} Output: Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the icon samples page for a full list of supported icons.\nCustom icons can be added by providing your own icon assets in the assets/icons/ directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the .svg extension.\nIcons can also be used in partials by calling the icon partial.\nSwatches # swatches outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the HEX codes of each color and creates the visual elements for each.\nExample\n{{\u0026lt; swatches \u0026#34;#64748b\u0026#34; \u0026#34;#3b82f6\u0026#34; \u0026#34;#06b6d4\u0026#34; \u0026gt;}} Output Katex # The katex shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of supported TeX functions for the available syntax.\nTo include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.\nInline notation can be generated by wrapping the expression in \\\\( and \\\\) delimiters. Alternatively, block notation can be generated using $$ delimiters.\nExample:\n{{\u0026lt; katex \u0026gt;}} \\\\(f(a,b,c) = (a^2+b^2+c^2)^3\\\\) \\(f(a,b,c) = (a^2+b^2+c^2)^3\\)\nCheck out the mathematical notation samples page for more examples.\nLead # lead is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the lead shortcode.\nExample:\n{{\u0026lt; lead \u0026gt;}} When life gives you lemons, make lemonade. {{\u0026lt; /lead \u0026gt;}} When life gives you lemons, make lemonade. Mermaid # mermaid allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.\nSimply write your Mermaid syntax within the mermaid shortcode and let the plugin do the rest.\nRefer to the official Mermaid docs for details on syntax and supported diagram types.\nExample:\n{{\u0026lt; mermaid \u0026gt;}} graph LR; A[Lemons]--\u0026gt;B[Lemonade]; B--\u0026gt;C[Profit] {{\u0026lt; /mermaid \u0026gt;}} graph LR; A[Lemons]--\u003eB[Lemonade]; B--\u003eC[Profit] You can see some additional Mermaid examples on the diagrams and flowcharts samples page.\n","date":"11 August 2020","permalink":"/blowfish/docs/shortcodes/","section":"Documentation","summary":"In addition to all the default Hugo shortcodes, Blowfish adds a few extras for additional functionality.\nAlert # alert outputs its contents as a stylised message box within your article. It\u0026rsquo;s useful for drawing attention to important information that you don\u0026rsquo;t want the reader to miss.","title":"Shortcodes"},{"content":"","date":"10 August 2020","permalink":"/blowfish/tags/analytics/","section":"Tags","summary":"","title":"analytics"},{"content":"","date":"10 August 2020","permalink":"/blowfish/tags/comments/","section":"Tags","summary":"","title":"comments"},{"content":"","date":"10 August 2020","permalink":"/blowfish/tags/favicons/","section":"Tags","summary":"","title":"favicons"},{"content":"","date":"10 August 2020","permalink":"/blowfish/tags/partials/","section":"Tags","summary":"","title":"partials"},{"content":"Analytics # Blowfish provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.\nFathom Analytics # To enable Fathom Analytics support, simply provide your Fathom site code in the config/_default/params.toml file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the domain configuration value. If you don\u0026rsquo;t provide a domain value, the script will load directly from Fathom DNS.\n# config/_default/params.toml [fathomAnalytics] site = \u0026#34;ABC12345\u0026#34; domain = \u0026#34;llama.yoursite.com\u0026#34; Google Analytics # Google Analytics support is provided through the internal Hugo partial. Simply provide the googleAnalytics key in the config/_default/config.toml file and the script will be added automatically.\nBoth version 3 (analytics.js) and version 4 (gtag.js) are supported, based on the configuration value provided:\n# config/_default/config.toml # version 3 googleAnalytics = \u0026#34;UA-PROPERTY_ID\u0026#34; # version 4 googleAnalytics = \u0026#34;G-MEASUREMENT_ID\u0026#34; Custom analytics providers # If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file layouts/partials/analytics.html in your project and it will automatically include it in the \u0026lt;head\u0026gt; of the website.\nComments # To add comments to your articles, Blowfish includes support for a comments partial that is included at the base of each article page. Simply provide a layouts/partials/comments.html which contains the code required to display your chosen comments.\nYou can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the Hugo docs for further information.\nOnce the partial has been provided, finer control over where comments are displayed is then managed using the showComments parameter. This value can be set at the theme level in the params.toml config file, or on a per-article basis by including it in the front matter. The parameter defaults to false so it must be set to true in one of these locations in order for comments to be displayed.\nFavicons # Blowfish provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like favicon.io.\nIcon assets should be placed directly in the static/ folder of your website and named as per the listing below. If you use favicon.io, these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.\nstatic/ ├─ android-chrome-192x192.png ├─ android-chrome-512x512.png ├─ apple-touch-icon.png ├─ favicon-16x16.png ├─ favicon-32x32.png ├─ favicon.ico └─ site.webmanifest Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a layouts/partials/favicons.html file in your project and this will be injected into the site \u0026lt;head\u0026gt; in place of the default assets.\nIcon # Similar to the icon shortcode, you can include icons in your own templates and partials by using Blowfish\u0026rsquo;s icon.html partial. The partial takes one parameter which is the name of the icon to be included.\nExample:\n{{ partial \u0026#34;icon.html\u0026#34; \u0026#34;github\u0026#34; }} Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the icon samples page for a full list of supported icons.\nCustom icons can be added by providing your own icon assets in the assets/icons/ directory of your project. The icon can then be referenced in the partial by using the SVG filename without the .svg extension.\nIcons can also be used in article content by calling the icon shortcode.\nExtensions # Blowfish also provides for a number of extension partials that allow for expanding upon base functionality.\nArticle link # If you wish to insert additional code after article links, create a layouts/partials/extend-article-link.html file. This is especially powerful when combined with the badge shortcode which can be used to highlight metadata for certain articles.\nHead and Footer # The theme allows for inserting additional code directly into the \u0026lt;head\u0026gt; and \u0026lt;footer\u0026gt; sections of the template. These can be useful for providing scripts or other logic that isn\u0026rsquo;t part of the theme.\nSimply create either layouts/partials/extend-head.html or layouts/partials/extend-footer.html and these will automatically be included in your website build. Both partials are injected as the last items in \u0026lt;head\u0026gt; and \u0026lt;footer\u0026gt; so they can be used to override theme defaults.\n","date":"10 August 2020","permalink":"/blowfish/docs/partials/","section":"Documentation","summary":"Analytics # Blowfish provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.\nFathom Analytics # To enable Fathom Analytics support, simply provide your Fathom site code in the config/_default/params.","title":"Partials"},{"content":"","date":"10 August 2020","permalink":"/blowfish/tags/privacy/","section":"Tags","summary":"","title":"privacy"},{"content":"","date":"9 August 2020","permalink":"/blowfish/tags/content/","section":"Tags","summary":"","title":"content"},{"content":"If you\u0026rsquo;ve been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.\nTip: If you\u0026rsquo;re new to Hugo, be sure to check out the official docs to learn more about the concept of page bundles and resources. The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.\nBranch pages # Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is _index.md.\nBlowfish will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the title parameter in a branch page will allow overriding the page title.\nHomepage # Layout: layouts/index.html Content: content/_index.md The homepage in Blowfish is special in that it\u0026rsquo;s overarching design is controlled by the homepage layout config parameter. You can learn more about this in the Homepage Layout section.\nIf you want to add custom content to this page, you simply need to create a content/_index.md file. Anything in this file will then be included in your homepage.\nExample:\n--- title: \u0026#34;Welcome to Blowfish!\u0026#34; description: \u0026#34;This is a demo of adding content to the homepage.\u0026#34; --- Welcome to my website! I\u0026#39;m really happy you stopped by. This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links.\nList pages # Layout: layouts/_default/list.html Content: content/../_index.md List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.\nCreating a list page is as simple as making a sub-directory in the content folder. For example, to create a \u0026ldquo;Projects\u0026rdquo; section, you would create content/projects/. Then create a Markdown file for each of your projects.\nA list page will be generated by default, however to customise the content, you should also create an _index.md page in this new directory.\n. └── content └── projects ├── _index.md # /projects ├── first-project.md # /projects/first-project └── another-project ├── index.md # /projects/another-project └── project.jpg Hugo will generate URLs for the pages in your projects folder accordingly.\nJust like the homepage, content in the _index.md file will be output into the generated list index. Blowfish will then list any pages in this section below the content.\nExample:\n--- title: \u0026#34;Projects\u0026#34; description: \u0026#34;Learn about some of my projects.\u0026#34; cascade: showReadingTime: false --- This section contains all my current projects. In this example, the special cascade parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page.\nThe samples section of this site is an example of a list page.\nTaxonomy pages # List layout: layouts/_default/taxonomy.html Term layout: layouts/_default/term.html Content: content/../_index.md Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.\nThe terminology can get a little confusing so let\u0026rsquo;s explore an example using a taxonomy named animals.\nFirstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at config/_default/taxonomies.toml and defining the taxonomy name.\n# config/_default/taxonomies.toml animal = \u0026#34;animals\u0026#34; Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular animal equals the plural animals to create our example taxonomy.\nNow that our animals taxonomy exists, it needs to be added to individual content items. It\u0026rsquo;s as simple as inserting it into the front matter:\n--- title: \u0026#34;Into the Lion\u0026#39;s Den\u0026#34; description: \u0026#34;This week we\u0026#39;re learning about lions.\u0026#34; animals: [\u0026#34;lion\u0026#34;, \u0026#34;cat\u0026#34;] --- This has now created two terms within our animals taxonomy - lion and cat.\nAlthough it\u0026rsquo;s not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at /animals/ and the term pages can be found at /animals/lion/ and /animals/cat/.\nThe list page will list all the terms contained within the taxonomy. In this example, navigating to /animals/ will show a page that has links for \u0026ldquo;lion\u0026rdquo; and \u0026ldquo;cat\u0026rdquo; which take visitors to the individual term pages.\nThe term pages will list all the pages contained within that term. These term lists are essentially the same as normal list pages and behave in much the same way.\nIn order to add custom content to taxonomy pages, simply create _index.md files in the content folder using the taxonomy name as the sub-directory name.\n. └── content └── animals ├── _index.md # /animals └── lion └── _index.md # /animals/lion Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named lion but override the title to be \u0026ldquo;Lion\u0026rdquo;.\nTo see how this looks in reality, check out the tags taxonomy listing on this site.\nLeaf pages # Layout: layouts/_default/single.html Content (standalone): content/../page-name.md Content (bundled): content/../page-name/index.md Leaf pages in Hugo are basically standard content pages. They are defined as pages that don\u0026rsquo;t contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.\nThe most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named index.md without an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.\n. └── content └── blog ├── first-post.md # /blog/first-post ├── second-post.md # /blog/second-post └── third-post ├── index.md # /blog/third-post └── image.jpg When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an index.md file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.\nExample:\n--- title: \u0026#34;My First Blog Post\u0026#34; date: 2022-01-25 description: \u0026#34;Welcome to my blog!\u0026#34; summary: \u0026#34;Learn more about me and why I am starting this blog.\u0026#34; tags: [\u0026#34;welcome\u0026#34;, \u0026#34;new\u0026#34;, \u0026#34;about\u0026#34;, \u0026#34;first\u0026#34;] --- _This_ is the content of my blog post. Leaf pages have a wide variety of front matter parameters that can be used to customise how they are displayed.\nExternal links # Blowfish has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you\u0026rsquo;d like to link to, without replicating the content in your Hugo site.\nIn order to create an external link article, some special front matter needs to be set:\n--- title: \u0026#34;My Medium post\u0026#34; date: 2022-01-25 externalUrl: \u0026#34;https://medium.com/\u0026#34; summary: \u0026#34;I wrote a post on Medium.\u0026#34; showReadingTime: false _build: render: \u0026#34;false\u0026#34; list: \u0026#34;local\u0026#34; --- Along with the normal front matter parameters like title and summary, the externalUrl parameter is used to tell Blowfish that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.\nAdditionally, we use a special Hugo front matter parameter _build to prevent a normal page for this content being generated - there\u0026rsquo;s no point generating a page since we\u0026rsquo;re linking to an external URL!\nThe theme includes an archetype to make generating these external link articles simple. Just specify -k external when making new content.\nhugo new -k external posts/my-post.md Simple pages # Layout: layouts/_default/simple.html Front Matter: layout: \u0026quot;simple\u0026quot; Blowfish also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.\nThe only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page front matter variables.\nTo enable the simple layout on a particular page, add the layout front matter variable with a value of \u0026quot;simple\u0026quot;:\n--- title: \u0026#34;My landing page\u0026#34; date: 2022-03-08 layout: \u0026#34;simple\u0026#34; --- This page content is now full-width. Custom layouts # One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.\nLayouts follow all the normal Hugo templating rules and more information is available in the official Hugo docs.\nOverriding default layouts # Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.\nFor example, creating a layouts/_default/single.html file will allow the layout of leaf pages to be completely customised.\nCustom section layouts # It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.\nLet\u0026rsquo;s step through an example that creates a custom \u0026ldquo;Projects\u0026rdquo; page that lists projects using a special layout.\nIn order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a list.html file.\n. └── content │ └── projects │ ├── _index.md │ ├── first-project.md │ └── second-project.md └── layouts └── projects └── list.html This list.html file will now override the default list template, but only for the projects section. Before we look at this file, lets first look at the individual project files.\n--- title: \u0026#34;Blowfish\u0026#34; date: 2021-08-11 icon: \u0026#34;github\u0026#34; description: \u0026#34;A theme for Hugo built with Tailwind CSS.\u0026#34; topics: [\u0026#34;Hugo\u0026#34;, \u0026#34;Web\u0026#34;, \u0026#34;Tailwind\u0026#34;] externalUrl: \u0026#34;https://github.com/nunocoracao/blowfish/\u0026#34; --- In this example we are assigning some metadata for each project that we can then use in our list template. There\u0026rsquo;s no page content, but there\u0026rsquo;s nothing stopping you from including it. It\u0026rsquo;s your own custom template after all!\nWith the projects defined, now we can create a list template that outputs the details of each project.\n{{ define \u0026#34;main\u0026#34; }} \u0026lt;section class=\u0026#34;mt-8\u0026#34;\u0026gt; {{ range .Pages }} \u0026lt;article class=\u0026#34;pb-6\u0026#34;\u0026gt; \u0026lt;a class=\u0026#34;flex\u0026#34; href=\u0026#34;{{ .Params.externalUrl }}\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;mr-3 text-3xl text-neutral-300\u0026#34;\u0026gt; \u0026lt;span class=\u0026#34;relative inline-block align-text-bottom\u0026#34;\u0026gt; {{ partial \u0026#34;icon.html\u0026#34; .Params.icon }} \u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div\u0026gt; \u0026lt;h3 class=\u0026#34;flex text-xl font-semibold\u0026#34;\u0026gt; {{ .Title }} \u0026lt;/h3\u0026gt; \u0026lt;p class=\u0026#34;text-sm text-neutral-400\u0026#34;\u0026gt; {{ .Description }} \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/a\u0026gt; \u0026lt;/article\u0026gt; {{ end }} \u0026lt;/section\u0026gt; {{ end }} Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.\nKeep in mind that you\u0026rsquo;ll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the Advanced Customisation section.\nWhen making custom templates like this one, it\u0026rsquo;s always easiest to take a look at how the default Blowfish template works and then use that as a guide. Remember, the Hugo docs are a great resource to learn more about creating templates too.\n","date":"9 August 2020","permalink":"/blowfish/docs/content-examples/","section":"Documentation","summary":"If you\u0026rsquo;ve been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.","title":"Content Examples"},{"content":"","date":"9 August 2020","permalink":"/blowfish/tags/example/","section":"Tags","summary":"","title":"example"},{"content":"This is the advanced tag. Just like other listing pages in Blowfish, you can add custom content to individual taxonomy terms and it will be displayed at the top of the term listing. 🚀\nYou can also use these content pages to define Hugo metadata like titles and descriptions that will be used for SEO and other purposes.\n","date":"8 August 2020","permalink":"/blowfish/tags/advanced/","section":"Tags","summary":"This is the advanced tag. Just like other listing pages in Blowfish, you can add custom content to individual taxonomy terms and it will be displayed at the top of the term listing.","title":"advanced"},{"content":"There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.\nIf you need further advice, post your questions on GitHub Discussions.\nHugo project structure # Before leaping into it, first a quick note about Hugo project structure and best practices for managing your content and theme customisations.\nIn summary: Never directly edit the theme files. Only make customisations in your Hugo project\u0026rsquo;s sub-directories, not in the themes directory itself. Blowfish is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overriden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.\nIn order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your themes/ directory, you should always leave these files intact.\nThe correct way to adjust any theme behaviour is by overriding files using Hugo\u0026rsquo;s powerful file lookup order. In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.\nFor example, if you wanted to override the main article template in Blowfish, you can simply create your own layouts/_default/single.html file and place it in the root of your project. This file will then override the single.html from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.\nAs long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.\nColour schemes # Blowfish ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the colorScheme theme parameter. Refer to the Getting Started section to learn more about the built-in schemes.\nIn addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a \u0026lt;scheme-name\u0026gt;.css file in the assets/css/schemes/ folder. Once the file is created, simply refer to it by name in the theme configuration.\nBlowfish defines a three-colour palette that is used throughout the theme. The three colours are defined as neutral, primary and secondary variants, each containing ten shades of colour.\nDue to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to conform to a particular format by providing the red, green and blue colour values.\n:root { --color-primary-500: 139, 92, 246; } This example defines a CSS variable for the primary-500 colour with a red value of 139, green value of 92 and blue value of 246.\nUse one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official Tailwind colour palette reference.\nOverriding the stylesheet # Sometimes you need to add a custom style to style your own HTML elements. Blowfish provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a custom.css file in your project\u0026rsquo;s assets/css/ folder.\nThe custom.css file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.\nAdjusting the font size # Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to 12pt, but it can be changed to whatever value you prefer.\nCreate a custom.css file using the instructions above and add the following CSS declaration:\n/* Increase the default font size */ html { font-size: 13pt; } Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than 12pt. Similarly, to decrease the font sizes, make the value less than 12pt.\nBuilding the theme CSS from source # If you\u0026rsquo;d like to make a major change, you can take advantage of Tailwind CSS\u0026rsquo;s JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.\nNote: Building the theme manually is intended for advanced users. Let\u0026rsquo;s step through how building the Tailwind CSS works.\nTailwind configuration # In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the tailwind.config.js file which is included in the root of the theme directory:\n// themes/blowfish/tailwind.config.js module.exports = { content: [ \u0026#34;./layouts/**/*.html\u0026#34;, \u0026#34;./content/**/*.{html,md}\u0026#34;, \u0026#34;./themes/blowfish/layouts/**/*.html\u0026#34;, \u0026#34;./themes/blowfish/content/**/*.{html,md}\u0026#34;, ], // and more... }; This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, you have to include Blowfish in your project as a subdirectory at themes/blowfish/. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The Installation docs explain how to install the theme using either of these methods.\nProject structure # In order to take advantage of the default configuration, your project should look something like this\u0026hellip;\n. ├── assets │ └── css │ └── compiled │ └── main.css # this is the file we will generate ├── config # site config │ └── _default ├── content # site content │ ├── _index.md │ ├── projects │ │ └── _index.md │ └── blog │ └── _index.md ├── layouts # custom layouts for your site │ ├── partials │ │ └── extend-article-link.html │ ├── projects │ │ └── list.html │ └── shortcodes │ └── disclaimer.html └── themes └── blowfish # git submodule or manual theme install This example structure adds a new projects content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that\u0026rsquo;s required is to recompile the main.css file.\nInstall dependencies # In order for this to work you\u0026rsquo;ll need to change into the themes/blowfish/ directory and install the project dependencies. You\u0026rsquo;ll need npm on your local machine for this step.\ncd themes/blowfish npm install Run the Tailwind compiler # With the dependencies installed all that\u0026rsquo;s left is to use Tailwind CLI to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:\ncd ../.. ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit It\u0026rsquo;s a bit of an ugly command due to the paths involved but essentially you\u0026rsquo;re calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme\u0026rsquo;s main.css file and then where you want the compiled CSS file to be placed (it\u0026rsquo;s going into the assets/css/compiled/ folder of your Hugo project).\nThe config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.\nEach time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add -w to the end of the command to run the JIT compiler in watch mode.\nMake a build script # To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a package.json to the root of your project which contains the necessary scripts\u0026hellip;\n// package.json { \u0026#34;name\u0026#34;: \u0026#34;my-website\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;scripts\u0026#34;: { \u0026#34;server\u0026#34;: \u0026#34;hugo server -b http://localhost -p 8000\u0026#34;, \u0026#34;dev\u0026#34;: \u0026#34;NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w\u0026#34;, \u0026#34;build\u0026#34;: \u0026#34;NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit\u0026#34; }, // and more... } Now when you want to work on designing your site, you can invoke npm run dev and the compiler will run in watch mode. When you\u0026rsquo;re ready to deploy, run npm run build and you\u0026rsquo;ll get a clean Tailwind CSS build.\n🙋♀️ If you need help, feel free to ask a question on GitHub Discussions.\n","date":"8 August 2020","permalink":"/blowfish/docs/advanced-customisation/","section":"Documentation","summary":"There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.","title":"Advanced Customisation"},{"content":"","date":"8 August 2020","permalink":"/blowfish/tags/css/","section":"Tags","summary":"","title":"css"},{"content":"","date":"7 August 2020","permalink":"/blowfish/tags/deployment/","section":"Tags","summary":"","title":"deployment"},{"content":"","date":"7 August 2020","permalink":"/blowfish/tags/github/","section":"Tags","summary":"","title":"github"},{"content":"","date":"7 August 2020","permalink":"/blowfish/tags/hosting/","section":"Tags","summary":"","title":"hosting"},{"content":"There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.\nBlowfish is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There\u0026rsquo;s usually no special configuration required for this to work as long as the baseURL parameter has been configured in the config.toml file.\nThe official Hugo Hosting and Deployment docs are the best place to learn how to deploy your site. The sections below contain some specific theme configuration details that can help you deploy smoothly with certain providers.\nChoose your provider:\nGitHub Pages Netlify Render Cloudflare Pages Shared hosting, VPS or private web server GitHub Pages # GitHub allows hosting on GitHub Pages using Actions. To enable this functionality, enable Pages on your repo and create a new Actions workflow to build and deploy your site.\nThe file needs to be in YAML format, placed within the .github/workflows/ directory of your GitHub repository and named with a .yml extension.\nImportant: Ensure you set the correct branch name under branches and in the deploy step if parameter to the source branch used in your project. # .github/workflows/gh-pages.yml name: GitHub Pages on: push: branches: - main jobs: build-deploy: runs-on: ubuntu-20.04 concurrency: group: ${{ github.workflow }}-${{ github.ref }} steps: - name: Checkout uses: actions/checkout@v3 with: submodules: true fetch-depth: 0 - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: \u0026#34;latest\u0026#34; - name: Build run: hugo --minify - name: Deploy uses: peaceiris/actions-gh-pages@v3 if: ${{ github.ref == \u0026#39;refs/heads/main\u0026#39; }} with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_branch: gh-pages publish_dir: ./public Push the config file to GitHub and the action should automatically run. It may fail the first time and you\u0026rsquo;ll need to visit the Settings \u0026gt; Pages section of your GitHub repo to check the source is correct. It should be set to use the gh-pages branch.\nOnce the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.\nNetlify # To deploy to Netlify, create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you\u0026rsquo;ll be using.\nThen in the root of your site repository, create a netlify.toml file:\n# netlify.toml [build] command = \u0026#34;hugo mod get -u \u0026amp;\u0026amp; hugo --gc --minify -b $URL\u0026#34; publish = \u0026#34;public\u0026#34; [build.environment] NODE_ENV = \u0026#34;production\u0026#34; GO_VERSION = \u0026#34;1.16\u0026#34; TZ = \u0026#34;UTC\u0026#34; # Set to preferred timezone [context.production.environment] HUGO_VERSION = \u0026#34;0.104.1\u0026#34; HUGO_ENV = \u0026#34;production\u0026#34; [context.deploy-preview.environment] HUGO_VERSION = \u0026#34;0.104.1\u0026#34; This configuration assumes you are deploying Blowfish as a Hugo module. If you have installed the theme using another method, change the build command to simply hugo --gc --minify -b $URL.\nWhen you push the config file to your repo, Netlify should automatically deploy your site. You can check the deploy logs in the Netlify UI to check for any errors.\nRender # Deploying to Render is very straightforward and all configuration is via the Render UI.\nCreate a new Static Site and link it to your project\u0026rsquo;s code repository. Then simply configure the build command to be hugo --gc --minify and publish directory to be public.\nThe site will automatically build and deploy whenever you push a change to your repo.\nCloudflare Pages # Cloudflare offers the Pages service that can host Hugo blogs. It builds the site from a git repository and then hosts it on Cloudflare\u0026rsquo;s CDN. Follow their Hugo deployment guide to get started.\nThe Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.\nThis problem can be fixed by disabling it:\nGo to the Cloudflare dashboard Click on your domain name in the list Click Optimization in the Speed section Scroll down to Rocket Loader™ and disable it Hugo sites built with Blowfish still load very quickly, even with this feature disabled.\nShared hosting, VPS or private web server # Using traditional web hosting, or deploying to your own web server, is as simple as building your Hugo site and transferring the files to your host.\nMake sure that the baseURL parameter in config.toml is set to the full URL to the root of your website (including any sub domains or sub-folders).\nThen build your site using hugo and copy the contents of the output directory to the root of your web server and you will be ready to go. By default, the output directory is named public.\nIf you need a hosting provider, check out Vultr or DigitalOcean. Signing up using these affiliate links will give you up to $100 in free credit so you can try the service.\n","date":"7 August 2020","permalink":"/blowfish/docs/hosting-deployment/","section":"Documentation","summary":"There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.\nBlowfish is built using relative URLs throughout the theme.","title":"Hosting \u0026 Deployment"},{"content":"","date":"7 August 2020","permalink":"/blowfish/tags/netlify/","section":"Tags","summary":"","title":"netlify"},{"content":"","date":"7 August 2020","permalink":"/blowfish/tags/render/","section":"Tags","summary":"","title":"render"},{"content":"","date":"3 August 2020","permalink":"/blowfish/tags/firebase/","section":"Tags","summary":"","title":"firebase"},{"content":"In order to be able to support dynamic data across your website we\u0026rsquo;ve added the support to integrate Firebase. This will allow you to use the views feature across lists and posts.\nGo to Firebase website and create an account for free Create a new project Select analytics location Setup firebase in Blowfish by getting the variables for your project and setting them inside params.toml file. More details can be found in this page. You can find an example of the file Firebase will provide below, notice the parameters within the FirebaseConfig object. // Import the functions you need from the SDKs you need import { initializeApp } from \u0026#34;firebase/app\u0026#34;; import { getAnalytics } from \u0026#34;firebase/analytics\u0026#34;; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app\u0026#39;s Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: \u0026#34;AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY\u0026#34;, authDomain: \u0026#34;blowfish-21fff.firebaseapp.com\u0026#34;, projectId: \u0026#34;blowfish-21fff\u0026#34;, storageBucket: \u0026#34;blowfish-21fff.appspot.com\u0026#34;, messagingSenderId: \u0026#34;60108104191\u0026#34;, appId: \u0026#34;1:60108104191:web:039842ebe1370698b487ca\u0026#34;, measurementId: \u0026#34;G-PEDMYR1V0K\u0026#34; }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); Setup Firestore - Select Build and open Firestore. Create a new database and choose to start in production mode. Select server location and wait. Once that is started you need to configure the rules. Just copy and paste the file below and press publish. rules_version = \u0026#39;2\u0026#39;; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.auth != null; } } } Enable anonymous authorization - Select Build and open Authentication. Select get started, click Anonymous and turn it on, save. Enjoy - you can now activate views and likes on Blowfish for all (or specific) articles. ","date":"3 August 2020","permalink":"/blowfish/docs/firebase-views/","section":"Documentation","summary":"In order to be able to support dynamic data across your website we\u0026rsquo;ve added the support to integrate Firebase. This will allow you to use the views feature across lists and posts.","title":"Firebase: Views \u0026 Likes"},{"content":"","date":"3 August 2020","permalink":"/blowfish/tags/likes/","section":"Tags","summary":"","title":"likes"},{"content":"","date":"3 August 2020","permalink":"/blowfish/tags/views/","section":"Tags","summary":"","title":"views"},{"content":"","date":"11 March 2019","permalink":"/blowfish/tags/html/","section":"Tags","summary":"","title":"html"},{"content":"","date":"11 March 2019","permalink":"/blowfish/tags/markdown/","section":"Tags","summary":"","title":"markdown"},{"content":"This article offers a sample of basic Markdown formatting that can be used in Blowfish, also it shows how some basic HTML elements are decorated.\nHeadings # The following HTML \u0026lt;h1\u0026gt;—\u0026lt;h6\u0026gt; elements represent six levels of section headings. \u0026lt;h1\u0026gt; is the highest section level while \u0026lt;h6\u0026gt; is the lowest.\nH1 # H2 # H3 # H4 # H5 # H6 # Paragraph # Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.\nBlockquotes # The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.\nBlockquote without attribution # Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.\nBlockquote with attribution # Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.\n— Rob Pike1\nTables # Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.\nName Age Bob 27 Alice 23 Inline Markdown within tables # Italics Bold Code italics bold code Code Blocks # Code block with backticks # \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34; /\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block indented with four spaces # \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026quot;en\u0026quot;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block with Hugo\u0026rsquo;s internal highlight shortcode # 1 2 3 4 5 6 7 8 9 10 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; List Types # Ordered List # First item Second item Third item Unordered List # List item Another item And another item Nested list # Fruit Apple Orange Banana Dairy Milk Cheese Other Elements — abbr, sub, sup, kbd, mark # GIF is a bitmap image format.\nH2O\nXn + Yn = Zn\nPress CTRL+ALT+Delete to end the session.\nMost salamanders are nocturnal, and hunt for insects, worms, and other small creatures.\nThe above quote is excerpted from Rob Pike\u0026rsquo;s talk about nothing during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"11 March 2019","permalink":"/blowfish/samples/markdown/","section":"Content Samples","summary":"\u003cp\u003eThis article offers a sample of basic Markdown formatting that can be used in Blowfish, also it shows how some basic HTML elements are decorated.\u003c/p\u003e","title":"Markdown"},{"content":"","date":"10 March 2019","permalink":"/blowfish/tags/gist/","section":"Tags","summary":"","title":"gist"},{"content":"Hugo ships with several built-in shortcodes for rich content, along with a privacy config and a set of simple shortcodes that enable static and no-JS versions of various social media embeds.\nYouTube # Below is an example using the built-in youtube shortcode.\nTwitter # This example uses the twitter_simple shortcode to output a Tweet. It requires two named parameters user and id.\n“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”\n— Jan Tschichold pic.twitter.com/gcv7SrhvJb\n\u0026mdash; Graphic Design History (@DesignReviewed) January 17, 2019 Alternatively, the tweet shortcode can be used to embed a fully marked up Twitter card.\nGist # The gist shortcode can be used to embed a GitHub Gist. It requires two unnamed parameters: the username and ID of the Gist.\nVimeo # The vimeo_simple shortcode will embed a Vimeo video.\n","date":"10 March 2019","permalink":"/blowfish/samples/rich-content/","section":"Content Samples","summary":"This is an \u003cem\u003eexample\u003c/em\u003e of a \u003cstrong\u003erich\u003c/strong\u003e content summary.","title":"Rich Content"},{"content":"","date":"10 March 2019","permalink":"/blowfish/tags/twitter/","section":"Tags","summary":"","title":"twitter"},{"content":"","date":"10 March 2019","permalink":"/blowfish/tags/vimeo/","section":"Tags","summary":"","title":"vimeo"},{"content":"","date":"10 March 2019","permalink":"/blowfish/tags/youtube/","section":"Tags","summary":"","title":"youtube"},{"content":"","date":"8 March 2019","permalink":"/blowfish/tags/katex/","section":"Tags","summary":"","title":"katex"},{"content":"KaTeX can be used to render mathematical notation within articles.\nBlowfish will only bundle the KaTeX assets into your project if you make use of mathematical notation. In order for this to work, simply include the katex shortcode within the article. Any KaTeX syntax on that page will then be automatically rendered.\nUse the online reference of supported TeX functions for the available syntax.\nInline notation # Inline notation can be generated by wrapping the expression in \\\\( and \\\\) delimiters.\nExample:\n% KaTeX inline notation Inline notation: \\\\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\\\) Inline notation: \\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\)\nBlock notation # Alternatively, block notation can be generated using $$ delimiters. This will output the expression in its own HTML block.\nExample:\n% KaTeX block notation $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$ $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$\n","date":"8 March 2019","permalink":"/blowfish/samples/mathematical-notation/","section":"Content Samples","summary":"\u003cp\u003eKaTeX can be used to render mathematical notation within articles.\u003c/p\u003e","title":"Mathematical notation"},{"content":"","date":"8 March 2019","permalink":"/blowfish/tags/maths/","section":"Tags","summary":"","title":"maths"},{"content":"","date":"6 March 2019","permalink":"/blowfish/tags/chart/","section":"Tags","summary":"","title":"chart"},{"content":"Blowfish includes support for Chart.js using the chart shortcode. Simply wrap the chart markup within the shortcode. Blowfish automatically themes charts to match the configured colorScheme parameter, however the colours can be customised using normal Chart.js syntax.\nRefer to the chart shortcode docs for more details.\nThe examples below are a small selection taken from the official Chart.js docs. You can also view the page source on GitHub to see the markup.\nBar chart # Line chart # Doughnut chart # ","date":"6 March 2019","permalink":"/blowfish/samples/charts/","section":"Content Samples","summary":"Blowfish includes Chart.js for powerful charts and data visualisations.","title":"Charts"},{"content":"","date":"6 March 2019","permalink":"/blowfish/tags/diagram/","section":"Tags","summary":"","title":"diagram"},{"content":"Mermaid diagrams are supported in Blowfish using the mermaid shortcode. Simply wrap the diagram markup within the shortcode. Blowfish automatically themes Mermaid diagrams to match the configured colorScheme parameter.\nRefer to the mermaid shortcode docs for more details.\nThe examples below are a small selection taken from the official Mermaid docs. You can also view the page source on GitHub to see the markup.\nFlowchart # graph TD A[Christmas] --\u003e|Get money| B(Go shopping) B --\u003e C{Let me think} B --\u003e G[/Another/] C ==\u003e|One| D[Laptop] C --\u003e|Two| E[iPhone] C --\u003e|Three| F[Car] subgraph Section C D E F G end Sequence diagram # sequenceDiagram autonumber par Action 1 Alice-\u003e\u003eJohn: Hello John, how are you? and Action 2 Alice-\u003e\u003eBob: Hello Bob, how are you? end Alice-\u003e\u003e+John: Hello John, how are you? Alice-\u003e\u003e+John: John, can you hear me? John--\u003e\u003e-Alice: Hi Alice, I can hear you! Note right of John: John is perceptive John--\u003e\u003e-Alice: I feel great! loop Every minute John--\u003eAlice: Great! end Class diagram # classDiagram Animal \"1\" \u003c|-- Duck Animal \u003c|-- Fish Animal \u003c--o Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } Entity relationship diagram # erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : \"liable for\" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : \"ordered in\" ","date":"6 March 2019","permalink":"/blowfish/samples/diagrams-flowcharts/","section":"Content Samples","summary":"It\u0026rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.","title":"Diagrams and Flowcharts"},{"content":"","date":"6 March 2019","permalink":"/blowfish/tags/graph/","section":"Tags","summary":"","title":"graph"},{"content":"","date":"5 March 2019","permalink":"/blowfish/tags/emoji/","section":"Tags","summary":"","title":"emoji"},{"content":"Emoji is supported throughout Blowfish by default. Emoji can be used in titles, menu items and article content.\nNote: The rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack. Emoji replacements are automatic throughout Blowfish, so you can use shorthand codes in your content and front matter and they will be converted to their corresponding symbols at build time.\nExample: see_no_evil 🙈, hear_no_evil 🙉, speak_no_evil 🙊.\nThe Emoji cheat sheet is a useful reference for emoji shorthand codes.\n","date":"5 March 2019","permalink":"/blowfish/samples/emoji/","section":"Content Samples","summary":"📖🏞️🧗🏽🐉🧙🏽♂️🧚🏽👸","title":"Emoji 🪂"},{"content":"","date":"1 January 0001","permalink":"/blowfish/categories/","section":"Categories","summary":"","title":"Categories"}]
\ No newline at end of file
+[{"content":" Blowfish brings your content to life. 😍 This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example taxonomy listing page.\nSidenote: This page is just a standard Blowfish article listing and Hugo has been configured to generate a samples content type and display article summaries.\n","date":"26 September 2022","permalink":"/blowfish/samples/","section":"Content Samples","summary":"Blowfish brings your content to life. 😍 This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example taxonomy listing page.","title":"Content Samples"},{"content":"","date":"26 September 2022","permalink":"/blowfish/tags/sample/","section":"Tags","summary":"","title":"sample"},{"content":"Blowfish has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.\nThis area could be used to add some extra decriptive text to each taxonomy. Check out the advanced tag below to see how to take this concept even further.\n","date":"26 September 2022","permalink":"/blowfish/tags/","section":"Tags","summary":"Blowfish has full support for Hugo taxonomies and will adapt to any taxonomy set up. Taxonomy listings like this one also support custom content to be displayed above the list of terms.","title":"Tags"},{"content":"","date":"26 September 2022","permalink":"/blowfish/tags/thumbnail/","section":"Tags","summary":"","title":"thumbnail"},{"content":"A quick example of how to start using Thumbnails in your articles.\nIf your average directory for an article looks like this:\ncontent └── awesome_article.md You need to change it from a single markdown file into a folder. Create a directory with the same name of the article, inside create a index.md file. You\u0026rsquo;ll get a structure similar to what\u0026rsquo;s below.\ncontent └── awesome_article └── featured.png Inside the article you can now add an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature*. Example below.\ncontent └── awesome_article ├── index.md └── featured.png This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for oEmbed cards across social platforms. As an example, you can try copy pasting the URL of this article into a platform that shows oEmbeds (e.g. Twitter, WhatsApp, Telegram, etc) and see what is displayed.\n","date":"26 September 2022","permalink":"/blowfish/samples/thumbnail_sample/","section":"Content Samples","summary":"A quick example of how to start using Thumbnails in your artciles.","title":"Thumbnails"},{"content":" A powerful, lightweight theme for Hugo built with Tailwind CSS. This is a demo site built entirely using Blowfish. It also contains a complete set of theme documentation. Blowfish is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.\nThis is a demo of the profile layout. Switch layout \u0026orarr; Explore the sample pages to get a feel for what Blowfish can do. If you like what you see, check out the project on Github or read the Installation guide to get started.\n","date":"26 September 2022","permalink":"/blowfish/","section":"Welcome to Blowfish! 🎉","summary":"A powerful, lightweight theme for Hugo built with Tailwind CSS. This is a demo site built entirely using Blowfish. It also contains a complete set of theme documentation. Blowfish is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.","title":"Welcome to Blowfish! 🎉"},{"content":"","date":"13 June 2022","permalink":"/blowfish/posts/","section":"Posts","summary":"","title":"Posts"},{"content":"","date":"19 January 2022","permalink":"/blowfish/tags/docs/","section":"Tags","summary":"","title":"docs"},{"content":" Simple, yet powerful. Learn how to use Blowfish and its features. This section contains everything you need to know about Blowfish. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.\n","date":"19 January 2022","permalink":"/blowfish/docs/","section":"Documentation","summary":"Simple, yet powerful. Learn how to use Blowfish and its features. This section contains everything you need to know about Blowfish. If you\u0026rsquo;re new, check out the Installation guide to begin or visit the Samples section to see what Blowfish can do.","title":"Documentation"},{"content":"","date":"19 January 2022","permalink":"/blowfish/tags/new/","section":"Tags","summary":"","title":"new"},{"content":" Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision.\nTailwind CSS 3.0 # Tailwind CSS is at the heart of Blowfish and this release contains the very latest Tailwind CSS version 3. It brings with it performance optimisations and support for some great new CSS features.\nMultilingual support # A highly requested feature, Blowfish is now multilingual! If you publish your content in multiple languages, the site will be built with all the translations available.\n🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩 Thanks to submissions from the community, Blowfish has already been translated into eight languages with more to be added over time. By the way, pull requests for new languages are always welcome!\nRTL language support # One of the benefits of the new Tailwind and Multilingual features is the ability to add RTL language support. When enabled, the entire site will reflow content from right-to-left. Every element in the theme has been restyled to ensure it looks great in this mode which aids authors who wish to generate content in RTL languages.\nRTL is controlled on a per-language basis so you can mix and match both RTL and LTR content in your projects and the theme will respond accordingly.\nAutomatic image resizing # A big change in Blowfish 2.0 is the addition of automatic image resizing. Using the power of Hugo Pipes, images in Markdown content are now automatically scaled to different output sizes. These are then presented using HTML srcset attributes enabling optimised file sizes to be served to your site visitors.\n\u0026lt;!-- Markdown:  --\u0026gt; \u0026lt;img srcset=\u0026#34; /image_320x0_resize_q75_box.jpg 320w, /image_635x0_resize_q75_box.jpg 635w, /image_1024x0_resize_q75_box.jpg 1024w, /image_1270x0_resize_q75_box.jpg 2x\u0026#34; src=\u0026#34;/image_635x0_resize_q75_box.jpg\u0026#34; alt=\u0026#34;My image\u0026#34; /\u0026gt; Best of all there\u0026rsquo;s nothing you need to change! Simply insert standard Markdown image syntax and let the theme do the rest. If you want a little more control, the figure shortcode has been completely rewritten to provide the same resizing benefits.\nSite search # Powered by Fuse.js, site search allows visitors to quickly and easily find your content. All searches are performed client-side meaning there\u0026rsquo;s nothing to configure on the server and queries are performed super fast. Simply enable the feature in your site configuration and you\u0026rsquo;re all set. Oh, and it also supports full keyboard navigation!\nTables of contents # A highly requested feature, Blowfish now supports tables of contents on article pages. You can see it in action on this page. The contents are fully responsive and will adjust to take advantage of the space available at different screen resolutions.\nAvailable on a global or per article basis, the table of contents can be fully customised using standard Hugo configuration values, allowing you to adjust the behaviour to suit your project.\nAccessibility improvements # From adding ARIA descriptions to more items or simply adjusting the contrast of certain text elements, this release is the most accessible yet.\nVersion 2 also introduces \u0026ldquo;skip to content\u0026rdquo; and \u0026ldquo;scroll to top\u0026rdquo; links that enable quick navigation. There\u0026rsquo;s also keyboard shortcuts for enabling items like search without reaching for the mouse.\nThe new image resizing features also provide full control over alt and title elements enabling an accessible experience for all visitors.\nA whole lot more # There\u0026rsquo;s countless other features to explore. From being able to display taxonomies on articles and list pages, to using the new headline author parameter to customise your homepage. There\u0026rsquo;s also improved JSON-LD strucured data which further optimises SEO performance.\n","date":"19 January 2022","permalink":"/blowfish/docs/welcome/","section":"Documentation","summary":"Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision.","title":"Welcome to Blowfish 🐡"},{"content":"","date":"16 August 2020","permalink":"/blowfish/tags/installation/","section":"Tags","summary":"","title":"installation"},{"content":"Simply follow the standard Hugo Quick Start procedure to get up and running quickly.\nDetailed installation instructions can be found below. Instructions for updating the theme are also available.\nInstallation # These instructions will get you up and running using Hugo and Blowfish from a completely blank state. Most of the dependencies mentioned in this guide can be installed using the package manager of choice for your platform.\nInstall Hugo # If you haven\u0026rsquo;t used Hugo before, you will need to install it onto your local machine. You can check if it\u0026rsquo;s already installed by running the command hugo version.\nMake sure you are using Hugo version 0.87.0 or later as the theme takes advantage of some of the latest Hugo features. You can find detailed installation instructions for your platform in the Hugo docs.\nCreate a new site # Run the command hugo new site mywebsite to create a new Hugo site in a directory named mywebsite.\nNote that you can name the project directory whatever you choose, but the instructions below will assume it\u0026rsquo;s named mywebsite. If you use a different name, be sure to substitute it accordingly.\nDownload the Blowfish theme # There several different ways to install the Blowfish theme into your Hugo website. From easiest to most difficult to install and maintain, they are:\nHugo module (recommended) Git submodule Manual file copy If you\u0026rsquo;re unsure, choose the Hugo module method.\nInstall using Hugo # This method is the quickest and easiest for keeping the theme up-to-date. Hugo uses Go to initialise and manage modules so you need to ensure you have go installed before proceeding.\nDownload and install Go. You can check if it\u0026rsquo;s already installed by using the command go version.\nMake sure you are using Go version 1.12 or later as Hugo requires this for modules to work correctly. From your Hugo project directory (that you created above), initialise modules for your website:\n# If you\u0026#39;re managing your project on GitHub hugo mod init github.com/\u0026lt;username\u0026gt;/\u0026lt;repo-name\u0026gt; # If you\u0026#39;re managing your project locally hugo mod init my-project Add the theme to your configuration by creating a new file config/_default/module.toml and adding the following:\n[[imports]] path = \u0026#34;github.com/nunocoracao/blowfish\u0026#34; Start your server using hugo server and the theme will be downloaded automatically.\nContinue to set up the theme configuration files.\nInstall using git # For this method you\u0026rsquo;ll need to ensure you have Git installed on your local machine.\nChange into the directory for your Hugo website (that you created above), initialise a new git repository and add Blowfish as a submodule.\ncd mywebsite git init git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish Then continue to set up the theme configuration files.\nInstall manually # Download the latest release of the theme source code.\nDownload from Github Extract the archive, rename the folder to blowfish and move it to the themes/ directory inside your Hugo project\u0026rsquo;s root folder.\nContinue to set up the theme configuration files.\nSet up theme configuration files # In the root folder of your website, delete the config.toml file that was generated by Hugo. Copy the *.toml config files from the theme into your config/_default/ folder. This will ensure you have all the correct theme settings and will enable you to easily customise the theme to your needs.\nNote: You should not overwrite the module.toml file if one already exists in your project! Depending on how you installed the theme you will find the theme config files in different places:\nHugo Modules: In the Hugo cache directory, or download a copy from GitHub Git submodule or Manual install: themes/blowfish/config/_default Once you\u0026rsquo;ve copied the files, your config folder should look like this:\nconfig/_default/ ├─ config.toml ├─ markup.toml ├─ menus.toml ├─ module.toml # if you installed using Hugo Modules └─ params.toml Important: If you didn\u0026rsquo;t use Hugo Modules to install Blowfish, you must add the line theme = \u0026quot;blowfish\u0026quot; to the top of your config.toml file. Next steps # The basic Blowfish installation is now complete. Continue to the Getting Started section to learn more about configuring the theme.\nInstalling updates # From time to time there will be new releases posted that apply fixes and add new functionality to the theme. In order to take advantage of these changes, you will need to update the theme files on your website.\nHow you go about this will depend on the installation method you chose when the theme was originally installed. Instructions for each method can be found below.\nHugo module Git submodule Manual file copy Update using Hugo # Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:\nhugo mod get -u Hugo will automatically update any modules that are required for your project. It does this by inspecting your module.toml and go.mod files. If you have any issues with the update, check to ensure these files are still configured correctly.\nThen simply rebuild your site and check everything works as expected.\nUpdate using git # Git submodules can be updated using the git command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:\ngit submodule update --remote --merge Once the submodule has been updated, rebuild your site and check everything works as expected.\nUpdate manually # Updating Blowfish manually requires you to download the latest copy of the theme and replace the old version in your project.\nNote that any local customisations you have made to the theme files will be lost during this process. Download the latest release of the theme source code.\nDownload from Github Extract the archive, rename the folder to blowfish and move it to the themes/ directory inside your Hugo project\u0026rsquo;s root folder. You will need to overwrite the existing directory to replace all the theme files.\nRebuild your site and check everything works as expected.\n","date":"16 August 2020","permalink":"/blowfish/docs/installation/","section":"Documentation","summary":"Simply follow the standard Hugo Quick Start procedure to get up and running quickly.\nDetailed installation instructions can be found below. Instructions for updating the theme are also available.\nInstallation # These instructions will get you up and running using Hugo and Blowfish from a completely blank state.","title":"Installation"},{"content":" This section assumes you have already installed the Blowfish theme. The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.\nBasic configuration # Before creating any content, there are a few things you should set for a new installation. Starting in the config.toml file, set the baseURL and languageCode parameters. The languageCode should be set to the main language that you will be using to author your content.\n# config/_default/config.toml baseURL = \u0026#34;https://your_domain.com/\u0026#34; languageCode = \u0026#34;en\u0026#34; The next step is to configure the language settings. Although Blowfish supports multilingual setups, for now, just configure the main language.\nLocate the languages.en.toml file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to languages.fr.toml.\nNote that the language code in the language config filename should match the languageCode setting in config.toml. # config/_default/languages.en.toml title = \u0026#34;My awesome website\u0026#34; [author] name = \u0026#34;My name\u0026#34; image = \u0026#34;img/author.jpg\u0026#34; headline = \u0026#34;A generally awesome human\u0026#34; bio = \u0026#34;A little bit about me\u0026#34; links = [ { twitter = \u0026#34;https://twitter.com/username\u0026#34; } ] The [author] configuration determines how the author information is displayed on the website. The image should be placed in the site\u0026rsquo;s assets/ folder. Links will be displayed in the order they are listed.\nIf you need extra detail, further information about each of these configuration options, is covered in the Configuration section.\nColour schemes # Blowfish ships with a number of colour schemes out of the box. To change the scheme, simply set the colorScheme theme parameter. Valid options are blowfish (default), avocado, fire, ocean and slate.\n# config/_default/params.toml colorScheme = \u0026#34;blowfish\u0026#34; Blowfish defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in Tailwind.\nBlowfish (default) # Avocado # Fire # Congo # Slate # Neon # Redemption # Terminal # Mario # Noir # Although these are the default schemes, you can also create your own. Refer to the Advanced Customisation section for details.\nOrganising content # By default, Blowfish doesn\u0026rsquo;t force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer pages for a static site, posts for a blog, or projects for a portfolio.\nHere\u0026rsquo;s a quick overview of a basic Blowfish project. All content is placed within the content folder:\n. ├── assets │ └── img │ └── author.jpg ├── config │ └── _default ├── content │ ├── _index.md │ ├── about.md │ └── posts │ ├── _index.md │ ├── first-post.md │ └── another-post │ ├── aardvark.jpg │ └── index.md └── themes └── blowfish It\u0026rsquo;s important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the official Hugo docs for more information.\nBlowfish is also flexible when it comes to taxonomies. Some people prefer to use tags and categories to group their content, others prefer to use topics.\nHugo defaults to using posts, tags and categories out of the box and this will work fine if that\u0026rsquo;s what you want. If you wish to customise this, however, you can do so by creating a taxonomies.toml configuration file:\n# config/_default/taxonomies.toml topic = \u0026#34;topics\u0026#34; This will replace the default tags and categories with topics. Refer to the Hugo Taxonomy docs for more information on naming taxonomies.\nWhen you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.\nMenus # Blowfish has two menus that can be customised to suit the content and layout of your site. The main menu appears in the site header and the footer menu appears at the bottom of the page just above the copyright notice.\nBoth menus are configured in the menus.en.toml file. Similarly to the languages config file, if you wish to use another language, rename this file and replace en with the language code you wish to use.\n# config/_default/menus.toml [[main]] name = \u0026#34;Blog\u0026#34; pageRef = \u0026#34;posts\u0026#34; weight = 10 [[main]] name = \u0026#34;Topics\u0026#34; pageRef = \u0026#34;topics\u0026#34; weight = 20 [[footer]] name = \u0026#34;Privacy\u0026#34; url = \u0026#34;https://external-link\u0026#34; The name parameter specifies the text that is used in the menu link. You can also optionally provide a title which fills the HTML title attribute for the link.\nThe pageRef parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the url parameter can be used.\nMenu links will be sorted from lowest to highest weight, and then alphabetically by name.\nBoth menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.\nThumbnails # Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature* inside your article folder. And that\u0026rsquo;s it, Blowfish will then able to both use the image as a thumbnail within your website as well as for oEmbed cards across social platforms.\nHere is also a guide with more info and a sample if you want to see how you can do it.\nDetailed configuration # The steps above are the bare minimum configuration. If you now run hugo server you will be presented with a blank Blowfish website. Detailed configuration is covered in the Configuration section.\n","date":"15 August 2020","permalink":"/blowfish/docs/getting-started/","section":"Documentation","summary":"This section assumes you have already installed the Blowfish theme. The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.","title":"Getting Started"},{"content":"","date":"14 August 2020","permalink":"/blowfish/tags/config/","section":"Tags","summary":"","title":"config"},{"content":"Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.\nThe theme ships with a default configuration that gets you up and running with a basic blog or static website.\nConfiguration files bundled with the theme are provided in TOML format as this is the default Hugo syntax. Feel free to convert your config to YAML or JSON if you wish.\nThe default theme configuration is documented in each file so you can freely adjust the settings to meet your needs.\nAs outlined in the installation instructions, you should adjust your theme configuration by modifying the files in the config/_default/ folder of your Hugo project and delete the config.toml file in your project root. Site configuration # Standard Hugo configuration variables are respected throughout the theme, however there are some specific things that should be configured for the best experience.\nThe site configuration is managed through the config/_default/config.toml file. The table below outlines all the settings that the Blowfish takes advantage of.\nNote that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. outputs.home refers to [outputs] home).\nName Default Description theme \u0026quot;blowfish\u0026quot; When using Hugo Modules this config value should be removed. For all other installation types, this must be set to blowfish for the theme to function. baseURL Not set The URL to the root of the website. defaultContentLanguage \u0026quot;en\u0026quot; This value determines the default language of theme components and content. Refer to the language and i18n section below for supported language codes. enableRobotsTXT true When enabled, a robots.txt file will be created in the site root that allows search engines to crawl the entire site. If you prefer to provide your own pre-made robots.txt, set to false and place your file in the static directory. For complete control, you may provide a custom layout to generate this file. paginate 10 The number of articles listed on each page of the article listing. summaryLength 0 The number of words that are used to generate the article summary when one is not provided in the front matter. A value of 0 will use the first sentence. This value has no effect when summaries are hidden. outputs.home [\u0026quot;HTML\u0026quot;, \u0026quot;RSS\u0026quot;, \u0026quot;JSON\u0026quot;] The output formats that are generated for the site. Blowfish requires HTML, RSS and JSON for all theme components to work correctly. permalinks Not set Refer to the Hugo docs for permalink configuration. taxonomies Not set Refer to the Organising content section for taxonomy configuration. Thumbnails # Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature* inside your article folder. And that\u0026rsquo;s it, Blowfish will then able to both use the image as a thumbnail within your website as well as for oEmbed cards across social platforms.\nHere is also a guide with more info and a sample if you want to see how you can do it.\nLanguage and i18n # Blowfish is optimised for full multilingual websites and theme assets are translated into several languages out of the box. The language configuration allows you to generate multiple versions of your content to provide a customised experience to your visitors in their native language.\nThe theme currently supports the following languages by default:\nLanguage Code 🇬🇧 English en 🇧🇩 Bengali bn 🇨🇳 Simplified Chinese (China) zh-cn 🇹🇼 Traditional Chinese (Taiwan) zh-tw 🇫🇮 Finnish fi 🇫🇷 French fr 🇩🇪 German de 🇮🇱 Hebrew he 🇭🇺 Hungarian hu 🇮🇹 Italian it 🇯🇵 Japanese ja 🇧🇷 Portuguese (Brazil) pt-br 🇵🇹 Portuguese (Portugal) pt-pt 🇷🇴 Romanian ro 🇪🇸 Spanish (Spain) es 🇹🇷 Turkish tr The default translations can be overridden by creating a custom file in i18n/[code].yaml that contains the translation strings. You can also use this method to add new languages. If you\u0026rsquo;d like to share a new translation with the community, please open a pull request.\nConfiguration # In order to be as flexible as possible, a language configuration file needs to be created for each language on the website. By default Blowfish includes an English language configuration at config/_default/languages.en.toml.\nThe default file can be used as a template to create additional languages, or renamed if you wish to author your website in a language other than English. Simply name the file using the format languages.[language-code].toml.\nNote: Ensure the defaultContentLanguage parameter in the site configuration matches the language code in your language config filename. Name Default Description languageCode \u0026quot;en\u0026quot; The Hugo language code for this file. It can be a top-level language (ie. en) or a sub-variant (ie. en-au) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the isoCode parameter which is case-sensitive. languageName \u0026quot;English\u0026quot; The name of the language. displayName \u0026quot;EN\u0026quot; The name used when the language appears on the website. isoCode \u0026quot;en\u0026quot; The ISO language code for HTML metadata purposes. It can be a top-level language (ie. en) or a sub-variant (ie. en-AU). weight 1 The weight determines the order of languages when building multilingual sites. rtl false Whether or not this is a RTL language. Set to true to reflow content from right-to-left. Blowfish fully supports using RTL and LTR languages at the same time and will dynamically adjust to both. dateFormat \u0026quot;2 January 2006\u0026quot; How dates are formatted in this language. Refer to the Hugo docs for acceptable formats. title \u0026quot;Blowfish\u0026quot; The title of the website. This will be displayed in the site header and footer. description Not set The website description. This will be used in the site metadata. copyright Not set A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Blowfish will automatically generate a copyright string using the site title. author.name Not set The author\u0026rsquo;s name. This will be displayed in article footers, and on the homepage when the profile layout is used. author.image Not set Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site\u0026rsquo;s assets/ folder. author.headline Not set A Markdown string containing the author\u0026rsquo;s headline. It will be displayed on the profile homepage under the author\u0026rsquo;s name. author.bio Not set A Markdown string containing the author\u0026rsquo;s bio. It will be displayed in article footers. author.links Not set The links to display alongside the author\u0026rsquo;s details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in assets/icons/. Menus # Blowfish also supports language-specific menu configurations. Menu config files follow the same naming format as the languages file. Simply provide the language code in the file name to tell Hugo which language the file relates to.\nMenu config files are named with the format menus.[language-code].toml. Always ensure that the language code used in the menus configuration matches the languages configuration.\nThe Getting Started section explains more about the structure of this file. You can also refer to the Hugo menu docs for more configuration examples.\nTheme parameters # Blowfish provides a large number of configuration parameters that control how the theme functions. The table below outlines every available parameter in the config/_default/params.toml file.\nMany of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the Front Matter section for further details.\nName Default Description colorScheme \u0026quot;blowfish\u0026quot; The theme colour scheme to use. Valid values are blowfish (default), avocado, ocean, fire and slate. Refer to the Colour Schemes section for more details. defaultAppearance \u0026quot;light\u0026quot; The default theme appearance, either light or dark. autoSwitchAppearance true Whether the theme appearance automatically switches based upon the visitor\u0026rsquo;s operating system preference. Set to false to force the site to always use the defaultAppearance. enableSearch false Whether site search is enabled. Set to true to enable search functionality. Note that the search feature depends on the outputs.home setting in the site configuration being set correctly. enableCodeCopy false Whether copy-to-clipboard buttons are enabled for \u0026lt;code\u0026gt; blocks. The highlight.noClasses parameter must be set to false for code copy to function correctly. Read more about other configuration files below. logo Not set The relative path to the site logo file within the assets/ folder. The logo file should be provided at 2x resolution and supports any image dimensions. mainSections Not set The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used. robots Not set String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to Google\u0026rsquo;s docs for valid values. header.layout \u0026quot;basic\u0026quot; The layout of the page header and menu. Valid values are basic, hamburger or custom. When set to custom, you must provide your own layout by creating a /layouts/partials/header/custom.html file. footer.showCopyright true Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the copyright parameter in the languages configuration. footer.showThemeAttribution true Whether or not to show the \u0026ldquo;powered by\u0026rdquo; theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page). footer.showAppearanceSwitcher false Whether or not to show the appearance switcher in the site footer. The browser\u0026rsquo;s local storage is used to persist the visitor\u0026rsquo;s preference. footer.showScrollToTop true When set to true the scroll to top arrow is displayed. homepage.layout \u0026quot;page\u0026quot; The layout of the homepage. Valid values are page, profile or custom. When set to custom, you must provide your own layout by creating a /layouts/partials/home/custom.html file. Refer to the Homepage Layout section for more details. homepage.showRecent false Whether or not to display the recent articles list on the homepage. homepage.showRecentItems 5 How many articles to display if showRecent is true. If variable is set to 0 or if it isn\u0026rsquo;t defined the system will default to 5 articles. homepage.showMoreLink \u0026lsquo;false\u0026rsquo; Wether or not to display a show more link at the end of your posts that takes the user to a predefined place. homepage.showMoreLinkDest \u0026lsquo;/posts\u0026rsquo; The destination of the show more button. article.showDate true Whether or not article dates are displayed. article.showViews false Whether or not article views are displayed. This requires firebase integrations to be enabled, look below. article.showLikes false Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below. article.showDateUpdated false Whether or not the dates articles were updated are displayed. article.showAuthor true Whether or not the author box is displayed in the article footer. article.showBreadcrumbs false Whether or not breadcrumbs are displayed in the article header. article.showDraftLabel true Whether or not the draft indicator is shown next to articles when site is built with --buildDrafts. article.showEdit false Whether or not the link to edit the article content should be displayed. article.editURL Not set When article.showEdit is active, the URL for the edit link. article.editAppendPath true When article.showEdit is active, whether or not the path to the current article should be appended to the URL set at article.editURL. article.showHeadingAnchors true Whether or not heading anchor links are displayed alongside headings within articles. article.showPagination true Whether or not the next/previous article links are displayed in the article footer. article.invertPagination false Whether or not to flip the direction of the next/previous article links. article.showReadingTime true Whether or not article reading times are displayed. article.showTableOfContents false Whether or not the table of contents is displayed on articles. article.showTaxonomies false Whether or not the taxonomies related to this article are displayed. article.showWordCount false Whether or not article word counts are displayed. article.showComments false Whether or not the comments partial is included after the article footer. article.sharingLinks Not set Which sharing links to display at the end of each article. When not provided, or set to false no links will be displayed. list.showBreadcrumbs false Whether or not breadcrumbs are displayed in the header on list pages. list.showTableOfContents false Whether or not the table of contents is displayed on list pages. list.showSummary false Whether or not article summaries are displayed on list pages. If a summary is not provided in the front matter, one will be auto generated using the summaryLength parameter in the site configuration. list.groupByYear true Whether or not articles are grouped by year on list pages. sitemap.excludedKinds [\u0026quot;taxonomy\u0026quot;, \u0026quot;term\u0026quot;] Kinds of content that should be excluded from the generated /sitemap.xml file. Refer to the Hugo docs for acceptable values. taxonomy.showTermCount true Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing. firebase.apiKey Not set Firebase apiKey, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.authDomain Not set Firebase authDomain, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.projectId Not set Firebase projectId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.storageBucket Not set Firebase storageBucket, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.messagingSenderId Not set Firebase messagingSenderId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.appId Not set Firebase appId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish firebase.measurementId Not set Firebase measurementId, required to integrate against Firebase. Check this page for a guide on how to integrate Firebase into Blowfish fathomAnalytics.site Not set The site code generated by Fathom Analytics for the website. Refer to the Analytics docs for more details. fathomAnalytics.domain Not set If using a custom domain with Fathom Analytics, provide it here to serve script.js from the custom domain. verification.google Not set The site verification string provided by Google to be included in the site metadata. verification.bing Not set The site verification string provided by Bing to be included in the site metadata. verification.pinterest Not set The site verification string provided by Pinterest to be included in the site metadata. verification.yandex Not set The site verification string provided by Yandex to be included in the site metadata. Other configuration files # The theme also includes a markup.toml configuration file. This file contains some important parameters that ensure that Hugo is correctly configured to generate sites built with Blowfish.\nAlways ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to fucntion incorrectly and could result in unintended behaviour.\n","date":"14 August 2020","permalink":"/blowfish/docs/configuration/","section":"Documentation","summary":"Blowfish is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.\nThe theme ships with a default configuration that gets you up and running with a basic blog or static website.","title":"Configuration"},{"content":"","date":"14 August 2020","permalink":"/blowfish/tags/icons/","section":"Tags","summary":"","title":"icons"},{"content":"Blowfish has built-in support for a number of FontAwesome 6 icons. These can be included in your website through either the icon partial or icon shortcode.\nAdditionally, custom icons are also fully supported. Simply provide your own SVG icon assets by placing them in the assets/icons/ directory in the root of your project. Any icons in the icons directory will then be available to use throughout the theme.\nThe full list of built-in icons and their corresponding names can referenced below.\nIcon name Preview amazon apple bars blogger bug check circle-info codepen comment dev discourse dribbble edit email facebook flickr foursquare github gitlab goodreads google hackernews hashnode instagram keybase kickstarter lastfm lightbulb link linkedin list mastodon medium microsoft moon music orcid patreon pencil pinterest reddit researchgate search skull-crossbones slack snapchat soundcloud stack-overflow steam sun tag telegram tiktok triangle-exclamation tumblr twitch twitter whatsapp xmark youtube ","date":"14 August 2020","permalink":"/blowfish/samples/icons/","section":"Content Samples","summary":"Blowfish has built-in support for a number of FontAwesome 6 icons. These can be included in your website through either the icon partial or icon shortcode.\nAdditionally, custom icons are also fully supported.","title":"Icons"},{"content":"","date":"14 August 2020","permalink":"/blowfish/tags/shortcodes/","section":"Tags","summary":"","title":"shortcodes"},{"content":"","date":"14 August 2020","permalink":"/blowfish/tags/users/","section":"Tags","summary":"","title":"users"},{"content":" Real websites that are built with Blowfish. Website Auth Details nunocoracao.com Nuno Personal site - Theme author Blowfish user? To add your site to this list, submit a pull request.\n","date":"14 August 2020","permalink":"/blowfish/users/","section":"Welcome to Blowfish! 🎉","summary":"Real websites that are built with Blowfish. Website Auth Details nunocoracao.com Nuno Personal site - Theme author Blowfish user? To add your site to this list, submit a pull request.","title":"Users"},{"content":"","date":"13 August 2020","permalink":"/blowfish/tags/homepage/","section":"Tags","summary":"","title":"homepage"},{"content":"Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.\nThe layout of the homepage is controlled by the homepage.layout setting in the params.toml configuration file. Additionally, all layouts have the option to include a listing of recent articles.\nProfile layout # The default layout is the profile layout, which is great for personal websites and blogs. It puts the author\u0026rsquo;s details front and centre by providing an image and links to social profiles.\nThe author information is provided in the languages configuration file. Refer to the Getting Started and Language Configuration sections for parameter details.\nAdditionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.\nTo enable the profile layout, set homepage.layout = \u0026quot;profile\u0026quot; in the params.toml configuration file.\nPage layout # The page layout is simply a normal content page that displays your Markdown content. It\u0026rsquo;s great for static websites and provides a lot of flexibility.\nTo enable the page layout, set homepage.layout = \u0026quot;page\u0026quot; in the params.toml configuration file.\nCustom layout # If the built-in homepage layouts aren\u0026rsquo;t sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.\nTo enable the custom layout, set homepage.layout = \u0026quot;custom\u0026quot; in the params.toml configuration file.\nWith the configuration value set, create a new custom.html file and place it in layouts/partials/home/custom.html. Now whatever is in the custom.html file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.\nTo include recent articles on the custom layout, use the recent-articles.html partial.\nAs an example, the homepage on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the GitHub repo to see how it works.\nRecent articles # All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the homepage.showRecent setting to true in the params.toml configuration file.\nThe articles listed in this section are derived from the mainSections setting which allows for whatever content types you are using on your website. For instance, if you had content sections for posts and projects you could set this setting to [\u0026quot;posts\u0026quot;, \u0026quot;projects\u0026quot;] and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: [\u0026quot;blog\u0026quot;].\nThumbnails # Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature* inside your article folder. And that\u0026rsquo;s it, Blowfish will then able to both use the image as a thumbnail within your website as well as for oEmbed cards across social platforms.\nHere is also a guide with more info and a sample if you want to see how you can do it.\n","date":"13 August 2020","permalink":"/blowfish/docs/homepage-layout/","section":"Documentation","summary":"Blowfish provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.","title":"Homepage Layout"},{"content":"","date":"13 August 2020","permalink":"/blowfish/tags/layouts/","section":"Tags","summary":"","title":"layouts"},{"content":"","date":"12 August 2020","permalink":"/blowfish/tags/front-matter/","section":"Tags","summary":"","title":"front matter"},{"content":"In addition to the default Hugo front matter parameters, Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.\nFront matter parameter default values are inherited from the theme\u0026rsquo;s base configuration, so you only need to specify these parameters in your front matter when you want to override the default.\nName Default Description title Not set The name of the article. description Not set The text description for the article. It is used in the HTML metadata. externalUrl Not set If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website. editURL article.editURL When showEdit is active, the URL for the edit link. editAppendPath article.editAppendPath When showEdit is active, whether or not the path to the current article should be appended to the URL set at editURL. groupByYear list.groupByYear Whether or not articles are grouped by year on list pages. menu Not set When a value is provided, a link to this article will appear in the named menus. Valid values are main or footer. robots Not set String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to Google\u0026rsquo;s docs for valid values. sharingLinks article.sharingLinks Which sharing links to display at the end of this article. When not provided, or set to false no links will be displayed. showAuthor article.showAuthor Whether or not the author box is displayed in the article footer. showBreadcrumbs article.showBreadcrumbs or list.showBreadcrumbs Whether the breadcrumbs are displayed in the article or list header. showDate article.showDate Whether or not the article date is displayed. The date is set using the date parameter. showDateUpdated article.showDateUpdated Whether or not the date the article was updated is displayed. The date is set using the lastmod parameter. showEdit article.showEdit Whether or not the link to edit the article content should be displayed. showHeadingAnchors article.showHeadingAnchors Whether or not heading anchor links are displayed alongside headings within this article. showPagination article.showPagination Whether or not the next/previous article links are displayed in the article footer. invertPagination article.invertPagination Whether or not to flip the direction of the next/previous article links. showReadingTime article.showReadingTime Whether or not the article reading time is displayed. showTaxonomies article.showTaxonomies Whether or not the taxonomies that relate to this article are displayed. showTableOfContents article.showTableOfContents Whether or not the table of contents is displayed on this article. showWordCount article.showWordCount Whether or not the article word count is displayed. showComments article.showComments Whether or not the comments partial is included after the article footer. showSummary list.showSummary Whether or not the article summary should be displayed on list pages. showViews article.showViews Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check this page for a guide on how to integrate Firebase into Blowfish showLikes article.showLikes Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check this page for a guide on how to integrate Firebase into Blowfish summary Auto generated using summaryLength (see site configuration) When showSummary is enabled, this is the Markdown string to be used as the summary for this article. xml true unless excluded by sitemap.excludedKinds Whether or not this article is included in the generated /sitemap.xml file. ","date":"12 August 2020","permalink":"/blowfish/docs/front-matter/","section":"Documentation","summary":"In addition to the default Hugo front matter parameters, Blowfish adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.","title":"Front Matter"},{"content":"Thumbnails # Blowfish was enhanced in order to make it easy to add visual support to your posts. To do so, you just need to place an image file (almost all formats are supported bue we recommend .png or .jpg) that starts with feature* inside your article main directory as shown in the example below.\ncontent └── awesome_article ├── index.md └── featured.png This will tell Blowfish that this article has a feature image that can be used both as a thumbnail across your website as well as for oEmbed cards across social platforms.\nFolder Strucutre # If you are using single .md files for your articles and have a file structure similar to this:\ncontent └── awesome_article.md You need to change it from a single markdown file into a folder. Create a directory with the same name of the article, inside create a index.md file. You\u0026rsquo;ll get a structure similar to what\u0026rsquo;s below.\ncontent └── awesome_article └── featured.png The you just need to add an image like explain earlier. If you want to see a sample of this you can consult this sample.\n","date":"12 August 2020","permalink":"/blowfish/docs/thumbnails/","section":"Documentation","summary":"Thumbnails # Blowfish was enhanced in order to make it easy to add visual support to your posts. To do so, you just need to place an image file (almost all formats are supported bue we recommend .","title":"Thumbnails"},{"content":"","date":"11 August 2020","permalink":"/blowfish/tags/icon/","section":"Tags","summary":"","title":"icon"},{"content":"","date":"11 August 2020","permalink":"/blowfish/tags/lead/","section":"Tags","summary":"","title":"lead"},{"content":"","date":"11 August 2020","permalink":"/blowfish/tags/mermaid/","section":"Tags","summary":"","title":"mermaid"},{"content":"In addition to all the default Hugo shortcodes, Blowfish adds a few extras for additional functionality.\nAlert # alert outputs its contents as a stylised message box within your article. It\u0026rsquo;s useful for drawing attention to important information that you don\u0026rsquo;t want the reader to miss.\nThe input is written in Markdown so you can format it however you please.\nBy default, the alert is presented with an exclaimation triangle icon. To change the icon, include the icon name in the shortcode. Check out the icon shortcode for more details on using icons.\nExample:\n{{\u0026lt; alert \u0026gt;}} **Warning!** This action is destructive! {{\u0026lt; /alert \u0026gt;}} {{\u0026lt; alert \u0026#34;twitter\u0026#34; \u0026gt;}} Don\u0026#39;t forget to [follow me](https://twitter.com/nunocoracao) on Twitter. {{\u0026lt; /alert \u0026gt;}} Warning! This action is destructive! Don\u0026rsquo;t forget to follow me on Twitter. Badge # badge outputs a styled badge component which is useful for displaying metadata.\nExample:\n{{\u0026lt; badge \u0026gt;}} New article! {{\u0026lt; /badge \u0026gt;}} New article! Button # button outputs a styled button component which can be used to highlight a primary action. It has two optional variables href and target which can be used to specify the URL and target of the link.\nExample:\n{{\u0026lt; button href=\u0026#34;#button\u0026#34; target=\u0026#34;_self\u0026#34; \u0026gt;}} Call to action {{\u0026lt; /button \u0026gt;}} Call to action Chart # chart uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of different chart styles and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest.\nRefer to the official Chart.js docs for details on syntax and supported chart types.\nExample:\n{{\u0026lt; chart \u0026gt;}} type: \u0026#39;bar\u0026#39;, data: { labels: [\u0026#39;Tomato\u0026#39;, \u0026#39;Blueberry\u0026#39;, \u0026#39;Banana\u0026#39;, \u0026#39;Lime\u0026#39;, \u0026#39;Orange\u0026#39;], datasets: [{ label: \u0026#39;# of votes\u0026#39;, data: [12, 19, 3, 5, 2, 3], }] } {{\u0026lt; /chart \u0026gt;}} You can see some additional Chart.js examples on the charts samples page.\nFigure # Blowfish includes a figure shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.\nWhen a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.\nThe figure shortcode accepts six parameters:\nParameter Description src Required. The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a page resource bundled with the page; then an asset in the assets/ directory; then finally, a static image in the static/ directory. alt Alternative text description for the image. caption Markdown for the image caption, which will be displayed below the image. class Additional CSS classes to apply to the image. href URL that the image should be linked to. default Special parameter to revert to default Hugo figure behaviour. Simply provide default=true and then use normal Hugo shortcode syntax. Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:\n Example:\n{{\u0026lt; figure src=\u0026#34;abstract.jpg\u0026#34; alt=\u0026#34;Abstract purple artwork\u0026#34; caption=\u0026#34;Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)\u0026#34; \u0026gt;}} \u0026lt;!-- OR --\u0026gt;  on [Unsplash](https://unsplash.com/)\u0026#34;) Photo by Jr Korpa on Unsplash Icon # icon outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.\nExample:\n{{\u0026lt; icon \u0026#34;github\u0026#34; \u0026gt;}} Output: Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the icon samples page for a full list of supported icons.\nCustom icons can be added by providing your own icon assets in the assets/icons/ directory of your project. The icon can then be referenced in the shortcode by using the SVG filename without the .svg extension.\nIcons can also be used in partials by calling the icon partial.\nSwatches # swatches outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the HEX codes of each color and creates the visual elements for each.\nExample\n{{\u0026lt; swatches \u0026#34;#64748b\u0026#34; \u0026#34;#3b82f6\u0026#34; \u0026#34;#06b6d4\u0026#34; \u0026gt;}} Output Katex # The katex shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of supported TeX functions for the available syntax.\nTo include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.\nInline notation can be generated by wrapping the expression in \\\\( and \\\\) delimiters. Alternatively, block notation can be generated using $$ delimiters.\nExample:\n{{\u0026lt; katex \u0026gt;}} \\\\(f(a,b,c) = (a^2+b^2+c^2)^3\\\\) \\(f(a,b,c) = (a^2+b^2+c^2)^3\\)\nCheck out the mathematical notation samples page for more examples.\nLead # lead is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the lead shortcode.\nExample:\n{{\u0026lt; lead \u0026gt;}} When life gives you lemons, make lemonade. {{\u0026lt; /lead \u0026gt;}} When life gives you lemons, make lemonade. Mermaid # mermaid allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.\nSimply write your Mermaid syntax within the mermaid shortcode and let the plugin do the rest.\nRefer to the official Mermaid docs for details on syntax and supported diagram types.\nExample:\n{{\u0026lt; mermaid \u0026gt;}} graph LR; A[Lemons]--\u0026gt;B[Lemonade]; B--\u0026gt;C[Profit] {{\u0026lt; /mermaid \u0026gt;}} graph LR; A[Lemons]--\u003eB[Lemonade]; B--\u003eC[Profit] You can see some additional Mermaid examples on the diagrams and flowcharts samples page.\n","date":"11 August 2020","permalink":"/blowfish/docs/shortcodes/","section":"Documentation","summary":"In addition to all the default Hugo shortcodes, Blowfish adds a few extras for additional functionality.\nAlert # alert outputs its contents as a stylised message box within your article. It\u0026rsquo;s useful for drawing attention to important information that you don\u0026rsquo;t want the reader to miss.","title":"Shortcodes"},{"content":"","date":"10 August 2020","permalink":"/blowfish/tags/analytics/","section":"Tags","summary":"","title":"analytics"},{"content":"","date":"10 August 2020","permalink":"/blowfish/tags/comments/","section":"Tags","summary":"","title":"comments"},{"content":"","date":"10 August 2020","permalink":"/blowfish/tags/favicons/","section":"Tags","summary":"","title":"favicons"},{"content":"","date":"10 August 2020","permalink":"/blowfish/tags/partials/","section":"Tags","summary":"","title":"partials"},{"content":"Analytics # Blowfish provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.\nFathom Analytics # To enable Fathom Analytics support, simply provide your Fathom site code in the config/_default/params.toml file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the domain configuration value. If you don\u0026rsquo;t provide a domain value, the script will load directly from Fathom DNS.\n# config/_default/params.toml [fathomAnalytics] site = \u0026#34;ABC12345\u0026#34; domain = \u0026#34;llama.yoursite.com\u0026#34; Google Analytics # Google Analytics support is provided through the internal Hugo partial. Simply provide the googleAnalytics key in the config/_default/config.toml file and the script will be added automatically.\nBoth version 3 (analytics.js) and version 4 (gtag.js) are supported, based on the configuration value provided:\n# config/_default/config.toml # version 3 googleAnalytics = \u0026#34;UA-PROPERTY_ID\u0026#34; # version 4 googleAnalytics = \u0026#34;G-MEASUREMENT_ID\u0026#34; Custom analytics providers # If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file layouts/partials/analytics.html in your project and it will automatically include it in the \u0026lt;head\u0026gt; of the website.\nComments # To add comments to your articles, Blowfish includes support for a comments partial that is included at the base of each article page. Simply provide a layouts/partials/comments.html which contains the code required to display your chosen comments.\nYou can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the Hugo docs for further information.\nOnce the partial has been provided, finer control over where comments are displayed is then managed using the showComments parameter. This value can be set at the theme level in the params.toml config file, or on a per-article basis by including it in the front matter. The parameter defaults to false so it must be set to true in one of these locations in order for comments to be displayed.\nFavicons # Blowfish provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like favicon.io.\nIcon assets should be placed directly in the static/ folder of your website and named as per the listing below. If you use favicon.io, these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.\nstatic/ ├─ android-chrome-192x192.png ├─ android-chrome-512x512.png ├─ apple-touch-icon.png ├─ favicon-16x16.png ├─ favicon-32x32.png ├─ favicon.ico └─ site.webmanifest Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a layouts/partials/favicons.html file in your project and this will be injected into the site \u0026lt;head\u0026gt; in place of the default assets.\nIcon # Similar to the icon shortcode, you can include icons in your own templates and partials by using Blowfish\u0026rsquo;s icon.html partial. The partial takes one parameter which is the name of the icon to be included.\nExample:\n{{ partial \u0026#34;icon.html\u0026#34; \u0026#34;github\u0026#34; }} Icons are populated using Hugo pipelines which makes them very flexible. Blowfish includes a number of built-in icons for social, links and other purposes. Check the icon samples page for a full list of supported icons.\nCustom icons can be added by providing your own icon assets in the assets/icons/ directory of your project. The icon can then be referenced in the partial by using the SVG filename without the .svg extension.\nIcons can also be used in article content by calling the icon shortcode.\nExtensions # Blowfish also provides for a number of extension partials that allow for expanding upon base functionality.\nArticle link # If you wish to insert additional code after article links, create a layouts/partials/extend-article-link.html file. This is especially powerful when combined with the badge shortcode which can be used to highlight metadata for certain articles.\nHead and Footer # The theme allows for inserting additional code directly into the \u0026lt;head\u0026gt; and \u0026lt;footer\u0026gt; sections of the template. These can be useful for providing scripts or other logic that isn\u0026rsquo;t part of the theme.\nSimply create either layouts/partials/extend-head.html or layouts/partials/extend-footer.html and these will automatically be included in your website build. Both partials are injected as the last items in \u0026lt;head\u0026gt; and \u0026lt;footer\u0026gt; so they can be used to override theme defaults.\n","date":"10 August 2020","permalink":"/blowfish/docs/partials/","section":"Documentation","summary":"Analytics # Blowfish provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy.\nFathom Analytics # To enable Fathom Analytics support, simply provide your Fathom site code in the config/_default/params.","title":"Partials"},{"content":"","date":"10 August 2020","permalink":"/blowfish/tags/privacy/","section":"Tags","summary":"","title":"privacy"},{"content":"","date":"9 August 2020","permalink":"/blowfish/tags/content/","section":"Tags","summary":"","title":"content"},{"content":"If you\u0026rsquo;ve been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.\nTip: If you\u0026rsquo;re new to Hugo, be sure to check out the official docs to learn more about the concept of page bundles and resources. The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.\nBranch pages # Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is _index.md.\nBlowfish will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the title parameter in a branch page will allow overriding the page title.\nHomepage # Layout: layouts/index.html Content: content/_index.md The homepage in Blowfish is special in that it\u0026rsquo;s overarching design is controlled by the homepage layout config parameter. You can learn more about this in the Homepage Layout section.\nIf you want to add custom content to this page, you simply need to create a content/_index.md file. Anything in this file will then be included in your homepage.\nExample:\n--- title: \u0026#34;Welcome to Blowfish!\u0026#34; description: \u0026#34;This is a demo of adding content to the homepage.\u0026#34; --- Welcome to my website! I\u0026#39;m really happy you stopped by. This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links.\nList pages # Layout: layouts/_default/list.html Content: content/../_index.md List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.\nCreating a list page is as simple as making a sub-directory in the content folder. For example, to create a \u0026ldquo;Projects\u0026rdquo; section, you would create content/projects/. Then create a Markdown file for each of your projects.\nA list page will be generated by default, however to customise the content, you should also create an _index.md page in this new directory.\n. └── content └── projects ├── _index.md # /projects ├── first-project.md # /projects/first-project └── another-project ├── index.md # /projects/another-project └── project.jpg Hugo will generate URLs for the pages in your projects folder accordingly.\nJust like the homepage, content in the _index.md file will be output into the generated list index. Blowfish will then list any pages in this section below the content.\nExample:\n--- title: \u0026#34;Projects\u0026#34; description: \u0026#34;Learn about some of my projects.\u0026#34; cascade: showReadingTime: false --- This section contains all my current projects. In this example, the special cascade parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page.\nThe samples section of this site is an example of a list page.\nTaxonomy pages # List layout: layouts/_default/taxonomy.html Term layout: layouts/_default/term.html Content: content/../_index.md Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.\nThe terminology can get a little confusing so let\u0026rsquo;s explore an example using a taxonomy named animals.\nFirstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at config/_default/taxonomies.toml and defining the taxonomy name.\n# config/_default/taxonomies.toml animal = \u0026#34;animals\u0026#34; Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular animal equals the plural animals to create our example taxonomy.\nNow that our animals taxonomy exists, it needs to be added to individual content items. It\u0026rsquo;s as simple as inserting it into the front matter:\n--- title: \u0026#34;Into the Lion\u0026#39;s Den\u0026#34; description: \u0026#34;This week we\u0026#39;re learning about lions.\u0026#34; animals: [\u0026#34;lion\u0026#34;, \u0026#34;cat\u0026#34;] --- This has now created two terms within our animals taxonomy - lion and cat.\nAlthough it\u0026rsquo;s not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at /animals/ and the term pages can be found at /animals/lion/ and /animals/cat/.\nThe list page will list all the terms contained within the taxonomy. In this example, navigating to /animals/ will show a page that has links for \u0026ldquo;lion\u0026rdquo; and \u0026ldquo;cat\u0026rdquo; which take visitors to the individual term pages.\nThe term pages will list all the pages contained within that term. These term lists are essentially the same as normal list pages and behave in much the same way.\nIn order to add custom content to taxonomy pages, simply create _index.md files in the content folder using the taxonomy name as the sub-directory name.\n. └── content └── animals ├── _index.md # /animals └── lion └── _index.md # /animals/lion Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named lion but override the title to be \u0026ldquo;Lion\u0026rdquo;.\nTo see how this looks in reality, check out the tags taxonomy listing on this site.\nLeaf pages # Layout: layouts/_default/single.html Content (standalone): content/../page-name.md Content (bundled): content/../page-name/index.md Leaf pages in Hugo are basically standard content pages. They are defined as pages that don\u0026rsquo;t contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.\nThe most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named index.md without an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.\n. └── content └── blog ├── first-post.md # /blog/first-post ├── second-post.md # /blog/second-post └── third-post ├── index.md # /blog/third-post └── image.jpg When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an index.md file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.\nExample:\n--- title: \u0026#34;My First Blog Post\u0026#34; date: 2022-01-25 description: \u0026#34;Welcome to my blog!\u0026#34; summary: \u0026#34;Learn more about me and why I am starting this blog.\u0026#34; tags: [\u0026#34;welcome\u0026#34;, \u0026#34;new\u0026#34;, \u0026#34;about\u0026#34;, \u0026#34;first\u0026#34;] --- _This_ is the content of my blog post. Leaf pages have a wide variety of front matter parameters that can be used to customise how they are displayed.\nExternal links # Blowfish has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you\u0026rsquo;d like to link to, without replicating the content in your Hugo site.\nIn order to create an external link article, some special front matter needs to be set:\n--- title: \u0026#34;My Medium post\u0026#34; date: 2022-01-25 externalUrl: \u0026#34;https://medium.com/\u0026#34; summary: \u0026#34;I wrote a post on Medium.\u0026#34; showReadingTime: false _build: render: \u0026#34;false\u0026#34; list: \u0026#34;local\u0026#34; --- Along with the normal front matter parameters like title and summary, the externalUrl parameter is used to tell Blowfish that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.\nAdditionally, we use a special Hugo front matter parameter _build to prevent a normal page for this content being generated - there\u0026rsquo;s no point generating a page since we\u0026rsquo;re linking to an external URL!\nThe theme includes an archetype to make generating these external link articles simple. Just specify -k external when making new content.\nhugo new -k external posts/my-post.md Simple pages # Layout: layouts/_default/simple.html Front Matter: layout: \u0026quot;simple\u0026quot; Blowfish also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.\nThe only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page front matter variables.\nTo enable the simple layout on a particular page, add the layout front matter variable with a value of \u0026quot;simple\u0026quot;:\n--- title: \u0026#34;My landing page\u0026#34; date: 2022-03-08 layout: \u0026#34;simple\u0026#34; --- This page content is now full-width. Custom layouts # One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.\nLayouts follow all the normal Hugo templating rules and more information is available in the official Hugo docs.\nOverriding default layouts # Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.\nFor example, creating a layouts/_default/single.html file will allow the layout of leaf pages to be completely customised.\nCustom section layouts # It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.\nLet\u0026rsquo;s step through an example that creates a custom \u0026ldquo;Projects\u0026rdquo; page that lists projects using a special layout.\nIn order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a list.html file.\n. └── content │ └── projects │ ├── _index.md │ ├── first-project.md │ └── second-project.md └── layouts └── projects └── list.html This list.html file will now override the default list template, but only for the projects section. Before we look at this file, lets first look at the individual project files.\n--- title: \u0026#34;Blowfish\u0026#34; date: 2021-08-11 icon: \u0026#34;github\u0026#34; description: \u0026#34;A theme for Hugo built with Tailwind CSS.\u0026#34; topics: [\u0026#34;Hugo\u0026#34;, \u0026#34;Web\u0026#34;, \u0026#34;Tailwind\u0026#34;] externalUrl: \u0026#34;https://github.com/nunocoracao/blowfish/\u0026#34; --- In this example we are assigning some metadata for each project that we can then use in our list template. There\u0026rsquo;s no page content, but there\u0026rsquo;s nothing stopping you from including it. It\u0026rsquo;s your own custom template after all!\nWith the projects defined, now we can create a list template that outputs the details of each project.\n{{ define \u0026#34;main\u0026#34; }} \u0026lt;section class=\u0026#34;mt-8\u0026#34;\u0026gt; {{ range .Pages }} \u0026lt;article class=\u0026#34;pb-6\u0026#34;\u0026gt; \u0026lt;a class=\u0026#34;flex\u0026#34; href=\u0026#34;{{ .Params.externalUrl }}\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;mr-3 text-3xl text-neutral-300\u0026#34;\u0026gt; \u0026lt;span class=\u0026#34;relative inline-block align-text-bottom\u0026#34;\u0026gt; {{ partial \u0026#34;icon.html\u0026#34; .Params.icon }} \u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div\u0026gt; \u0026lt;h3 class=\u0026#34;flex text-xl font-semibold\u0026#34;\u0026gt; {{ .Title }} \u0026lt;/h3\u0026gt; \u0026lt;p class=\u0026#34;text-sm text-neutral-400\u0026#34;\u0026gt; {{ .Description }} \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/a\u0026gt; \u0026lt;/article\u0026gt; {{ end }} \u0026lt;/section\u0026gt; {{ end }} Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.\nKeep in mind that you\u0026rsquo;ll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the Advanced Customisation section.\nWhen making custom templates like this one, it\u0026rsquo;s always easiest to take a look at how the default Blowfish template works and then use that as a guide. Remember, the Hugo docs are a great resource to learn more about creating templates too.\n","date":"9 August 2020","permalink":"/blowfish/docs/content-examples/","section":"Documentation","summary":"If you\u0026rsquo;ve been reading the documentation in order, you should now know about all the features and configurations available in Blowfish. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.","title":"Content Examples"},{"content":"","date":"9 August 2020","permalink":"/blowfish/tags/example/","section":"Tags","summary":"","title":"example"},{"content":"This is the advanced tag. Just like other listing pages in Blowfish, you can add custom content to individual taxonomy terms and it will be displayed at the top of the term listing. 🚀\nYou can also use these content pages to define Hugo metadata like titles and descriptions that will be used for SEO and other purposes.\n","date":"8 August 2020","permalink":"/blowfish/tags/advanced/","section":"Tags","summary":"This is the advanced tag. Just like other listing pages in Blowfish, you can add custom content to individual taxonomy terms and it will be displayed at the top of the term listing.","title":"advanced"},{"content":"There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.\nIf you need further advice, post your questions on GitHub Discussions.\nHugo project structure # Before leaping into it, first a quick note about Hugo project structure and best practices for managing your content and theme customisations.\nIn summary: Never directly edit the theme files. Only make customisations in your Hugo project\u0026rsquo;s sub-directories, not in the themes directory itself. Blowfish is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overriden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.\nIn order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your themes/ directory, you should always leave these files intact.\nThe correct way to adjust any theme behaviour is by overriding files using Hugo\u0026rsquo;s powerful file lookup order. In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.\nFor example, if you wanted to override the main article template in Blowfish, you can simply create your own layouts/_default/single.html file and place it in the root of your project. This file will then override the single.html from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.\nAs long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.\nColour schemes # Blowfish ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the colorScheme theme parameter. Refer to the Getting Started section to learn more about the built-in schemes.\nIn addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a \u0026lt;scheme-name\u0026gt;.css file in the assets/css/schemes/ folder. Once the file is created, simply refer to it by name in the theme configuration.\nBlowfish defines a three-colour palette that is used throughout the theme. The three colours are defined as neutral, primary and secondary variants, each containing ten shades of colour.\nDue to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to conform to a particular format by providing the red, green and blue colour values.\n:root { --color-primary-500: 139, 92, 246; } This example defines a CSS variable for the primary-500 colour with a red value of 139, green value of 92 and blue value of 246.\nUse one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official Tailwind colour palette reference.\nOverriding the stylesheet # Sometimes you need to add a custom style to style your own HTML elements. Blowfish provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a custom.css file in your project\u0026rsquo;s assets/css/ folder.\nThe custom.css file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.\nAdjusting the font size # Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to 12pt, but it can be changed to whatever value you prefer.\nCreate a custom.css file using the instructions above and add the following CSS declaration:\n/* Increase the default font size */ html { font-size: 13pt; } Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than 12pt. Similarly, to decrease the font sizes, make the value less than 12pt.\nBuilding the theme CSS from source # If you\u0026rsquo;d like to make a major change, you can take advantage of Tailwind CSS\u0026rsquo;s JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.\nNote: Building the theme manually is intended for advanced users. Let\u0026rsquo;s step through how building the Tailwind CSS works.\nTailwind configuration # In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the tailwind.config.js file which is included in the root of the theme directory:\n// themes/blowfish/tailwind.config.js module.exports = { content: [ \u0026#34;./layouts/**/*.html\u0026#34;, \u0026#34;./content/**/*.{html,md}\u0026#34;, \u0026#34;./themes/blowfish/layouts/**/*.html\u0026#34;, \u0026#34;./themes/blowfish/content/**/*.{html,md}\u0026#34;, ], // and more... }; This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, you have to include Blowfish in your project as a subdirectory at themes/blowfish/. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The Installation docs explain how to install the theme using either of these methods.\nProject structure # In order to take advantage of the default configuration, your project should look something like this\u0026hellip;\n. ├── assets │ └── css │ └── compiled │ └── main.css # this is the file we will generate ├── config # site config │ └── _default ├── content # site content │ ├── _index.md │ ├── projects │ │ └── _index.md │ └── blog │ └── _index.md ├── layouts # custom layouts for your site │ ├── partials │ │ └── extend-article-link.html │ ├── projects │ │ └── list.html │ └── shortcodes │ └── disclaimer.html └── themes └── blowfish # git submodule or manual theme install This example structure adds a new projects content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that\u0026rsquo;s required is to recompile the main.css file.\nInstall dependencies # In order for this to work you\u0026rsquo;ll need to change into the themes/blowfish/ directory and install the project dependencies. You\u0026rsquo;ll need npm on your local machine for this step.\ncd themes/blowfish npm install Run the Tailwind compiler # With the dependencies installed all that\u0026rsquo;s left is to use Tailwind CLI to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:\ncd ../.. ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit It\u0026rsquo;s a bit of an ugly command due to the paths involved but essentially you\u0026rsquo;re calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme\u0026rsquo;s main.css file and then where you want the compiled CSS file to be placed (it\u0026rsquo;s going into the assets/css/compiled/ folder of your Hugo project).\nThe config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.\nEach time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add -w to the end of the command to run the JIT compiler in watch mode.\nMake a build script # To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a package.json to the root of your project which contains the necessary scripts\u0026hellip;\n// package.json { \u0026#34;name\u0026#34;: \u0026#34;my-website\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;scripts\u0026#34;: { \u0026#34;server\u0026#34;: \u0026#34;hugo server -b http://localhost -p 8000\u0026#34;, \u0026#34;dev\u0026#34;: \u0026#34;NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w\u0026#34;, \u0026#34;build\u0026#34;: \u0026#34;NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit\u0026#34; }, // and more... } Now when you want to work on designing your site, you can invoke npm run dev and the compiler will run in watch mode. When you\u0026rsquo;re ready to deploy, run npm run build and you\u0026rsquo;ll get a clean Tailwind CSS build.\n🙋♀️ If you need help, feel free to ask a question on GitHub Discussions.\n","date":"8 August 2020","permalink":"/blowfish/docs/advanced-customisation/","section":"Documentation","summary":"There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.","title":"Advanced Customisation"},{"content":"","date":"8 August 2020","permalink":"/blowfish/tags/css/","section":"Tags","summary":"","title":"css"},{"content":"","date":"7 August 2020","permalink":"/blowfish/tags/deployment/","section":"Tags","summary":"","title":"deployment"},{"content":"","date":"7 August 2020","permalink":"/blowfish/tags/github/","section":"Tags","summary":"","title":"github"},{"content":"","date":"7 August 2020","permalink":"/blowfish/tags/hosting/","section":"Tags","summary":"","title":"hosting"},{"content":"There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.\nBlowfish is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There\u0026rsquo;s usually no special configuration required for this to work as long as the baseURL parameter has been configured in the config.toml file.\nThe official Hugo Hosting and Deployment docs are the best place to learn how to deploy your site. The sections below contain some specific theme configuration details that can help you deploy smoothly with certain providers.\nChoose your provider:\nGitHub Pages Netlify Render Cloudflare Pages Shared hosting, VPS or private web server GitHub Pages # GitHub allows hosting on GitHub Pages using Actions. To enable this functionality, enable Pages on your repo and create a new Actions workflow to build and deploy your site.\nThe file needs to be in YAML format, placed within the .github/workflows/ directory of your GitHub repository and named with a .yml extension.\nImportant: Ensure you set the correct branch name under branches and in the deploy step if parameter to the source branch used in your project. # .github/workflows/gh-pages.yml name: GitHub Pages on: push: branches: - main jobs: build-deploy: runs-on: ubuntu-20.04 concurrency: group: ${{ github.workflow }}-${{ github.ref }} steps: - name: Checkout uses: actions/checkout@v3 with: submodules: true fetch-depth: 0 - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: \u0026#34;latest\u0026#34; - name: Build run: hugo --minify - name: Deploy uses: peaceiris/actions-gh-pages@v3 if: ${{ github.ref == \u0026#39;refs/heads/main\u0026#39; }} with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_branch: gh-pages publish_dir: ./public Push the config file to GitHub and the action should automatically run. It may fail the first time and you\u0026rsquo;ll need to visit the Settings \u0026gt; Pages section of your GitHub repo to check the source is correct. It should be set to use the gh-pages branch.\nOnce the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.\nNetlify # To deploy to Netlify, create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you\u0026rsquo;ll be using.\nThen in the root of your site repository, create a netlify.toml file:\n# netlify.toml [build] command = \u0026#34;hugo mod get -u \u0026amp;\u0026amp; hugo --gc --minify -b $URL\u0026#34; publish = \u0026#34;public\u0026#34; [build.environment] NODE_ENV = \u0026#34;production\u0026#34; GO_VERSION = \u0026#34;1.16\u0026#34; TZ = \u0026#34;UTC\u0026#34; # Set to preferred timezone [context.production.environment] HUGO_VERSION = \u0026#34;0.104.1\u0026#34; HUGO_ENV = \u0026#34;production\u0026#34; [context.deploy-preview.environment] HUGO_VERSION = \u0026#34;0.104.1\u0026#34; This configuration assumes you are deploying Blowfish as a Hugo module. If you have installed the theme using another method, change the build command to simply hugo --gc --minify -b $URL.\nWhen you push the config file to your repo, Netlify should automatically deploy your site. You can check the deploy logs in the Netlify UI to check for any errors.\nRender # Deploying to Render is very straightforward and all configuration is via the Render UI.\nCreate a new Static Site and link it to your project\u0026rsquo;s code repository. Then simply configure the build command to be hugo --gc --minify and publish directory to be public.\nThe site will automatically build and deploy whenever you push a change to your repo.\nCloudflare Pages # Cloudflare offers the Pages service that can host Hugo blogs. It builds the site from a git repository and then hosts it on Cloudflare\u0026rsquo;s CDN. Follow their Hugo deployment guide to get started.\nThe Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.\nThis problem can be fixed by disabling it:\nGo to the Cloudflare dashboard Click on your domain name in the list Click Optimization in the Speed section Scroll down to Rocket Loader™ and disable it Hugo sites built with Blowfish still load very quickly, even with this feature disabled.\nShared hosting, VPS or private web server # Using traditional web hosting, or deploying to your own web server, is as simple as building your Hugo site and transferring the files to your host.\nMake sure that the baseURL parameter in config.toml is set to the full URL to the root of your website (including any sub domains or sub-folders).\nThen build your site using hugo and copy the contents of the output directory to the root of your web server and you will be ready to go. By default, the output directory is named public.\nIf you need a hosting provider, check out Vultr or DigitalOcean. Signing up using these affiliate links will give you up to $100 in free credit so you can try the service.\n","date":"7 August 2020","permalink":"/blowfish/docs/hosting-deployment/","section":"Documentation","summary":"There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.\nBlowfish is built using relative URLs throughout the theme.","title":"Hosting \u0026 Deployment"},{"content":"","date":"7 August 2020","permalink":"/blowfish/tags/netlify/","section":"Tags","summary":"","title":"netlify"},{"content":"","date":"7 August 2020","permalink":"/blowfish/tags/render/","section":"Tags","summary":"","title":"render"},{"content":"","date":"3 August 2020","permalink":"/blowfish/tags/firebase/","section":"Tags","summary":"","title":"firebase"},{"content":"In order to be able to support dynamic data across your website we\u0026rsquo;ve added the support to integrate Firebase. This will allow you to use the views feature across lists and posts.\nGo to Firebase website and create an account for free Create a new project Select analytics location Setup firebase in Blowfish by getting the variables for your project and setting them inside params.toml file. More details can be found in this page. You can find an example of the file Firebase will provide below, notice the parameters within the FirebaseConfig object. // Import the functions you need from the SDKs you need import { initializeApp } from \u0026#34;firebase/app\u0026#34;; import { getAnalytics } from \u0026#34;firebase/analytics\u0026#34;; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app\u0026#39;s Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: \u0026#34;AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY\u0026#34;, authDomain: \u0026#34;blowfish-21fff.firebaseapp.com\u0026#34;, projectId: \u0026#34;blowfish-21fff\u0026#34;, storageBucket: \u0026#34;blowfish-21fff.appspot.com\u0026#34;, messagingSenderId: \u0026#34;60108104191\u0026#34;, appId: \u0026#34;1:60108104191:web:039842ebe1370698b487ca\u0026#34;, measurementId: \u0026#34;G-PEDMYR1V0K\u0026#34; }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); Setup Firestore - Select Build and open Firestore. Create a new database and choose to start in production mode. Select server location and wait. Once that is started you need to configure the rules. Just copy and paste the file below and press publish. rules_version = \u0026#39;2\u0026#39;; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.auth != null; } } } Enable anonymous authorization - Select Build and open Authentication. Select get started, click Anonymous and turn it on, save. Enjoy - you can now activate views and likes on Blowfish for all (or specific) articles. ","date":"3 August 2020","permalink":"/blowfish/docs/firebase-views/","section":"Documentation","summary":"In order to be able to support dynamic data across your website we\u0026rsquo;ve added the support to integrate Firebase. This will allow you to use the views feature across lists and posts.","title":"Firebase: Views \u0026 Likes"},{"content":"","date":"3 August 2020","permalink":"/blowfish/tags/likes/","section":"Tags","summary":"","title":"likes"},{"content":"","date":"3 August 2020","permalink":"/blowfish/tags/views/","section":"Tags","summary":"","title":"views"},{"content":"","date":"11 March 2019","permalink":"/blowfish/tags/html/","section":"Tags","summary":"","title":"html"},{"content":"","date":"11 March 2019","permalink":"/blowfish/tags/markdown/","section":"Tags","summary":"","title":"markdown"},{"content":"This article offers a sample of basic Markdown formatting that can be used in Blowfish, also it shows how some basic HTML elements are decorated.\nHeadings # The following HTML \u0026lt;h1\u0026gt;—\u0026lt;h6\u0026gt; elements represent six levels of section headings. \u0026lt;h1\u0026gt; is the highest section level while \u0026lt;h6\u0026gt; is the lowest.\nH1 # H2 # H3 # H4 # H5 # H6 # Paragraph # Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.\nBlockquotes # The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.\nBlockquote without attribution # Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.\nBlockquote with attribution # Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.\n— Rob Pike1\nTables # Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.\nName Age Bob 27 Alice 23 Inline Markdown within tables # Italics Bold Code italics bold code Code Blocks # Code block with backticks # \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34; /\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block indented with four spaces # \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026quot;en\u0026quot;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block with Hugo\u0026rsquo;s internal highlight shortcode # 1 2 3 4 5 6 7 8 9 10 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; List Types # Ordered List # First item Second item Third item Unordered List # List item Another item And another item Nested list # Fruit Apple Orange Banana Dairy Milk Cheese Other Elements — abbr, sub, sup, kbd, mark # GIF is a bitmap image format.\nH2O\nXn + Yn = Zn\nPress CTRL+ALT+Delete to end the session.\nMost salamanders are nocturnal, and hunt for insects, worms, and other small creatures.\nThe above quote is excerpted from Rob Pike\u0026rsquo;s talk about nothing during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"11 March 2019","permalink":"/blowfish/samples/markdown/","section":"Content Samples","summary":"\u003cp\u003eThis article offers a sample of basic Markdown formatting that can be used in Blowfish, also it shows how some basic HTML elements are decorated.\u003c/p\u003e","title":"Markdown"},{"content":"","date":"10 March 2019","permalink":"/blowfish/tags/gist/","section":"Tags","summary":"","title":"gist"},{"content":"Hugo ships with several built-in shortcodes for rich content, along with a privacy config and a set of simple shortcodes that enable static and no-JS versions of various social media embeds.\nYouTube # Below is an example using the built-in youtube shortcode.\nTwitter # This example uses the twitter_simple shortcode to output a Tweet. It requires two named parameters user and id.\n“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”\n— Jan Tschichold pic.twitter.com/gcv7SrhvJb\n\u0026mdash; Graphic Design History (@DesignReviewed) January 17, 2019 Alternatively, the tweet shortcode can be used to embed a fully marked up Twitter card.\nGist # The gist shortcode can be used to embed a GitHub Gist. It requires two unnamed parameters: the username and ID of the Gist.\nVimeo # The vimeo_simple shortcode will embed a Vimeo video.\n","date":"10 March 2019","permalink":"/blowfish/samples/rich-content/","section":"Content Samples","summary":"This is an \u003cem\u003eexample\u003c/em\u003e of a \u003cstrong\u003erich\u003c/strong\u003e content summary.","title":"Rich Content"},{"content":"","date":"10 March 2019","permalink":"/blowfish/tags/twitter/","section":"Tags","summary":"","title":"twitter"},{"content":"","date":"10 March 2019","permalink":"/blowfish/tags/vimeo/","section":"Tags","summary":"","title":"vimeo"},{"content":"","date":"10 March 2019","permalink":"/blowfish/tags/youtube/","section":"Tags","summary":"","title":"youtube"},{"content":"","date":"8 March 2019","permalink":"/blowfish/tags/katex/","section":"Tags","summary":"","title":"katex"},{"content":"KaTeX can be used to render mathematical notation within articles.\nBlowfish will only bundle the KaTeX assets into your project if you make use of mathematical notation. In order for this to work, simply include the katex shortcode within the article. Any KaTeX syntax on that page will then be automatically rendered.\nUse the online reference of supported TeX functions for the available syntax.\nInline notation # Inline notation can be generated by wrapping the expression in \\\\( and \\\\) delimiters.\nExample:\n% KaTeX inline notation Inline notation: \\\\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\\\) Inline notation: \\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\)\nBlock notation # Alternatively, block notation can be generated using $$ delimiters. This will output the expression in its own HTML block.\nExample:\n% KaTeX block notation $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$ $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$\n","date":"8 March 2019","permalink":"/blowfish/samples/mathematical-notation/","section":"Content Samples","summary":"\u003cp\u003eKaTeX can be used to render mathematical notation within articles.\u003c/p\u003e","title":"Mathematical notation"},{"content":"","date":"8 March 2019","permalink":"/blowfish/tags/maths/","section":"Tags","summary":"","title":"maths"},{"content":"","date":"6 March 2019","permalink":"/blowfish/tags/chart/","section":"Tags","summary":"","title":"chart"},{"content":"Blowfish includes support for Chart.js using the chart shortcode. Simply wrap the chart markup within the shortcode. Blowfish automatically themes charts to match the configured colorScheme parameter, however the colours can be customised using normal Chart.js syntax.\nRefer to the chart shortcode docs for more details.\nThe examples below are a small selection taken from the official Chart.js docs. You can also view the page source on GitHub to see the markup.\nBar chart # Line chart # Doughnut chart # ","date":"6 March 2019","permalink":"/blowfish/samples/charts/","section":"Content Samples","summary":"Blowfish includes Chart.js for powerful charts and data visualisations.","title":"Charts"},{"content":"","date":"6 March 2019","permalink":"/blowfish/tags/diagram/","section":"Tags","summary":"","title":"diagram"},{"content":"Mermaid diagrams are supported in Blowfish using the mermaid shortcode. Simply wrap the diagram markup within the shortcode. Blowfish automatically themes Mermaid diagrams to match the configured colorScheme parameter.\nRefer to the mermaid shortcode docs for more details.\nThe examples below are a small selection taken from the official Mermaid docs. You can also view the page source on GitHub to see the markup.\nFlowchart # graph TD A[Christmas] --\u003e|Get money| B(Go shopping) B --\u003e C{Let me think} B --\u003e G[/Another/] C ==\u003e|One| D[Laptop] C --\u003e|Two| E[iPhone] C --\u003e|Three| F[Car] subgraph Section C D E F G end Sequence diagram # sequenceDiagram autonumber par Action 1 Alice-\u003e\u003eJohn: Hello John, how are you? and Action 2 Alice-\u003e\u003eBob: Hello Bob, how are you? end Alice-\u003e\u003e+John: Hello John, how are you? Alice-\u003e\u003e+John: John, can you hear me? John--\u003e\u003e-Alice: Hi Alice, I can hear you! Note right of John: John is perceptive John--\u003e\u003e-Alice: I feel great! loop Every minute John--\u003eAlice: Great! end Class diagram # classDiagram Animal \"1\" \u003c|-- Duck Animal \u003c|-- Fish Animal \u003c--o Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } Entity relationship diagram # erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : \"liable for\" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : \"ordered in\" ","date":"6 March 2019","permalink":"/blowfish/samples/diagrams-flowcharts/","section":"Content Samples","summary":"It\u0026rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.","title":"Diagrams and Flowcharts"},{"content":"","date":"6 March 2019","permalink":"/blowfish/tags/graph/","section":"Tags","summary":"","title":"graph"},{"content":"","date":"5 March 2019","permalink":"/blowfish/tags/emoji/","section":"Tags","summary":"","title":"emoji"},{"content":"Emoji is supported throughout Blowfish by default. Emoji can be used in titles, menu items and article content.\nNote: The rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack. Emoji replacements are automatic throughout Blowfish, so you can use shorthand codes in your content and front matter and they will be converted to their corresponding symbols at build time.\nExample: see_no_evil 🙈, hear_no_evil 🙉, speak_no_evil 🙊.\nThe Emoji cheat sheet is a useful reference for emoji shorthand codes.\n","date":"5 March 2019","permalink":"/blowfish/samples/emoji/","section":"Content Samples","summary":"📖🏞️🧗🏽🐉🧙🏽♂️🧚🏽👸","title":"Emoji 🪂"},{"content":"","date":"1 January 0001","permalink":"/blowfish/categories/","section":"Categories","summary":"","title":"Categories"}]
\ No newline at end of file
diff --git a/docs/samples/charts/index.html b/docs/samples/charts/index.html
index e91b22545..297ae83f2 100644
--- a/docs/samples/charts/index.html
+++ b/docs/samples/charts/index.html
@@ -26,10 +26,10 @@
chart
sample
graph
-shortcodes
