[{"content":"Guide Follow this guide to setup hugo and create a new site. Make sure you install latest version of hugo(\u0026gt;=0.74.0).\nAfter you have created a new site, at Step 3 follow the steps:\nInside the folder of your Hugo site, run:\n git clone https://github.com/adityatelange/hugo-PaperMod themes/hugo-PaperMod --depth=1  Updating theme :\ncd themes/hugo-PaperMod git pull   or you can use as submodule with\n git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/hugo-PaperMod git submodule update --init --recursive  Updating theme with submodule :\ngit submodule update --remote --merge Then change in config.yml:\n  theme: \u0026#34;hugo-PaperMod\u0026#34; Example Site Structure is present here: exampleSite\n Sample config.yml baseURL: \u0026#34;https://examplesite.com\u0026#34; title: ExampleSite paginate: 5 theme: hugo-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; 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; ShowReadingTime: true ShowShareButtons: true comments: false defaultTheme: auto disableThemeToggle: false disableSpecial1stPost: false assets: 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 # imageUrl: \u0026#39;\u0026lt;img location\u0026gt;\u0026#39; # 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: twitter url: \u0026#34;https://twitter.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; 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  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 disableShare: false cover: image: \u0026#34;\u0026lt;image path/url\u0026gt;\u0026#34; alt: \u0026#34;\u0026lt;alt text\u0026gt;\u0026#34; caption: \u0026#34;\u0026lt;text\u0026gt;\u0026#34; relative: false comments: false ---  Papermod - Features Papermod - How to Guide Papermod - Icons ","permalink":"/papermod-installation/","summary":"Read Install and Update instructions here","title":"Papermod - Installation"},{"content":"Assets (js/css) The following is enabled by default\n minification - makes the assets size smallest as possible. bundling - bundles all the styles in one single asset fingerprint/intergity check.   Default Theme light/dark/auto 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 :\ndisableThemeToggle: true You can refer following table for better understanding\u0026hellip;\n   defaultTheme 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--- title: \u0026#34;Archive\u0026#34; # in any language you want layout: \u0026#34;archives\u0026#34; # is necessary url: \u0026#34;/archive\u0026#34; summary: \u0026#34;archive\u0026#34; --- Note: Archives Layout does not support Multilingual Month Translations.\nex: archives.md\n Regular 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; ex. here\n Profile Mode Shows Index/Home page as Full Page with Social Links and Image\nadd following to config file\nparams: profileMode: enabled: true title: \u0026#34;\u0026lt;Title\u0026gt;\u0026#34; # optional default will be site title 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 Add the following to site config, config.yml\noutputs: home: - HTML - RSS - JSON # is necessary Create a page with search.md in content directory with following content\n--- title: \u0026#34;Search\u0026#34; # in any language you want layout: \u0026#34;search\u0026#34; # is necessary # url: \u0026#34;/archive\u0026#34; summary: \u0026#34;search\u0026#34; --- 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.\nparams: fuseOpts: isCaseSensitive: false shouldSort: true location: 0 distance: 1000 threshold: 0.4 minMatchCharLength: 0 keys: [\u0026#34;title\u0026#34;, \u0026#34;permalink\u0026#34;, \u0026#34;summary\u0026#34;, \u0026#34;content\u0026#34;] ex: search.md\n Draft Page indication adds [draft] mark to indicate draft pages.\n Post Cover Image In post\u0026rsquo;s page-variables add :\ncover: 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; 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\nparams: cover: responsiveImages: false To enable hyperlinks to the full image size on post pages, use\nparams: 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  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 here\n 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\nGoogle Analytics integration Open-Graph support Twitter Cards Support Syntax highlighting Twitter cards and opengraph tags support RSS feeds Multilingual Support ","permalink":"/papermod-features/","summary":"Get known about All Features in PaperMod","title":"Papermod - Features"},{"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.\n Blockquote with attribution  Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.— Rob Pike1 Tables Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.\n   Name 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 \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 GIFis a bitmap image format.\nH2O\nXn+ Yn= ZnPress CTRL+ALT+Deleteto end the session.\nMost salamandersare nocturnal, and hunt for insects, worms, and other small creatures.\n  The above quote is excerpted from Rob Pike\u0026rsquo;s talk during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n  ","permalink":"/markdown-syntax-guide/","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":"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.\n Blockquote with attribution  Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.— Rob Pike1 Tables Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.\n   Name 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 \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 GIFis a bitmap image format.\nH2O\nXn+ Yn= ZnPress CTRL+ALT+Deleteto end the session.\nMost salamandersare nocturnal, and hunt for insects, worms, and other small creatures.\n  The above quote is excerpted from Rob Pike\u0026rsquo;s talk during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n  ","permalink":"/markdown-syntax-guide-for-l2/","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.\n Blockquote with attribution  Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.— Rob Pike1 Tables Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.\n   Name 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 \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 GIFis a bitmap image format.\nH2O\nXn+ Yn: ZnPress CTRL+ALT+Deleteto end the session.\nMost salamandersare nocturnal, and hunt for insects, worms, and other small creatures.\n  The above quote is excerpted from Rob Pike\u0026rsquo;s talk during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n  ","permalink":"/markdown-syntax-guide-for-rtl/","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":"Social Icons Usage :\nsocialIcons: # optional - name: \u0026quot;\u0026lt;NAME\u0026gt;\u0026quot; url: \u0026quot;\u0026lt;link\u0026gt;\u0026quot; - name: \u0026quot;\u0026lt;NAME\u0026gt;\u0026quot; url: \u0026quot;\u0026lt;link2\u0026gt;\u0026quot;    No. name platform link     1 123rf 123rf.com   2 adobestock stock.adobe.com   3 behance behance.net   4 buymeacoffee buymeacoffee.com   5 codepen codepen.io   6 cryptohack cryptohack.org   7 dev dev.to   8 discogs discogs.com   9 discord discord.com   10 dreamstime dreamstime.com   11 dribbble dribbble.com   12 email -   13 facebook facebook.com   14 freepik freepik.com   15 github github.com   16 gitlab gitlab.com   17 hackerrank hackerrank.com   18 hackthebox hackthebox.eu   19 instagram instagram.com   20 kakaotalk kakaocorp.com/service/KakaoTalk   21 keybase keybase.io   22 kofi ko-fi.com   23 lastfm last.fm   24 linkedin linkedin.com   25 mastodon mastodon.social   26 medium medium.com   27 mixcloud mixcloud.com   28 paypal paypal.com   29 qq qq.com   30 rss -   31 soundcloud soundcloud.com   32 shutterstock shutterstock.com   33 slack slack.com   34 sourcerer sourcerer.io   35 stackoverflow stackoverflow.com   36 steam steampowered.com   37 telegram telegram.org   38 twitch twitch.tv   39 twitter twitter.com   40 youtube youtube.com   41 other -     Share Icons    No. Platform     1 twitter   2 linkedin   3 reddit   4 facebook   5 whatsapp   6 telegram    Usage:\nparams: ShowShareButtons: true You can see Below how share Icons Look.\n","permalink":"/papermod-icons/","summary":"List of all Icons supported by PaperMod","title":"Papermod - Icons"},{"content":"Last Saterday I visited Measurecamp Amsterdam and gave my first presentation. I presented a playground for GTM Server. How to setup your local and online environment so you can test and debug with GTM Server.\nMy setup My setup exists of the following\n Microsoft Visual Studio Code Javascript \u0026amp; Go Hugo as a SSG (Static Site Generator) Created my own middleware for analytics Publish my code to Github Enabled auto deployment to Netlify Netlify Netlify as hosting platform Netlify function for server to gtm server tagging Netlify function for server side cookies Stape.io as my GTM Server setup environment  I played with client to server (Data Tag) and server to server (Measurement Protocol). All the tools above helped me to play with GTM Server and see how things work. I tested the server to server setup and learned how to read the cookie information to sent along the mp request to GTM Server.\nThe Data Tag helped me to learn about how to sent the complete dataLayer object to GTM Server and be able to use the data in there to sent along with other Events.\nYou can find the presentation here.\nIf you have any questions, let me know.\n","permalink":"/measurecamp-amsterdam-2022/","summary":"My Measurecamp Amsterdam Presentation from last Saterday May 20th","title":"Measurecamp Amsterdam 2022"},{"content":"Need help? Contact me if you want to hire me or need help. I\u0026rsquo;m available and love to work with you. I can help you with:\nImplementations  implement marketing tags in your tag manager implement google analytics tags in your tag manager  Audits  audit your implemention for GDPR or AVG and privacy issues audit your tag manager container audit your google analytics account  Other  developing a data strategy create a strategy and implement Google Analytics 4 improve your data quality solving analytics issues  Training or knowledge sharing  online or inhouse analytics related training  ","permalink":"/hire-me/","summary":"Hire me when you need analytics help","title":"Hire Me"},{"content":"My experience so far I worked as a web analyst in the past and noticed at more and more companies that analyzing the data raised questions about the quality of the data. Did I come to the right conclusion and action(s) to be taken or was the data flawed and was I never to have a proper analysis?\nThe moment I started doubting the data more and more I realized I had to start working to improve the data collection. Improve the data quality meant for me to start a new journey. I learned myself some new skills as Javascript coding, work in scrum teams and dived into the nitty gritty of analytics implementations.\nI worked at companies in the following industries\n finance ecommerce (both b2b and consumers) travel print  Besides working as an employee at Wehkamp (ecommerce industry) I also work as a free-lance consultant for roughly 8 – 16 hours a week. Being a free-lancer I can help other companies with their data strategy and how to improve their data collection and data quality.\nMy learnings so far Over the years I learned a lot about data analyses, data collection and data quality.\nOne of the solutions for doing data collection right, was to implement an analytics (tagging) middleware solution. This solution provides all analytics logic in one api to all teams building the website. There are multiple advantages for a solution like this, for example:\n easier to maintain easier to connect new (analytics) vendors it\u0026rsquo;s vendor agnostic, so easier changing analytics vendor data quality will increase because of simplifying the implementation and a consistent and uniform tagging solution  Tooling I have experience with the following tooling:\n Google Universal Analytics  Google Analytics for web Google Analytics for app   Google Analytics 4 aka Firebase Analytics  Google Analytics app+web Google Analytics implementation in iOS and Android Google Analytics implementation in web (beta)   Google Tag Manager  Web container setup Enhanced Ecommerce implementation (Web and iOS / Android (Google Analytics v1 and v2 implementations)) GDPR (AVG) proof implementations Firebase GTM for app (iOS and Android)   Snowplow  Collector implementation on own subdomain Iglu schema server setup for company specific schemas Implementation in Google Tag Manager for web   Adobe Analytics Tealium Tag Manager Relay42 DMP  Why did I start my blog? I started my blog, because although I love working at Wehkamp as a technical web analyst helping out to improve data collection and – quality, I also like to work at different industries to help companies with their data strategy and learn about the specifics for each industry.\nAlthough there are many blog posts about web analytics there is less information bundled to find about app analytics and data quality. Both do have my attention and interest, because app traffic is growing year by year and doing app analytics in\u0026rsquo;t that easy. Debugging is notoriously more difficult than the web counterpart.\nData collection is also hard to do right. Many companies struggle with collecting quality data points instead of quantitive data. Nowadays collecting data according to the law is becoming more and more difficult. Do we, analysts, legal department, online marketeers and other stakeholders, still understand what can or can\u0026rsquo;t be tracked and when?\nFurthermore I started working on a \u0026lsquo;middleware\u0026rsquo; tagging solution to improve the quality of the data collection. My learnings, about JavaScript and how to work together with frontend developers and app developers, are in the blog posts.\nIf you want to contact me fill out the form.\n","permalink":"/about-me/","summary":"More about my work experience and my interest in analytics","title":"About me"},{"content":"Thank you for filling out the form. I\u0026rsquo;ll contact you within 2 working days.\n","permalink":"/thank-you/","summary":"thank you for filling out the form","title":"Thank You"},{"content":"An overview of all upcoming events interesting for data \u0026amp; analytics enthusiasts …\nIf you have an interesting event to add here, let me know.\n","permalink":"/events/","summary":"Upcoming events","title":"Events"},{"content":"You can contact me if you have any questions related to my site, blog posts or if you want to hire me.\nForm ","permalink":"/contact/","summary":"Contact me for questions or contracting","title":"Contact"},{"content":"How to implement structured data with Google Tag Manager Adding structured data can be done in many different ways. One of them is by using Google Tag Manager. The advantage of structured data is to enrich your SERP Results. This article is about how to implement structured data, ld+json, using the Tag Manager and how to test your structured data.\nThe article will show you how to do this. I\u0026rsquo;ll walk you through the next steps:\n Find the structured markup you need Before adding the markup to a Custom HTML tag in Google Tag Manager you can start with creating the correct markup in Google\u0026rsquo;s structured test tool → see step 5. In the tool click NEW TEST → CODE SNIPPET → paste your markup → RUN SNIPPET. Now you\u0026rsquo;re able to tweak your markup and validate After validation add the markup to the Tag Manager in a Custom HTML tag. Now you can preview your Tag Manager container to see and test the structured data on your page Reload your page and copy the html block by right- click on the concerning ld+json script: Copy → Copy outerHTML Test your strucured data in Google\u0026rsquo;s structured test tool to see if you have no errors Check your structured data in Google Search Console  Find your structured data snippet There is a lot of information online available about structured data. From introductions to Codelabs and pre-made markup. Have a look at the links underneath:\n Google: Follow the structured data guidelines Google: Intro to structured data Google: Structured Data Codelab A tool intended for SEO’s and webmasters seeking pre-made and validated JSON-LD markup  Test \u0026amp; implement your structured markup Before adding the markup to GTM, you can validate your strucured data snippet in Google\u0026rsquo;s structured test tool. In the tool click NEW TEST → CODE SNIPPET → paste your markup → RUN SNIPPET.\nCheck if your markup is correct and there are no warnings or errors:\nNow you\u0026rsquo;re able to tweak your markup and validate. When you\u0026rsquo;re done and your markup fit your needs and has no validation errors anymore it\u0026rsquo;s time to add the markup to your GTM container. Paste your markup in the variable data (*) in the code underneath.\n\u0026lt;script\u0026gt; (function() { var data = { … }; var script = document.createElement(\u0026quot;script\u0026quot;); script.type = \u0026quot;application/ld+json\u0026quot;; script.innerHTML = JSON.stringify(data); document.head.appendChild(script); })(); \u0026lt;/script\u0026gt; (*) between the curly brackets and remove the …\nInstead of copy and paste your markup in the above snippet, you can also paste your markup in the online converter to have a GTM ready version of your ld+json structured data snippet.\nAfterwards add a new Custom HTML Tag in GTM and paste the complete snippet including the \u0026lt;script\u0026gt; (function() { ….\nCreate dynamic values for your structured data Now you can decide what data in your markup can be dynamically retrieved from the dataLayer or from other variables on your page. Some markup needs to be dynamically set, like product id\u0026rsquo;s on product detail pages for example.\nE.g.: you can retrieve the meta description of your page by adding a new variable to your GTM container. For the variable choose Page Elements → DOM Element and set the variable according to the following:\n Name: VAR Meta Description Type: CSS selector Element Selector: meta[name=\u0026lsquo;description\u0026rsquo;] Attribute Name: content  After adding variables to your GTM container and tweaking your markup to make use of dynamic page data you can preview your change(s) in GTM.\nWhen your preview modus is ready visit your webpage and check if the newly added Custom HTML Tag has been fired. When fired you should see the ld+json script within the Developer Tools Elements tab.\nHere copy the script (see screenshot) and paste this in Google\u0026rsquo;s structured test tool to see if everything is correct and validated.\nWhen your preview is correct and validated your next step is to publish your container and annotate Google Analytics. Now you have to wait till Google Search Console \u0026lsquo;sees\u0026rsquo; your changes (or go to Google Search Console and request (re)indexing your page).\nCheck your structured data in Search Console Check in Google Search Console how your structured data is interpreted by Google and see if you have any errors or warnings. Here is an example for product structured data:\nCheckout these videos for more information about how Search Console works.\n__\n","permalink":"/structured-content-with-google-tag-manager/","summary":"Adding structured data can be done in many different ways. One of them is by using Google Tag Manager. The advantage of structured data is to enrich your SERP Results. This article is about how to implement structured data, ld+json, using the Tag Manager and how to test your structured data.","title":"Structured Content With Google Tag Manager"},{"content":"Debugging your app analytics with a proxy Debugging your app is notoriously difficult and way more complex than the web counterpart, but there are possibilities.\nYou can run local virtual devices if you have access to the source code or to install files as an IPA (iOS) or APK (Android) file. When running a local device you can use the console of XCode or Android Studio to debug your app.\nAt the moment you don\u0026rsquo;t have access to source code or install files, your only option is to use a proxy. There are multiple proxies to choose from, but I\u0026rsquo;m using the open source \u0026ldquo;Men in the Middle\u0026rdquo; (MITM) proxy.\nInstall MITM on iOS / MacOS You need to install the proxy via the terminal, but no worries. There is also a Web Interface after installation to monitor your app traffic.\nSo, follow the next steps for the first time installation of the proxy:\n Check the proxy documentation Install via your terminal brew install mitmproxy. You\u0026rsquo;ll need Homebrew on your Mac Start your proxy with the command: mitmweb in your terminal Open your OS X settings panel and go to sharing In sharing activate internet sharing and share your connection via LAN on your WiFi. Your WiFi needs to be active! Open network in your OS X settings panel and note your IP address Go to your mobile device and find and connect to your shared WiFi network (Computer Name in your OS X settings panel). In Sharing enable WiFi and set your WiFi password in WiFi Options… When your mobile device is connected to your Mac shared WiFi network edit your proxy settings. For Server you need to add your IP address of step 6. The port should be 8080 Check if MITM is running in your terminal! Now visit with your mobile device web browser to mitm.it and click to install the correct SSL certificate After installation of your certificate you still have to enable the certificate on your iPhone. To verify go to Settings → General → VPN \u0026amp; Device Management → Profile (iOS 15) Next step is to turn on the toggle button (on the bottom) to trust the mitm root certificate: Settings → General → About → Trusted Certificates → Certificate Trust Settings (iOS 15) Now you are able to open your app and you should see your requests coming from your app in the web interface of the MITM proxy  Find your ip address –to use in step 8– in your MacOS network settings:\nStart MITM web via the terminal Check your Privacy settings in iOS Check if you have enabled any privacy features in iOS which could block the Google Analytics tracking in MITM. In Privacy → Tracking the app you want to track should be enabled (toggle on) in the list. Also check if you have any add blockers installed on your iPhone. If so, disable them temporarily!\nInstall MITM on Android / MacOS You need to install the proxy via the terminal, but no worries. There is also a Web Interface after installation to monitor your app traffic.\nSo, follow the next steps for the first time installation of the proxy:\nThe first [1-9] steps are identical as the steps above for iOS/ MacOS. The next steps are specific for Android:\n After installation of your certificate you still have to enable the certificate on your Android device. Navigate to Settings → WiFi. Long press on network name and tap on Modify network Now you have to change the Proxy Settings. Tap on Show Advance options and you’ll find Host Name, Port. Use the same information as we did when setting up the iPhone Open your favorite browser (e.g. Chrome) on your Android device and go to the address: mitm.it. This is similar to what we did on Safari while setting up the iPhone Last step is to Open the certificate Now you are able to open your app and you should see your requests coming from your app in the web interface of the MITM proxy  Run your MITM proxy (after installation) Next time when you have the need to debug your app, it\u0026rsquo;s easier to start and less steps are needed:\n Start your proxy with the command: mitmweb in your terminal Open your OS X settings panel and go to sharing In sharing activate internet sharing and share your connection via LAN on your WiFi On your iPhone go to: Settings → General → About → Certificate Trust Settings. Under \u0026ldquo;Enable full trust for root certificates,\u0026rdquo; turn on trust for the \u0026lsquo;mitmproxy\u0026rsquo; certificate Go to your mobile device and connect to your shared WiFi network (Computer Name in your OS X settings panel) Now you are able to open your app and you should see your requests coming from your app in the web interface of the MITM proxy  Internet sharing on MacOS Start your own WiFi network by enabling Internet Sharing on your Mac.\nMITM web interface In the MITM web interface you can color the requests for easier debugging. Click on the left hand on the request you want to analyze and see your (batched) request data on your right:\nDone testing? When you are done with testing, don\u0026rsquo;t forget to disable the certificate on your mobile device! This is important for security reasons.\n On your iPhone go to: Settings → General → About → Certificate Trust Settings. Under \u0026ldquo;Enable full trust for root certificates,\u0026rdquo; turn off trust for the \u0026lsquo;mitmproxy\u0026rsquo; certificate.   In your terminal stop mitmweb with CONTROL - C Disable Internet Sharing on your Mac  ","permalink":"/debug-your-app-with-a-proxy/","summary":"Debugging your app analytics with a proxy Debugging your app is notoriously difficult and way more complex than the web counterpart, but there are possibilities.\nYou can run local virtual devices if you have access to the source code or to install files as an IPA (iOS) or APK (Android) file. When running a local device you can use the console of XCode or Android Studio to debug your app.\nAt the moment you don\u0026rsquo;t have access to source code or install files, your only option is to use a proxy. There are multiple proxies to choose from, but I\u0026rsquo;m using the open source \u0026ldquo;Men in the Middle\u0026rdquo; (MITM) proxy.","title":"Debug your app with a proxy"},{"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.\n Instagram Simple Shortcode  YouTube Privacy Enhanced Shortcode    Twitter Simple Shortcode “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; Design Reviewed | Graphic Design History (@DesignReviewed) January 17, 2019  Vimeo Simple Shortcode  .__h_video { position: relative; padding-bottom: 56.23%; height: 0; overflow: hidden; width: 100%; background: #000; } .__h_video img { width: 100%; height: auto; color: #000; } .__h_video .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; cursor: pointer; }  ","permalink":"/rich-content/","summary":"\u003cp\u003eHugo ships with several \u003ca href=\"https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes\" data-analytics-click=\"external link\" target=\"_blank\" rel=\"noopener\"\u003eBuilt-in Shortcodes\u003c/a\u003e for rich content, along with a \u003ca href=\"https://gohugo.io/about/hugo-and-gdpr/\" data-analytics-click=\"external link\" target=\"_blank\" rel=\"noopener\"\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\n\u003ch2 id=\"heading\"\u003e\u003c/h2\u003e","title":"Rich Content"},{"content":"Lorem est tota propiore conpellat pectoribus de pectora summo.\nRedit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.\n Exierant elisi ambit vivere dedere Duce pollice Eris modo Spargitque ferrea quos palude  Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.\n Comas hunc haec pietate fetum procerum dixit Post torum vates letum Tiresia Flumen querellas Arcanaque montibus omnes Quidem et  Vagus elidunt The Van de Graaf Canon\nMane refeci capiebant unda mulcebat Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. Faces illo pepulere tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.\nIubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.\nEurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel mitis temploque vocatus, inque alis, oculos nomen non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides parte.\n .canon { background: white; width: 100%; height: auto; } ","permalink":"/placeholder-text/","summary":"\u003cp\u003eLorem est tota propiore conpellat pectoribus de pectora summo.\u003c/p\u003e","title":"Placeholder Text"},{"content":"Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.\nIn this example we will be using KaTeX\n Create 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 like so:  {{ 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\n  Examples  Inline math: \\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\) Block math:\n$$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$\n","permalink":"/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.\nThe Emoji cheat sheet is a useful reference for emoji shorthand codes.\n N.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; }  .emojify { font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; font-size: 2rem; vertical-align: middle; } @media screen and (max-width:650px) { .nowrap { display: block; margin: 25px 0; } } ","permalink":"/emoji-support/","summary":"\u003cp\u003eEmoji can be enabled in a Hugo project in a number of ways.\u003c/p\u003e","title":"Emoji Support"},{"content":"","permalink":"/l2/archives/","summary":"archives","title":"Archive"},{"content":"","permalink":"/archives/","summary":"archives","title":"Archive"},{"content":"","permalink":"/search/","summary":"","title":"Search"},{"content":"","permalink":"/search.l2/","summary":"","title":"SearchL2"}]