Custom Styles

自动样式注入 ​

Automatic Style Injection ​

仅首次新建 styles/index.scss 文件时，需要重启开发服务器，以确保 scss 被加载。

新建 styles 文件夹，目录下的以下文件将会被自动引入：

  • index.scss
  • index.css
  • css-vars.scss
  • css-vars.css

我们推荐您：

  • 新建 index.scss 书写全局样式，并可在其中导入其他样式，它会被自动引入。
  • 新建 css-vars.scss 书写 CSS 变量，它会被自动引入。

Create styles folder, and the following files under the directory will be automatically imported:

  • index.scss
  • index.css
  • css-vars.scss
  • css-vars.css

We recommend you:

  • Create index.scss file to write a global style and import other styles in it. It will be imported automatically.
  • Create css-vars.scss file to write CSS variables. It will be imported automatically.

自定义字体 ​

Custom Font ​

譬如你可以在 styles/css-vars.scss 中覆盖默认的字体。

  • serif: 衬线字体：字体 abcd 123
  • sans: 非衬线字体：字体 abcd 123
  • mono: 等宽字体：字体 abcd 123

For example, you can override the default font in 'styles/css-vars.scss'.

  • serif: serif font: Font abcd 123
  • sans: sans-serif font: Font abcd 123
  • mono: monospaced font: Font abcd 123
scss
:root {
  --va-font-serif: 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto,  serif;
  --va-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --va-font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
}

示例 ​

自定义光标 ​

Custom Cursor ​

WARNING注意

编写中…

替换鼠标光标，默认关闭。

例如使用 Material Design Cursors。

  • default: 默认状态下图标。
  • pointer: 指针（即链接状态下）图标。
  • text: 文本选择图标。
scss
// $cursor-default = hexo-config('cursor.default');
// $cursor-pointer = hexo-config('cursor.pointer');
// $cursor-text = hexo-config('cursor.text');

body {
  cursor: url($cursor-default), auto;
}

a {
  cursor: url($cursor-pointer), auto;

  &:hover {
    cursor: url($cursor-pointer), auto;
  }
}

.hty-icon-button {
  cursor: url($cursor-pointer), pointer;
}

input {
  cursor: url($cursor-text), auto;
}

Contributors

To Be Continued.
Edit this page on GitHub

Last updated: