diff --git a/demo/_config.async.yml b/demo/_config.async.yml index 40ae9cfe..02fbe3ad 100644 --- a/demo/_config.async.yml +++ b/demo/_config.async.yml @@ -11,7 +11,12 @@ top_bars: url: /links/ - title: menu.about url: /about/ + - title: 自定义 + url: /customize_page/ +banner: + index: + bgurl: [/img/bg.jpg,/img/banner.png] sidebar: typedTextPrefix: I`m diff --git a/demo/_config.yml b/demo/_config.yml index 8b7688b3..7b681459 100644 --- a/demo/_config.yml +++ b/demo/_config.yml @@ -46,7 +46,7 @@ relative_link: false future: true highlight: enable: true - line_number: false + line_number: true auto_detect: false tab_replace: '' wrap: true diff --git a/demo/source/_posts/hello-world.md b/demo/source/_posts/hello-world.md index e084c1fa..6738f2a5 100644 --- a/demo/source/_posts/hello-world.md +++ b/demo/source/_posts/hello-world.md @@ -1,7 +1,7 @@ --- title: Hello Theme Async date: 2022-09-21 15:08:29 -cover: https://img.lkxin.cn/tu/2022/09/22/632c1767d795b.png +cover: [https://img.lkxin.cn/tu/2022/09/22/632c1767d795b.png,https://th.wallhaven.cc/small/k7/k7q9m7.jpg] sticky: 1 --- ![1663833969157.png](https://img.lkxin.cn/tu/2022/09/22/632c1767d795b.png)_示例图_ diff --git a/demo/source/customize_page/index.md b/demo/source/customize_page/index.md new file mode 100644 index 00000000..61a51ef2 --- /dev/null +++ b/demo/source/customize_page/index.md @@ -0,0 +1,462 @@ +--- +title: 自定义页面 +date: 2022-09-22 15:45:29 +single_column: true +--- + +
+
+
+
74+
+
+
Completed projects
+
+
+
+
+
50+
+
+
Completed projects
+
+
+
+
+
14+
+
+
Honors and Awards
+
+
+
+
+
140+
+
+
Honors and Awards
+
+
+
+ +
+``` html +
+
+ 140 + + +
+
+
Honors and Awards
+
+``` +
+ +
+
+
图片预览卡片
+
+
+ + +
+ item +
+
+
Branded cup
+
+
+ + +
+
+ + +
+ item +
+
+
Stylish business card
+
+
+ + +
+
+ + +
+ item +
+
+
Mobile application
+
+
+ + +
+
+ +
+``` html + +
+ item +
+
+
Branded cup
+
+
+ +``` +
+ +
+
+
订单卡片
+
+
+
+
+
Hourly Payment
+
+ +
$29h
+ +
+ +
    +
  • Amet lorem.
    • +
  • Dolor ipsum
    • +
  • Sit amet
    • +
  • Lorem dolor
    • +
+ Order now
+
+
+
+
+
Hourly Payment
+
+ +
$29h
+ +
+ +
    +
  • Amet lorem.
    • +
  • Dolor ipsum
    • +
  • Sit amet
    • +
  • Lorem dolor
    • +
+ Order now
+
+
+
+
+
Full Time
+
+ +
$2999h
+ +
+ +
    +
  • Amet lorem.
    • +
  • Dolor ipsum
    • +
  • Sit amet
    • +
  • Lorem dolor
    • +
+ Order now
+
+
+ +
+``` html +
+ +
+
Hourly Payment
+
+ + +
$29h
+ +
+ + + + Order now +
+``` +
+ +
+
+
百分比卡片
+
+
+
+
+
+
Html
+ 100%
+
+
+
+
+
+
+
CSS
+ 100%
+
+
+
+
+
+
+
SCSS
+ 80%
+
+
+
+
+
+
+
+
+
+
+
jQuery
+ 90%
+
+
+
+
+
+
+
Vue js
+ 70%
+
+
+
+
+
+
+
Js
+ 60%
+
+
+
+
+
+
+
+ +
+``` html +
+
+
+
Html
+ 100%
+
+
+
+
+
+
+
CSS
+ 100%
+
+
+
+
+
+
+
SCSS
+ 80%
+
+
+
+
+
+``` +
+ +
+
+
文章列表卡片
+
+
+
+
cover +
Make a resume for yourself today
+ +
+
    +
  • 17 JULYS
    • +
  • 14:32
    • +
  • Emma T.
    • +
+
+
cover +
Make a resume for yourself today
+ +
+
    +
  • 17 JULYS
    • +
  • 14:32
    • +
  • Emma T.
    • +
+
+
cover +
Create your own beauty blog with Trueman
+ +
+
    +
  • 17 JULYS
    • +
  • 14:32
    • +
  • Emma T.
    • +
+
+
+
+
+
+
cover +
Make a resume for yourself today
+ +
+
    +
  • 17 JULYS
    • +
  • 14:32
    • +
  • Emma T.
    • +
+
+
cover +
Create your own beauty blog with Trueman
+ +
+
    +
  • 17 JULYS
    • +
  • 14:32
    • +
  • Emma T.
    • +
+
+
cover +
Make a resume for yourself today
+ +
+
    +
  • 17 JULYS
    • +
  • 14:32
    • +
  • Emma T.
    • +
+
+
+
+
+ +
+``` html +
+
+ + + cover + +
Make a resume for yourself today
+ +
+
    +
  • 17 JULYS
    • +
  • 14:32
    • +
  • Emma T.
    • +
