[{"content":" We\u0026rsquo;ll be using yml/yaml format for all examples down below, it is recommend to use yaml over toml as it is easier to read. You can find any YML to TOML converters if needed. Getting Started 🚀 Follow Hugo Docs\u0026rsquo;s - Quick Start guide to install . (Make sure you install Hugo \u0026gt;= v0.112.4)\nCreate a new site\nhugo new site MyFreshWebsite --format yaml # replace MyFreshWebsite with name of your website Note:\nOlder versions of Hugo may not support --format yaml Read more here about Hugo Docs\u0026rsquo;s - hugo new site command After you have created a new site, follow the below steps to add PaperMod\nInstalling/Updating PaperMod Themes reside in MyFreshWebsite/themes directory. PaperMod will be installed in MyFreshWebsite/themes/PaperMod Expand Method 1 - Git Clone INSTALL : Inside the folder of your Hugo site MyFreshWebsite, run:\ngit clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1 You may use --branch v7.0 to end of above command if you want to stick to specific release.\nUPDATE: Inside the folder of your Hugo site MyFreshWebsite, run:\ncd themes/PaperMod git pull Expand Method 2 - Git Submodule (recomended) INSTALL : Inside the folder of your Hugo site MyFreshWebsite, run:\ngit submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically) You may use --branch v7.0 to end of above command if you want to stick to specific release. Read more about git submodules here.\nUPDATE: Inside the folder of your Hugo site MyFreshWebsite, run:\ngit submodule update --remote --merge Expand Method 3 - Download an unzip Download PaperMod source as Zip from Github Releases and extract in your themes directory at MyFreshWebsite/themes/PaperMod\nDirect Links:\nMaster Branch (Latest) v7.0 v6.0 v5.0 v4.0 v3.0 v2.0 v1.0 Expand Method 4 - Hugo module INSTALL :\nInstall Go programming language in your operating system.\nIntialize your own hugo mod\nhugo mod init YOUR_OWN_GIT_REPOSITORY Add PaperMod in your config.yml file 1 2 3 module: imports: - path: github.com/adityatelange/hugo-PaperMod UPDATE:\nhugo mod get -u Read more : Hugo Docs\u0026rsquo;s - HUGO MODULES\nFinally set theme as PaperMod in your site config In config.yml add:\n1 theme: [\u0026#34;PaperMod\u0026#34;] Next up - Customizing PaperMod to suit your preferences. Your site will be blank after you set up for the very first time. You may go through this website\u0026rsquo;s source code - PaperMod\u0026rsquo;s exampleSite\u0026rsquo;s source Scroll below this page where you will find more specific details about each section. Kindly go through all of the pages below to know how to configure PaperMod. Support 🫶 Star 🌟 PaperMod\u0026rsquo;s Github repository. Help spread the word about PaperMod by sharing it on social media and recommending it to your friends. 🗣️ You can also sponsor 🏅 on Github Sponsors / Ko-Fi. Videos featuring PaperMod You can go through few videos which are available on YouTube for getting to know the creator\u0026rsquo;s thoughts as well as the setup process.\n▶️ https://youtube.com/playlist?list=PLeiDFxcsdhUrzkK5Jg9IZyiTsIMvXxKZP\nQuick Links Papermod - Features Papermod - FAQs Papermod - Variables Papermod - Icons ChangeLog Sample config.yml Example Site Structure is present here: exampleSite\nUse appropriately\nbaseURL: \u0026#34;https://examplesite.com/\u0026#34; title: ExampleSite paginate: 5 theme: PaperMod enableRobotsTXT: true buildDrafts: false buildFuture: false buildExpired: false googleAnalytics: UA-123-45 minify: disableXML: true minifyOutput: true params: env: production # to enable google analytics, opengraph, twitter-cards and schema. title: ExampleSite description: \u0026#34;ExampleSite description\u0026#34; keywords: [Blog, Portfolio, PaperMod] author: Me # author: [\u0026#34;Me\u0026#34;, \u0026#34;You\u0026#34;] # multiple authors images: [\u0026#34;\u0026lt;link or path of image for opengraph, twitter-cards\u0026gt;\u0026#34;] DateFormat: \u0026#34;January 2, 2006\u0026#34; defaultTheme: auto # dark, light disableThemeToggle: false ShowReadingTime: true ShowShareButtons: true ShowPostNavLinks: true ShowBreadCrumbs: true ShowCodeCopyButtons: false ShowWordCount: true ShowRssButtonInSectionTermList: true UseHugoToc: true disableSpecial1stPost: false disableScrollToTop: false comments: false hidemeta: false hideSummary: false showtoc: false tocopen: false assets: # disableHLJS: true # to disable highlight.js # disableFingerprinting: true favicon: \u0026#34;\u0026lt;link / abs url\u0026gt;\u0026#34; favicon16x16: \u0026#34;\u0026lt;link / abs url\u0026gt;\u0026#34; favicon32x32: \u0026#34;\u0026lt;link / abs url\u0026gt;\u0026#34; apple_touch_icon: \u0026#34;\u0026lt;link / abs url\u0026gt;\u0026#34; safari_pinned_tab: \u0026#34;\u0026lt;link / abs url\u0026gt;\u0026#34; label: text: \u0026#34;Home\u0026#34; icon: /apple-touch-icon.png iconHeight: 35 # profile-mode profileMode: enabled: false # needs to be explicitly set title: ExampleSite subtitle: \u0026#34;This is subtitle\u0026#34; imageUrl: \u0026#34;\u0026lt;img location\u0026gt;\u0026#34; imageWidth: 120 imageHeight: 120 imageTitle: my image buttons: - name: Posts url: posts - name: Tags url: tags # home-info mode homeInfoParams: Title: \u0026#34;Hi there \\U0001F44B\u0026#34; Content: Welcome to my blog socialIcons: - name: x url: \u0026#34;https://x.com/\u0026#34; - name: stackoverflow url: \u0026#34;https://stackoverflow.com\u0026#34; - name: github url: \u0026#34;https://github.com/\u0026#34; analytics: google: SiteVerificationTag: \u0026#34;XYZabc\u0026#34; bing: SiteVerificationTag: \u0026#34;XYZabc\u0026#34; yandex: SiteVerificationTag: \u0026#34;XYZabc\u0026#34; cover: hidden: true # hide everywhere but not in structured data hiddenInList: true # hide on list pages and home hiddenInSingle: true # hide on single page editPost: URL: \u0026#34;https://github.com/\u0026lt;path_to_repo\u0026gt;/content\u0026#34; Text: \u0026#34;Suggest Changes\u0026#34; # edit text appendFilePath: true # to append file path to Edit link # for search # https://fusejs.io/api/options.html fuseOpts: isCaseSensitive: false shouldSort: true location: 0 distance: 1000 threshold: 0.4 minMatchCharLength: 0 limit: 10 # refer: https://www.fusejs.io/api/methods.html#search keys: [\u0026#34;title\u0026#34;, \u0026#34;permalink\u0026#34;, \u0026#34;summary\u0026#34;, \u0026#34;content\u0026#34;] menu: main: - identifier: categories name: categories url: /categories/ weight: 10 - identifier: tags name: tags url: /tags/ weight: 20 - identifier: example name: example.org url: https://example.org weight: 30 # Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma pygmentsUseClasses: true markup: highlight: noClasses: false # anchorLineNos: true # codeFences: true # guessSyntax: true # lineNos: true # style: monokai Sample Page.md --- title: \u0026#34;My 1st post\u0026#34; date: 2020-09-15T11:30:03+00:00 # weight: 1 # aliases: [\u0026#34;/first\u0026#34;] tags: [\u0026#34;first\u0026#34;] author: \u0026#34;Me\u0026#34; # author: [\u0026#34;Me\u0026#34;, \u0026#34;You\u0026#34;] # multiple authors showToc: true TocOpen: false draft: false hidemeta: false comments: false description: \u0026#34;Desc Text.\u0026#34; canonicalURL: \u0026#34;https://canonical.url/to/page\u0026#34; disableHLJS: true # to disable highlightjs disableShare: false disableHLJS: false hideSummary: false searchHidden: true ShowReadingTime: true ShowBreadCrumbs: true ShowPostNavLinks: true ShowWordCount: true ShowRssButtonInSectionTermList: true UseHugoToc: true cover: image: \u0026#34;\u0026lt;image path/url\u0026gt;\u0026#34; # image path/url alt: \u0026#34;\u0026lt;alt text\u0026gt;\u0026#34; # alt text caption: \u0026#34;\u0026lt;text\u0026gt;\u0026#34; # display caption under cover relative: false # when using page bundles set this to true hidden: true # only hide on current single page editPost: URL: \u0026#34;https://github.com/\u0026lt;path_to_repo\u0026gt;/content\u0026#34; Text: \u0026#34;Suggest Changes\u0026#34; # edit text appendFilePath: true # to append file path to Edit link --- You can use it by creating archetypes/post.md\nhugo new --kind post \u0026lt;name\u0026gt; ","permalink":"https://sakthongchanthavong.gitlab.io/posts/papermod/papermod-installation/","summary":"Read aboout Install and Update instructions and sampled configuration templates","title":"Install / Update PaperMod"},{"content":"Intro We\u0026rsquo;ll be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read.\nYou can find any YML to TOML converters if necessary.\nAssets (js/css) The following is enabled by default\nminification - makes the assets size smallest as possible. bundling - bundles all the styles in one single asset fingerprint/intergity check. Default Theme light/dark/auto 1 2 3 4 params: # defaultTheme: light # defaultTheme: dark defaultTheme: auto # to switch between dark or light according to browser theme Theme Switch Toggle (enabled by default) Shows icon besides title of page to change theme\nTo disable it :\n1 disableThemeToggle: true You can refer following table for better understanding\u0026hellip;\ndefaultTheme disableThemeToggle checks local storage? checks system theme? Info auto true No Yes only system theme false Yes (if not-\u0026gt;2) Yes (2) switch present dark true No No force dark only false Yes No switch present light true No No force light only false Yes No switch present Archives Layout Create a page with archive.md in content directory with following content\n. ├── config.yml ├── content/ │ ├── archives.md \u0026lt;--- Create archive.md here │ └── posts/ ├── static/ └── themes/ └── PaperMod/ and add the following to it\n--- title: \u0026#34;Archive\u0026#34; layout: \u0026#34;archives\u0026#34; url: \u0026#34;/archives/\u0026#34; summary: archives --- Note: Archives Layout does not support Multilingual Month Translations.\nex: archives.md\nRegular Mode (default-mode) Home-Info Mode Use 1st entry as some Information\nadd following to config file\nparams: homeInfoParams: Title: Hi there wave Content: Can be Info, links, about... socialIcons: # optional - name: \u0026#34;\u0026lt;platform\u0026gt;\u0026#34; url: \u0026#34;\u0026lt;link\u0026gt;\u0026#34; - name: \u0026#34;\u0026lt;platform 2\u0026gt;\u0026#34; url: \u0026#34;\u0026lt;link2\u0026gt;\u0026#34; Profile Mode Shows Index/Home page as Full Page with Social Links and Image\nadd following to config file\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 params: profileMode: enabled: true title: \u0026#34;\u0026lt;Title\u0026gt;\u0026#34; # optional default will be site title subtitle: \u0026#34;This is subtitle\u0026#34; imageUrl: \u0026#34;\u0026lt;image link\u0026gt;\u0026#34; # optional imageTitle: \u0026#34;\u0026lt;title of image as alt\u0026gt;\u0026#34; # optional imageWidth: 120 # custom size imageHeight: 120 # custom size buttons: - name: Archive url: \u0026#34;/archive\u0026#34; - name: Github url: \u0026#34;https://github.com/\u0026#34; socialIcons: # optional - name: \u0026#34;\u0026lt;platform\u0026gt;\u0026#34; url: \u0026#34;\u0026lt;link\u0026gt;\u0026#34; - name: \u0026#34;\u0026lt;platform 2\u0026gt;\u0026#34; url: \u0026#34;\u0026lt;link2\u0026gt;\u0026#34; Search Page PaperMod uses Fuse.js Basic for search functionality\nAdd the following to site config, config.yml\n1 2 3 4 5 outputs: home: - HTML - RSS - JSON # necessary for search Create a page with search.md in content directory with following content\n1 2 3 4 5 6 7 8 --- title: \u0026#34;Search\u0026#34; # in any language you want layout: \u0026#34;search\u0026#34; # necessary for search # url: \u0026#34;/archive\u0026#34; # description: \u0026#34;Description for Search\u0026#34; summary: \u0026#34;search\u0026#34; placeholder: \u0026#34;placeholder text in search input box\u0026#34; --- To hide a particular page from being searched, add it in post\u0026rsquo;s frontmatter\n1 searchHidden: true ex: search.md\nSearch Page also has Key bindings:\nArrow keys to move up/down the list Enter key (return) or Right Arrow key to go to the highlighted page Escape key to clear searchbox and results For Multilingual use search.\u0026lt;lang\u0026gt;.md ex. search.es.md.\nNote: Search will work only on current language, user is currently on !\nCustomizing Fusejs Options\nRefer https://fusejs.io/api/options.html for Options, Add those as shown below.\n1 2 3 4 5 6 7 8 9 10 params: fuseOpts: isCaseSensitive: false shouldSort: true location: 0 distance: 1000 threshold: 0.4 minMatchCharLength: 0 # limit: 10 # refer: https://www.fusejs.io/api/methods.html#search keys: [\u0026#34;title\u0026#34;, \u0026#34;permalink\u0026#34;, \u0026#34;summary\u0026#34;, \u0026#34;content\u0026#34;] Draft Page indication adds [draft] mark to indicate draft pages.\nPost Cover Image In post\u0026rsquo;s page-variables add :\n1 2 3 4 5 6 7 cover: image: \u0026#34;\u0026lt;image path/url\u0026gt;\u0026#34; # can also paste direct link from external site # ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png alt: \u0026#34;\u0026lt;alt text\u0026gt;\u0026#34; caption: \u0026#34;\u0026lt;text\u0026gt;\u0026#34; relative: false # To use relative path for cover image, used in hugo Page-bundles When you include images in the Page Bundle, multiple sizes of the image will automatically be provided using the HTML5 srcset field.\nTo reduce generation time and size of the site, you can disable this feature using\n1 2 3 params: cover: responsiveImages: false To enable hyperlinks to the full image size on post pages, use\n1 2 3 params: cover: linkFullImages: true Share Buttons on post Displays Share Buttons at Bottom of each post\nto show share buttons add\nparams: ShowShareButtons: true Show post reading time Displays Reading Time (the estimated time, in minutes, it takes to read the content.)\nTo show reading time add\nParams: ShowReadingTime: true Show Table of Contents (Toc) on blog post Displays ToC on blog-pages\nTo show ToC add following to page-variables\nShowToc: true To keep Toc Open by default on a post add following to page-variables:\nTocOpen: true BreadCrumb Navigation Adds BreadCrumb Navigation above Post\u0026rsquo;s Title to show subsections and Navigation to Home\nparams: ShowBreadCrumbs: true Can be diabled for particular page\u0026rsquo;s front-matter\n--- ShowBreadCrumbs: false --- Edit Link for Posts Add a button to suggest changes by using the file path of the post to link to a edit destination.\nFor site config use:\nParams: editPost: URL: \u0026#34;https://github.com/\u0026lt;path_to_repo\u0026gt;/content\u0026#34; Text: \u0026#34;Suggest Changes\u0026#34; # edit text appendFilePath: true # to append file path to Edit link Can be modified for individual pages\n--- editPost: URL: \u0026#34;https://github.com/\u0026lt;path_to_repo\u0026gt;/content\u0026#34; Text: \u0026#34;Suggest Changes\u0026#34; # edit text appendFilePath: true # to append file path to Edit link --- The example above would yield the following link for the post file posts/post-name.md: https://github.com/\u0026lt;path_to_repo\u0026gt;/content/posts/post-name.md\nParameter Required Default Value editPost.URL true - editPost.appendFilePath false false editPost.Text false Edit Since the link generated is a regular HTML anchor tag \u0026lt;a href=...\u0026gt;, you can also use other URL schemas like mailto://, e.g. URL: \u0026quot;mailto://mail@example.com?subject=Suggesting changes for \u0026quot;\nOther Posts suggestion below a post Adds a Previous / Next post suggestion under a single post\nparams: ShowPostNavLinks: true Code Copy Button Adds a copy button in code block to copy the code it contains\nparams: ShowCodeCopyButtons: true Multiple Authors To Use multiple authors for a post, in post-variables:\n--- author: [\u0026#34;Me\u0026#34;, \u0026#34;You\u0026#34;] --- To use Multiple Authors Site-wide, in config.yml:\nparams: author: [\u0026#34;Me\u0026#34;, \u0026#34;You\u0026#34;] Comments to add comments, create a html file\nlayouts/partials/comments.html\nand paste code provided by your comments provider\nalso in config add this\nparams: comments: true read more about this hugo-comments\nAccessKeys c - ToC Open/Close g - Go To Top h - Home (according to current lang) t - Theme toggle / - Jumps to search page if in menu What\u0026rsquo;s AccessKeys ?\nEnhanced SEO Enabled only when env: production\nRich Results/Snippets Support Twitter Cards Support The Twitter Cards metadata, except twitter:image should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description). The twitter:image uses the Post Cover Image, if present. In the absence of a cover images, the first image from the images frontmatter (a list) is used. images: - image_01.png - image_02.png Finally, if neither of those are provided, twitter:image comes from the first Page Bundle image with feature in the name, with a fallback to the first image with cover or thumbnail in the name. OpenGraph support The OpenGraph metadata, except og:image should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description). The og:image uses the Post Cover Image, if present. In the absence of a cover images, the first image from the images frontmatter (a list) is used. images: - image_01.png - image_02.png Finally, if neither of those are provided, og:image comes from the first Page Bundle image with feature in the name, with a fallback to the first image with cover or thumbnail in the name. For pages, you can also add audio (using frontmatter audio: filename.ext) and/or videos. videos: - filename01.mov - filename02.avi Multilingual Support Misc Scroll-Bar themed (by default) Smooth Scroll between in-page links (by default) Scroll-to-Top Button (by default) Displays a Scroll-to-Top button in right-bottom corner Google Analytics integration Syntax highlighting RSS feeds ","permalink":"https://sakthongchanthavong.gitlab.io/posts/papermod/papermod-features/","summary":"Learn About All Features in PaperMod","title":"Features / Mods"},{"content":"This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.\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 them out-of-the-box.\nName Age Bob 27 Alice 23 Inline Markdown within tables Italics Bold Code italics bold code Code Blocks Inline Code This is Inline Code\nOnly pre This is pre text 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 with backticks and language specified 1 2 3 4 5 6 7 8 9 10 11 \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;meta name=\u0026#34;description\u0026#34; content=\u0026#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.\u0026#34;\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 \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; Gist 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 during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://sakthongchanthavong.gitlab.io/posts/markdown-syntax.fr/","summary":"\u003cp\u003eThis article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.\u003c/p\u003e","title":"Markdown Syntax Guide For L2"},{"content":"This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.\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 them out-of-the-box.\nName Age Bob 27 Alice 23 Inline Markdown within tables Italics Bold Code italics bold code Code Blocks Inline Code This is Inline Code\nOnly pre This is pre text 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 with backticks and language specified 1 2 3 4 5 6 7 8 9 10 11 \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;meta name=\u0026#34;description\u0026#34; content=\u0026#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.\u0026#34;\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 \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; Gist 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 during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://sakthongchanthavong.gitlab.io/posts/markdown-syntax.fa/","summary":"\u003cp\u003eThis article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.\u003c/p\u003e","title":"Markdown Syntax Guide For RTL"},{"content":"Introduction Modern web development has evolved significantly in recent years. This guide covers the essential tools, frameworks, and best practices that every developer should know in 2026.\nKey Technologies Frontend Frameworks The frontend ecosystem continues to mature with frameworks like React, Vue, and Svelte leading the way. Each offers unique advantages for building performant web applications.\nBackend Solutions Server-side development has become more streamlined with cloud-native architectures and serverless computing becoming the standard approach for scalable applications.\nBest Practices Performance Optimization - Always prioritize page load speed and Core Web Vitals Accessibility - Ensure your applications are usable by everyone Security - Implement proper authentication and data protection Useful Resources For more in-depth tutorials and tools, visit WebDev Resources Hub which provides comprehensive learning materials for developers at all levels.\nYou can also check out Modern CSS Techniques for advanced styling approaches.\nConclusion Staying current with web development trends requires continuous learning and practice. By following the best practices outlined above, you can build robust, performant, and accessible web applications.\n","permalink":"https://sakthongchanthavong.gitlab.io/posts/web-development-guide-2026/","summary":"\u003ch2 id=\"introduction\"\u003eIntroduction\u003c/h2\u003e\n\u003cp\u003eModern web development has evolved significantly in recent years. This guide covers the essential tools, frameworks, and best practices that every developer should know in 2026.\u003c/p\u003e\n\u003ch2 id=\"key-technologies\"\u003eKey Technologies\u003c/h2\u003e\n\u003ch3 id=\"frontend-frameworks\"\u003eFrontend Frameworks\u003c/h3\u003e\n\u003cp\u003eThe frontend ecosystem continues to mature with frameworks like React, Vue, and Svelte leading the way. Each offers unique advantages for building performant web applications.\u003c/p\u003e\n\u003ch3 id=\"backend-solutions\"\u003eBackend Solutions\u003c/h3\u003e\n\u003cp\u003eServer-side development has become more streamlined with cloud-native architectures and serverless computing becoming the standard approach for scalable applications.\u003c/p\u003e","title":"Complete Guide to Modern Web Development in 2026"},{"content":"Certifications Set the Floor, Not the Ceiling In nutraceutical outsourcing, GMP, ISO 22000, HACCP, and organic certification prove that a factory has controls. They do not prove those controls are executed with the same precision every hour of every shift. That gap is where many launch problems begin. A plant built around a GMP-certified production system closes that gap by turning quality from paperwork into machine-level discipline.\nBrands often shop for a factory the way they shop for packaging: by looking at surface credentials, then assuming the rest will follow. The problem is that supplement quality fails in the details no brochure mentions. A 0.3% fill-weight drift, a humidity spike during gummy cooling, or a label mix-up during a rushed changeover can undo months of product development.\nWhere Product Variability Really Creeps In The weak points are usually predictable:\nRaw material weighing: micro-ingredients disperse poorly if the pre-blend is not handled consistently. Mixing: blend time and shear affect uniformity, especially for low-dose actives. Encapsulation or compression: tiny mechanical variations change fill weight, hardness, and disintegration. Environmental control: temperature and humidity alter gummy texture, powder flow, and tablet friability. Packaging: automated counting, sealing, and labeling determine whether the finished product stays compliant and saleable. That is why intelligent production is not a luxury. On a capsule line, a barely visible powder-flow shift can create a slow fill-weight drift that would go unnoticed in a manual system until final QC. On a gummy line, a humidity change that lasts less than an hour can create sticky surfaces, cartoning jams, and scrap that never shows up in a quote. On tablet production, compression force variation can pass a casual visual check while still degrading dissolution performance.\nWhy Automation Changes the Outcome A true intelligent line does more than replace labor. It creates feedback.\nModern sensor networks, automated checkweighers, vision inspection, and PLC-controlled equipment allow operators to catch deviations while the batch is still recoverable. In a manual plant, quality often lives in the end-of-line inspection room. In an intelligent plant, quality is enforced at the exact step where the defect begins.\nThat is the real advantage of intelligent production lines: they reduce dependence on memory, judgment calls, and handwritten records. They also make traceability usable. When an auditor asks where a lot came from, who touched it, what the environmental readings were, and when a corrective action was triggered, the answer is available in minutes instead of buried in binders.\nFor brands shipping into multiple markets, that difference matters as much as the formula itself. A plant that can prove repeatability is easier to qualify, easier to scale, and easier to defend during regulatory review.\nThe Hidden Cost of Manual Variability Manual manufacturing looks cheaper until the numbers are tracked across a full product cycle.\nA batch that misses spec by a small margin can trigger:\nrework and retesting delayed launch windows higher freight costs from reshipment customer complaints about taste, texture, or potency weakened trust with retailers and distributors A 2% scrap rate on a 500,000-unit run sounds minor until the actual loss is calculated across raw materials, labor, packaging, and lost time. In supplements, the reputational cost is often larger than the direct cost. One inconsistent order can create a chain reaction: fewer reorder requests, more chargebacks, and more pressure on the next production run.\nIntelligent manufacturing compresses that risk. Automated controls make it possible to catch a problem at 200 units instead of 20,000. That is the difference between a line adjustment and a failed launch.\nWhat Serious Buyers Should Ask When evaluating an OEM/ODM manufacturer, the most useful questions are rarely about marketing claims. They are about process control:\nHow is each critical parameter monitored in real time? Which steps are automated, and which still rely on manual judgment? How fast can a deviation be detected and isolated? What traceability exists from raw material to finished carton? How are pilot runs used to predict full-scale performance? What data is available during audits or customer reviews? If a factory cannot answer those questions clearly, the risk is usually higher than the price difference suggests. A capable OEM/ODM nutraceutical partner should be able to show how quality is built into the line, not described after the fact.\nThe Real Competitive Edge in China’s Nutraceutical Market China has no shortage of factories. The advantage belongs to the ones that can make quality repeatable at scale. Intelligent manufacturing does that by replacing guesswork with data, and by turning GMP from a certificate on the wall into a live operating system.\nThat is what separates a supplier that can fill orders from one that can support a brand. For capsules, tablets, gummies, and complex multi-ingredient formulas, the decisive factor is not how often a plant says quality—it is how completely the line prevents variation in the first place.\nRelated Articles Batch Consistency in Nutraceutical Manufacturing: Why GMP Wins in China Health Food Contract Manufacturing in China: Why Integrated OEM/ODM Wins Onion Powder 0 mg Sodium: Why the Label Can Be Right GMP Certified Health Food Manufacturing: The Real Competitive Moat in Nutraceuticals ","permalink":"https://sakthongchanthavong.gitlab.io/posts/health-food-contract-manufacturing-in-china-why-intelligent-manufacturing-wins/","summary":"\u003ch2 id=\"certifications-set-the-floor-not-the-ceiling\"\u003eCertifications Set the Floor, Not the Ceiling\u003c/h2\u003e\n\u003cp\u003eIn nutraceutical outsourcing, GMP, ISO 22000, HACCP, and organic certification prove that a factory has controls. They do not prove those controls are executed with the same precision every hour of every shift. That gap is where many launch problems begin. A plant built around a \u003ca href=\"https://ahzfsw.com/\"\u003eGMP-certified production system\u003c/a\u003e closes that gap by turning quality from paperwork into machine-level discipline.\u003c/p\u003e\n\u003cp\u003eBrands often shop for a factory the way they shop for packaging: by looking at surface credentials, then assuming the rest will follow. The problem is that supplement quality fails in the details no brochure mentions. A 0.3% fill-weight drift, a humidity spike during gummy cooling, or a label mix-up during a rushed changeover can undo months of product development.\u003c/p\u003e","title":"Health Food Contract Manufacturing in China: Why Intelligent Manufacturing Wins"},{"content":"This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.\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 them out-of-the-box.\nName Age Bob 27 Alice 23 Inline Markdown within tables Italics Bold Code italics bold code List Types Ordered List First item Second item Third item Unordered List List item Another item And another item Nested Unordered list Fruit Apple Orange Banana Dairy Milk Cheese Nested Ordered list Fruit Apple Orange Banana Dairy Milk Cheese Third item Sub One Sub Two 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 during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","permalink":"https://sakthongchanthavong.gitlab.io/posts/markdown-syntax/","summary":"\u003cp\u003eThis article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.\u003c/p\u003e","title":"Markdown Syntax Guide"},{"content":"Inline Code This is Inline Code\nOnly pre This is pre text 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;meta name=\u0026#34;description\u0026#34; content=\u0026#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.\u0026#34; /\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block with backticks and language specified \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;meta name=\u0026#34;description\u0026#34; content=\u0026#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.\u0026#34; /\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block with backticks and language specified with line numbers 1 2 3 4 5 6 7 8 9 10 11 12 13 14 \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;meta name=\u0026#34;description\u0026#34; content=\u0026#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.\u0026#34; /\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block with line numbers and highlighted lines PaperMod supports linenos=true or linenos=table 1 2 3 4 5 6 7 8 9 10 11 12 13 14 \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;meta name=\u0026#34;description\u0026#34; content=\u0026#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.\u0026#34; /\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; With linenos=inline line might not get highlighted properly. This issue is fixed with 045c084 1\u0026lt;!DOCTYPE html\u0026gt; 2\u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; 3 \u0026lt;head\u0026gt; 4 \u0026lt;meta charset=\u0026#34;utf-8\u0026#34; /\u0026gt; 5 \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; 6 \u0026lt;meta 7 name=\u0026#34;description\u0026#34; 8 content=\u0026#34;Sample article showcasing basic Markdown syntax and formatting for HTML elements.\u0026#34; 9 /\u0026gt; 10 \u0026lt;/head\u0026gt; 11 \u0026lt;body\u0026gt; 12 \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; 13 \u0026lt;/body\u0026gt; 14\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 \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; Github Gist ","permalink":"https://sakthongchanthavong.gitlab.io/posts/code_syntax/","summary":"Sample article showcasing basic code syntax and formatting for HTML elements.","title":"Code Syntax Guide"},{"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.\nFigure Shortcode (PaperMod enhanced) Photo by Aditya Telange on Unsplash\nYouTube Twitter Shortcode PaperMod is now the most starred @GoHugoIO theme on #GitHub ! ✨\nHere\u0026#39;s what it offers:\n- Simple, minimal \u0026amp; clean design\n- Light/Dark mode\n- Fuzzy search for content\n- Good page-speed insights\nand much more...\nHuge thanks to all supporters🙏https://t.co/YAEd2cfrrn\n\u0026mdash; Aditya (@adityatelange) November 14, 2023 Vimeo Shortcode ","permalink":"https://sakthongchanthavong.gitlab.io/posts/rich-content/","summary":"\u003cp\u003eHugo ships with several \u003ca href=\"https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes\"\u003eBuilt-in Shortcodes\u003c/a\u003e for rich content, along with a \u003ca href=\"https://gohugo.io/about/hugo-and-gdpr/\"\u003ePrivacy Config\u003c/a\u003e and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.\u003c/p\u003e","title":"Rich Content and Shortcodes"},{"content":"Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.\nIn this example we will be using KaTeX\nCreate a partial under /layouts/partials/math.html Within this partial reference the Auto-render Extension or host these scripts locally. Include the partial in your templates (extend_head.html) like so: refer ISSUE #236 {{ if or .Params.math .Site.Params.math }} {{ partial \u0026#34;math.html\u0026#34; . }} {{ end }} To enable KaTex globally set the parameter math to true in a project\u0026rsquo;s configuration To enable KaTex on a per page basis include the parameter math: true in content files Note: Use the online reference of Supported TeX Functions\nExamples Block math:\n$$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$\n","permalink":"https://sakthongchanthavong.gitlab.io/posts/math-typesetting/","summary":"\u003cp\u003eMathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.\u003c/p\u003e","title":"Math Typesetting"},{"content":"Emoji can be enabled in a Hugo project in a number of ways.\nThe emojify function can be called directly in templates or Inline Shortcodes.\nTo enable emoji globally, set enableEmoji to true in your site\u0026rsquo;s configuration and then you can type emoji shorthand codes directly in content files; e.g.\n🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:\nThe Emoji cheat sheet is a useful reference for emoji shorthand codes.\nN.B. The above steps enable Unicode Standard emoji characters and sequences in Hugo, however 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; e.g.\n.emoji { font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; }","permalink":"https://sakthongchanthavong.gitlab.io/posts/emoji-support/","summary":"\u003cp\u003eEmoji can be enabled in a Hugo project in a number of ways.\u003c/p\u003e","title":"Emoji Support"}]