Icarus User Guide - Other Plugins

This article covers other plugins supported by Icarus.

This article is also available in 简体中文.

The following plugins are provided by ppoffice/hexo-component-inferno. Please refer to it for a complete list of supported plugins and their configuration details.

Gallery

Installation Guide

The gallery plugin of Icarus contains both lightGallery and Justified Gallery extensions. It is enabled by default: plugins > gallery is true in the configuration file generated by Icarus. If your configuration file does not have this setting, add it to enable the plugin. To disable it, set it to false.

_config.icarus.yml

plugins:
    gallery: true

Additionally, in order to use Justified Gallery, wrap your images with the <div class="justified-gallery"> and </div> HTML tag pair. Also, if you are using Markdown syntax to include images, add additional empty lines between the HTML tags and Markdown tags. For example, the Markdown code of the gallery preview below is

Justified-Gallery-Markdown.md >folded

<div class="justified-gallery">

![Elephant](/gallery/animals/elephant.jpeg)
![Dog](/gallery/animals/dog.jpeg)
![Birds](/gallery/animals/birds.jpeg)
![Fox](/gallery/animals/fox.jpeg)
![Horse](/gallery/animals/horse.jpeg)
![Leopard](/gallery/animals/leopard.jpeg)

</div>

Meanwhile, we can use pure HTML to create Justified Galleries as well. In this case, we will not need the empty lines between HTML tags.

Justified-Gallery-HTML.md >folded

<div class="justified-gallery">
<img src="/gallery/animals/elephant.jpeg" alt="Elephant" />
<img src="/gallery/animals/dog.jpeg" alt="Dog" />
<img src="/gallery/animals/birds.jpeg" alt="Birds" />
<img src="/gallery/animals/fox.jpeg" alt="Fox" />
<img src="/gallery/animals/horse.jpeg" alt="Horse" />
<img src="/gallery/animals/leopard.jpeg" alt="Leopard" />
</div>

Note that the Markdown renderer adds your site’s root to Markdown image paths automatically, but it leaves HTML <img> tags as they are. If your site is in a subdirectory (root in _config.yml is not /), write the subdirectory in the src of HTML images yourself, but not in the paths of Markdown images. For example, this site uses root: /hexo-theme-icarus/, so the HTML version would use /hexo-theme-icarus/gallery/animals/elephant.jpeg while the Markdown version uses /gallery/animals/elephant.jpeg.

Preview

Here is an image grid created by Justified Gallery. You can also view the full image using lightGallery by clicking on any image.

The following photos come from pexels.com.

KaTeX

Installation Guide

You can use the KaTeX plugin to render \(\TeX\) expressions. To enable KaTeX, please set plugins > katex to true in your theme configurations.

_config.icarus.yml

plugins:
    katex: true

Please also use \\( and \\) to wrap your inline expressions and $$ or \\[ and \\] pair to wrap block expressions. For example,

Some-Post.md >folded

This is an inline expression: \\(ax^2+bx+c=0\\).

This is a block expression:
$$\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} 
{1+\frac{e^{-8\pi}} {1+\cdots} } } }$$

This is another block expression:
\\[f(x) = \int_{-\infty}^\infty\hat f(\xi)e^{2 \pi i \xi x}d\xi\\]

You can also write chemical equations with the \ce command, such as \\(\ce{H2O}\\).

Sometimes your \(\TeX\) syntax will be mistaken as Markdown syntax, which will result in rendering error. For instance, the following equation will not work since it contains more than one _ (underscores), which are mistaken for the italic text when processed by the Markdown renderer:

Some-Post.md

$$
\hat{x}_{k}=\hat{x}_{k}^{-}+K_{t}\left(y_{k}\right)
$$

In this case, you can either escape every character that may cause confusion:

Some-Post.md

$$
\hat{x}\_{k}=\hat{x}\_{k}^{-}+K\_{t}\left(y\_{k}\right)
$$

