docs: add how to custom css & font

This commit is contained in:
YunYouJun 2022-11-29 06:48:44 +08:00
parent d91a17f52b
commit 83bc612ecc
9 changed files with 56 additions and 18 deletions

View File

@ -0,0 +1 @@
// custom your css variables here

View File

@ -19,3 +19,19 @@ end: false
- 新建 `index.scss` 书写全局样式,并可在其中导入其他样式,它会被自动引入。
- 新建 `css-vars.scss` 书写 CSS 变量,它会被自动引入。
## 自定义字体
譬如你可以在 `styles/css-vars.scss` 中覆盖默认的字体。
- `serif`: 衬线字体:<span font="serif">字体 abcd 123</span>
- `sans`: 非衬线字体:<span font="sans">字体 abcd 123</span>
- `mono`: 等宽字体:<span font="mono">字体 abcd 123</span>
```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;
}
```

21
docs/pages/guide/page.md Normal file
View File

@ -0,0 +1,21 @@
---
title: Page
title_zh-CN: 页面
categories:
- Guide
---
## Frontmatter
You can custom page by front-matter.
### titleTemplate
```md
---
title: Cool
titleTemplate: '%s - Valaxy'
---
```
You will get html title `Cool - Valaxy`.

View File

@ -1,7 +1,7 @@
---
layout: home
title: Valaxy
titleTemplate: Next Generation Static Blog Framework
titleTemplate: '%s - Next Generation Static Blog Framework'
hero:
name: VALAXY

View File

@ -20,7 +20,7 @@
"@docsearch/css": "^3.3.0",
"@docsearch/js": "^3.3.0",
"@iconify-json/ant-design": "^1.1.4",
"@iconify-json/simple-icons": "^1.1.36",
"@iconify-json/simple-icons": "^1.1.37",
"valaxy-addon-waline": "workspace:*"
},
"devDependencies": {

View File

@ -26,7 +26,7 @@ const { locale } = useI18n()
useHead({
title: computed(() => fm.value[`title_${locale.value}`] || fm.value.title),
titleTemplate: title => title ? `${title} - ${config.value.title}` : config.value.title,
titleTemplate: computed(() => fm.value.titleTemplate || ((title: string) => title ? `${title} - ${config.value.title}` : config.value.title)),
link: [
{
rel: 'icon',

View File

@ -20,10 +20,10 @@ $border: map.merge(
$font: () !default;
$font: map.merge(
(
"serif": "'Noto Serif SC', STZhongsong, Roboto, serif",
"sans":
'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
"mono": 'Menlo, Monaco, Consolas, "Courier New", monospace',
"serif": "'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif",
),
$font
);

View File

@ -90,7 +90,7 @@
"nprogress": "^0.2.0",
"open": "^8.4.0",
"pascal-case": "^3.1.2",
"pinia": "^2.0.25",
"pinia": "^2.0.27",
"sass": "^1.56.1",
"shiki": "^0.11.1",
"star-markdown-css": "^0.4.1",
@ -120,7 +120,7 @@
"@types/katex": "^0.14.0",
"@types/markdown-it": "^12.2.3",
"@types/nprogress": "^0.2.0",
"@types/yargs": "^17.0.13",
"@types/yargs": "^17.0.15",
"debug": "^4.3.4",
"diacritics": "^1.3.0",
"https-localhost": "^4.7.1"

View File

@ -106,7 +106,7 @@ importers:
'@types/katex': ^0.14.0
'@types/markdown-it': ^12.2.3
'@types/nprogress': ^0.2.0
'@types/yargs': ^17.0.13
'@types/yargs': ^17.0.15
'@vitejs/plugin-vue': ^3.2.0
'@vueuse/core': ^9.6.0
'@vueuse/head': ^1.0.18
@ -137,7 +137,7 @@ importers:
nprogress: ^0.2.0
open: ^8.4.0
pascal-case: ^3.1.2
pinia: ^2.0.25
pinia: ^2.0.27
sass: ^1.56.1
shiki: ^0.11.1
star-markdown-css: ^0.4.1
@ -186,7 +186,7 @@ importers:
nprogress: 0.2.0
open: 8.4.0
pascal-case: 3.1.2
pinia: 2.0.25_vue@3.2.45
pinia: 2.0.27_vue@3.2.45
sass: 1.56.1
shiki: 0.11.1
star-markdown-css: 0.4.1
@ -215,7 +215,7 @@ importers:
'@types/katex': 0.14.0
'@types/markdown-it': 12.2.3
'@types/nprogress': 0.2.0
'@types/yargs': 17.0.13
'@types/yargs': 17.0.15
debug: 4.3.4
diacritics: 1.3.0
https-localhost: 4.7.1
@ -242,14 +242,14 @@ importers:
'@docsearch/css': ^3.3.0
'@docsearch/js': ^3.3.0
'@iconify-json/ant-design': ^1.1.4
'@iconify-json/simple-icons': ^1.1.36
'@iconify-json/simple-icons': ^1.1.37
valaxy: workspace:*
valaxy-addon-waline: workspace:*
dependencies:
'@docsearch/css': 3.3.0
'@docsearch/js': 3.3.0
'@iconify-json/ant-design': 1.1.4
'@iconify-json/simple-icons': 1.1.36
'@iconify-json/simple-icons': 1.1.37
valaxy-addon-waline: link:../valaxy-addon-waline
devDependencies:
valaxy: link:../valaxy
@ -695,8 +695,8 @@ packages:
'@iconify/types': 2.0.0
dev: false
/@iconify-json/simple-icons/1.1.36:
resolution: {integrity: sha512-OYI8YNyYN9JJe3dFTtQBnOLJaEGMDg66Y8hSOTlKmXfHGpWvd2AK8qzKcuh7Xs3R5BNUk2Fik5z1VNS+0vIP+g==}
/@iconify-json/simple-icons/1.1.37:
resolution: {integrity: sha512-swCfWfY9vspxWmjARHpZjeK5qxKVU19Z/9dt1cYRYX3UzfeW8SYu9ifuov3zPmAgl2D+G/8nlZxNU4eCOb6kVg==}
dependencies:
'@iconify/types': 2.0.0
dev: false
@ -1076,8 +1076,8 @@ packages:
resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==}
dev: true
/@types/yargs/17.0.13:
resolution: {integrity: sha512-9sWaruZk2JGxIQU+IhI1fhPYRcQ0UuTNuKuCW9bR5fp7qi2Llf7WDzNa17Cy7TKnh3cdxDOiyTu6gaLS0eDatg==}
/@types/yargs/17.0.15:
resolution: {integrity: sha512-ZHc4W2dnEQPfhn06TBEdWaiUHEZAocYaiVMfwOipY5jcJt/251wVrKCBWBetGZWO5CF8tdb7L3DmdxVlZ2BOIg==}
dependencies:
'@types/yargs-parser': 21.0.0
dev: true
@ -5052,8 +5052,8 @@ packages:
hasBin: true
dev: true
/pinia/2.0.25_vue@3.2.45:
resolution: {integrity: sha512-3reAkjJ6bW2D5hZKRMS0c9rUbHVlsVyZd037xO0PJr2AuF/09RRSBnFLlJgmHF4Jx6dEoW/jZBOHTushY7IMlw==}
/pinia/2.0.27_vue@3.2.45:
resolution: {integrity: sha512-nOnXP0OFeL8R4WjAHsterU+11vptda643gH02xKNtSCDPiRzVfRYodOLihLDoa0gL1KKuQKV+KOzEgdt3YvqEw==}
peerDependencies:
'@vue/composition-api': ^1.4.0
typescript: '>=4.4.4'