tanghc
4 years ago
commit
a6902fa902
@ -0,0 +1,17 @@ |
||||
yarn.lock |
||||
.DS_Store |
||||
node_modules/ |
||||
dist/ |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
package-lock.json |
||||
tests/**/coverage/ |
||||
|
||||
# Editor directories and files |
||||
.idea |
||||
.vscode |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
@ -0,0 +1,17 @@ |
||||
# 门户网站方案2 |
||||
|
||||
基于文档：https://www.vuepress.cn/ |
||||
|
||||
- 初始化 |
||||
|
||||
npm install |
||||
|
||||
- 启动 |
||||
|
||||
npm run docs:dev |
||||
|
||||
- 构建 |
||||
|
||||
npm run docs:build |
||||
|
||||
结果在：`docs/.vuepress/dist` |
||||
@ -0,0 +1,31 @@ |
||||
module.exports = { |
||||
locales: { |
||||
// 键名是该语言所属的子路径
|
||||
// 作为特例，默认语言可以使用 '/' 作为其路径。
|
||||
'/': { |
||||
lang: 'zh-CN', // 将会被设置为 <html> 的 lang 属性
|
||||
title: '开放平台', |
||||
description: 'XX开放平台' |
||||
}, |
||||
// '/zh/': {
|
||||
// lang: 'zh-CN',
|
||||
// title: 'VuePress',
|
||||
// description: 'Vue 驱动的静态网站生成器'
|
||||
// }
|
||||
}, |
||||
// 主题配置
|
||||
themeConfig: { |
||||
logo: '/assets/images/logo.png', |
||||
search: false, |
||||
searchMaxSuggestions: 10, |
||||
// 导航按钮配置
|
||||
nav: [ |
||||
{ text: '登录', link: 'http://baidu.com' }, |
||||
{ text: '免费注册', link: 'http://baidu.com' }, |
||||
], |
||||
}, |
||||
// 派生主题，https://www.vuepress.cn/theme/inheritance.html#%E6%A6%82%E5%BF%B5
|
||||
extend: '@vuepress/theme-default', |
||||
// 插件
|
||||
plugins: ['@vuepress/back-to-top'] |
||||
} |
||||
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 66 KiB |
@ -0,0 +1,21 @@ |
||||
// 这里修改主题颜色，详见：https://www.vuepress.cn/config/#palette-styl |
||||
// 颜色 |
||||
$accentColor = #409EFF |
||||
$textColor = #2c3e50 |
||||
$borderColor = #eaecef |
||||
$codeBgColor = #282c34 |
||||
$arrowBgColor = #ccc |
||||
$badgeTipColor = #42b983 |
||||
$badgeWarningColor = darken(#ffe564, 35%) |
||||
$badgeErrorColor = #DA5961 |
||||
|
||||
// 布局 |
||||
$navbarHeight = 3.6rem |
||||
$sidebarWidth = 20rem |
||||
$contentWidth = 740px |
||||
$homePageWidth = 960px |
||||
|
||||
// 响应式变化点 |
||||
$MQNarrow = 959px |
||||
$MQMobile = 719px |
||||
$MQMobileNarrow = 419px |
||||
@ -0,0 +1,5 @@ |
||||
<template> |
||||
<div class="footer"> |
||||
Copyright © 2020-present SOP</a> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,171 @@ |
||||
<template> |
||||
<main |
||||
class="home" |
||||
:aria-labelledby="data.heroText !== null ? 'main-title' : null" |
||||
> |
||||
<header class="hero"> |
||||
<img |
||||
v-if="data.heroImage" |
||||
:src="$withBase(data.heroImage)" |
||||
:alt="data.heroAlt || 'hero'" |
||||
> |
||||
|
||||
<h1 |
||||
v-if="data.heroText !== null" |
||||
id="main-title" |
||||
> |
||||
{{ data.heroText || $title || 'Hello' }} |
||||
</h1> |
||||
|
||||
<p |
||||
v-if="data.tagline !== null" |
||||
class="description" |
||||
> |
||||
{{ data.tagline || $description || 'Welcome to your VuePress site' }} |
||||
</p> |
||||
|
||||
<p |
||||
v-if="data.actionText && data.actionLink" |
||||
class="action" |
||||
> |
||||
<NavLink |
||||
class="action-button" |
||||
:item="actionLink" |
||||
/> |
||||
</p> |
||||
</header> |
||||
|
||||
<div |
||||
v-if="data.features && data.features.length" |
||||
class="features" |
||||
> |
||||
<div |
||||
v-for="(feature, index) in data.features" |
||||
:key="index" |
||||
class="feature" |
||||
> |
||||
<h2>{{ feature.title }}</h2> |
||||
<p>{{ feature.details }}</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<Content class="theme-default-content custom" /> |
||||
|
||||
<Footer /> |
||||
</main> |
||||
</template> |
||||
|
||||
<script> |
||||
import NavLink from '@parent-theme/components/NavLink.vue' |
||||
import Footer from '@theme/components/Footer.vue' |
||||
|
||||
export default { |
||||
name: 'Home', |
||||
|
||||
components: { NavLink, Footer }, |
||||
|
||||
computed: { |
||||
data () { |
||||
return this.$page.frontmatter |
||||
}, |
||||
|
||||
actionLink () { |
||||
return { |
||||
link: this.data.actionLink, |
||||
text: this.data.actionText |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="stylus"> |
||||
.home |
||||
padding $navbarHeight 2rem 0 |
||||
max-width $homePageWidth |
||||
margin 0px auto |
||||
display block |
||||
.hero |
||||
text-align center |
||||
img |
||||
max-width: 100% |
||||
max-height 280px |
||||
display block |
||||
margin 3rem auto 1.5rem |
||||
h1 |
||||
font-size 3rem |
||||
h1, .description, .action |
||||
margin 1.8rem auto |
||||
.description |
||||
max-width 35rem |
||||
font-size 1.6rem |
||||
line-height 1.3 |
||||
color lighten($textColor, 40%) |
||||
.action-button |
||||
display inline-block |
||||
font-size 1.2rem |
||||
color #fff |
||||
background-color $accentColor |
||||
padding 0.8rem 1.6rem |
||||
border-radius 4px |
||||
transition background-color .1s ease |
||||
box-sizing border-box |
||||
border-bottom 1px solid darken($accentColor, 10%) |
||||
&:hover |
||||
background-color lighten($accentColor, 10%) |
||||
.features |
||||
border-top 1px solid $borderColor |
||||
padding 1.2rem 0 |
||||
margin-top 2.5rem |
||||
display flex |
||||
flex-wrap wrap |
||||
align-items flex-start |
||||
align-content stretch |
||||
justify-content space-between |
||||
.feature |
||||
flex-grow 1 |
||||
flex-basis 30% |
||||
max-width 30% |
||||
h2 |
||||
font-size 1.4rem |
||||
font-weight 500 |
||||
border-bottom none |
||||
padding-bottom 0 |
||||
color lighten($textColor, 10%) |
||||
p |
||||
color lighten($textColor, 25%) |
||||
.footer |
||||
padding 2.5rem |
||||
border-top 1px solid $borderColor |
||||
text-align center |
||||
color lighten($textColor, 25%) |
||||
|
||||
@media (max-width: $MQMobile) |
||||
.home |
||||
.features |
||||
flex-direction column |
||||
.feature |
||||
max-width 100% |
||||
padding 0 2.5rem |
||||
|
||||
@media (max-width: $MQMobileNarrow) |
||||
.home |
||||
padding-left 1.5rem |
||||
padding-right 1.5rem |
||||
.hero |
||||
img |
||||
max-height 210px |
||||
margin 2rem auto 1.2rem |
||||
h1 |
||||
font-size 2rem |
||||
h1, .description, .action |
||||
margin 1.2rem auto |
||||
.description |
||||
font-size 1.2rem |
||||
.action-button |
||||
font-size 1rem |
||||
padding 0.6rem 1.2rem |
||||
.feature |
||||
h2 |
||||
font-size 1.25rem |
||||
</style> |
||||
@ -0,0 +1,4 @@ |
||||
module.exports = { |
||||
// 继承默认主题，https://www.vuepress.cn/theme/inheritance.html#%E5%8A%A8%E6%9C%BA
|
||||
extend: '@vuepress/theme-default' |
||||
} |
||||
@ -0,0 +1,244 @@ |
||||
export const hashRE = /#.*$/ |
||||
export const extRE = /\.(md|html)$/ |
||||
export const endingSlashRE = /\/$/ |
||||
export const outboundRE = /^[a-z]+:/i |
||||
|
||||
export function normalize (path) { |
||||
return decodeURI(path) |
||||
.replace(hashRE, '') |
||||
.replace(extRE, '') |
||||
} |
||||
|
||||
export function getHash (path) { |
||||
const match = path.match(hashRE) |
||||
if (match) { |
||||
return match[0] |
||||
} |
||||
} |
||||
|
||||
export function isExternal (path) { |
||||
return outboundRE.test(path) |
||||
} |
||||
|
||||
export function isMailto (path) { |
||||
return /^mailto:/.test(path) |
||||
} |
||||
|
||||
export function isTel (path) { |
||||
return /^tel:/.test(path) |
||||
} |
||||
|
||||
export function ensureExt (path) { |
||||
if (isExternal(path)) { |
||||
return path |
||||
} |
||||
const hashMatch = path.match(hashRE) |
||||
const hash = hashMatch ? hashMatch[0] : '' |
||||
const normalized = normalize(path) |
||||
|
||||
if (endingSlashRE.test(normalized)) { |
||||
return path |
||||
} |
||||
return normalized + '.html' + hash |
||||
} |
||||
|
||||
export function isActive (route, path) { |
||||
const routeHash = decodeURIComponent(route.hash) |
||||
const linkHash = getHash(path) |
||||
if (linkHash && routeHash !== linkHash) { |
||||
return false |
||||
} |
||||
const routePath = normalize(route.path) |
||||
const pagePath = normalize(path) |
||||
return routePath === pagePath |
||||
} |
||||
|
||||
export function resolvePage (pages, rawPath, base) { |
||||
if (isExternal(rawPath)) { |
||||
return { |
||||
type: 'external', |
||||
path: rawPath |
||||
} |
||||
} |
||||
if (base) { |
||||
rawPath = resolvePath(rawPath, base) |
||||
} |
||||
const path = normalize(rawPath) |
||||
for (let i = 0; i < pages.length; i++) { |
||||
if (normalize(pages[i].regularPath) === path) { |
||||
return Object.assign({}, pages[i], { |
||||
type: 'page', |
||||
path: ensureExt(pages[i].path) |
||||
}) |
||||
} |
||||
} |
||||
console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`) |
||||
return {} |
||||
} |
||||
|
||||
function resolvePath (relative, base, append) { |
||||
const firstChar = relative.charAt(0) |
||||
if (firstChar === '/') { |
||||
return relative |
||||
} |
||||
|
||||
if (firstChar === '?' || firstChar === '#') { |
||||
return base + relative |
||||
} |
||||
|
||||
const stack = base.split('/') |
||||
|
||||
// remove trailing segment if:
|
||||
// - not appending
|
||||
// - appending to trailing slash (last segment is empty)
|
||||
if (!append || !stack[stack.length - 1]) { |
||||
stack.pop() |
||||
} |
||||
|
||||
// resolve relative path
|
||||
const segments = relative.replace(/^\//, '').split('/') |
||||
for (let i = 0; i < segments.length; i++) { |
||||
const segment = segments[i] |
||||
if (segment === '..') { |
||||
stack.pop() |
||||
} else if (segment !== '.') { |
||||
stack.push(segment) |
||||
} |
||||
} |
||||
|
||||
// ensure leading slash
|
||||
if (stack[0] !== '') { |
||||
stack.unshift('') |
||||
} |
||||
|
||||
return stack.join('/') |
||||
} |
||||
|
||||
/** |
||||
* @param { Page } page |
||||
* @param { string } regularPath |
||||
* @param { SiteData } site |
||||
* @param { string } localePath |
||||
* @returns { SidebarGroup } |
||||
*/ |
||||
export function resolveSidebarItems (page, regularPath, site, localePath) { |
||||
const { pages, themeConfig } = site |
||||
|
||||
const localeConfig = localePath && themeConfig.locales |
||||
? themeConfig.locales[localePath] || themeConfig |
||||
: themeConfig |
||||
|
||||
const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar |
||||
if (pageSidebarConfig === 'auto') { |
||||
return resolveHeaders(page) |
||||
} |
||||
|
||||
const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar |
||||
if (!sidebarConfig) { |
||||
return [] |
||||
} else { |
||||
const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig) |
||||
if (config === 'auto') { |
||||
return resolveHeaders(page) |
||||
} |
||||
return config |
||||
? config.map(item => resolveItem(item, pages, base)) |
||||
: [] |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* @param { Page } page |
||||
* @returns { SidebarGroup } |
||||
*/ |
||||
function resolveHeaders (page) { |
||||
const headers = groupHeaders(page.headers || []) |
||||
return [{ |
||||
type: 'group', |
||||
collapsable: false, |
||||
title: page.title, |
||||
path: null, |
||||
children: headers.map(h => ({ |
||||
type: 'auto', |
||||
title: h.title, |
||||
basePath: page.path, |
||||
path: page.path + '#' + h.slug, |
||||
children: h.children || [] |
||||
})) |
||||
}] |
||||
} |
||||
|
||||
export function groupHeaders (headers) { |
||||
// group h3s under h2
|
||||
headers = headers.map(h => Object.assign({}, h)) |
||||
let lastH2 |
||||
headers.forEach(h => { |
||||
if (h.level === 2) { |
||||
lastH2 = h |
||||
} else if (lastH2) { |
||||
(lastH2.children || (lastH2.children = [])).push(h) |
||||
} |
||||
}) |
||||
return headers.filter(h => h.level === 2) |
||||
} |
||||
|
||||
export function resolveNavLinkItem (linkItem) { |
||||
return Object.assign(linkItem, { |
||||
type: linkItem.items && linkItem.items.length ? 'links' : 'link' |
||||
}) |
||||
} |
||||
|
||||
/** |
||||
* @param { Route } route |
||||
* @param { Array<string|string[]> | Array<SidebarGroup> | [link: string]: SidebarConfig } config |
||||
* @returns { base: string, config: SidebarConfig } |
||||
*/ |
||||
export function resolveMatchingConfig (regularPath, config) { |
||||
if (Array.isArray(config)) { |
||||
return { |
||||
base: '/', |
||||
config: config |
||||
} |
||||
} |
||||
for (const base in config) { |
||||
if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) { |
||||
return { |
||||
base, |
||||
config: config[base] |
||||
} |
||||
} |
||||
} |
||||
return {} |
||||
} |
||||
|
||||
function ensureEndingSlash (path) { |
||||
return /(\.html|\/)$/.test(path) |
||||
? path |
||||
: path + '/' |
||||
} |
||||
|
||||
function resolveItem (item, pages, base, groupDepth = 1) { |
||||
if (typeof item === 'string') { |
||||
return resolvePage(pages, item, base) |
||||
} else if (Array.isArray(item)) { |
||||
return Object.assign(resolvePage(pages, item[0], base), { |
||||
title: item[1] |
||||
}) |
||||
} else { |
||||
const children = item.children || [] |
||||
if (children.length === 0 && item.path) { |
||||
return Object.assign(resolvePage(pages, item.path, base), { |
||||
title: item.title |
||||
}) |
||||
} |
||||
return { |
||||
type: 'group', |
||||
path: item.path, |
||||
title: item.title, |
||||
sidebarDepth: item.sidebarDepth, |
||||
initialOpenGroupIndex: item.initialOpenGroupIndex, |
||||
children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)), |
||||
collapsable: item.collapsable !== false |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
--- |
||||
home: true |
||||
heroImage: /assets/images/hero.jpeg |
||||
heroText: 开放平台 |
||||
tagline: 一句话描述你的平台。。 |
||||
actionText: 立即开始 |
||||
actionLink: http://baidu.com |
||||
features: |
||||
- title: 更快 |
||||
details: 开放接口更快。。 |
||||
- title: 更高 |
||||
details: 开放接口更高。。 |
||||
- title: 更强 |
||||
details: 开放接口更强。。 |
||||
footer: null |
||||
search: false |
||||
--- |
||||
@ -0,0 +1,15 @@ |
||||
{ |
||||
"name": "open-portal", |
||||
"version": "1.0.0", |
||||
"main": "index.js", |
||||
"author": "tanghc", |
||||
"license": "MIT", |
||||
"devDependencies": { |
||||
"@vuepress/plugin-back-to-top": "^1.8.0", |
||||
"vuepress": "^1.8.0" |
||||
}, |
||||
"scripts": { |
||||
"docs:dev": "vuepress dev docs", |
||||
"docs:build": "vuepress build docs" |
||||
} |
||||
} |
||||
Loading…
Reference in new issue