or simply wrap the whole equation with an additional pair of HTML tags:

Some-Post.md

<div>
$$
\hat{x}_{k}=\hat{x}_{k}^{-}+K_{t}\left(y_{k}\right)
$$
</div>

MathJax

Installation Guide

You can use MathJax to render \(\TeX\) or MathML expressions. To enable MathJax, please set plugins > mathjax to true in your theme configurations.

_config.icarus.yml

plugins:
    mathjax: true

When using the \(\TeX\) syntax, please use $ or \\( and \\) to wrap your inline expressions and $$ or \\[ and \\] pair to wrap block expressions. You can also use \(\LaTeX\) environments directly. For example,

Tex-Example.md >folded

This is an inline expression: \\(ax^2+bx+c=0\\). This is another inline expression: $ax^2+bx+c>0$.

This is a block expression:
$$\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} 
{1+\frac{e^{-8\pi}} {1+\cdots} } } }$$

This is another block expression:
\\[f(x) = \int_{-\infty}^\infty\hat f(\xi)e^{2 \pi i \xi x}d\xi\\]

Or use \\(\LaTeX\\) environment:
\\begin{equation}
A =
\\begin{bmatrix}
  a & b \\\\
  c & c
\\end{bmatrix}
\\end{equation}

Or you can use MathML syntax. For example,

MathML-Example.md >folded

When 
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>a</mi>
    <mo>≠</mo>
    <mn>0</mn>
</math>, 
there are two solutions to 
<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>a</mi>
    <msup>
        <mi>x</mi>
        <mn>2</mn>
    </msup>
    <mo>+</mo>
    <mi>b</mi>
    <mi>x</mi>
    <mo>+</mo>
    <mi>c</mi>
    <mo>=</mo>
    <mn>0</mn>
</math> 
and they are
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <mi>x</mi>
    <mo>=</mo>
    <mrow>
        <mfrac>
            <mrow>
                <mo>-</mo>
                <mi>b</mi>
                <mo>±</mo>
                <msqrt>
                    <msup>
                        <mi>b</mi>
                        <mn>2</mn>
                    </msup>
                    <mo>-</mo>
                    <mn>4</mn>
                    <mi>a</mi>
                    <mi>c</mi>
                </msqrt>
            </mrow>
            <mrow>
                <mn>2</mn>
                <mi>a</mi>
            </mrow>
        </mfrac>
    </mrow>
    <mtext>.</mtext>
</math>

Sometimes your latex syntax will be mistaken as Markdown syntax, which will result in rendering error. Please refer to the KaTeX section for solutions to this.

Preview(\(\TeX\) & \(\LaTeX\))

This is an inline expression: \(ax^2+bx+c=0\). This is another inline expression: $ax^2+bx+c>0$.

This is a block expression: $$\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$$

This is another block expression: \[f(x) = \int_{-\infty}^\infty\hat f(\xi)e^{2 \pi i \xi x}d\xi\]

Or use \(\LaTeX\) environment: \begin{equation} A = \begin{bmatrix} a & b \\ c & c \end{bmatrix} \end{equation}

Preview(MathML)

When $a\ne 0$, there are two solutions to $a{x}^2+bx+c=0$ and they are $$x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}\text{.}$$

Cookie Consent

Installation Guide

You can show a cookie consent dialog to your visitor by enabling the Cookie Consent plugin. Please refer to Download Cookie Consent and Documentation for the Cookie Consent plugin for details on each configuration setting. You can also disable the cookie consent dialog by commenting out the configurations.

type decides what the dialog does:

• info only tells your visitors that your site uses cookies. This is the default.
• opt-in loads the web analytics plugins listed below only after the visitor allows cookies.
• opt-out loads the web analytics plugins listed below unless the visitor declines cookies.

