feat(theme): add portfolio homepage

vuepress-theme-hope · Apr 29, 2024 · 6c08166 · 6c08166
1 parent a1bd30d
commit 6c08166
Show file tree

Hide file tree

Showing 38 changed files with 816 additions and 70 deletions.
diff --git a/demo/md-enhance/src/demo/include.md b/demo/md-enhance/src/demo/include.md
@@ -4,14 +4,14 @@ title: Include Files
 
 ## Demo
 
-`<!-- @include:./demo.snippet.md -->`:
+`<!-- @include: ./demo.snippet.md -->`:
 
 <!-- @include: ./demo.snippet.md -->
 
-`<!-- @include:./demo.snippet.md{9-13} -->`:
+`<!-- @include: ./demo.snippet.md{9-13} -->`:
 
 <!-- @include: ./demo.snippet.md{9-13} -->
 
-`<!-- @include:./demo.snippet.md#snippet -->`:
+`<!-- @include: ./demo.snippet.md#snippet -->`:
 
 <!-- @include: ./demo.snippet.md#snippet -->
diff --git a/demo/theme-blog/src/README.md b/demo/theme-blog/src/README.md
@@ -45,4 +45,4 @@ This is a blog home page demo.
 
 To use this layout, you should set both `layout: BlogHome` and `home: true` in the page front matter.
 
