### Build Documentation Locally with Hugo Source: https://github.com/dillonzq/loveit/blob/master/README.md This command builds and serves the documentation locally using the Hugo static site generator. It requires the Hugo binary to be installed and the project's example site to be present. ```bash hugo server --source=exampleSite ``` -------------------------------- ### Create Tables with Markdown and HTML Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Demonstrates how to define tables using Markdown pipe syntax and how they are represented in HTML. Includes examples of left, center, and right text alignment. ```markdown | Option | Description | | :------:| -----------:| | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | ``` ```html
Option Description
data path to data files to supply the data that will be passed into templates.
``` -------------------------------- ### Launch Hugo Development Server Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Commands to start the local Hugo development server. Includes a standard command and an optimized version with fast rendering disabled for better live preview performance. ```bash hugo serve ``` ```bash hugo serve --disableFastRender ``` -------------------------------- ### GoAT Diagram Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-content/index.en.md An example of an ASCII diagram generated using the GoAT syntax. This allows for creating simple text-based diagrams within your content. ```goat . . . .--- 1 .-- 1 / 1 / \ | | .---+ .-+ + / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2 + + | | | | ---+ ---+ + / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3 / \ / \ | | | | | | | | '---+ '-+ + 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4 ``` -------------------------------- ### Hugo Param Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md Shows how to display a site parameter using the Hugo 'param' shortcode. It takes the parameter name as an argument. The output is the value of the specified parameter. ```markdown {{}} ``` -------------------------------- ### Configure Permalinks Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Define the permalink structure for posts. The example shows a simple structure using only the content basename. ```toml [Permalinks] posts = ":contentbasename" ``` -------------------------------- ### Image Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md Demonstrates the usage of the 'image' shortcode for embedding images with optional thumbnails, captions, and gallery integration. It leverages libraries like lazysizes and lightGallery for enhanced features. ```markdown {{}} ``` -------------------------------- ### Markdown Headings to HTML Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Demonstrates how to create headings from h2 to h6 using Markdown's '#' syntax and shows the corresponding HTML output. Includes an example of adding custom IDs to headings. ```markdown ## h2 Heading ### h3 Heading #### h4 Heading ##### h5 Heading ###### h6 Heading ``` ```html

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
``` ```markdown ### A Great Heading {#custom-id} ``` ```html

A Great Heading