opt-in and opt-out apply to the following plugins: baidu_analytics, busuanzi, cnzz, google_analytics, hotjar, matomo, statcounter, twitter_conversion_tracking, umami, and waline_pageview. In these two modes, visitors can change their choice later with the Cookie Policy button.

_config.icarus.yml

plugins:
    cookie_consent:
        # info: notice only; opt-in: load after consent; opt-out: load until denied
        type: info
        # Theme of the popup. Can be "block", "edgeless", or "classic"
        theme: edgeless
        # Whether the popup should stay static regardless of the page scrolls
        static: false
        # Where on the screen the consent popup should display
        position: bottom-left
        # URL to your site's cookie policy
        policyLink: 'https://www.cookiesandyou.com/'

Outdated Browser

Installation Guide

You can use the Outdated Browser plugin to detect outdated browsers used by your site’s visitors and remind them to upgrade their browsers. It shows a warning above the navigation bar when the browser lacks CSS features that the layout and colors of the theme need. To enable it, please set plugins > outdated_browser to true in your theme configurations.

_config.icarus.yml

plugins:
    outdated_browser: true

Page Loading Animations

Installation Guide

Page Loading Animations are enabled by Icarus by default. To disable it, please set plugins > animejs to false in your theme configurations.

_config.icarus.yml

plugins:
    animejs: false

Also, to disable the page loading progressbar, please set plugins > progressbar to false in your theme configurations.

_config.icarus.yml

plugins:
    progressbar: false

Back to Top Button

Installation Guide

Icarus shows a button that takes your visitors back to the top of the page after they scroll down. It is enabled by default: plugins > back_to_top is true in the configuration file generated by Icarus. To hide the button, set it to false in your theme configurations.

_config.icarus.yml

plugins:
    back_to_top: false

PJAX

Installation Guide

With PJAX, clicking a link to another page of your site does not reload the whole page. Instead, Icarus fetches the new page in the background and only replaces the parts that change, such as the navigation bar, the main content, and the sidebars, which makes moving between pages faster and smoother. PJAX is enabled by default: plugins > pjax is true in the configuration file generated by Icarus. If your configuration file does not have this setting, add it to enable PJAX. To disable PJAX, set it to false in your theme configurations.

_config.icarus.yml

plugins:
    pjax: true

Some notes on PJAX:

• If you add your own scripts that set up the page content, run them again on the pjax:complete event, not only on DOMContentLoaded. To clean up before the content is replaced, listen to the hexo:page:before-replace event.
• The comment section is replaced together with the main content, and the scripts of the comment plugin run again, so the comments of each new page are loaded.
• MathJax typesets the expressions of each new page again.
• The scripts of web analytics plugins are not run again after a switch, so that a visit is not counted twice. Matomo, Umami, BuSuanZi, and the Waline page view counter count the pages that visitors switch to by themselves. Other analytics services may only count the first page that a visitor opens, unless they track page changes on their own.

Prefetch

Installation Guide

Icarus can prefetch the page of a link to your site while the pointer of a visitor rests on it, or as soon as they touch it on a touch screen, so that the page opens faster when they click it. To enable it, set plugins > prefetch to true in your theme configurations. delay is how long, in milliseconds, the pointer has to rest on a link before its page is prefetched (65 by default), so that moving the pointer across links does not prefetch all of them.

_config.icarus.yml

plugins:
    prefetch: true
    # Or, with another delay:
    # prefetch:
    #     delay: 100

Some notes on prefetching:

• Only the pages of your site are prefetched: not links to other sites, downloads, or files such as images and feeds. To leave a link out, add the data-no-prefetch attribute to it.
• Nothing is prefetched when the browser of the visitor asks to save data, or on a 2G connection.
• With PJAX, the switch to the page uses the prefetched page. Without PJAX, browsers that support speculation rules use it for the navigation. Other browsers prefetch it with <link rel="prefetch">, which they only use if your host allows the page to be cached.

Something wrong with this article? Click here to submit your revision.