Icarus User Guide - Other Plugins

This article covers other plugins supported by Icarus 6.

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\\]

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.

_config.icarus.yml

plugins:
    cookie_consent:
        # The compliance type. Can be "info", "opt-in", or "opt-out"
        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. To enable it, please set plugins > outdated_browser to true in your theme configurations. Click here to see a live preview of this plugin.

_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:

• 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.

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