-For related configuration docs, please see [blog homepage](https://theme-hope.vuejs.press/guide/blog/home/).
+For related configuration docs, please see [blog homepage](https://theme-hope.vuejs.press/guide/blog/home.html).
diff --git a/demo/theme-blog/src/zh/README.md b/demo/theme-blog/src/zh/README.md
@@ -45,4 +45,4 @@ footer: 自定义你的页脚文字
 
 要使用此布局，你应该在页面前端设置 `layout: BlogHome` 和 `home: true`。
 
-相关配置文档请见 [博客主页](https://theme-hope.vuejs.press/zh/guide/blog/home/)。
+相关配置文档请见 [博客主页](https://theme-hope.vuejs.press/zh/guide/blog/home.html)。
diff --git a/docs/theme/src/.vuepress/theme.ts b/docs/theme/src/.vuepress/theme.ts
@@ -17,6 +17,39 @@ export default theme(
 
     blog: {
       name: "VuePress Theme Hope",
+      medias: {
+        Baidu: "https://example.com",
+        BiliBili: "https://example.com",
+        Bitbucket: "https://example.com",
+        Dingding: "https://example.com",
+        Discord: "https://example.com",
+        Dribbble: "https://example.com",
+        Email: "mailto:info@example.com",
+        Evernote: "https://example.com",
+        Facebook: "https://example.com",
+        Flipboard: "https://example.com",
+        Gitee: "https://example.com",
+        GitHub: "https://example.com",
+        Gitlab: "https://example.com",
+        Gmail: "mailto:info@example.com",
+        Instagram: "https://example.com",
+        Lark: "https://example.com",
+        Lines: "https://example.com",
+        Linkedin: "https://example.com",
+        Pinterest: "https://example.com",
+        Pocket: "https://example.com",
+        QQ: "https://example.com",
+        Qzone: "https://example.com",
+        Reddit: "https://example.com",
+        Rss: "https://example.com",
+        Steam: "https://example.com",
+        Twitter: "https://example.com",
+        Wechat: "https://example.com",
+        Weibo: "https://example.com",
+        Whatsapp: "https://example.com",
+        Youtube: "https://example.com",
+        Zhihu: "https://example.com",
+      },
     },
 
     fullscreen: true,

diff --git a/docs/theme/src/demo/README.md b/docs/theme/src/demo/README.md
@@ -26,6 +26,8 @@ actions:
 
 - [Custom Blog HomePage](./custom-blog-home.md)
 
+- [Portfolio HomePage](./portfolio-home.md)
+
 - [Encrypt Page](./encrypt.md) (Password: 1234)
 
 - <ProjectLink name="md-enhance" path="/guide/content/revealjs/demo.html">Slide Page</ProjectLink>
diff --git a/docs/theme/src/demo/blog-home.md b/docs/theme/src/demo/blog-home.md
@@ -45,4 +45,4 @@ This is a blog home page demo.
 
 To use this layout, you should set both `layout: BlogHome` and `home: true` in the page front matter.
 
-For related configuration docs, please see [blog homepage](https://theme-hope.vuejs.press/guide/blog/home/).
+For related configuration docs, please see [blog homepage](../guide/blog/home.md#blog-style-homepage).
diff --git a/docs/theme/src/demo/custom-blog-home.md b/docs/theme/src/demo/custom-blog-home.md
@@ -45,4 +45,4 @@ This is a blog home page demo.
 
 To use this layout, you should set both `layout: BlogHome` and `home: true` in the page front matter.
 
-For related configuration docs, please see [blog homepage](https://theme-hope.vuejs.press/guide/blog/home/).
+For related configuration docs, please see [blog homepage](../guide/blog/home.md#blog-style-homepage).
diff --git a/docs/theme/src/demo/portfolio-home.md b/docs/theme/src/demo/portfolio-home.md
@@ -0,0 +1,21 @@
+---
+home: true
+layout: PortfolioHome
+title: Portfolio Home
+icon: home
+name: Conan Edogawa
+avatar: https://theme-hope-assets.vuejs.press/hero/conan.png
+
+titles:
+  - Genius young detective
+  - Lan’s childhood sweetheart
+  - The biggest rival of the black organization
+
+footer: false
+---
+
+This is a portfolio home page demo.
+
+To use this layout, you should set both `layout: PortfolioHome` and `home: true` in the page front matter.
+
+For related configuration docs, please see [portfolio homepage](../guide/blog/home.md#portfolio-style-homepage).
diff --git a/docs/theme/src/get-started/command.md b/docs/theme/src/get-started/command.md
@@ -35,7 +35,7 @@ If you are using the VuePress Theme Hope template, you can find the following th
 
 This means you can use:
 
-::: code-tabs#shell
+::: tabs#shell
 
 @tab pnpm
 

diff --git a/docs/theme/src/guide/advanced/replace.md b/docs/theme/src/guide/advanced/replace.md
@@ -186,6 +186,7 @@ Components:
 - `@theme-hope/modules/blog/components/InfoList`: blog info list
 - `@theme-hope/modules/blog/components/InfoPanel`: blog info panel
 - `@theme-hope/modules/blog/components/Pagination`: pagination
+- `@theme-hope/modules/blog/components/PortfolioHome`: portfolio homepage
 - `@theme-hope/modules/blog/components/ProjectPanel`: blog homepage project panel
 - `@theme-hope/modules/blog/components/SocialMedia`: social media links
 - `@theme-hope/modules/blog/components/TagList`: tag list
@@ -320,6 +321,12 @@ Components that provide slots are as follows:
   - `info` slot will receive `text` `tagline` `image` `imageDark` `style` `alt` and `isFullScreen` props.
   - `bg` slot will receive `image` `bgStyle` and `isFullScreen` props.
 
+- `PortfolioHero`: `avatar` `bg`, `info`
+
+  - `avatar` slot will receive `avatar` `avatarDark` `avatarStyle` and `alt` props.
+  - `info` slot will receive `name` `welcome` `title` `titles` and `links` props.
+  - `bg` slot will receive `image` `imageDark` and `bgStyle` props.
+
 **NavBar**:
 
 - `DropdownLink`: `title`

diff --git a/docs/theme/src/guide/blog/home.md b/docs/theme/src/guide/blog/home.md
@@ -10,17 +10,17 @@ tag:
   - Layout
 ---
 
-`vuepress-theme-hope` allows you to enable a blog-style homepage.
-
-You need to set `layout: BlogHome` and `home: true` in the frontmatter of homepage.
+`vuepress-theme-hope` allows you to enable a blog-style and a portfolio style homepage.
 
 <!-- more -->
 
+## Blog Style Homepage
+
+Set `layout: BlogHome` and `home: true` in the frontmatter of homepage.
+
 ![Homepage screenshot](./assets/blog-light.jpg#light)
 ![Homepage screenshot](./assets/blog-dark.jpg#dark)
 
-## Homepage information
-
 You can use `heroText` to set the main title and `tagline` to set the subtitle.
 
 If you have a logo, you can place it in the `public` folder and set it via `heroImage`, if you want to display another logo in night mode, you can use `heroImageDark`. For better A11y, we recommend that you set the description of Logo to `heroAlt`.
@@ -29,11 +29,7 @@ You can set the background image through `bgImage` and `bgImageDark`, but you ne
 
 If you need to customize some styles, you can set the style of the logo and background image through `heroImageStyle` and `bgImageStyle`.
 
-## Project Display
-
-Typically, you might want to display some projects, books, articles, links, friend links, etc. on your homepage.
-
-You can set them via `projects`, which is an array where each element is an object with the following keys:
+Typically, you might want to display some projects, books, articles, links, friend links, etc. on your homepage. You can set them via `projects`, which is an array where each element is an object with the following keys:
 
 - `name`: required, project name
 - `link`: required, project link, fill in an external path or absolute path
@@ -48,7 +44,27 @@ For complete configuration items, see [Blog Home Frontmatter Configuration](../.
 
 :::
 
-## Living Demo
+::: info Living Demo
 
 - [A blog homepage for current docs](../../demo/blog-home.md)
 - [A customized blog homepage for current docs](../../demo/custom-blog-home.md)
+
+:::
+
+## Portfolio Style HomePage
+
+Set `layout: PortfolioHome` and `home: true` in the frontmatter of homepage.
+
+To describe yourself, set `titles` in frontmatter with titles that fits you.
+
+You are expected to set a image of yours with `avatar` (and `avatarDark` for darkmode if needed). You can also set `bgImage` (and `bgImageDark` for darkmode if needed) to customize background image. Advanced style adjusting can be done with `avatarStyle` and `bgImageStyle` option.
+
+The name is default to `author` option in theme options, while you can set `name` in frontmatter to customize it. The welcome message can also be customized through `welcome` option in frontmatter.
+
+By default, media links set in `blog.medias` is displayed, while you can also set `medias` in frontmatter with `name` `icon` and `url` for each media to override.
+
+::: info Living Demo
+
+- [A portfolio demo](../../demo/portfolio-home.md)
+
+:::
diff --git a/docs/theme/src/zh/demo/README.md b/docs/theme/src/zh/demo/README.md
@@ -28,6 +28,8 @@ actions:
 
 - [自定义博客主页](./custom-blog-home.md)
 
+- [档案主页](./portfolio-home.md)
+
 - [加密文章](./encrypt.md) (密码: 1234)
 
 - <ProjectLink name="md-enhance" path="/zh/guide/content/revealjs/demo.html">幻灯片页面</ProjectLink>

diff --git a/docs/theme/src/zh/demo/blog-home.md b/docs/theme/src/zh/demo/blog-home.md
@@ -45,4 +45,4 @@ footer: 自定义你的页脚文字
 
 要使用此布局，你应该在页面前端设置 `layout: BlogHome` 和 `home: true`。
 
-相关配置文档请见 [博客主页](https://theme-hope.vuejs.press/zh/guide/blog/home/)。
+相关配置文档请见 [博客主页](../guide/blog/home.md#博客类型主页)。
diff --git a/docs/theme/src/zh/demo/custom-blog-home.md b/docs/theme/src/zh/demo/custom-blog-home.md
@@ -45,4 +45,4 @@ footer: 自定义你的页脚文字
 
 要使用此布局，你应该在页面前端设置 `layout: BlogHome` 和 `home: true`。
 
-相关配置文档请见 [博客主页](https://theme-hope.vuejs.press/zh/guide/blog/home/)。
+相关配置文档请见 [博客主页](../guide/blog/home.md#博客类型主页)。
diff --git a/docs/theme/src/zh/demo/portfolio-home.md b/docs/theme/src/zh/demo/portfolio-home.md
@@ -0,0 +1,22 @@
+---
+home: true
+layout: PortfolioHome
+title: 档案主页
+icon: home
+welcome: 你好，我是
+name: 江户川柯南
+avatar: https://theme-hope-assets.vuejs.press/hero/conan.png
+
+titles:
+  - 天才少年侦探
+  - 小兰的青梅竹马
+  - 黑衣组织的最大对手
+
+footer: false
+---
+
+这是一个档案主页的案例。
+
+要使用此布局，你应该在页面前端设置 `layout: PortfolioHome` 和 `home: true`。
+
+相关配置文档请见 [档案主页](../guide/blog/home.md#档案类型主页)。
diff --git a/docs/theme/src/zh/get-started/command.md b/docs/theme/src/zh/get-started/command.md
@@ -35,7 +35,7 @@ tag:
 
 这意味着你可以使用:
 
-::: code-tabs#shell
+::: tabs#shell
 
 @tab pnpm
 

diff --git a/docs/theme/src/zh/guide/advanced/replace.md b/docs/theme/src/zh/guide/advanced/replace.md
@@ -116,7 +116,7 @@ export default {
 - `@theme-hope/modules/navbar/components/LanguageDropdown` 语言下拉列表
 - `@theme-hope/modules/navbar/components/NavActions` 导航栏功能
 - `@theme-hope/modules/navbar/components/Navbar` 导航栏
-- `@theme-hope/modules/navbar/components/NavbarBrand` 导航栏品牌信息
+- `@theme-hope/modules/navbar/components/NavbarBr和` 导航栏品牌信息
 - `@theme-hope/modules/navbar/components/NavbarLinks` 导航栏链接
 - `@theme-hope/modules/navbar/components/NavScreen` 移动视图下的导航屏
 - `@theme-hope/modules/navbar/components/NavScreenDropdown` 移动视图下导航栏下拉菜单
@@ -187,6 +187,7 @@ export default {
 - `@theme-hope/modules/blog/components/InfoList` 博客信息列表
 - `@theme-hope/modules/blog/components/InfoPanel` 博客信息面板
 - `@theme-hope/modules/blog/components/Pagination` 分页组件
+- `@theme-hope/modules/blog/components/Portfolio` 档案组件
 - `@theme-hope/modules/blog/components/ProjectPanel` 博客主页项目面板
 - `@theme-hope/modules/blog/components/SocialMedia` 社交媒体链接
 - `@theme-hope/modules/blog/components/TagList` 标签列表
@@ -324,6 +325,12 @@ import HopeHomePage from "vuepress-theme-hope/components/HomePage.js";
   - `info` 插槽将接收 `text` `tagline` `image` `imageDark` `style` `alt` 和 `isFullScreen` 属性。
   - `bg` 插槽将接收 `image` `bgStyle` 和 `isFullScreen` 属性。
 
+- `PortfolioHero`: `avatar` `bg`, `info`
+
+  - `avatar` 插槽将接收 `avatar` `avatarDark` `avatarStyle` 和 `alt` 属性。
+  - `info` 插槽将接收 `name` `welcome` `title` `titles` 和 `links` 属性。
+  - `bg` 插槽将接收 `image` `imageDark` 和 `bgStyle` 属性。
+
 **导航栏**:
 
 - `DropdownLink`: `title`

diff --git a/docs/theme/src/zh/guide/blog/home.md b/docs/theme/src/zh/guide/blog/home.md
@@ -12,15 +12,15 @@ tag:
 
 `vuepress-theme-hope` 允许你启用博客风格的首页。
 
-你需要在相应的页面的 frontmatter 中，设置 `home: true` 和 `layout: BlogHome` 来使用博客主页。
-
 <!-- more -->
 
+## 博客类型主页
+
+你需要在相应的页面的 frontmatter 中，设置 `home: true` 和 `layout: BlogHome` 来使用博客主页。
+
 ![首页截图](./assets/blog-light.jpg#light)
 ![首页截图](./assets/blog-dark.jpg#dark)
 
-## 主页信息
-
 你可以使用 `heroText` 设置主标题，并通过 `tagline` 设置副标题。
 
 如果你有一个 Logo，你可以将其放置在 `public` 文件夹中，并通过 `heroImage` 设置它，如果你在夜间模式希望展示另一个 Logo， 可以使用 `heroImageDark`。为了更好的 A11y，我们建议你设置 Logo 的描述到 `heroAlt`。
@@ -29,11 +29,7 @@ tag:
 
 如果你需要定制一些样式，你可以通过 `heroImageStyle` 和 `bgImageStyle` 设置 Logo 与背景图片的样式。
 
-## 项目展示
-
-通常情况下，你可能希望在主页中展示一些项目、书籍、文章、链接、友链等。
-
-你可以通过 `projects` 设置它们，它是一个数组，每个元素都是一个对象，包含以下键值:
+通常情况下，你可能希望在主页中展示一些项目、书籍、文章、链接、友链等。你可以通过 `projects` 设置它们，它是一个数组，每个元素都是一个对象，包含以下键值:
 
 - `name`: 项目名称，必填
 - `link`: 项目链接，必填，填入外部链接或绝对路径。
@@ -48,7 +44,25 @@ tag:
 
 :::
 
-## 即时案例
+::: info 即时案例
 
 - [当前文档的博客主页](../../demo/blog-home.md)
 - [当前文档的自定义博客主页](../../demo/custom-blog-home.md)
+
+:::
+
+## 档案类型主页
+
+在主页的 frontmatter 中设置 `layout: PortfolioHome` 和 `home: true`。
+
+名称默认为主题选项中的 `author` 选项，你可以在 frontmatter 中设置 `name` 进行自定义。欢迎信息也可以通过 frontmatter 中的 `welcome` 选项进行自定义。
+
+为了描述自己，请在 frontmatter 中通过 `titles` 设置适合你的职称。另外你需要使用 `avatar` 设置你的图像 (如果需要，还可以使用 `avatarDark` 用于深色模式)。 你还可以设置 `bgImage` (如果需要，还可以设置 `bgImageDark` 用于深色模式) 来自定义背景图像。你可以使用 `avatarStyle` 和 `bgImageStyle` 选项来完成对形象和背景图片样式调整。
+
+默认情况下，会显示在 `blog.medias` 中设置的媒体链接，同时你也可以在 frontmatter 中设置 `medias` 进行覆盖，你需要为每个媒体设置 `name`、`icon` 和 `url`。
+
+::: info 即时案例
+
+- [一个档案主页案例](../../demo/portfolio-home.md)
+
+:::
diff --git a/packages/create/template/blog/en/README.md b/packages/create/template/blog/en/README.md
@@ -45,4 +45,4 @@ This is a blog home page demo.
 
 To use this layout, you should set both `layout: BlogHome` and `home: true` in the page front matter.
 
-For related configuration docs, please see [blog homepage](https://theme-hope.vuejs.press/guide/blog/home/).
+For related configuration docs, please see [blog homepage](https://theme-hope.vuejs.press/guide/blog/home.html).
diff --git a/packages/create/template/blog/zh/README.md b/packages/create/template/blog/zh/README.md
@@ -45,4 +45,4 @@ footer: 自定义你的页脚文字
 
 要使用此布局，你应该在页面前端设置 `layout: BlogHome` 和 `home: true`。
 
-相关配置文档请见 [博客主页](https://theme-hope.vuejs.press/zh/guide/blog/home/)。
+相关配置文档请见 [博客主页](https://theme-hope.vuejs.press/zh/guide/blog/home.html)。
diff --git a/...lient/modules/blog/components/BlogHome.ts → ...t/modules/blog/components/BlogHomePage.ts b/...lient/modules/blog/components/BlogHome.ts → ...t/modules/blog/components/BlogHomePage.ts
@@ -15,7 +15,7 @@ import type { ThemeBlogHomePageFrontmatter } from "../../../../shared/index.js";
 import "../styles/home.scss";
 
 export default defineComponent({
-  name: "BlogHome",
+  name: "BlogHomePage",
 
   setup() {
     const articles = useArticles();