DOCSEARCHbyAlgolia
Submit Docs

LoveIt Hugo Theme

repository·master·Indexed 26 days ago

https://github.com/dillonzq/loveit

An advanced, clean, and elegant blog theme for the Hugo static site generator. LoveIt features high performance, SEO optimization via JSON-LD, and extensive support for rich content including KaTeX for math, mermaid for diagrams, ECharts for data visualization, and Mapbox GL JS for maps. It includes built-in support for light/dark modes, multiple comment systems, and comprehensive front matter options for controlling post metadata and feature toggles.

Tokens
46.4K
Snippets
85
Records
144
Agent score
83%

What's inside LoveIt

  1. Overview of LoveIt features

    master

    LoveIt is an advanced, clean, and elegant Hugo theme. Key features include:

    Performance & SEO

    • Optimized for Google PageSpeed Insights (99/100 mobile, 100/100 desktop).
    • SEO SCHEMA based on JSON-LD.
    • Support for Google Analytics, Fathom Analytics, Plausible Analytics, and Yandex Metrica.
    • Image Lazy Loading via lazysizes.

    Appearance & Layout

    • Responsive Desktop/Mobile layout.
    • Light/Dark mode.
    • Self-expanding Table of Contents.
    • Multilingual/i18n support.

    Search & Social

    • Search powered by Lunr.js or algolia.
    • Support for up to 84 social links and 27 share sites.
    • Multiple comment systems: Disqus, Gitalk, Valine, Facebook, Telegram, Commento, utterances, and giscus.

    Extended Markdown & Shortcodes

    • Mathematical formulas: Supported by KaTeX.
    • Diagrams: Supported by mermaid.
    • Data Visualization: Supported by ECharts.
    • Maps: Supported by Mapbox GL JS.
    • Music: Supported by APlayer and MetingJS.
    • Video: Bilibili player support.
    • Icons: Extended Markdown syntax for Font Awesome.
    • Other: Admonitions, custom style, custom script, and person shortcodes.

  2. Overview of LoveIt theme features

    master

    LoveIt is a concise, elegant, and efficient Hugo blog theme. Key features include:

    Performance & SEO

    • High Google PageSpeed Insights scores (99/100 mobile, 100/100 desktop).
    • SEO optimization using JSON-LD SCHEMA.
    • Support for Google Analytics, Fathom Analytics, Plausible Analytics, and Yandex Metrica.
    • Support for search engine site verification (Google, Bing, Yandex, Baidu).
    • Automatic image lazy-loading via lazysizes.

    Appearance & Layout

    • Responsive design for desktop and mobile.
    • Light/Dark theme modes.
    • Automatic table of contents for articles.
    • Multilingual and i18n support.

    Search & Extensions

    • Search powered by Lunr.js or Algolia.
    • Extended Markdown syntax for Font Awesome icons, superscript annotations, and fractions.
    • Support for KaTeX (mathematical formulas), mermaid (diagrams), ECharts (interactive data visualization), and Mapbox GL JS (maps).
    • Built-in shortcodes for APlayer/MetingJS (music player), Bilibili videos, TypeIt (typing animation), and lightGallery (image gallery).

    Social & Comments

    • Support for up to 84 social links and 27 sharing methods.
    • Comment systems: Disqus, Gitalk, Valine, Facebook, Telegram, Commento, Utterances, and Giscus.

  3. Create links and anchor tags

    master

    Basic Links

    • Automatic links: Wrap a URL in angle brackets <https://example.com>.
    • Standard links: Use [Link Text](https://example.com).
    • Links with titles: Use [Link Text](https://example.com "Title Text") to show a tooltip on hover.

    Anchor Links (Jump to section)

    To create a link that jumps to a specific part of the same page, use the # symbol followed by the ID of the target element:

    * [Chapter 1](#chapter-1)

    Ensure the target element has a matching ID, for example: ## Chapter 1 <a id="chapter-1"></a>.

    [Upstage](https://github.com/upstage/ "Visit Upstage!")

  5. Configure Search (Lunr.js or Algolia)

    master

    LoveIt supports searching via Lunr.js (local, simple, but higher bandwidth/lower performance for some languages) or Algolia (high performance, requires synchronizing index.json).

    1. Enable JSON Output

    To generate the required index.json for searching, you must add JSON to the home outputs in your site configuration:

    [outputs]
  home = ["HTML", "RSS", "JSON"]

    2. Search Parameters

    Configure the [params.search] section in your site configuration.

    Key Options:

    • enable: Set to true to activate search.
    • type: Choose either "lunr" or "algolia".
    • contentLength: (Lunr only) Max index length of the chunked content (content is split by h2 and h3 tags).
    • placeholder: Text for the search bar.
    • maxResultLength: Max number of results.
    • snippetLength: Length of the result snippet.
    • highlightTag: HTML tag used for highlighting parts in results (default is "em").
    • absoluteURL: Whether to use absolute URLs based on baseURL in the search index.

    Algolia Specifics: If using Algolia, provide index, appID, and searchKey under [params.search.algolia]. You must upload the generated index.json files to Algolia. For multilingual sites, upload different index.json files to different Algolia indices (e.g., zh-cn/index.json).

    [outputs]
  home = ["HTML", "RSS", "JSON"]

[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 = ""
  # max number of results length
  maxResultLength = 10
  # snippet length of the result
  snippetLength = 30
  # HTML tag name of the highlight part in results
  highlightTag = "em"
  # whether to use the absolute URL based on the baseURL in search index
  absoluteURL = false
  [params.search.algolia]
    index = ""
    appID = ""
    searchKey = ""

  8. Use code blocks and syntax highlighting in Markdown

    master

    You can include code in your LoveIt posts using three methods:

    1. Inline Code: Wrap snippets with backticks (`).
    2. Indented Code: Indent lines by at least four spaces.
    3. Block Fenced Code: Use triple backticks (```). To enable syntax highlighting, add the language identifier (e.g., js, markdown, html) immediately after the first set of backticks.

    Example of syntax highlighting for JavaScript:

    console.log('Hello World');
    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']
      }
    }
  }
};

  10. Customize Theme Styles with SCSS

    master

    To customize the appearance, you must use the Hugo extended version. LoveIt uses SCSS for styling.

    1. Override Variables: Create assets/css/_override.scss in your project root to override variables defined in the theme's _variables.scss.
    2. Add Custom CSS: Add custom CSS rules in assets/css/_custom.scss.

    Example of overriding the code font family:

    @import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace;
    // assets/css/_override.scss
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace;

  11. Install LoveIt theme

    master

    To use the LoveIt theme, you must first have Hugo installed. If you plan to use custom styles, you must use the Hugo extended version.

    Follow these steps to initialize a new site and install the theme:

    1. Create a new Hugo site:

      hugo new site my_website
cd my_website

    2. Install the theme (choose one of the following methods):

      • Git Clone: Clone the repository directly into the themes directory:
        git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
      • Git Submodule: Initialize your project as a git repository and add the theme as a submodule:
        git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
      • Manual Download: Download the release .zip file from the releases page and extract it into the themes directory.
    git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt

  12. Use code blocks in Markdown

    master

    You can include code in three ways within your Markdown content:

    1. Inline Code: Wrap text with backticks (`) to display code within a paragraph.
    2. Indented Code: Indent lines by at least four spaces to create a code block.
    3. Fenced Code Blocks: Use triple backticks (```) to create a block. You can specify a language immediately after the opening backticks for syntax highlighting (e.g., ```js).

    For advanced syntax highlighting, you can also use the Hugo highlight shortcode.

    grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    }
  }
});