+
+
+ + + cover + +
Make a resume for yourself today
+ +
+
    +
  • 17 JULYS
    • +
  • 14:32
    • +
  • Emma T.
    • +
+
+
+ + + cover + +
Create your own beauty blog with Trueman
+ +
+
    +
  • 17 JULYS
    • +
  • 14:32
    • +
  • Emma T.
    • +
+
+
+``` +
+ +
+
+
视频卡片
+
+
+
+
video-cover +
+
+
+
+
+ +
+``` html +
+
+ video-cover +
+ + + +
+
+``` +
+ + +
+
+
图片自适应
+
+
+ +{% imgs trm-cover /img/1.jpg /img/2.jpg item %} + +
+
+ +
+``` html +item +item + + + +{% imgs trm-cover /img/1.jpg /img/2.jpg item %} +``` +
diff --git a/demo/source/img/1.jpg b/demo/source/img/1.jpg new file mode 100644 index 00000000..e5cc2111 Binary files /dev/null and b/demo/source/img/1.jpg differ diff --git a/demo/source/img/2.jpg b/demo/source/img/2.jpg new file mode 100644 index 00000000..260781c3 Binary files /dev/null and b/demo/source/img/2.jpg differ diff --git a/demo/source/img/3.gif b/demo/source/img/3.gif new file mode 100644 index 00000000..528af7f9 Binary files /dev/null and b/demo/source/img/3.gif differ diff --git a/demo/source/img/bg.jpg b/demo/source/img/bg.jpg new file mode 100644 index 00000000..07281920 Binary files /dev/null and b/demo/source/img/bg.jpg differ diff --git a/docs/.vitepress/assets/log.json b/docs/.vitepress/assets/log.json index 3d82eb3f..a48ccfb8 100644 --- a/docs/.vitepress/assets/log.json +++ b/docs/.vitepress/assets/log.json @@ -2,6 +2,28 @@ { "large_version": "v1.2.x", "children": [ + { + "version": "1.2.11", + "date": "2022-12-30", + "logs": [ + { + "type": "feat", + "text": "支持复制代码片段" + }, + { + "type": "feat", + "text": "支持根据主题模式设置黑白两种logo、文章图片、封面等" + }, + { + "type": "feat", + "text": "支持自定义页面" + }, + { + "type": "perf", + "text": "优化代码片段样式" + } + ] + }, { "version": "1.2.9", "date": "2022-12-23", diff --git a/docs/guide/config.md b/docs/guide/config.md index 28af1f3f..2cad91e5 100644 --- a/docs/guide/config.md +++ b/docs/guide/config.md @@ -62,6 +62,7 @@ theme: 用于 logo、icon、PWA 安装图标配置。 - `logo`：顶部 logo +- `dark_logo`：顶部 logo，暗黑模式时显示 - `icon16`：icon 16*16 - `icon32`：icon 32*32 - `appleTouchIcon`：iOS 添加到桌面是图标 @@ -162,6 +163,7 @@ assets: - `email`：邮箱 - `domain`：域名 - `avatar`：头像 +- `dark_avatar`：头像，黑暗主题时显示 - `describe`：网站简介 - `ruleText`：友链交换规则 - ~~`birthDay`：博客计时开始时间 v1.1.7 弃用~~ @@ -253,7 +255,7 @@ sidebar: - `default`：默认配置 - `type`：横幅类型 img、slideshow、video - - `bgurl`：背景图地址，如果 type 是 slideshow，需要为数组 + - `bgurl`：背景图地址，如果 type 是 slideshow，必须为数组。如果 type 是 img 时，可为字符串或数组，如果数组长度为 2 则会根据主题自动切换。 - `bannerTitle`：横幅上标题 - `bannerText`：横幅描述 - `position`： 同 CSS object-position diff --git a/docs/guide/page.md b/docs/guide/page.md index 7949ebac..9c87a95a 100644 --- a/docs/guide/page.md +++ b/docs/guide/page.md @@ -6,7 +6,7 @@ - `keywords`：关键字，用于 meta 标签 - `description`：描述，用于 meta 标签 -- `cover`：文章封面图 +- `cover`：文章封面图，可为字符串或数组，如果数组长度为 2 则会根据主题自动切换。 - `sticky`：首页排序值 - `banner`：文章页横幅背景，字段参考 [横幅 banner.default](/guide/config.html#横幅-banner) 字段。 - `toc`：是否显示目录，仅当值为 false 生效。默认通过 `_config.async.yaml` 的 `is_toc` 控制。 @@ -170,4 +170,16 @@ layout: 404 --- ``` -在本地，你也可以直接访问 `/404.html` 查看效果。只有当你将其部署到 `GitHub Pages` 上，你访问不存在的页面才会显示。 \ No newline at end of file +在本地，你也可以直接访问 `/404.html` 查看效果。只有当你将其部署到 `GitHub Pages` 上，你访问不存在的页面才会显示。 + + +## 自定义页面 Customize Page +可以直接在 `source` 目录下新建文件夹，然后添加 `md` 文件。自定义页面只会保留顶部菜单、背景区域、左侧个人信息（如果不想要个人信息，可以页面设置为 `single_column: true`）。 + +``` yaml +--- +title: 自定义页面 +single_column: true +--- +``` +在自定义页面时，可以直接复制主题中 HTML 代码使用，增加编写自定义页面效率，除了复用默认主题代码，还有其他内置卡片样式可以参考 [自定义页面演示](https://hexo-theme-async.imalun.com/demosite/customize_page/) \ No newline at end of file