@fragy/purity NPM

Purity

Purity is the default theme for Fragy, it's light-weight, and customizable.

📕 How to use

Fisrt of all, you must have an initialized Fragy project.

Then, use npm to install this theme package:

npm install @fragy/purity

⚙ Configuration

For full configuration, see config.js.

Color

You can choose any color as the primary color for Purity, here's an example:

{
  theme: {
    package: '@fragy/purity',
    config: {
      color: {
        primary: '#40aeff',
        autoGenerate: true,
      },
    },
  },
}

Prefetch

Purity enabled prefetch for article and article list by default.

It allows the user to interact with the page in such a way that the content of the article or list appears to be loaded instantly. User no longer have to wait for the loading process.

If you want to disable this feature, you can set articleList.prefetch and article.prefetch to false.

Obviously, you can disable the prefetch of article and article list separately.

Text Align

Purity use justify align for the text by default, if you don't want it, you can set articleList.useJustifyAlign and article.useJustifyAlign to false.

Font

Purity supports custom fonts, you can set the font you like to fontFamily in the theme config.

If you want to use font from Google Fonts, you should visit Google Fonts to pick a font, then you will get a link tag code looks like this:

<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap" rel="stylesheet">

You should put the words after family= and before the &display= to the theme config, here's an example:

{
  theme: {
    package: '@fragy/purity',
    config: {
      gfont: {
        enable: false,
        family: 'Noto+Sans+SC:wght@100;300;400;500;700;900',
      },
    },
  },
}

For China users, you may need a proxy to accelerate the loading of fonts, you can set googleApisHost and gstaticHost under the gfont scope to specific a host to load font files.

Footer

Purity provide a default footer which contains the "Powered by" text, CC-BY-4.0 license icon (disabled by default), and a light/dark mode swticher.

If you don't want it, you can set footer.poweredby to false.

Each features can be enabled or disabled separately.