``` -------------------------------- ### Admonition Shortcode Examples Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md Illustrates the 'admonition' shortcode, which supports multiple types of informational banners (note, tip, warning, etc.). It shows how to specify the type, title, and expandability of the admonition. ```markdown {{}} This is a tip {{}} Or {{}} This is a tip {{}} ``` ```markdown {{< admonition note >}} A **note** banner {{< /admonition >}} ``` ```markdown {{< admonition abstract >}} **Aliases**: `summary`, `tldr` An **abstract** banner {{< /admonition >}} ``` ```markdown {{< admonition info >}} A **info** banner {{< /admonition >}} ``` ```markdown {{< admonition todo >}} {{< version 1.0.0 >}} A **todo** banner {{< /admonition >}} ``` ```markdown {{< admonition tip >}} **Aliases**: `hint`, `important` A **tip** banner {{< /admonition >}} ``` ```markdown {{< admonition success >}} **Aliases**: `check`, `done` A **success** banner {{< /admonition >}} ``` ```markdown {{< admonition question >}} **Aliases**: `help`, `faq` A **question** banner {{< /admonition >}} ``` ```markdown {{< admonition warning >}} **Aliases**: `warn`, `caution`, `attention` A **warning** banner {{< /admonition >}} ``` ```markdown {{< admonition failure >}} **Aliases**: `fail`, `missing` A **failure** banner {{< /admonition >}} ``` ```markdown {{< admonition danger >}} **Aliases**: `error` A **danger** banner {{< /admonition >}} ``` ```markdown {{< admonition bug >}} A **bug** banner {{< /admonition >}} ``` ```markdown {{< admonition example >}} An **example** banner {{< /admonition >}} ``` ```markdown {{< admonition quote >}} **Aliases**: `cite` A **quote** banner {{< /admonition >}} ``` -------------------------------- ### Define Block Mathematical Formulas Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-content/index.en.md Provides examples of various block-level mathematical environments, including equations, alignments, and commutative diagrams. These require specific delimiters like double dollar signs or LaTeX environment tags. ```markdown $$ c = \pm\sqrt{a^2 + b^2} $$ \[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \] \begin{equation*} \rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f} \end{equation*} \begin{equation} \mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots \end{equation} \begin{align} a&=b+c \\\\ d+e&=f \end{align} \begin{alignat}{2} 10&x+&3&y = 2 \\\\ 3&x+&13&y = 4 \end{alignat} \begin{gather} a=b \\\\ e=b+c \end{gather} \begin{CD} A @>a>> B \\\\ @VbVV @AAcA \\\\ C @= D \end{CD} ``` -------------------------------- ### State Diagram Mermaid Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md Demonstrates the mermaid shortcode for generating state diagrams. The markdown input describes the states and transitions, producing a visual representation of system states. ```markdown {{ stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] {{}} ``` -------------------------------- ### Flowchart Mermaid Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md Demonstrates how to use the mermaid shortcode to render a flowchart. The input is markdown text defining the graph, and the output is the visual representation of the flowchart. ```markdown {{ graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] {{}} ``` -------------------------------- ### Syntax Highlighting with JavaScript in Markdown Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Demonstrates GitHub Flavored Markdown (GFM) syntax highlighting by specifying the language (e.g., 'js') after the opening code fence. This enhances readability of code examples. ```markdown ```js grunt.initConfig({ assemble: { options: { assets: 'docs/assets', data: 'src/data/*.{json,yml}', helpers: 'src/custom-helpers.js', partials: ['src/partials/**/*.{hbs,md}'] }, pages: { options: { layout: 'default.hbs' }, files: { './': ['src/templates/pages/index.hbs'] } } } }; ``` ``` -------------------------------- ### Class Diagram Mermaid Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md Provides an example of using the mermaid shortcode to create a class diagram. The markdown input defines class inheritance, attributes, methods, and relationships, resulting in a visual class structure. ```markdown {{ classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } {{}} ``` -------------------------------- ### Hugo YouTube Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md Shows how to embed a YouTube video using the Hugo 'youtube' shortcode. It requires the YouTube video ID as an argument. The rendered output is an embedded YouTube player. ```markdown {{}} ``` -------------------------------- ### Hugo Gist Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md Shows how to embed a GitHub Gist using the Hugo 'gist' shortcode. It requires the GitHub username and the Gist ID as arguments. The rendered output is a script tag that loads the Gist. ```markdown {{}} ``` ```html ``` -------------------------------- ### Sequence Diagram Mermaid Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md Illustrates the usage of the mermaid shortcode for creating sequence diagrams. The input markdown defines participants and their interactions, resulting in a visual sequence diagram. ```markdown {{ sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good! {{}} ``` -------------------------------- ### Hugo Vimeo Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md Demonstrates embedding a Vimeo video using the Hugo 'vimeo' shortcode. It requires the Vimeo video ID as an argument. The rendered output is an embedded Vimeo player. ```markdown {{}} ``` -------------------------------- ### Git Graph Mermaid Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md Illustrates using the mermaid shortcode to visualize git history. The markdown input defines commits, branches, and merges, rendering a graphical representation of the git repository structure. ```markdown {{ gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit {{}} ``` -------------------------------- ### Gantt Mermaid Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md Shows how to use the mermaid shortcode to generate a Gantt chart. The markdown input specifies the date format, title, excluded weekdays, and task details, rendering a project timeline. ```markdown {{ gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d {{}} ``` -------------------------------- ### Mermaid Diagram Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-content/index.en.md An example of a flowchart diagram generated using Mermaid syntax. Mermaid allows for creating various types of diagrams from text definitions, which are then rendered visually. ```mermaid graph TD A[Enter Chart Definition] --> B(Preview) B --> C{decide} C --> D[Keep] C --> E[Edit Definition] E --> B D --> F[Save Image and Code] F --> B ``` -------------------------------- ### Initialize Theme and Color Scheme Source: https://github.com/dillonzq/loveit/blob/master/layouts/baseof.html This script detects the user's preferred color scheme using the matchMedia API and local storage. It applies the theme attribute to the document body and listens for system-level theme changes. ```javascript const query = window.matchMedia('(prefers-color-scheme: dark)'); function applyTheme() { let theme = window.localStorage?.getItem('theme') || '{{ $theme }}'; let isDark = theme === 'dark' || (theme === 'auto' && query.matches); document.body.setAttribute('theme', isDark ? 'dark' : 'light'); document.body.setAttribute('cfg-theme', theme); } applyTheme(); query.addEventListener('change', applyTheme); ``` -------------------------------- ### Configure Table of Contents Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Configure the settings for the Table of Contents (TOC) generation. This includes specifying the starting and ending levels for headings to be included in the TOC. ```toml [markup.tableOfContents] startLevel = 2 endLevel = 6 ``` -------------------------------- ### Implement Hyperlinks and Named Anchors Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Shows how to create basic links, email links, links with hover tooltips, and internal page navigation using named anchors. ```markdown [Assemble](https://assemble.io) [Upstage](https://github.com/upstage/ "Visit Upstage!") [Chapter 1](#chapter-1) ## Chapter 1 ``` ```html https://assemble.io Upstage ``` -------------------------------- ### Configure CDN Sources Source: https://context7.com/dillonzq/loveit/llms.txt Set the CDN provider for third-party assets to optimize loading performance. ```toml [params.cdn] data = "jsdelivr.yml" ``` -------------------------------- ### Hugo Layout Partial Assembly Source: https://github.com/dillonzq/loveit/blob/master/layouts/baseof.html This snippet demonstrates the server-side rendering logic using Hugo partials to construct the HTML document structure, including metadata, SEO tags, and layout components. ```go-html-template {{- partial "init.html" . -}} {{ block "title" . }}{{ .Site.Title }}{{ end }} {{- partial "head/meta.html" . -}} {{- partial "head/link.html" . -}} {{- partial "head/seo.html" . -}} {{- partial "header.html" . -}} {{- block "content" . }}{{ end -}} {{- partial "footer.html" . -}} {{- partial "assets.html" . -}} ``` -------------------------------- ### Configure Local Resources in Front Matter Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-content/index.en.md Demonstrates how to define local page resources within the front matter. This allows for cleaner management of featured images by linking them to specific resource names. ```yaml resources: - name: featured-image src: featured-image.jpg - name: featured-image-preview src: featured-image-preview.jpg ``` -------------------------------- ### Process SCSS to CSS with Options Source: https://github.com/dillonzq/loveit/blob/master/layouts/_partials/head/link.html This snippet demonstrates processing an SCSS file into a compressed CSS file with source maps enabled. It defines source and target paths, output style, and includes fingerprinting for cache busting. ```gohtml {{- /* style.min.css */ -}} {{- $cdn := .Scratch.Get "cdn" | default dict -}} {{- $fingerprint := .Scratch.Get "fingerprint" -}} {{- $options := dict "Source" "css/style.scss" "Fingerprint" $fingerprint -}} {{- $toCSS := dict "targetPath" "css/style.min.css" "outputStyle" "compressed" "enableSourceMap" true -}} {{- $options = dict "Context" . "ToCSS" $toCSS | merge $options -}} {{- partial "plugin/style.html" $options -}} ``` -------------------------------- ### Math Rendering Configuration (KaTeX) Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md This section configures the integration of KaTeX for rendering mathematical formulas. It allows enabling math rendering and specifies delimiters for inline and block formulas. Extensions like copyTex and mhchem can also be enabled. ```toml # KaTeX mathematical formulas [params.page.math] enable = true # default inline delimiter is $ ... $ and ( ... ) inlineLeftDelimiter = "" inlineRightDelimiter = "" # default block delimiter is $$ ... $$, [ ... ], \begin{equation} ... \end{equation} and some other functions blockLeftDelimiter = "" blockRightDelimiter = "" # KaTeX extension copy_tex copyTex = true # KaTeX extension mhchem mhchem = true ``` -------------------------------- ### Hugo X Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md Illustrates embedding a tweet using the Hugo 'x' shortcode. It requires the Twitter username and the tweet ID as arguments. The rendered output is an embedded tweet. ```markdown {{}} ``` -------------------------------- ### Manage Resource Destination and Apply Partial Source: https://github.com/dillonzq/loveit/blob/master/layouts/_markup/render-link.html This snippet demonstrates how to manage resource destinations within a Hugo project. It checks for resources, updates the destination path, and then applies a plugin partial with specified options. Dependencies include Hugo's templating functions and partials. ```go-html-template {{- $destination := .Destination -}} {{- with dict "Path" $destination "Resources" .Page.Resources | partial "function/resource.html" -}} {{- $destination = .RelPermalink -}} {{- end -}} {{- $options := dict "Destination" $destination "Title" .Title "Content" .Text -}} {{- partial "plugin/a.html" $options -}} ``` -------------------------------- ### Render Task List in Markdown Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Shows how to create a task list in Markdown using dashes and checkboxes. '[ ]' denotes an unchecked item, and '[x]' denotes a checked item. ```markdown - [x] Write the press release - [ ] Update the website - [ ] Contact the media ``` -------------------------------- ### Hugo Instagram Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md Demonstrates embedding an Instagram post using the Hugo 'instagram' shortcode. It requires the Instagram post ID as an argument. The rendered output is an embedded Instagram post. ```markdown {{}} ``` -------------------------------- ### Configure Social Links (Simple) Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Set a simple social link by providing your social ID. The theme automatically generates the full social link and icon based on the service. ```toml [params.social] Mastodon = "@xxxx" ``` -------------------------------- ### Render Ordered List in Markdown Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Demonstrates how to create an ordered list in Markdown. The order of items matters. Markdown automatically numbers list items if '1.' is used for each. ```markdown 1. Lorem ipsum dolor sit amet 2. Consectetur adipiscing elit 3. Integer molestie lorem at massa 4. Facilisis in pretium nisl aliquet 5. Nulla volutpat aliquam velit 6. Faucibus porta lacus fringilla vel 7. Aenean sit amet erat nunc 8. Eget porttitor lorem ``` ```markdown 1. Lorem ipsum dolor sit amet 1. Consectetur adipiscing elit 1. Integer molestie lorem at massa 1. Facilisis in pretium nisl aliquet 1. Nulla volutpat aliquam velit 1. Faucibus porta lacus fringilla vel 1. Aenean sit amet erat nunc 1. Eget porttitor lorem ``` -------------------------------- ### Render HTML for Ordered List Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md The HTML structure for an ordered list using the '
    ' and '
  1. ' tags. ```html
    1. Lorem ipsum dolor sit amet
    2. Consectetur adipiscing elit
    3. Integer molestie lorem at massa
    4. Facilisis in pretium nisl aliquet
    5. Nulla volutpat aliquam velit
    6. Faucibus porta lacus fringilla vel
    7. Aenean sit amet erat nunc
    8. Eget porttitor lorem
    ``` -------------------------------- ### Configure LoveIt Site Settings Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md A sample hugo.toml configuration file for the LoveIt theme. It defines site metadata, language settings, pagination, menu structures, and theme-specific parameters. ```toml baseURL = "http://example.org/" theme = "LoveIt" title = "My New Hugo Site" languageCode = "en" languageName = "English" hasCJKLanguage = false copyright = "" enableRobotsTXT = true enableGitInfo = true enableEmoji = true ignoreErrors = ["error-remote-getjson", "error-missing-instagram-accesstoken"] [pagination] disableAliases = false pagerSize = 10 path = "page" [menu] [[menu.main]] weight = 1 identifier = "posts" pre = "" post = "" name = "Posts" url = "/posts/" title = "" [[menu.main]] weight = 2 identifier = "tags" pre = "" post = "" name = "Tags" url = "/tags/" title = "" [[menu.main]] weight = 3 identifier = "categories" pre = "" post = "" name = "Categories" url = "/categories/" title = "" [params] defaultTheme = "auto" gitRepo = "" fingerprint = "" dateFormat = "2006-01-02" title = "My cool site" description = "This is my cool site" images = ["/logo.png"] ``` -------------------------------- ### Hugo Highlight Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md Illustrates the use of the Hugo 'highlight' shortcode for syntax highlighting code blocks. It accepts a language identifier and the code content. The output is a preformatted code block with syntax highlighting. ```markdown {{ package main import "fmt" func main() { fmt.Println("Hello, 世界") } {{}} ``` -------------------------------- ### Highlight Code with Options (Go Template) Source: https://github.com/dillonzq/loveit/blob/master/layouts/_partials/plugin/code-block.html This Go template snippet highlights code content using the 'transform.Highlight' function. It accepts content, language, and options for line numbering and other display preferences. The output is the highlighted code. ```go-template {{- $content := .Content -}} {{- $lang := .Lang -}} {{- $params := .Page.Scratch.Get "params" -}} {{- $maxShownLines := $params.code.maxShownLines | default 10 | int -}} {{- $copy := $params.code.copy | default true -}} {{- $lines := split $content "\n" | len -}} {{- $options := dict "lineNoStart" 1 "lineNos" true -}} {{- $options = .Options | partial "function/dict.html" | merge $options -}} {{- $lineNoStart := $options.lineNoStart | int -}} {{- $lineNos := $options.lineNos | partial "function/bool.html" -}} {{- $options = dict "noClasses" false "lineNos" false | merge $options -}} {{- $result := transform.Highlight $content $lang $options -}} {{ if $copy }}{{ end }} {{- $result -}} ``` -------------------------------- ### Configure Social Links (Advanced) Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Configure social links with more options, including weight for ordering, ID, prefix for the URL, and hover title. This allows for fine-grained control over social media links. ```toml [params.social.Mastodon] weight = 0 id = "@xxxx" prefix = "https://mastodon.social/" title = "Mastodon" ``` -------------------------------- ### Define Hugo Content Front Matter Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-content/index.en.md A comprehensive example of YAML front matter for Hugo content files. It includes metadata fields like title and date, as well as configuration toggles for features like TOC, code blocks, and external libraries. ```yaml --- title: "My First Post" subtitle: "" date: 2020-03-04T15:58:26+08:00 lastmod: 2020-03-04T15:58:26+08:00 draft: true author: "" authorLink: "" description: "" license: "" images: [] tags: [] categories: [] featuredImage: "" featuredImagePreview: "" hiddenFromHomePage: false hiddenFromSearch: false twemoji: false lightgallery: true ruby: true fraction: true fontawesome: true linkToMarkdown: true rssFullText: false toc: enable: true auto: true code: copy: true maxShownLines: 50 math: enable: false mapbox: # ... share: enable: true comment: enable: true library: css: js: seo: images: [] --- ``` -------------------------------- ### Embed Interactive Maps with Hugo mapbox Shortcode Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.en.md Demonstrates how to use the mapbox shortcode with positional or named parameters to render interactive maps. The examples show both basic initialization and advanced configuration with custom styles and markers. ```markdown {{< mapbox 121.485 31.233 12 >}} Or {{< mapbox lng=121.485 lat=31.233 zoom=12 >}} ``` ```markdown {{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/navigation-preview-day-v4" "mapbox://styles/mapbox/navigation-preview-night-v4" >}} Or {{< mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/navigation-preview-day-v4" dark-style="mapbox://styles/mapbox/navigation-preview-night-v4" >}} ``` -------------------------------- ### Hugo Figure Shortcode Example Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md Demonstrates the usage of the Hugo 'figure' shortcode to embed an image with a caption and link. It takes source, alt text, link, caption, and class as parameters. The output is a standard HTML figure element. ```markdown {{}} ``` ```html
    A photograph of Zion National Park

    Zion National Park

    ``` -------------------------------- ### Page Global Configuration Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md This section details global configuration settings for pages within the project. It controls aspects like visibility on the home page and search results, emoji rendering, lightgallery integration, and the enabling of extended syntax for ruby, fraction, and fontawesome. It also includes settings for linking to the raw Markdown content. ```toml [params.page] # whether to hide a page from home page hiddenFromHomePage = false # whether to hide a page from search results hiddenFromSearch = false # whether to enable twemoji twemoji = false # whether to enable lightgallery lightgallery = false # whether to enable the ruby extended syntax ruby = true # whether to enable the fraction extended syntax fraction = true # whether to enable the fontawesome extended syntax fontawesome = true # whether to show link to Raw Markdown content of the content linkToMarkdown = true # whether to show the full text content in RSS rssFullText = false ``` -------------------------------- ### Implement basic typing animation with Markdown Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-typeit-shortcode/index.en.md Demonstrates how to wrap standard Markdown text within the typeit shortcode to trigger typing animation. This is the simplest implementation method. ```markdown {{< typeit >}} This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... {{< /typeit >}} ``` -------------------------------- ### Build Hugo Site for Production Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Command to compile the Hugo project into static files. This generates a public folder containing all site assets ready for deployment to a web server. ```bash hugo ``` -------------------------------- ### Render Inline Code in Markdown Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Demonstrates how to format inline code snippets using single backticks (`). This is useful for short code fragments within text. ```markdown In this example, `
    ` should be wrapped as **code**. ``` -------------------------------- ### Configure Search Engine Parameters (TOML) Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md This TOML snippet shows how to enable and configure search parameters for the LoveIt theme. It includes options for the search engine type, content length, placeholder text, result length, snippet length, highlight tag, and absolute URL usage. Specific settings for Algolia are also included. ```toml [params.search] enable = true # type of search engine ["lunr", "algolia"] type = "lunr" # max index length of the chunked content contentLength = 4000 # placeholder of the search bar placeholder = "" # {{< version 0.2.1 >}} max number of results length maxResultLength = 10 # {{< version 0.2.3 >}} snippet length of the result snippetLength = 30 # {{< version 0.2.1 >}} HTML tag name of the highlight part in results highlightTag = "em" # {{< version 0.2.4 >}} whether to use the absolute URL based on the baseURL in search index absoluteURL = false [params.search.algolia] index = "" appID = "" searchKey = "" ``` -------------------------------- ### Configure Output Formats Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Define the output formats for different content types. This includes specifying the media type and whether the output is plain text or HTML. ```toml [mediaTypes."text/plain"] suffixes = ["md"] [outputFormats.MarkDown] mediaType = "text/plain" isPlainText = true isHTML = false ``` -------------------------------- ### Configure Search Output (TOML) Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Enables the generation of a JSON index file for search functionality by adding 'JSON' to the 'outputs' configuration for the 'home' section. This is a TOML configuration setting. ```toml [outputs] home = ["HTML", "RSS", "JSON"] ``` -------------------------------- ### Configure Sitemap Generation Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Configure the sitemap generation settings. This includes setting the change frequency, filename, and priority for the sitemap. ```toml [sitemap] changefreq = "weekly" filename = "sitemap.xml" priority = 0.5 ``` -------------------------------- ### Add Footnotes to Documents Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Explains the syntax for creating footnote references and their corresponding definitions using caret identifiers. ```markdown This is a digital footnote[^1]. [^1]: This is a digital footnote ``` -------------------------------- ### Render Indented Code Block in Markdown Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Illustrates creating a code block by indenting lines with at least four spaces. This is a basic way to format multi-line code. ```markdown // Some comments line 1 of code line 2 of code line 3 of code ``` -------------------------------- ### Load Animate.css Source: https://github.com/dillonzq/loveit/blob/master/layouts/_partials/head/link.html This snippet loads the Animate.css file, either from a CDN or a local path. It includes fingerprinting and preloading for performance optimization. ```gohtml {{- /* Animate.css */ -}} {{- $source := $cdn.animateCSS | default "lib/animate/animate.min.css" -}} {{- $options := dict "Source" $source "Fingerprint" $fingerprint "Preload" true -}} {{- partial "plugin/style.html" $options -}} ``` -------------------------------- ### Front Matter Summary Configuration Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-content/index.en.md Provide a custom summary directly in the front matter of your content file using the `summary` variable. This allows for more control over the summary text. ```yaml --- summary: "This is a custom summary provided in the front matter." --- This is the main content of the article. ``` -------------------------------- ### Implement TypeIt Animations Source: https://context7.com/dillonzq/loveit/llms.txt Create typing animations for text or code blocks. Supports grouped sequences and custom HTML tags for formatting. ```markdown {{< typeit >}} This is a paragraph with **typing animation** based on TypeIt library... {{< /typeit >}} {{< typeit code=javascript >}} function greet(name) { console.log(`Hello, ${name}!`); } greet('World'); {{< /typeit >}} ``` -------------------------------- ### Animate code blocks with syntax highlighting Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-typeit-shortcode/index.en.md Illustrates how to animate code snippets by using the code parameter to define the programming language. The shortcode handles the syntax highlighting automatically. ```markdown {{< typeit code=java >}} public class HelloWorld { public static void main(String []args) { System.out.println("Hello World"); } } {{< /typeit >}} ``` -------------------------------- ### Markdown Emphasis (Bold) to HTML Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Shows the Markdown syntax for rendering text as bold using asterisks or underscores, and the resulting HTML tag. ```markdown **rendered as bold text** __rendered as bold text__ ``` ```html rendered as bold text ``` -------------------------------- ### Markdown Horizontal Rules to HTML Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Shows the different Markdown syntaxes (underscores, dashes, asterisks) used to create HTML horizontal rules (
    ). ```markdown ___ --- *** ``` -------------------------------- ### Manual Summary Split with Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-content/index.en.md Manually define the content summary by inserting the `` divider. Content before this divider will be used as the summary. Ensure the divider is in lowercase with no whitespace. ```html This is the content that will appear in the summary. This content will not be part of the summary. ``` -------------------------------- ### Render HTML for Inline Code Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md The HTML output for inline code, using the '' tag and HTML entity encoding for special characters like '<' and '>'. ```html

    In this example, <section></section> should be wrapped with code.

    ``` -------------------------------- ### Use Front Matter Description as Summary Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-content/index.en.md Utilize the `description` variable from the front matter as the content summary. This is achieved by placing the `` divider at the very beginning of the content, leaving no text before it. ```yaml --- description: "This description will be used as the summary." --- This is the main content of the article. ``` -------------------------------- ### Configure Browser Compatibility Polyfills Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Enable or disable polyfills for older browsers. Setting `polyfill` to true uses Polyfill.io, and `objectFit` to true uses object-fit-images to enhance compatibility with older browsers. ```toml [params.compatibility] polyfill = false objectFit = false ``` -------------------------------- ### Configure Goldmark Markdown Renderer Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/theme-documentation-basics/index.en.md Configure the Goldmark Markdown parser and renderer. This enables various extensions like definition lists, footnotes, linkification, strikethrough, tables, task lists, and typographer. Setting `unsafe = true` allows direct use of HTML tags. ```toml [markup.goldmark.extensions] definitionList = true footnote = true linkify = true strikethrough = true table = true taskList = true typographer = true [markup.goldmark.renderer] unsafe = true ``` -------------------------------- ### Render Fenced Code Block in Markdown Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md Shows how to use triple backticks (```) to create a fenced code block. This method is often preferred for clarity and supports language attributes. ```markdown ```markdown Sample text here... ``` ``` -------------------------------- ### Configure Web Analytics Integration Source: https://github.com/dillonzq/loveit/blob/master/layouts/_partials/plugin/analytics.html A collection of Go template snippets that conditionally inject analytics tracking scripts based on site configuration. These snippets handle service-specific initialization, privacy settings, and script loading for multiple analytics providers. ```Go Template {{- $analytics := .Scratch.Get "analytics" | default dict -}} {{- /* Google Analytics */ -}} {{- $google := $analytics.google.id | default site.Config.Services.GoogleAnalytics.ID -}} {{- with $google -}} {{- if strings.HasPrefix (lower .) "ua-" -}} {{- warnf "Google Analytics 4 (GA4) replaced Google Universal Analytics (UA)..." -}} {{- else -}} {{- $respectDoNotTrack := $analytics.google.respectDoNotTrack | default site.Config.Privacy.GoogleAnalytics.RespectDoNotTrack -}} var doNotTrack = false; if ({{ $respectDoNotTrack }}) { var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack); var doNotTrack = (dnt == "1" || dnt == "yes"); } if (!doNotTrack) { window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{{ . }}'); } {{- printf "https://www.googletagmanager.com/gtag/js?id=%v" . | dict "Async" true "Source" | partial "plugin/script.html" -}} {{- end -}} {{- end -}} {{- /* Fathom Analytics */ -}} {{- with $analytics.fathom.id -}} window.fathom=window.fathom||function(){(fathom.q=fathom.q||[]).push(arguments);}; fathom('set', 'siteId', '{{ . }}'); fathom('trackPageview'); {{- dict "Source" ($analytics.fathom.server | default "cdn.usefathom.com" | printf "https://%v/tracker.js") "Async" true "Attr" "id=fathom-script" | partial "plugin/script.html" -}} {{- end -}} {{- /* Plausible Analytics */ -}} {{- with $analytics.plausible.dataDomain -}} {{- dict "Source" "https://plausible.io/js/plausible.js" "Async" true "Defer" true "Attr" ($analytics.plausible.dataDomain | printf "data-domain=\"%v\"") | partial "plugin/script.html" -}} {{- end -}} {{- /* Yandex Metrica */ -}} {{- with $analytics.yandexMetrica.id -}} (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym({{ . }}, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); {{- end -}} {{- /* Goat Counter */ -}} {{- with $analytics.goatCounter.code -}} let r = new XMLHttpRequest(); let views = document.getElementById("page-views"); var get_path = function() { ... }; if(views) { r.addEventListener('load', function() { ... }); r.open('GET', 'https://{{ . }}.goatcounter.com/counter/' + encodeURIComponent(get_path()) + '.json'); r.send(); } {{- end -}} ``` -------------------------------- ### Render HTML for Fenced Code Block Source: https://github.com/dillonzq/loveit/blob/master/exampleSite/content/posts/basic-markdown-syntax/index.en.md The HTML output for a fenced code block, using '
    ' and '' tags, potentially with a 'language-' attribute.

```html

      Sample text here...

    
```