Correct documentation - profile is the default view

This commit is contained in:
Nuno Coração committed 2022-09-30 22:52:56 +01:00
1 parent eff617159d
commit e4583e73a1
5 files changed
+24 -22

No files matched your search

+6 -6
View File
@@ -2,7 +2,7 @@
<script type=text/javascript src=/blowfish/js/appearance.min.f94f4c4636d9e3ec8f5ee53cdc8ffa3d01bf87cd92ac85e6797550b1e2b80dc9118d838f3eb24c55109352455e72ff082dfe560283154e5a8f87fd75107b59c4.js integrity="sha512-+U9MRjbZ4+yPXuU83I/6PQG/h82SrIXmeXVQseK4DckRjYOPPrJMVRCTUkVecv8ILf5WAoMVTlqPh/11EHtZxA=="></script>
<script defer type=text/javascript id=script-bundle src=/blowfish/js/main.bundle.min.d535b8b104fbf5cdc592bf3729c592b7de370787e7d3d703691adbd733f84fc4427cafa8ab6f59ad6d01670bd2033f569322fa915928bfef4bd07f34cedd516b.js integrity="sha512-1TW4sQT79c3Fkr83KcWSt943B4fn09cDaRrb1zP4T8RCfK+oq29ZrW0BZwvSAz9WkyL6kVkov+9L0H80zt1Raw==" data-copy data-copied></script>
<script src=/js/zoom.min.js></script>
<link rel=apple-touch-icon sizes=180x180 href=/blowfish/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/blowfish/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/blowfish/favicon-16x16.png><link rel=manifest href=/blowfish/site.webmanifest><meta property="og:title" content="Homepage Layout"><meta property="og:description" content="Configuring the homepage layout in the Blowfish theme."><meta property="og:type" content="article"><meta property="og:url" content="https://nunocoracao.github.io/blowfish/docs/homepage-layout/"><meta property="article:section" content="docs"><meta property="article:published_time" content="2020-08-13T00:00:00+00:00"><meta property="article:modified_time" content="2020-08-13T00:00:00+00:00"><meta property="og:site_name" content="Blowfish"><meta name=twitter:card content="summary"><meta name=twitter:title content="Homepage Layout"><meta name=twitter:description content="Configuring the homepage layout in the Blowfish theme."><script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Homepage Layout","headline":"Homepage Layout","description":"Configuring the homepage layout in the Blowfish theme.","abstract":"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.","inLanguage":"en","url":"https:\/\/nunocoracao.github.io\/blowfish\/docs\/homepage-layout\/","author":{"@type":"Person","name":"Blowfish"},"copyrightYear":"2020","dateCreated":"2020-08-13T00:00:00\u002b00:00","datePublished":"2020-08-13T00:00:00\u002b00:00","dateModified":"2020-08-13T00:00:00\u002b00:00","keywords":["homepage","layouts","docs"],"mainEntityOfPage":"true","wordCount":"577"}]</script><meta name=author content="Blowfish"><link href=https://twitter.com/burufugu rel=me><link href=https://github.com/nunocoracao/blowfish rel=me><script async src="https://www.googletagmanager.com/gtag/js?id=G-PEDMYR1V0K"></script>
<link rel=apple-touch-icon sizes=180x180 href=/blowfish/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/blowfish/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/blowfish/favicon-16x16.png><link rel=manifest href=/blowfish/site.webmanifest><meta property="og:title" content="Homepage Layout"><meta property="og:description" content="Configuring the homepage layout in the Blowfish theme."><meta property="og:type" content="article"><meta property="og:url" content="https://nunocoracao.github.io/blowfish/docs/homepage-layout/"><meta property="article:section" content="docs"><meta property="article:published_time" content="2020-08-13T00:00:00+00:00"><meta property="article:modified_time" content="2020-08-13T00:00:00+00:00"><meta property="og:site_name" content="Blowfish"><meta name=twitter:card content="summary"><meta name=twitter:title content="Homepage Layout"><meta name=twitter:description content="Configuring the homepage layout in the Blowfish theme."><script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Homepage Layout","headline":"Homepage Layout","description":"Configuring the homepage layout in the Blowfish theme.","abstract":"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.","inLanguage":"en","url":"https:\/\/nunocoracao.github.io\/blowfish\/docs\/homepage-layout\/","author":{"@type":"Person","name":"Blowfish"},"copyrightYear":"2020","dateCreated":"2020-08-13T00:00:00\u002b00:00","datePublished":"2020-08-13T00:00:00\u002b00:00","dateModified":"2020-08-13T00:00:00\u002b00:00","keywords":["homepage","layouts","docs"],"mainEntityOfPage":"true","wordCount":"578"}]</script><meta name=author content="Blowfish"><link href=https://twitter.com/burufugu rel=me><link href=https://github.com/nunocoracao/blowfish rel=me><script async src="https://www.googletagmanager.com/gtag/js?id=G-PEDMYR1V0K"></script>
<script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-PEDMYR1V0K",{anonymize_ip:!1})}</script><link rel=stylesheet href=https://rsms.me/inter/inter.css><script src=https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js></script>
<script src=https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js></script>
<script src=https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js></script>
@@ -25,13 +25,13 @@ Like</button>
</span><span class="px-2 text-primary-500">&#183;</span>
<span class=mb-[2px]><a href=https://github.com/nunocoracao/blowfish/tree/main/exampleSite/content/docs/homepage-layout/index.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></svg></span></a></span><span class=pl-2 onclick='window.open("/blowfish/tags/homepage/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">homepage</span></span></span>
<span class=pl-2 onclick='window.open("/blowfish/tags/layouts/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">layouts</span></span></span>
<span class=pl-2 onclick='window.open("/blowfish/tags/docs/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">docs</span></span></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#page-layout>Page layout</a></li><li><a href=#profile-layout>Profile layout</a></li><li><a href=#custom-layout>Custom layout</a></li><li><a href=#recent-articles>Recent articles</a></li><li><a href=#thumbnails>Thumbnails</a></li></ul></nav></div></details></div></div><div class="min-w-0 min-h-0 max-w-prose"><p>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.</p><p>The layout of the homepage is controlled by the <code>homepage.layout</code> setting in the <code>params.toml</code> configuration file. Additionally, all layouts have the option to include a listing of <a href=#recent-articles>recent articles</a>.</p><h2 id=page-layout class="relative group">Page layout <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#page-layout aria-label=Anchor>#</a></span></h2><p>The default layout is the page layout. It&rsquo;s simply a normal content page that displays your Markdown content. It&rsquo;s great for static websites and provides a lot of flexibility.</p><p><figure><img class="my-0 rounded-md" srcset="/blowfish/docs/homepage-layout/home-page_hu697c4a691a2b81db73661ce0d3a284f3_3417958_330x0_resize_box_3.png 330w,
/blowfish/docs/homepage-layout/home-page_hu697c4a691a2b81db73661ce0d3a284f3_3417958_660x0_resize_box_3.png 660w,
/blowfish/docs/homepage-layout/home-page_hu697c4a691a2b81db73661ce0d3a284f3_3417958_1024x0_resize_box_3.png 1024w,
/blowfish/docs/homepage-layout/home-page_hu697c4a691a2b81db73661ce0d3a284f3_3417958_1320x0_resize_box_3.png 2x" src=/blowfish/docs/homepage-layout/home-page_hu697c4a691a2b81db73661ce0d3a284f3_3417958_660x0_resize_box_3.png alt="Screenshot of homepage layout"></figure></p><p>To enable the page layout, set <code>homepage.layout = "page"</code> in the <code>params.toml</code> configuration file.</p><h2 id=profile-layout class="relative group">Profile layout <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#profile-layout aria-label=Anchor>#</a></span></h2><p>The profile layout is great for personal websites and blogs. It puts the author&rsquo;s details front and centre by providing an image and links to social profiles.</p><p><figure><img class="my-0 rounded-md" srcset="/blowfish/docs/homepage-layout/home-profile_hu7664fb743c3b22435143aad6e7b2ab22_1498646_330x0_resize_box_3.png 330w,
<span class=pl-2 onclick='window.open("/blowfish/tags/docs/")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">docs</span></span></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#profile-layout>Profile layout</a></li><li><a href=#page-layout>Page layout</a></li><li><a href=#custom-layout>Custom layout</a></li><li><a href=#recent-articles>Recent articles</a></li><li><a href=#thumbnails>Thumbnails</a></li></ul></nav></div></details></div></div><div class="min-w-0 min-h-0 max-w-prose"><p>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.</p><p>The layout of the homepage is controlled by the <code>homepage.layout</code> setting in the <code>params.toml</code> configuration file. Additionally, all layouts have the option to include a listing of <a href=#recent-articles>recent articles</a>.</p><h2 id=profile-layout class="relative group">Profile layout <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#profile-layout aria-label=Anchor>#</a></span></h2><p>The default layout is the profile layout, which is great for personal websites and blogs. It puts the author&rsquo;s details front and centre by providing an image and links to social profiles.</p><p><figure><img class="my-0 rounded-md" srcset="/blowfish/docs/homepage-layout/home-profile_hu7664fb743c3b22435143aad6e7b2ab22_1498646_330x0_resize_box_3.png 330w,
/blowfish/docs/homepage-layout/home-profile_hu7664fb743c3b22435143aad6e7b2ab22_1498646_660x0_resize_box_3.png 660w,
/blowfish/docs/homepage-layout/home-profile_hu7664fb743c3b22435143aad6e7b2ab22_1498646_1024x0_resize_box_3.png 1024w,
/blowfish/docs/homepage-layout/home-profile_hu7664fb743c3b22435143aad6e7b2ab22_1498646_1320x0_resize_box_3.png 2x" src=/blowfish/docs/homepage-layout/home-profile_hu7664fb743c3b22435143aad6e7b2ab22_1498646_660x0_resize_box_3.png alt="Screenshot of profile layout"></figure></p><p>The author information is provided in the languages configuration file. Refer to the <a href=https://nunocoracao.github.io/blowfish/docs/getting-started/>Getting Started</a> and <a href=https://nunocoracao.github.io/blowfish/docs/configuration/##language-and-i18n>Language Configuration</a> sections for parameter details.</p><p>Additionally, 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.</p><p>To enable the profile layout, set <code>homepage.layout = "profile"</code> in the <code>params.toml</code> configuration file.</p><h2 id=custom-layout class="relative group">Custom layout <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#custom-layout aria-label=Anchor>#</a></span></h2><p>If the built-in homepage layouts aren&rsquo;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.</p><p>To enable the custom layout, set <code>homepage.layout = "custom"</code> in the <code>params.toml</code> configuration file.</p><p>With the configuration value set, create a new <code>custom.html</code> file and place it in <code>layouts/partials/home/custom.html</code>. Now whatever is in the <code>custom.html</code> 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.</p><p>To include <a href=#recent-articles>recent articles</a> on the custom layout, use the <code>recent-articles.html</code> partial.</p><p>As an example, the <a href=https://nunocoracao.github.io/blowfish/>homepage</a> on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the <a href=https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html>GitHub repo</a> to see how it works.</p><h2 id=recent-articles class="relative group">Recent articles <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#recent-articles aria-label=Anchor>#</a></span></h2><p>All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the <code>homepage.showRecent</code> setting to <code>true</code> in the <code>params.toml</code> configuration file.</p><p><figure><img class="my-0 rounded-md" srcset="/blowfish/docs/homepage-layout/home-profile-list_hu9f2805f57509e02a6a38c83d2d506bab_2146991_330x0_resize_box_3.png 330w,
/blowfish/docs/homepage-layout/home-profile_hu7664fb743c3b22435143aad6e7b2ab22_1498646_1320x0_resize_box_3.png 2x" src=/blowfish/docs/homepage-layout/home-profile_hu7664fb743c3b22435143aad6e7b2ab22_1498646_660x0_resize_box_3.png alt="Screenshot of profile layout"></figure></p><p>The author information is provided in the languages configuration file. Refer to the <a href=https://nunocoracao.github.io/blowfish/docs/getting-started/>Getting Started</a> and <a href=https://nunocoracao.github.io/blowfish/docs/configuration/##language-and-i18n>Language Configuration</a> sections for parameter details.</p><p>Additionally, 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.</p><p>To enable the profile layout, set <code>homepage.layout = "profile"</code> in the <code>params.toml</code> configuration file.</p><h2 id=page-layout class="relative group">Page layout <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#page-layout aria-label=Anchor>#</a></span></h2><p>The page layout is simply a normal content page that displays your Markdown content. It&rsquo;s great for static websites and provides a lot of flexibility.</p><p><figure><img class="my-0 rounded-md" srcset="/blowfish/docs/homepage-layout/home-page_hu697c4a691a2b81db73661ce0d3a284f3_3417958_330x0_resize_box_3.png 330w,
/blowfish/docs/homepage-layout/home-page_hu697c4a691a2b81db73661ce0d3a284f3_3417958_660x0_resize_box_3.png 660w,
/blowfish/docs/homepage-layout/home-page_hu697c4a691a2b81db73661ce0d3a284f3_3417958_1024x0_resize_box_3.png 1024w,
/blowfish/docs/homepage-layout/home-page_hu697c4a691a2b81db73661ce0d3a284f3_3417958_1320x0_resize_box_3.png 2x" src=/blowfish/docs/homepage-layout/home-page_hu697c4a691a2b81db73661ce0d3a284f3_3417958_660x0_resize_box_3.png alt="Screenshot of homepage layout"></figure></p><p>To enable the page layout, set <code>homepage.layout = "page"</code> in the <code>params.toml</code> configuration file.</p><h2 id=custom-layout class="relative group">Custom layout <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#custom-layout aria-label=Anchor>#</a></span></h2><p>If the built-in homepage layouts aren&rsquo;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.</p><p>To enable the custom layout, set <code>homepage.layout = "custom"</code> in the <code>params.toml</code> configuration file.</p><p>With the configuration value set, create a new <code>custom.html</code> file and place it in <code>layouts/partials/home/custom.html</code>. Now whatever is in the <code>custom.html</code> 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.</p><p>To include <a href=#recent-articles>recent articles</a> on the custom layout, use the <code>recent-articles.html</code> partial.</p><p>As an example, the <a href=https://nunocoracao.github.io/blowfish/>homepage</a> on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the <a href=https://github.com/nunocoracao/blowfish/blob/main/exampleSite/layouts/partials/home/custom.html>GitHub repo</a> to see how it works.</p><h2 id=recent-articles class="relative group">Recent articles <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#recent-articles aria-label=Anchor>#</a></span></h2><p>All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the <code>homepage.showRecent</code> setting to <code>true</code> in the <code>params.toml</code> configuration file.</p><p><figure><img class="my-0 rounded-md" srcset="/blowfish/docs/homepage-layout/home-profile-list_hu9f2805f57509e02a6a38c83d2d506bab_2146991_330x0_resize_box_3.png 330w,
/blowfish/docs/homepage-layout/home-profile-list_hu9f2805f57509e02a6a38c83d2d506bab_2146991_660x0_resize_box_3.png 660w,
/blowfish/docs/homepage-layout/home-profile-list_hu9f2805f57509e02a6a38c83d2d506bab_2146991_1024x0_resize_box_3.png 1024w,
/blowfish/docs/homepage-layout/home-profile-list_hu9f2805f57509e02a6a38c83d2d506bab_2146991_1320x0_resize_box_3.png 2x" src=/blowfish/docs/homepage-layout/home-profile-list_hu9f2805f57509e02a6a38c83d2d506bab_2146991_660x0_resize_box_3.png alt="Profile layout with recent articles"></figure></p><p>The articles listed in this section are derived from the <code>mainSections</code> setting which allows for whatever content types you are using on your website. For instance, if you had content sections for <em>posts</em> and <em>projects</em> you could set this setting to <code>["posts", "projects"]</code> 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: <code>["blog"]</code>.</p><h2 id=thumbnails class="relative group">Thumbnails <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#thumbnails aria-label=Anchor>#</a></span></h2><p>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 <code>.png</code> or <code>.jpg</code>) that starts with <code>feature*</code> inside your article folder. And that&rsquo;s it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target=_blank href=https://oembed.com/>oEmbed</a> cards across social platforms.</p><p><a href=https://nunocoracao.github.io/blowfish/docs/thumbnails/>Here</a> is also a guide with more info and a <a href=https://nunocoracao.github.io/blowfish/samples/thumbnail_sample/>sample</a> if you want to see how you can do it.</p></div><script>var liked_article=!1,oid,id,viewed,oid_likes,id_likes,liked;typeof auth!="undefined"&&(oid="views_docs/homepage-layout/index.md",id=oid&&oid.replaceAll("/","-"),viewed=localStorage.getItem(id),viewed||auth.signInAnonymously().then(()=>{var e=db.collection("views").doc(id);localStorage.setItem(id,!0),e.get().then(e=>{e.exists?db.collection("views").doc(id).update({views:firebase.firestore.FieldValue.increment(1)}):db.collection("views").doc(id).set({views:1})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{var t=e.code,n=e.message;console.error(t,n)}),oid_likes="likes_docs/homepage-layout/index.md",id_likes=oid_likes&&oid_likes.replaceAll("/","-"),liked=localStorage.getItem(id_likes),liked&&(liked_article=!0,document.querySelectorAll("button[id='likes_button']")[0].innerText="Remove Like"));function like_article(e){console.log("add"),liked_article=!0,localStorage.setItem(e,!0),document.querySelectorAll("button[id='likes_button']")[0].innerText="Remove Like",auth.signInAnonymously().then(()=>{var t=db.collection("likes").doc(e);t.get().then(t=>{t.exists?db.collection("likes").doc(e).update({likes:firebase.firestore.FieldValue.increment(1)}):db.collection("likes").doc(e).set({likes:1})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{var t=e.code,n=e.message;console.error(t,n)})}function remove_like_article(e){console.log("remove"),liked_article=!1,localStorage.setItem(e,!1),document.querySelectorAll("button[id='likes_button']")[0].innerText="Like",auth.signInAnonymously().then(()=>{var t=db.collection("likes").doc(e);t.get().then(t=>{t.exists?db.collection("likes").doc(e).update({likes:firebase.firestore.FieldValue.increment(-1)}):db.collection("likes").doc(e).set({likes:0})}).catch(e=>{console.log("Error getting document:",e)})}).catch(e=>{var t=e.code,n=e.message;console.error(t,n)})}function process_article(){var e="likes_docs/homepage-layout/index.md",t=e&&e.replaceAll("/","-");liked_article?remove_like_article(t):like_article(t)}</script></section><footer class="pt-8 max-w-prose print:hidden"><section class="flex flex-row flex-wrap justify-center pt-4 text-xl"><a class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800" href="https://www.linkedin.com/shareArticle?mini=true&url=https://nunocoracao.github.io/blowfish/docs/homepage-layout/&title=Homepage%20Layout" title="Share on LinkedIn" aria-label="Share on LinkedIn"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentcolor" d="M416 32H31.9C14.3 32 0 46.5.0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6.0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3.0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2.0 38.5 17.3 38.5 38.5.0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-5Line truncated
+2 -2
View File
@@ -54,8 +54,8 @@ Like</button>
</span></span><span class=line><span class=cl> <span class=p>}]</span>
</span></span><span class=line><span class=cl><span class=p>}</span>
</span></span><span class=line><span class=cl><span class=p>{{</span><span class=o>&lt;</span> <span class=err>/chart &gt;}}</span>
</span></span></code></pre></div><div class=chart><canvas id=467395812></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("467395812"),n=new Chart(t,{type:"bar",data:{labels:["Tomato","Blueberry","Banana","Lime","Orange"],datasets:[{label:"# of votes",data:[12,19,3,5,3]}]}})})</script></div><p>You can see some additional Chart.js examples on the <a href=https://nunocoracao.github.io/blowfish/samples/charts/>charts samples</a> page.</p><h2 id=figure class="relative group">Figure <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#figure aria-label=Anchor>#</a></span></h2><p>Blowfish includes a <code>figure</code> shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.</p><p>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.</p><p>The <code>figure</code> shortcode accepts six parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>src</code></td><td><strong>Required.</strong> 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 <a href=https://gohugo.io/content-management/page-resources/>page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</td></tr><tr><td><code>alt</code></td><td><a href=https://moz.com/learn/seo/alt-text>Alternative text description</a> for the image.</td></tr><tr><td><code>caption</code></td><td>Markdown for the image caption, which will be displayed below the image.</td></tr><tr><td><code>class</code></td><td>Additional CSS classes to apply to the image.</td></tr><tr><td><code>href</code></td><td>URL that the image should be linked to.</td></tr><tr><td><code>default</code></td><td>Special parameter to revert to default Hugo <code>figure</code> behaviour. Simply provide <code>default=true</code> and then use normal <a href=https://gohugo.io/content-management/shortcodes/#figure>Hugo shortcode syntax</a>.</td></tr></tbody></table><p>Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>)
</span></span></code></pre></div><div class=chart><canvas id=761349258></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("761349258"),n=new Chart(t,{type:"bar",data:{labels:["Tomato","Blueberry","Banana","Lime","Orange"],datasets:[{label:"# of votes",data:[12,19,3,5,3]}]}})})</script></div><p>You can see some additional Chart.js examples on the <a href=https://nunocoracao.github.io/blowfish/samples/charts/>charts samples</a> page.</p><h2 id=figure class="relative group">Figure <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#figure aria-label=Anchor>#</a></span></h2><p>Blowfish includes a <code>figure</code> shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.</p><p>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.</p><p>The <code>figure</code> shortcode accepts six parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>src</code></td><td><strong>Required.</strong> 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 <a href=https://gohugo.io/content-management/page-resources/>page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</td></tr><tr><td><code>alt</code></td><td><a href=https://moz.com/learn/seo/alt-text>Alternative text description</a> for the image.</td></tr><tr><td><code>caption</code></td><td>Markdown for the image caption, which will be displayed below the image.</td></tr><tr><td><code>class</code></td><td>Additional CSS classes to apply to the image.</td></tr><tr><td><code>href</code></td><td>URL that the image should be linked to.</td></tr><tr><td><code>default</code></td><td>Special parameter to revert to default Hugo <code>figure</code> behaviour. Simply provide <code>default=true</code> and then use normal <a href=https://gohugo.io/content-management/shortcodes/#figure>Hugo shortcode syntax</a>.</td></tr></tbody></table><p>Blowfish also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>)
</span></span></code></pre></div><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>figure</span>
</span></span><span class=line><span class=cl> <span class=na>src</span><span class=o>=</span><span class=s>&#34;abstract.jpg&#34;</span>
</span></span><span class=line><span class=cl> <span class=na>alt</span><span class=o>=</span><span class=s>&#34;Abstract purple artwork&#34;</span>