style💄: update style
isboyjc
parent
83b23b2ca2
commit
87e022afc8
|
|
@ -1,28 +1,47 @@
|
|||
/*
|
||||
* @LastEditTime: 2023-11-01 14:10:24
|
||||
* @LastEditTime: 2024-06-04 17:53:48
|
||||
* @Description: ...
|
||||
* @Date: 2023-09-19 19:04:57
|
||||
* @Author: isboyjc
|
||||
* @LastEditors: isboyjc
|
||||
*/
|
||||
import path from 'path'
|
||||
import { fileURLToPath } from 'url';
|
||||
import { defineConfig } from 'vitepress'
|
||||
import {logo, description, title, me, keywords, ico, site, icp, publicSecurityFiling, mail} from './meta'
|
||||
|
||||
// 原子CSS UnoCSS
|
||||
import UnoCSS from "unocss/vite";
|
||||
|
||||
// 组件自动引入
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
|
||||
// Iconify 解析插件
|
||||
import Icons from 'unplugin-icons/vite'
|
||||
// Iconify 自动引入解析器
|
||||
import IconsResolver from 'unplugin-icons/resolver'
|
||||
// icon 加载 loader
|
||||
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
|
||||
|
||||
import {description, title, titleEn, descriptionEn, keywords, ico, site, icp, publicSecurityFiling, mail} from './meta'
|
||||
import {icons} from "./icon"
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const resolve = (dir) => dir ? path.resolve(__dirname, '../', dir) : __dirname
|
||||
|
||||
// https://vitepress.dev/reference/site-config
|
||||
export default defineConfig({
|
||||
lang: 'zh',
|
||||
locales: {
|
||||
root: {
|
||||
label: '简体中文',
|
||||
lang: 'zh',
|
||||
title,
|
||||
description,
|
||||
locales: {
|
||||
root: { label: '简体中文', lang: 'zh-CN' },
|
||||
},
|
||||
markdown: {
|
||||
lineNumbers: true,
|
||||
},
|
||||
link: '/',
|
||||
head: [
|
||||
['meta', { name: 'referrer', content: 'no-referrer-when-downgrade' }],
|
||||
['meta', { name: 'keywords', content: keywords }],
|
||||
['meta', { name: 'author', content: me.name }],
|
||||
['meta', { name: 'author', content: 'isboyjc' }],
|
||||
['meta', { name: 'application-name', content: title }],
|
||||
['meta', { name: 'apple-mobile-web-app-title', content: title }],
|
||||
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }],
|
||||
|
|
@ -45,7 +64,6 @@ export default defineConfig({
|
|||
['meta', { property: 'og:locale', content: 'zh_CN' }],
|
||||
],
|
||||
themeConfig: {
|
||||
logo,
|
||||
outline: 'deep',
|
||||
outlineTitle: '目录...',
|
||||
returnToTopLabel: '返回顶部',
|
||||
|
|
@ -56,32 +74,153 @@ export default defineConfig({
|
|||
prev: '上一页',
|
||||
next: '下一页',
|
||||
},
|
||||
|
||||
nav: [
|
||||
// { text: '首页', link: '/' },
|
||||
{ text: '关于我们', link: '/about' },
|
||||
{ text: '岛屿文档', link: '/docs' },
|
||||
{ text: '在线支持', link: '/support' }
|
||||
{ text: '快速了解', link: '/docs/guide' },
|
||||
{ text: '特色', link: '/#features' },
|
||||
{ text: '订阅', link: '/#subscribe' },
|
||||
{ text: '在线支持', link: '/docs/support' }
|
||||
],
|
||||
sidebar: {
|
||||
'/docs': [
|
||||
{
|
||||
text: '测试通告',
|
||||
link: '/docs/testing'
|
||||
},
|
||||
{
|
||||
text: '快速了解',
|
||||
link: '/docs/guide'
|
||||
},
|
||||
{
|
||||
text: '关于我们',
|
||||
link: '/docs/about'
|
||||
},
|
||||
{
|
||||
text: '联系我们',
|
||||
link: '/docs/support'
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
},
|
||||
en: {
|
||||
label: 'English',
|
||||
lang: 'en',
|
||||
title: titleEn,
|
||||
description: descriptionEn,
|
||||
link: '/en/',
|
||||
head: [
|
||||
['meta', { name: 'referrer', content: 'no-referrer-when-downgrade' }],
|
||||
['meta', { name: 'keywords', content: keywords }],
|
||||
['meta', { name: 'author', content: 'isboyjc' }],
|
||||
['meta', { name: 'application-name', content: titleEn }],
|
||||
['meta', { name: 'apple-mobile-web-app-title', content: titleEn }],
|
||||
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }],
|
||||
|
||||
// sidebar: [
|
||||
// {
|
||||
// text: 'Examples',
|
||||
// items: [
|
||||
// { text: 'Markdown Examples', link: '/markdown-examples' },
|
||||
// { text: 'Runtime API Examples', link: '/api-examples' }
|
||||
// ]
|
||||
// }
|
||||
// ],
|
||||
['link', { rel: 'shortcut icon', href: ico }],
|
||||
['link', { rel: 'icon', type: 'image/x-icon', href: ico }],
|
||||
// ['link', { rel: 'mask-icon', href: '.svg', color: '#06f' }],
|
||||
// ['meta', { name: 'theme-color', content: '#06f' }],
|
||||
|
||||
// webfont
|
||||
['link', { rel: 'dns-prefetch', href: 'https://fonts.googleapis.com' }],
|
||||
['link', { rel: 'dns-prefetch', href: 'https://fonts.gstatic.com' }],
|
||||
['link', { rel: 'preconnect', crossorigin: 'anonymous', href: 'https://fonts.googleapis.com' }],
|
||||
['link', { rel: 'preconnect', crossorigin: 'anonymous', href: 'https://fonts.gstatic.com' }],
|
||||
|
||||
// og
|
||||
['meta', { property: 'og:type', content: 'website' }],
|
||||
['meta', { property: 'og:description', content: descriptionEn }],
|
||||
['meta', { property: 'og:url', content: site }],
|
||||
['meta', { property: 'og:locale', content: 'zh_CN' }],
|
||||
],
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'Guide', link: '/docs/guide' },
|
||||
{ text: 'Features', link: '/#features' },
|
||||
{ text: 'Subscribe', link: '/#subscribe' },
|
||||
{ text: 'Online Support', link: '/docs/support' }
|
||||
],
|
||||
sidebar: {
|
||||
'/en/docs': [
|
||||
{
|
||||
text: 'Test Notice',
|
||||
link: '/en/docs/testing'
|
||||
},
|
||||
{
|
||||
text: 'Get Guide',
|
||||
link: '/en/docs/guide'
|
||||
},
|
||||
{
|
||||
text: 'About Us',
|
||||
link: '/en/docs/about'
|
||||
},
|
||||
{
|
||||
text: 'Contact Us',
|
||||
link: '/en/docs/support'
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
themeConfig: {
|
||||
socialLinks: [
|
||||
{ icon: icons.mail, link: `Mailto:${mail}` }
|
||||
],
|
||||
|
||||
footer: {
|
||||
message: `<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${publicSecurityFiling}" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;color: var(--vp-c-brand);">
|
||||
<img src="/img/site/psf.png" style="float:left;"/><span> 京公网安备 ${publicSecurityFiling}号</span>
|
||||
</a> <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index" style="color: var(--vp-c-brand);">${icp}</a>`,
|
||||
copyright: `© 2023-${new Date().getFullYear()} ${title}`
|
||||
psf: publicSecurityFiling,
|
||||
icp: icp,
|
||||
},
|
||||
},
|
||||
markdown: {
|
||||
lineNumbers: true,
|
||||
},
|
||||
|
||||
// vite配置
|
||||
vite: {
|
||||
plugins: [
|
||||
// 插件
|
||||
Components({
|
||||
// dirs 指定自动引入组件所在目录位置
|
||||
dirs: [resolve('.vitepress/theme/components')],
|
||||
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
|
||||
resolvers: [
|
||||
IconsResolver({
|
||||
prefix: 'icon',
|
||||
// 默认 iconify 集合别名
|
||||
// alias: {
|
||||
// vsci: 'vscode-icons'
|
||||
// },
|
||||
customCollections: ['custom']
|
||||
})
|
||||
]
|
||||
}),
|
||||
Icons({
|
||||
compiler: 'vue3',
|
||||
customCollections: {
|
||||
// custom 图标集, 给svg文件设置fill="currentColor"属性，使图标的颜色具有适应性
|
||||
custom: FileSystemIconLoader('public/svg/custom', svg => svg.replace(/^<svg /, '<svg fill="currentColor" '))
|
||||
},
|
||||
autoInstall: true
|
||||
}),
|
||||
UnoCSS({
|
||||
// 详见 unocss.config.js
|
||||
})
|
||||
],
|
||||
resolve: {
|
||||
// 替换 Vitepress 内部组件
|
||||
alias: [
|
||||
{
|
||||
find: /^.*\/VPFooter\.vue$/,
|
||||
replacement: resolve('.vitepress/theme/components/CustomFooter.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
|
||||
// 构建完成钩子
|
||||
async buildEnd(siteConfig) {
|
||||
// console.log(siteConfig)
|
||||
// TODO RSS订阅
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,31 +1,24 @@
|
|||
/*
|
||||
* @LastEditTime: 2023-11-15 18:20:43
|
||||
* @LastEditTime: 2024-06-03 14:15:35
|
||||
* @Description: ...
|
||||
* @Date: 2023-06-26 00:39:07
|
||||
* @Author: isboyjc
|
||||
* @LastEditors: isboyjc
|
||||
*/
|
||||
import { version, author, keywords as ks, description as desc } from '../package.json'
|
||||
import { version, keywords as ks } from '../package.json'
|
||||
|
||||
// base
|
||||
export const title = 'ISLENOTE 岛屿笔记'
|
||||
export const title = '岛屿笔记'
|
||||
export const titleEn = 'ISLENOTE'
|
||||
export const description = "记录灵感，编排灵感~"
|
||||
export const descriptionEn = "Record inspiration, arrange inspiration~"
|
||||
export const site = 'https://sentenceend.com/'
|
||||
export const logo = '/img/site/logo_blue.png'
|
||||
export const ico = '/img/site/logo_blue.png'
|
||||
export const keywords = ks.join("、")
|
||||
export const description = "记录灵感，编排灵感"
|
||||
export const icp = "京ICP备2023022756号-2"
|
||||
export const publicSecurityFiling = "11011402053556"
|
||||
export const mail = "islenote@sentenceend.com"
|
||||
export const me = {
|
||||
avatar: '/img/me/avatar.jpeg',
|
||||
name: author,
|
||||
desc: '不正经的前端，很正经的摄影！',
|
||||
wx: '/img/me/wx.jpeg',
|
||||
github: 'https://github.com/isboyjc',
|
||||
twitter: 'https://twitter.com/isboyjc',
|
||||
juejin: 'https://juejin.cn/user/2999123452373735',
|
||||
}
|
||||
|
||||
// link
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
import {t} from '../locale'
|
||||
|
||||
const { theme, frontmatter, lang } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="w-100% h-20px"></footer>
|
||||
<footer v-if="theme.footer && frontmatter.footer !== false">
|
||||
|
||||
<div className="w-full text-sm px-6 sm:px-8 md:px-28 lg:px-20 xl:px-0 max-w-screen-lg mx-auto border-t border-t-solid border-t-[var(--vp-c-gray-3)] pt-6">
|
||||
<div className="grid grid-cols-12 gap-8 py-12 text-[var(--vp-c-text-2)] transition-colors duration-150 border-b lt-sm:grid-cols-1 border-border">
|
||||
<div className="col-span-4 lt-sm:col-span-1">
|
||||
<div className="flex flex-col items-start lt-sm:items-center h-10">
|
||||
<div class="flex items-center">
|
||||
<CustomLogo />
|
||||
<span class="font-bold text-[var(--vp-c-text-1)] text-16px">{{ t(lang, 'title') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2 lt-sm:col-span-1">
|
||||
<ul className="flex flex-col flex-initial md:flex-1">
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">
|
||||
<p className="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
|
||||
{{ t(lang, 'footer.product') }}
|
||||
</p>
|
||||
</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.web') }}</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.desktop') }}</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.mobile') }}</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.webplugin') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-span-2 lt-sm:col-span-1">
|
||||
<ul className="flex flex-col flex-initial md:flex-1">
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">
|
||||
<p className="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
|
||||
{{ t(lang, 'footer.resource') }}
|
||||
</p>
|
||||
</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.resource.guide') }}</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.resource.faq') }}</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.resource.extend') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-span-2 lt-sm:col-span-1">
|
||||
<ul className="flex flex-col flex-initial md:flex-1">
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">
|
||||
<p className="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
|
||||
{{ t(lang, 'footer.team') }}
|
||||
</p>
|
||||
</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.team.aboutus') }}</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.team.origin') }}</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.team.contactus') }}</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.team.support') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-span-2 lt-sm:col-span-1">
|
||||
<ul className="flex flex-col flex-initial md:flex-1">
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">
|
||||
<p className="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
|
||||
{{ t(lang, 'footer.other') }}
|
||||
</p>
|
||||
</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.other.ua') }}</li>
|
||||
<li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.other.pa') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-start items-center flex-wrap lt-sm:justify-center py-4">
|
||||
<span class="text-[var(--vp-c-text-2)] text-sm">{{ t(lang, 'footer.desc1') }}</span>
|
||||
<a
|
||||
class="text-sm [var(--vp-c-text-2)] mx-4px"
|
||||
uno-hover="text-primary underline"
|
||||
href="https://github.com/vuejs/vitepress"
|
||||
target="_blank"
|
||||
>
|
||||
VitePress
|
||||
</a>
|
||||
<span class="mr-6px text-[var(--vp-c-text-2)] text-sm">{{ t(lang, 'footer.desc2') }}.</span>
|
||||
<span className="text-[var(--vp-c-text-2)] text-sm">
|
||||
{{ `© 2023-${new Date().getFullYear()} ${t(lang, 'title')} - ${t(lang, 'company')} ${t(lang, 'footer.desc3')}. ` }}
|
||||
</span>
|
||||
<span class="inline-flex items-center">
|
||||
<img src="/img/site/psf.png" class="inline-block h-14px" />
|
||||
<a
|
||||
class="text-sm [var(--vp-c-text-2)] mx-4px"
|
||||
uno-hover="text-primary underline"
|
||||
:href="`http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${theme.footer.psf}`"
|
||||
target="_blank"
|
||||
>
|
||||
京公安{{ theme.footer.psf }}
|
||||
</a>
|
||||
</span>
|
||||
<a
|
||||
class="text-sm [var(--vp-c-text-2)] mx-4px"
|
||||
uno-hover="text-primary underline"
|
||||
href="https://beian.miit.gov.cn/#/Integrated/index"
|
||||
target="_blank"
|
||||
>
|
||||
{{ theme.footer.icp }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,347 @@
|
|||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
import { ref } from 'vue'
|
||||
import {t, routerPath} from '../locale'
|
||||
|
||||
const { lang, isDark } = useData()
|
||||
|
||||
const subDate = ref('month')
|
||||
const price = ref({
|
||||
month: {
|
||||
oldPrice: '15',
|
||||
price: '10',
|
||||
discount: '6.6'
|
||||
},
|
||||
year: {
|
||||
oldPrice: '180',
|
||||
price: '100',
|
||||
discount: '5.5'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="custom-home">
|
||||
|
||||
<section>
|
||||
<div class="mx-auto w-full lg:px-24 max-w-7xl md:px-12 items-center px-8 py-24">
|
||||
<div>
|
||||
<div class="text-center max-w-4xl mx-auto">
|
||||
<div class="sm:flex sm:justify-center">
|
||||
<a
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 100 }"
|
||||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||||
:delay="0"
|
||||
:duration="400"
|
||||
href="https://islenote.com"
|
||||
target="_blank"
|
||||
class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 border-2 border-solid border-primary flex-center duration-200 no-underline!"
|
||||
uno-hover="bg-primary text-[var(--vp-c-neutral-inverse)]!"
|
||||
>
|
||||
<icon-custom-islenote class="text-16px mr-6px" />
|
||||
<span class="block lg:inline"> {{t(lang, 'notify.test')}} <span aria-hidden="true">→</span> </span>
|
||||
</a>
|
||||
</div>
|
||||
<h1
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 100 }"
|
||||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||||
:delay="50"
|
||||
:duration="400"
|
||||
class="text-4xl! tracking-tight font-medium text-primary md:text-5xl font-display mt-12"
|
||||
>
|
||||
{{ t(lang, 'desc') }}
|
||||
</h1>
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 100 }"
|
||||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||||
:delay="100"
|
||||
:duration="400"
|
||||
class="text-[var(--vp-c-text-3)] lg:text-xl max-w-2xl mt-4 mx-auto text-base"
|
||||
>
|
||||
{{ t(lang, 'desc.secondary') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center gap-3 mt-10 mb-5 flex-col sm:flex-row">
|
||||
<a
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 100 }"
|
||||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||||
:delay="200"
|
||||
:duration="400"
|
||||
target="_blank"
|
||||
class="items-center justify-center h-12 font-medium rounded-xl inline-flex duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-text-1)]! w-full border-2 border-solid border-[var(--vp-c-gray-soft)] no-underline!"
|
||||
uno-hover="text-primary! border-primary"
|
||||
href="https://v.islenote.com/register"
|
||||
>
|
||||
{{ t(lang, 'register') }}
|
||||
</a>
|
||||
<a
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 100 }"
|
||||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||||
:delay="300"
|
||||
:duration="400"
|
||||
class="items-center justify-center h-12 font-medium rounded-xl inline-flex bg-primary border-solid border-2 border-primary duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-neutral-inverse)]! w-full no-underline!"
|
||||
uno-hover="bg-transparent border-primary text-primary!"
|
||||
:href="routerPath(lang, '/guide/quick')"
|
||||
>
|
||||
{{ t(lang, 'guide') }} →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="sm:flex sm:justify-center">
|
||||
<a
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 100 }"
|
||||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||||
:delay="400"
|
||||
:duration="400"
|
||||
href="https://v.islenote.com"
|
||||
target="_blank"
|
||||
class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 flex-center duration-200 no-underline!"
|
||||
uno-hover="underline!"
|
||||
>
|
||||
<span class="block lg:inline">{{ t(lang, 'account') }} {{ t(lang, 'login') }}<span aria-hidden="true">→</span> </span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 100 }"
|
||||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||||
:delay="500"
|
||||
:duration="400"
|
||||
class="mt-20 mb-10"
|
||||
>
|
||||
<img v-if="!isDark" src="/img/site/home_light.png" class="rounded-2 shadow-[var(--vp-c-shadow)]"lt="">
|
||||
<img v-else src="/img/site/home_dark.png" class="rounded-2 shadow-[var(--vp-c-shadow)]"lt="">
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 100 }"
|
||||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||||
:delay="500"
|
||||
:duration="400"
|
||||
id="features"
|
||||
class="my-40"
|
||||
>
|
||||
<div class="sm:flex sm:flex-col sm:align-center">
|
||||
<h1 class="text-4xl font-700 text-center">{{ t(lang, 'features') }}</h1>
|
||||
<div
|
||||
class="text-[var(--vp-c-text-3)] mt-4 text-base text-center"
|
||||
>
|
||||
{{ t(lang, 'features.desc') }}
|
||||
</div>
|
||||
<a
|
||||
target="_blank"
|
||||
class="h-34px font-semibold text-primary rounded-full px-5 mt-4 text-sm leading-6 flex-center duration-200 no-underline!"
|
||||
uno-hover="underline!"
|
||||
>
|
||||
{{ t(lang, 'features.more') }}->
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="lg:gap-x-8 lg:grid-cols-3 max-w-4xl mt-14 mx-auto sm:gap-x-6 sm:gap-y-12 sm:grid sm:grid-cols-2 sm:space-y-0 space-y-6 text-center text-sm items-start">
|
||||
<div class="text-[var(--vp-c-text-3)]">
|
||||
<strong class="text-[var(--vp-c-text-2)]">
|
||||
{{t(lang, 'features.faster')}}
|
||||
</strong>
|
||||
– {{t(lang, 'features.faster.desc')}}
|
||||
</div>
|
||||
<div class="text-[var(--vp-c-text-3)]">
|
||||
<strong class="text-[var(--vp-c-text-2)]">
|
||||
{{t(lang, 'features.style')}}
|
||||
</strong>
|
||||
– {{t(lang, 'features.style.desc')}}
|
||||
</div>
|
||||
<div class="text-[var(--vp-c-text-3)]">
|
||||
<strong class="text-[var(--vp-c-text-2)]">
|
||||
{{t(lang, 'features.review')}}
|
||||
</strong>
|
||||
– {{t(lang, 'features.review.desc')}}
|
||||
</div>
|
||||
<div class="text-[var(--vp-c-text-3)]">
|
||||
<strong class="text-[var(--vp-c-text-2)]">
|
||||
{{t(lang, 'features.extend')}}
|
||||
</strong>
|
||||
– {{t(lang, 'features.extend.desc')}}
|
||||
</div>
|
||||
<div class="text-[var(--vp-c-text-3)]">
|
||||
<strong class="text-[var(--vp-c-text-2)]">
|
||||
{{t(lang, 'features.privacy')}}
|
||||
</strong>
|
||||
– {{t(lang, 'features.privacy.desc')}}
|
||||
</div>
|
||||
<div class="text-[var(--vp-c-text-3)]">
|
||||
<strong class="text-[var(--vp-c-text-2)]">
|
||||
{{t(lang, 'features.unlimited')}}
|
||||
</strong>
|
||||
– {{t(lang, 'features.unlimited.desc')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 100 }"
|
||||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||||
:delay="600"
|
||||
:duration="400"
|
||||
id="subscribe"
|
||||
class="my-40"
|
||||
>
|
||||
<div class="sm:flex sm:flex-col sm:align-center">
|
||||
<h1
|
||||
class="text-4xl font-700 text-center"
|
||||
>
|
||||
{{ t(lang, 'subscribe') }}
|
||||
</h1>
|
||||
<div
|
||||
class="text-[var(--vp-c-text-3)] mt-4 text-base text-center"
|
||||
>
|
||||
{{ t(lang, 'subscribe.desc') }}
|
||||
</div>
|
||||
<a
|
||||
target="_blank"
|
||||
class="h-34px font-semibold text-primary rounded-full px-5 mt-4 text-sm leading-6 flex-center duration-200 no-underline!"
|
||||
uno-hover="underline!"
|
||||
>
|
||||
{{ t(lang, 'subscribe.more') }}->
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="w-auto font-medium flex-center mt-12">
|
||||
<div class="h-12 bg-[var(--vp-c-gray-soft)] rounded-xl box-border">
|
||||
<div
|
||||
class="w-auto h-full inline-flex justify-center items-center cursor-pointer rounded-xl duration-200 px-5 text-14px box-border"
|
||||
:class="{'bg-primary text-[var(--vp-c-neutral-inverse)]': subDate == 'month'}"
|
||||
@click="subDate = 'month'"
|
||||
>
|
||||
{{ t(lang, 'subscribe.monthly') }}
|
||||
</div>
|
||||
<div
|
||||
class="w-auto h-full inline-flex justify-center items-center cursor-pointer rounded-xl duration-200 px-5 text-14px box-border"
|
||||
:class="{'bg-primary text-[var(--vp-c-neutral-inverse)]': subDate == 'year'}"
|
||||
@click="subDate = 'year'"
|
||||
>
|
||||
{{ t(lang, 'subscribe.yearly') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full grid grid-cols-2 lt-sm:grid-cols-1 gap-6 mt-12">
|
||||
<div class="w-full flex justify-end lt-sm:justify-center">
|
||||
<div
|
||||
class="w-full text-sm flex flex-col justify-between flex-1 flex-shrink-0 max-w-xs p-6 border border-solid border-[var(--vp-c-divider)] rounded-xl box-border"
|
||||
>
|
||||
<div class="w-full leading-6 font-700">{{ t(lang, 'subscribe.pu') }}</div>
|
||||
<div class="h-full flex-1">
|
||||
<div class="mt-4">{{t(lang, 'subscribe.free.desc')}}1</div>
|
||||
<div class="mt-4">{{t(lang, 'subscribe.free.desc')}}2</div>
|
||||
<div class="mt-4">{{t(lang, 'subscribe.free.desc')}}3</div>
|
||||
<div class="mt-4">{{t(lang, 'subscribe.free.desc')}}4</div>
|
||||
<div class="mt-4">{{t(lang, 'subscribe.free.desc')}}5</div>
|
||||
</div>
|
||||
<div class="w-full flex flex-col mt-8">
|
||||
<div class="">
|
||||
<span class="text-xl font-extrabold white">{{t(lang, 'subscribe.free')}}</span>
|
||||
<span class="text-base font-medium ml-1">¥/{{ subDate == 'year' ? t(lang, 'subscribe.year') : t(lang, 'subscribe.month') }}</span>
|
||||
</div>
|
||||
<a
|
||||
class="mt-4 items-center justify-center h-12 font-medium rounded-xl inline-flex duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-text-1)]! w-full border-2 border-solid border-[var(--vp-c-gray-soft)] no-underline! cursor-pointer"
|
||||
uno-hover="text-primary! border-primary"
|
||||
target="_blank"
|
||||
href="https://v.islenote.com/register"
|
||||
>
|
||||
{{ t(lang, 'register') }}
|
||||
</a>
|
||||
<a
|
||||
href="https://v.islenote.com"
|
||||
target="_blank"
|
||||
class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 flex-center duration-200 no-underline!"
|
||||
uno-hover="underline!"
|
||||
>
|
||||
<span class="block lg:inline">{{ t(lang, 'account') }} {{ t(lang, 'login') }}<span aria-hidden="true">→</span> </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-start lt-sm:justify-center">
|
||||
<div
|
||||
class="w-full text-sm flex flex-col justify-between flex-1 flex-shrink-0 max-w-xs p-6 border border-solid border-[var(--vp-c-divider)] rounded-xl box-border"
|
||||
>
|
||||
<div class="w-full leading-6">
|
||||
<span class="font-700">{{ t(lang, 'subscribe.su') }}</span>
|
||||
<span class="ml-4px font-400">
|
||||
· {{ t(lang, 'subscribe.su.desc1') }}{{ price[subDate].discount
|
||||
}}{{ t(lang, 'subscribe.su.desc2') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-full flex-1">
|
||||
<div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}1</div>
|
||||
<div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}2</div>
|
||||
<div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}3</div>
|
||||
<div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}4</div>
|
||||
<div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}5</div>
|
||||
</div>
|
||||
<div class="w-full flex flex-col mt-8">
|
||||
<div class="">
|
||||
<span class="text-xl line-through">{{ price[subDate].oldPrice }}</span>
|
||||
<span class="text-xl font-extrabold ml-4px text-primary"
|
||||
>{{ price[subDate].price }}
|
||||
</span>
|
||||
<span class="text-base font-medium ml-1">¥/{{ subDate == 'year' ? t(lang, 'subscribe.year') : t(lang, 'subscribe.month') }}</span>
|
||||
</div>
|
||||
<a
|
||||
class="mt-4 items-center justify-center h-12 font-medium rounded-xl inline-flex duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-text-1)]! w-full border-2 border-solid border-[var(--vp-c-gray-soft)] no-underline! cursor-pointer"
|
||||
uno-hover="text-primary! border-primary"
|
||||
target="_blank"
|
||||
href="https://v.islenote.com/register"
|
||||
>
|
||||
{{ t(lang, 'register') }}
|
||||
</a>
|
||||
<a
|
||||
href="https://v.islenote.com"
|
||||
target="_blank"
|
||||
class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 flex-center duration-200 no-underline!"
|
||||
uno-hover="underline!"
|
||||
>
|
||||
<span class="block lg:inline">{{ t(lang, 'account') }} {{ t(lang, 'login') }}<span aria-hidden="true">→</span> </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-home{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 640px) and (max-width: 960px) {
|
||||
.custom-home-banner__top-image{
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.custom-home-banner__top-image{
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import { nextTick, provide } from 'vue'
|
||||
|
||||
const { Layout } = DefaultTheme
|
||||
|
||||
const { isDark } = useData()
|
||||
|
||||
const enableTransitions = () =>
|
||||
'startViewTransition' in document &&
|
||||
window.matchMedia('(prefers-reduced-motion: no-preference)').matches
|
||||
|
||||
provide('toggle-appearance', async ({ clientX: x, clientY: y }) => {
|
||||
if (!enableTransitions()) {
|
||||
isDark.value = !isDark.value
|
||||
return
|
||||
}
|
||||
|
||||
const clipPath = [
|
||||
`circle(0px at ${x}px ${y}px)`,
|
||||
`circle(${Math.hypot(
|
||||
Math.max(x, innerWidth - x),
|
||||
Math.max(y, innerHeight - y)
|
||||
)}px at ${x}px ${y}px)`
|
||||
]
|
||||
|
||||
await document.startViewTransition(async () => {
|
||||
isDark.value = !isDark.value
|
||||
await nextTick()
|
||||
}).ready
|
||||
|
||||
document.documentElement.animate(
|
||||
{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
|
||||
{
|
||||
duration: 500,
|
||||
easing: 'ease-in',
|
||||
pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
|
||||
}
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<template #nav-bar-title-before>
|
||||
<CustomLogo />
|
||||
</template>
|
||||
<template #not-found>
|
||||
<CustomNotFound />
|
||||
</template>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.VPHome{
|
||||
padding-bottom: 0!important;
|
||||
}
|
||||
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
::view-transition-old(root),
|
||||
.dark::view-transition-new(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::view-transition-new(root),
|
||||
.dark::view-transition-old(root) {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.VPSwitchAppearance {
|
||||
width: 22px !important;
|
||||
}
|
||||
|
||||
.VPSwitchAppearance .check {
|
||||
transform: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<div class="w-28px h-28px rounded-2 flex-center mr-6px bg-[#ffffff] border-solid border border-[var(--vp-c-border)] ">
|
||||
<icon-custom-islenote class="text-16px text-primary" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
import {t, routerPath} from '../locale'
|
||||
|
||||
const { site,theme,lang } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="NotFound">
|
||||
<p class="code">404</p>
|
||||
<h1 class="title">{{ t(lang, 'nofound.nopage') }}</h1>
|
||||
<div class="divider" />
|
||||
<p class="message">
|
||||
{{ t(lang, 'nofound.follow1') }} <span class="text-primary font-bold">ISLENOTE岛屿笔记</span> {{ t(lang, 'nofound.follow2') }}
|
||||
</p>
|
||||
<div class="action">
|
||||
<a class="link" :href="routerPath(lang, site.base)" aria-label="go to home">
|
||||
{{ t(lang, 'nofound.gohome') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.message{
|
||||
margin: 10px auto;
|
||||
width:300px;
|
||||
text-align: center;
|
||||
}
|
||||
.NotFound {
|
||||
padding: 64px 24px 96px;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.NotFound {
|
||||
padding: 96px 32px 168px;
|
||||
}
|
||||
}
|
||||
.code {
|
||||
line-height: 64px;
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 12px;
|
||||
letter-spacing: 2px;
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.divider {
|
||||
margin: 24px auto 18px;
|
||||
width: 64px;
|
||||
height: 1px;
|
||||
background-color: var(--vp-c-divider)
|
||||
}
|
||||
.action {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.link {
|
||||
display: inline-block;
|
||||
border: 1px solid var(--vp-c-brand);
|
||||
border-radius: 16px;
|
||||
padding: 3px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand);
|
||||
transition: border-color 0.25s, color .25s;
|
||||
}
|
||||
.link:hover {
|
||||
border-color: var(--vp-c-brand-dark);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
// https://vitepress.dev/guide/custom-theme
|
||||
import { h } from 'vue'
|
||||
import Theme from 'vitepress/theme'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import CustomLayout from './components/CustomLayout.vue'
|
||||
|
||||
import { MotionPlugin } from '@vueuse/motion'
|
||||
|
||||
import './styles/vars.css'
|
||||
import './styles/main.css'
|
||||
import 'uno.css'
|
||||
|
||||
export default {
|
||||
extends: Theme,
|
||||
Layout: () => {
|
||||
return h(Theme.Layout, null, {
|
||||
// https://vitepress.dev/guide/extending-default-theme#layout-slots
|
||||
})
|
||||
},
|
||||
extends: DefaultTheme,
|
||||
// 使用包装组件重写布局
|
||||
Layout: CustomLayout,
|
||||
enhanceApp({ app, router, siteData }) {
|
||||
// ...
|
||||
app.use(MotionPlugin)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
export default {
|
||||
"company": '北京句末科技有限公司',
|
||||
"title": 'ISLENOTE',
|
||||
"desc": 'Record inspiration, arrange inspiration~',
|
||||
"desc.secondary": 'Continuously record and build a private knowledge base anytime, anywhere, in multiple ways',
|
||||
|
||||
"notify.test": 'Test notice',
|
||||
"register": 'Free registration',
|
||||
"guide": 'Get guide',
|
||||
"login": 'Log in now',
|
||||
"account": 'Existing account?',
|
||||
|
||||
"features": 'Features',
|
||||
"features.desc": 'From now on, record inspiration',
|
||||
"features.more": 'View more',
|
||||
"features.faster": 'Faster recording',
|
||||
"features.faster.desc": 'You can easily and quickly capture your inspiration anytime, anywhere through WeChat, apps, web pages, WPA, plugins, custom API extensions, and other means, and synchronize across multiple platforms',
|
||||
"features.style": 'More styles',
|
||||
"features.style.desc": 'Feel free to edit styles, our editing portal supports most rich text editor styles and styles, just like using an online editor, and we also support Markdown format',
|
||||
"features.review": 'Better review',
|
||||
"features.review.desc": 'A concise labeling system, better management of records and inspiration, customized reviews, and diverse push notifications make your records and inspiration truly valuable“',
|
||||
"features.extend": 'Support extension',
|
||||
"features.extend.desc": 'Provide API extensions for more convenient and efficient data import, and discover more recording methods that are essential for hands-on players',
|
||||
"features.privacy": 'Data privacy',
|
||||
"features.privacy.desc": 'Protecting data privacy is our focus, and we will not profit from selling private data. Therefore, your subscription will support us to do better',
|
||||
"features.unlimited": 'No limits set at all',
|
||||
"features.unlimited.desc": 'Island is a platform that only provides users with more convenient and efficient data recording and storage, but data always belongs to individuals, and you can export and migrate it anytime, anywhere',
|
||||
|
||||
|
||||
"subscribe": 'Subscribe',
|
||||
"subscribe.desc": 'You can use it for free, but subscribing will give you a better experience!',
|
||||
"subscribe.more": 'View more',
|
||||
"subscribe.yearly": 'Yearly (more favorable)',
|
||||
"subscribe.monthly": 'Monthly',
|
||||
"subscribe.year": 'Year',
|
||||
"subscribe.month": 'Month',
|
||||
"subscribe.pu": 'Regular users',
|
||||
"subscribe.su": 'Subscription Users',
|
||||
"subscribe.su.desc1": 'No automatic renewal, limited time',
|
||||
"subscribe.su.desc2": 'fracture',
|
||||
"subscribe.free": 'Free',
|
||||
"subscribe.free.desc": 'General equity statement',
|
||||
"subscribe.sub.desc": 'Subscription Benefits Description',
|
||||
|
||||
"footer.desc1": 'This site is built based on the open-source project',
|
||||
"footer.desc2": '',
|
||||
"footer.desc3": 'All rights reserved',
|
||||
"footer.product": 'Product',
|
||||
"footer.product.web": 'Web',
|
||||
"footer.product.desktop": 'Desktop - PWA',
|
||||
"footer.product.mobile": 'Mobile',
|
||||
"footer.product.webplugin": 'Web Plugin',
|
||||
"footer.resource": 'Resource',
|
||||
"footer.resource.guide": 'Get Guide',
|
||||
"footer.resource.faq": 'FAQ',
|
||||
"footer.resource.extend": 'Extend API',
|
||||
"footer.team": 'Team',
|
||||
"footer.team.aboutus": 'About Us',
|
||||
"footer.team.origin": 'Product Origin',
|
||||
"footer.team.contactus": 'Contact Us',
|
||||
"footer.team.support": 'Online support',
|
||||
"footer.other": 'Other',
|
||||
"footer.other.ua": 'User Agreement',
|
||||
"footer.other.pa": 'Privacy Agreement',
|
||||
|
||||
"nofound.gohome": 'Go Home',
|
||||
"nofound.nopage": 'This page has flown away',
|
||||
"nofound.follow1": 'Follow WeChat official account',
|
||||
"nofound.follow2": 'Get the latest updates',
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import en from './en.js'
|
||||
import zh from './zh.js'
|
||||
|
||||
const hash = {
|
||||
en,zh
|
||||
}
|
||||
|
||||
export function t(loacle, key){
|
||||
return hash[loacle][key] || ''
|
||||
}
|
||||
|
||||
export function routerPath(locale, path){
|
||||
return (locale == 'en' ? '/en' : '') + path
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
export default {
|
||||
"company": '北京句末科技有限公司',
|
||||
"title": '岛屿笔记',
|
||||
"desc": '记录灵感，编排灵感~',
|
||||
"desc.secondary": '随时随地、多种方式，持续记录，打造私人知识库',
|
||||
|
||||
"notify.test": '测试通告',
|
||||
"register": '免费注册',
|
||||
"guide": '快速了解',
|
||||
"login": '立即登录',
|
||||
"account": '已有帐号？',
|
||||
|
||||
"features": '特色',
|
||||
"features.desc": '从现在开始，记录灵感',
|
||||
"features.more": '查看更多',
|
||||
"features.faster": '更快记录',
|
||||
"features.faster.desc": '可以通过微信、APP、网页、WPA、插件、自定义 API 扩展等方式，随时随地更方便更快捷的抓住您的灵感，多平台同步',
|
||||
"features.style": '更多样式',
|
||||
"features.style.desc": '随心编辑样式，我们的编辑入口支持大多数富文本编辑器样式及风格，就像在使用一款在线编辑器，同时，我们也支持 Markdown 格式',
|
||||
"features.review": '更好回顾',
|
||||
"features.review.desc": '简洁的标签体系，更好的管理记录与灵感，自定义的回顾与多种多样的推送，让你的记录与灵感真正变得 ”有价值“',
|
||||
"features.extend": '支持扩展',
|
||||
"features.extend.desc": '提供 API 扩展，更方便快捷的导入数据，更多的记录方式等你发现，动手玩家必备',
|
||||
"features.privacy": '数据隐私',
|
||||
"features.privacy.desc": '保护数据隐私是我们的重心，我们不会通过贩卖隐私数据获得利润。因此，您的订阅将支持我们做得更好',
|
||||
"features.unlimited": '终不设限',
|
||||
"features.unlimited.desc": '岛屿是个平台，只为用户提供更方便快捷的数据记录与存储，但数据始终属于个人，您可以随时随地导出与迁移',
|
||||
|
||||
"subscribe": '订阅',
|
||||
"subscribe.desc": '您可以免费使用它，但订阅后将会获得更好地体验！',
|
||||
"subscribe.more": '查看更多',
|
||||
"subscribe.yearly": '按年（更优惠）',
|
||||
"subscribe.monthly": '按月',
|
||||
"subscribe.year": '年',
|
||||
"subscribe.month": '月',
|
||||
"subscribe.pu": '普通用户',
|
||||
"subscribe.su": '订阅用户',
|
||||
"subscribe.su.desc1": '无自动续费，限时',
|
||||
"subscribe.su.desc2": '折',
|
||||
"subscribe.free": '免费',
|
||||
"subscribe.free.desc": '普通权益说明',
|
||||
"subscribe.sub.desc": '订阅权益说明',
|
||||
|
||||
"footer.desc1": '本站基于开源项目',
|
||||
"footer.desc2": '构建',
|
||||
"footer.desc3": '版权所有',
|
||||
"footer.product": '产品',
|
||||
"footer.product.web": 'Web 端',
|
||||
"footer.product.desktop": '桌面端 - PWA',
|
||||
"footer.product.mobile": '移动端',
|
||||
"footer.product.webplugin": '网页插件',
|
||||
"footer.resource": '资源',
|
||||
"footer.resource.guide": '快速了解',
|
||||
"footer.resource.faq": '常见问题',
|
||||
"footer.resource.extend": '扩展API',
|
||||
"footer.team": '团队',
|
||||
"footer.team.aboutus": '关于我们',
|
||||
"footer.team.origin": '产品起源',
|
||||
"footer.team.contactus": '联系我们',
|
||||
"footer.team.support": '在线支持',
|
||||
"footer.other": '其他',
|
||||
"footer.other.ua": '用户协议',
|
||||
"footer.other.pa": '隐私协议',
|
||||
|
||||
"nofound.gohome": '回首页',
|
||||
"nofound.nopage": '这个页面飞走了',
|
||||
"nofound.follow1": '关注微信公众号',
|
||||
"nofound.follow2": '获取最新动态',
|
||||
}
|
||||
|
|
@ -1,3 +1,21 @@
|
|||
.VPButton.brand{
|
||||
color: rgba(255, 255, 245, 0.86)!important;
|
||||
body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* font-family: "Serif-Medium"; */
|
||||
}
|
||||
|
||||
.VPLink.VPNavBarMenuLink{
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.VPLocalNav .outline{
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
@media ((min-width: 960px)) {
|
||||
.VPNavBar.top .divider-line{
|
||||
background: transparent!important;
|
||||
}
|
||||
} */
|
||||
|
|
@ -1,28 +1,329 @@
|
|||
/**
|
||||
* Colors
|
||||
* Colors: Solid
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-accent: #9bbaff;
|
||||
--vp-c-brand: #165dff;
|
||||
--vp-c-brand-dark: #165dff;
|
||||
--vp-c-text-code: #5d6f5d;
|
||||
/* --vp-code-block-bg: rgba(125, 125, 125, 0.04); */
|
||||
--vp-c-disabled-bg: rgba(125, 125, 125, 0.2);
|
||||
/* fix contrast on gray cards: used by --vp-c-text-2 */
|
||||
--vp-c-brand-light: #3774ff;
|
||||
--vp-c-text-light-2: rgba(56 56 56 / 70%);
|
||||
--cho-code-block-bg: rgba(125, 125, 125, 0.04);
|
||||
--vp-c-indigo-1: #598bff;
|
||||
--vp-c-indigo-2: #598bff;
|
||||
--vp-c-indigo-3: #9bbaff;
|
||||
--vp-c-white: #ffffff;
|
||||
--vp-c-black: #000000;
|
||||
|
||||
--vp-c-neutral: var(--vp-c-black);
|
||||
--vp-c-neutral-inverse: var(--vp-c-white);
|
||||
|
||||
--vp-c-shadow: 0 0 50px 0.5px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-code-block-bg: rgba(0, 0, 0, 0.2);
|
||||
--vp-c-text-code: #c0cec0;
|
||||
/* fix contrast on gray cards: check the same above (this is the default) */
|
||||
--vp-c-text-dark-2: rgba(235, 235, 235, 0.6);
|
||||
--vp-c-neutral: var(--vp-c-white);
|
||||
--vp-c-neutral-inverse: var(--vp-c-black);
|
||||
|
||||
--vp-c-shadow: 0 0 50px 0.5px rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors: Palette
|
||||
*
|
||||
* The primitive colors used for accent colors. These colors are referenced
|
||||
* by functional colors such as "Text", "Background", or "Brand".
|
||||
*
|
||||
* Each colors have exact same color scale system with 3 levels of solid
|
||||
* colors with different brightness, and 1 soft color.
|
||||
*
|
||||
* - `XXX-1`: The most solid color used mainly for colored text. It must
|
||||
* satisfy the contrast ratio against when used on top of `XXX-soft`.
|
||||
*
|
||||
* - `XXX-2`: The color used mainly for hover state of the button.
|
||||
*
|
||||
* - `XXX-3`: The color for solid background, such as bg color of the button.
|
||||
* It must satisfy the contrast ratio with pure white (#ffffff) text on
|
||||
* top of it.
|
||||
*
|
||||
* - `XXX-soft`: The color used for subtle background such as custom container
|
||||
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
|
||||
* on top of it.
|
||||
*
|
||||
* The soft color must be semi transparent alpha channel. This is crucial
|
||||
* because it allows adding multiple "soft" colors on top of each other
|
||||
* to create a accent, such as when having inline code block inside
|
||||
* custom containers.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-gray-1: #dddde3;
|
||||
--vp-c-gray-2: #e4e4e9;
|
||||
--vp-c-gray-3: #ebebef;
|
||||
--vp-c-gray-soft: rgba(142, 150, 170, 0.14);
|
||||
|
||||
--vp-c-indigo-1: rgb(37, 99, 235);
|
||||
--vp-c-indigo-2: #4479ee;
|
||||
--vp-c-indigo-3: #6390f1;
|
||||
--vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
|
||||
|
||||
--vp-c-purple-1: #6f42c1;
|
||||
--vp-c-purple-2: #7e4cc9;
|
||||
--vp-c-purple-3: #8e5cd9;
|
||||
--vp-c-purple-soft: rgba(159, 122, 234, 0.14);
|
||||
|
||||
--vp-c-green-1: #18794e;
|
||||
--vp-c-green-2: #299764;
|
||||
--vp-c-green-3: #30a46c;
|
||||
--vp-c-green-soft: rgba(16, 185, 129, 0.14);
|
||||
|
||||
--vp-c-yellow-1: #915930;
|
||||
--vp-c-yellow-2: #946300;
|
||||
--vp-c-yellow-3: #9f6a00;
|
||||
--vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
|
||||
|
||||
--vp-c-red-1: #b8272c;
|
||||
--vp-c-red-2: #d5393e;
|
||||
--vp-c-red-3: #e0575b;
|
||||
--vp-c-red-soft: rgba(244, 63, 94, 0.14);
|
||||
|
||||
--vp-c-sponsor: #db2777;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-gray-1: #515c67;
|
||||
--vp-c-gray-2: #414853;
|
||||
--vp-c-gray-3: #32363f;
|
||||
--vp-c-gray-soft: rgba(101, 117, 133, 0.16);
|
||||
|
||||
--vp-c-indigo-1: rgb(59, 130, 246);
|
||||
--vp-c-indigo-2: #5794f7;
|
||||
--vp-c-indigo-3: #73a6f9;
|
||||
--vp-c-indigo-soft: rgba(100, 108, 255, 0.16);
|
||||
|
||||
--vp-c-purple-1: #c8abfa;
|
||||
--vp-c-purple-2: #a879e6;
|
||||
--vp-c-purple-3: #8e5cd9;
|
||||
--vp-c-purple-soft: rgba(159, 122, 234, 0.16);
|
||||
|
||||
--vp-c-green-1: #3dd68c;
|
||||
--vp-c-green-2: #30a46c;
|
||||
--vp-c-green-3: #298459;
|
||||
--vp-c-green-soft: rgba(16, 185, 129, 0.16);
|
||||
|
||||
--vp-c-yellow-1: #f9b44e;
|
||||
--vp-c-yellow-2: #da8b17;
|
||||
--vp-c-yellow-3: #a46a0a;
|
||||
--vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
|
||||
|
||||
--vp-c-red-1: #f66f81;
|
||||
--vp-c-red-2: #f14158;
|
||||
--vp-c-red-3: #b62a3c;
|
||||
--vp-c-red-soft: rgba(244, 63, 94, 0.16);
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors: Background
|
||||
*
|
||||
* - `bg`: The bg color used for main screen.
|
||||
*
|
||||
* - `bg-alt`: The alternative bg color used in places such as "sidebar",
|
||||
* or "code block".
|
||||
*
|
||||
* - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
|
||||
* such as "dialog".
|
||||
*
|
||||
* - `bg-soft`: The bg color to slightly distinguish some components from
|
||||
* the page. Used for things like "carbon ads" or "table".
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-bg: rgb(250,250,250);
|
||||
--vp-c-bg-alt: #f6f6f7;
|
||||
--vp-c-bg-elv: #ffffff;
|
||||
--vp-c-bg-soft: #f6f6f7;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-bg: rgb(10,10,10);
|
||||
--vp-c-bg-alt: #161618;
|
||||
--vp-c-bg-elv: #202127;
|
||||
--vp-c-bg-soft: #202127;
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors: Borders
|
||||
*
|
||||
* - `divider`: This is used for separators. This is used to divide sections
|
||||
* within the same components, such as having separator on "h2" heading.
|
||||
*
|
||||
* - `border`: This is designed for borders on interactive components.
|
||||
* For example this should be used for a button outline.
|
||||
*
|
||||
* - `gutter`: This is used to divide components in the page. For example
|
||||
* the header and the lest of the page.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-border: #c2c2c4;
|
||||
--vp-c-divider: #e2e2e3;
|
||||
--vp-c-gutter: #e2e2e3;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-border: #3c3f44;
|
||||
--vp-c-divider: #2e2e32;
|
||||
--vp-c-gutter: #000000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors: Text
|
||||
*
|
||||
* - `text-1`: Used for primary text.
|
||||
*
|
||||
* - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
|
||||
*
|
||||
* - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-text-1: rgba(60, 60, 67);
|
||||
--vp-c-text-2: rgba(60, 60, 67, 0.78);
|
||||
--vp-c-text-3: rgba(60, 60, 67, 0.56);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-text-1: rgba(255, 255, 245, 0.86);
|
||||
--vp-c-text-2: rgba(235, 235, 245, 0.6);
|
||||
--vp-c-text-3: rgba(235, 235, 245, 0.38);
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors: Function
|
||||
*
|
||||
* - `default`: The color used purely for subtle indication without any
|
||||
* special meanings attached to it such as bg color for menu hover state.
|
||||
*
|
||||
* - `brand`: Used for primary brand colors, such as link text, button with
|
||||
* brand theme, etc.
|
||||
*
|
||||
* - `tip`: Used to indicate useful information. The default theme uses the
|
||||
* brand color for this by default.
|
||||
*
|
||||
* - `warning`: Used to indicate warning to the users. Used in custom
|
||||
* container, badges, etc.
|
||||
*
|
||||
* - `danger`: Used to show error, or dangerous message to the users. Used
|
||||
* in custom container, badges, etc.
|
||||
*
|
||||
* To understand the scaling system, refer to "Colors: Palette" section.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-default-1: var(--vp-c-gray-1);
|
||||
--vp-c-default-2: var(--vp-c-gray-2);
|
||||
--vp-c-default-3: var(--vp-c-gray-3);
|
||||
--vp-c-default-soft: var(--vp-c-gray-soft);
|
||||
|
||||
--vp-c-brand-1: var(--vp-c-indigo-1);
|
||||
--vp-c-brand-2: var(--vp-c-indigo-2);
|
||||
--vp-c-brand-3: var(--vp-c-indigo-3);
|
||||
--vp-c-brand-soft: var(--vp-c-indigo-soft);
|
||||
|
||||
/* DEPRECATED: Use `--vp-c-brand-1` instead. */
|
||||
--vp-c-brand: var(--vp-c-brand-1);
|
||||
|
||||
--vp-c-tip-1: var(--vp-c-brand-1);
|
||||
--vp-c-tip-2: var(--vp-c-brand-2);
|
||||
--vp-c-tip-3: var(--vp-c-brand-3);
|
||||
--vp-c-tip-soft: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-c-note-1: var(--vp-c-brand-1);
|
||||
--vp-c-note-2: var(--vp-c-brand-2);
|
||||
--vp-c-note-3: var(--vp-c-brand-3);
|
||||
--vp-c-note-soft: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-c-success-1: var(--vp-c-green-1);
|
||||
--vp-c-success-2: var(--vp-c-green-2);
|
||||
--vp-c-success-3: var(--vp-c-green-3);
|
||||
--vp-c-success-soft: var(--vp-c-green-soft);
|
||||
|
||||
--vp-c-important-1: var(--vp-c-purple-1);
|
||||
--vp-c-important-2: var(--vp-c-purple-2);
|
||||
--vp-c-important-3: var(--vp-c-purple-3);
|
||||
--vp-c-important-soft: var(--vp-c-purple-soft);
|
||||
|
||||
--vp-c-warning-1: var(--vp-c-yellow-1);
|
||||
--vp-c-warning-2: var(--vp-c-yellow-2);
|
||||
--vp-c-warning-3: var(--vp-c-yellow-3);
|
||||
--vp-c-warning-soft: var(--vp-c-yellow-soft);
|
||||
|
||||
--vp-c-danger-1: var(--vp-c-red-1);
|
||||
--vp-c-danger-2: var(--vp-c-red-2);
|
||||
--vp-c-danger-3: var(--vp-c-red-3);
|
||||
--vp-c-danger-soft: var(--vp-c-red-soft);
|
||||
|
||||
--vp-c-caution-1: var(--vp-c-red-1);
|
||||
--vp-c-caution-2: var(--vp-c-red-2);
|
||||
--vp-c-caution-3: var(--vp-c-red-3);
|
||||
--vp-c-caution-soft: var(--vp-c-red-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
* Typography
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--vp-font-family-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
|
||||
'Liberation Mono', 'Courier New', monospace;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
:root:where(:lang(zh)) {
|
||||
--vp-font-family-base: 'Punctuation SC', 'Inter', ui-sans-serif, system-ui,
|
||||
'PingFang SC', 'Noto Sans CJK SC', 'Noto Sans SC', 'Heiti SC',
|
||||
'Microsoft YaHei', 'DengXian', sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
}
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
|
||||
--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
|
||||
--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
/**
|
||||
* Z-indexes
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-z-index-footer: 10;
|
||||
--vp-z-index-local-nav: 20;
|
||||
--vp-z-index-nav: 30;
|
||||
--vp-z-index-layout-top: 40;
|
||||
--vp-z-index-backdrop: 50;
|
||||
--vp-z-index-sidebar: 60;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
:root {
|
||||
--vp-z-index-sidebar: 25;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Layouts
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-layout-max-width: 1440px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Header Anchor
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-header-anchor-symbol: '#';
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -30,11 +331,44 @@
|
|||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-code-line-highlight-color: rgba(125, 125, 125, 0.2);
|
||||
}
|
||||
--vp-code-line-height: 1.7;
|
||||
--vp-code-font-size: 0.875em;
|
||||
--vp-code-color: var(--vp-c-brand-1);
|
||||
--vp-code-link-color: var(--vp-c-brand-1);
|
||||
--vp-code-link-hover-color: var(--vp-c-brand-2);
|
||||
--vp-code-bg: var(--vp-c-default-soft);
|
||||
|
||||
.dark {
|
||||
--vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
|
||||
--vp-code-block-color: var(--vp-c-text-2);
|
||||
--vp-code-block-bg: var(--vp-c-bg-alt);
|
||||
--vp-code-block-divider-color: var(--vp-c-gutter);
|
||||
|
||||
--vp-code-lang-color: var(--vp-c-text-3);
|
||||
|
||||
--vp-code-line-highlight-color: var(--vp-c-default-soft);
|
||||
--vp-code-line-number-color: var(--vp-c-text-3);
|
||||
|
||||
--vp-code-line-diff-add-color: var(--vp-c-success-soft);
|
||||
--vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);
|
||||
|
||||
--vp-code-line-diff-remove-color: var(--vp-c-danger-soft);
|
||||
--vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);
|
||||
|
||||
--vp-code-line-warning-color: var(--vp-c-warning-soft);
|
||||
--vp-code-line-error-color: var(--vp-c-danger-soft);
|
||||
|
||||
--vp-code-copy-code-border-color: var(--vp-c-divider);
|
||||
--vp-code-copy-code-bg: var(--vp-c-bg-soft);
|
||||
--vp-code-copy-code-hover-border-color: var(--vp-c-divider);
|
||||
--vp-code-copy-code-hover-bg: var(--vp-c-bg);
|
||||
--vp-code-copy-code-active-text: var(--vp-c-text-2);
|
||||
--vp-code-copy-copied-text-content: 'Copied';
|
||||
|
||||
--vp-code-tab-divider: var(--vp-code-block-divider-color);
|
||||
--vp-code-tab-text-color: var(--vp-c-text-2);
|
||||
--vp-code-tab-bg: var(--vp-code-block-bg);
|
||||
--vp-code-tab-hover-text-color: var(--vp-c-text-1);
|
||||
--vp-code-tab-active-text-color: var(--vp-c-text-1);
|
||||
--vp-code-tab-active-bar-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -42,15 +376,139 @@
|
|||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-button-brand-border: var(--vp-c-brand-light);
|
||||
--vp-button-brand-text: var(--vp-c-text-dark-1);
|
||||
--vp-button-brand-bg: var(--vp-c-brand);
|
||||
--vp-button-brand-hover-border: var(--vp-c-brand-light);
|
||||
--vp-button-brand-hover-text: var(--vp-c-text-dark-1);
|
||||
--vp-button-brand-hover-bg: var(--vp-c-brand-light);
|
||||
--vp-button-brand-active-border: var(--vp-c-brand-light);
|
||||
--vp-button-brand-active-text: var(--vp-c-text-dark-1);
|
||||
--vp-button-brand-active-bg: var(--vp-button-brand-bg);
|
||||
--vp-button-brand-border: transparent;
|
||||
--vp-button-brand-text: var(--vp-c-white);
|
||||
--vp-button-brand-bg: var(--vp-c-brand-3);
|
||||
--vp-button-brand-hover-border: transparent;
|
||||
--vp-button-brand-hover-text: var(--vp-c-white);
|
||||
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
|
||||
--vp-button-brand-active-border: transparent;
|
||||
--vp-button-brand-active-text: var(--vp-c-white);
|
||||
--vp-button-brand-active-bg: var(--vp-c-brand-1);
|
||||
|
||||
--vp-button-alt-border: transparent;
|
||||
--vp-button-alt-text: var(--vp-c-text-1);
|
||||
--vp-button-alt-bg: var(--vp-c-default-3);
|
||||
--vp-button-alt-hover-border: transparent;
|
||||
--vp-button-alt-hover-text: var(--vp-c-text-1);
|
||||
--vp-button-alt-hover-bg: var(--vp-c-default-2);
|
||||
--vp-button-alt-active-border: transparent;
|
||||
--vp-button-alt-active-text: var(--vp-c-text-1);
|
||||
--vp-button-alt-active-bg: var(--vp-c-default-1);
|
||||
|
||||
--vp-button-sponsor-border: var(--vp-c-text-2);
|
||||
--vp-button-sponsor-text: var(--vp-c-text-2);
|
||||
--vp-button-sponsor-bg: transparent;
|
||||
--vp-button-sponsor-hover-border: var(--vp-c-sponsor);
|
||||
--vp-button-sponsor-hover-text: var(--vp-c-sponsor);
|
||||
--vp-button-sponsor-hover-bg: transparent;
|
||||
--vp-button-sponsor-active-border: var(--vp-c-sponsor);
|
||||
--vp-button-sponsor-active-text: var(--vp-c-sponsor);
|
||||
--vp-button-sponsor-active-bg: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Custom Block
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-custom-block-font-size: 14px;
|
||||
--vp-custom-block-code-font-size: 13px;
|
||||
|
||||
--vp-custom-block-info-border: transparent;
|
||||
--vp-custom-block-info-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-info-bg: var(--vp-c-default-soft);
|
||||
--vp-custom-block-info-code-bg: var(--vp-c-default-soft);
|
||||
|
||||
--vp-custom-block-note-border: transparent;
|
||||
--vp-custom-block-note-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-note-bg: var(--vp-c-default-soft);
|
||||
--vp-custom-block-note-code-bg: var(--vp-c-default-soft);
|
||||
|
||||
--vp-custom-block-tip-border: transparent;
|
||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-tip-bg: var(--vp-c-tip-soft);
|
||||
--vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);
|
||||
|
||||
--vp-custom-block-important-border: transparent;
|
||||
--vp-custom-block-important-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-important-bg: var(--vp-c-important-soft);
|
||||
--vp-custom-block-important-code-bg: var(--vp-c-important-soft);
|
||||
|
||||
--vp-custom-block-warning-border: transparent;
|
||||
--vp-custom-block-warning-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-warning-bg: var(--vp-c-warning-soft);
|
||||
--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
|
||||
|
||||
--vp-custom-block-danger-border: transparent;
|
||||
--vp-custom-block-danger-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-danger-bg: var(--vp-c-danger-soft);
|
||||
--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
|
||||
|
||||
--vp-custom-block-caution-border: transparent;
|
||||
--vp-custom-block-caution-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-caution-bg: var(--vp-c-caution-soft);
|
||||
--vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);
|
||||
|
||||
--vp-custom-block-details-border: var(--vp-custom-block-info-border);
|
||||
--vp-custom-block-details-text: var(--vp-custom-block-info-text);
|
||||
--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
|
||||
--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Input
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-input-border-color: var(--vp-c-border);
|
||||
--vp-input-bg-color: var(--vp-c-bg-alt);
|
||||
|
||||
--vp-input-switch-bg-color: var(--vp-c-default-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Nav
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-nav-height: 64px;
|
||||
--vp-nav-bg-color: var(--vp-c-bg);
|
||||
--vp-nav-screen-bg-color: var(--vp-c-bg);
|
||||
--vp-nav-logo-height: 24px;
|
||||
}
|
||||
|
||||
.hide-nav {
|
||||
--vp-nav-height: 0px;
|
||||
}
|
||||
|
||||
.hide-nav .VPSidebar {
|
||||
--vp-nav-height: 22px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Local Nav
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-local-nav-bg-color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Sidebar
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-sidebar-width: 272px;
|
||||
--vp-sidebar-bg-color: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors Backdrop
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -58,36 +516,57 @@
|
|||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(
|
||||
120deg,
|
||||
#9bbaff -80%,
|
||||
#3774ff
|
||||
);
|
||||
--vp-home-hero-image-background-image: linear-gradient(
|
||||
-45deg,
|
||||
#3774ff 30%,
|
||||
#9bbaff80
|
||||
);
|
||||
--vp-home-hero-image-filter: blur(30px);
|
||||
}
|
||||
--vp-home-hero-name-color: var(--vp-c-brand-1);
|
||||
--vp-home-hero-name-background: transparent;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(72px);
|
||||
}
|
||||
--vp-home-hero-image-background-image: none;
|
||||
--vp-home-hero-image-filter: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Algolia
|
||||
* Component: Badge
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: var(--vp-c-brand) !important;
|
||||
:root {
|
||||
--vp-badge-info-border: transparent;
|
||||
--vp-badge-info-text: var(--vp-c-text-2);
|
||||
--vp-badge-info-bg: var(--vp-c-default-soft);
|
||||
|
||||
--vp-badge-tip-border: transparent;
|
||||
--vp-badge-tip-text: var(--vp-c-tip-1);
|
||||
--vp-badge-tip-bg: var(--vp-c-tip-soft);
|
||||
|
||||
--vp-badge-warning-border: transparent;
|
||||
--vp-badge-warning-text: var(--vp-c-warning-1);
|
||||
--vp-badge-warning-bg: var(--vp-c-warning-soft);
|
||||
|
||||
--vp-badge-danger-border: transparent;
|
||||
--vp-badge-danger-text: var(--vp-c-danger-1);
|
||||
--vp-badge-danger-bg: var(--vp-c-danger-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Carbon Ads
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-carbon-ads-text-color: var(--vp-c-text-1);
|
||||
--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
|
||||
--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
|
||||
--vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
|
||||
--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Local Search
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-local-search-bg: var(--vp-c-bg);
|
||||
--vp-local-search-result-bg: var(--vp-c-bg);
|
||||
--vp-local-search-result-border: var(--vp-c-divider);
|
||||
--vp-local-search-result-selected-bg: var(--vp-c-bg);
|
||||
--vp-local-search-result-selected-border: var(--vp-c-brand-1);
|
||||
--vp-local-search-highlight-bg: var(--vp-c-brand-1);
|
||||
--vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
|
||||
}
|
||||
23
about.md
23
about.md
|
|
@ -1,23 +0,0 @@
|
|||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# 关于我们
|
||||
|
||||
`ISLENOTE 岛屿笔记` 是 [句末科技](https://sentenceend.com) 旗下的一款工具类产品。
|
||||
|
||||
和美式英语中岛屿的 `island` 不同，`isle` 是英式英语中岛屿的意思，`note` 则是笔记，所以岛屿笔记的英文以及域名都是 `islenote`。
|
||||
|
||||
你知道什么是岛屿吗？
|
||||
|
||||
`岛` 通常是指一个相对较大、有人居住或有明显地理特征的陆地，它被水体（通常是海洋）所包围。
|
||||
|
||||
`屿` 通常是指相对较小、不太有人居住或没有明显地理特征的陆地，它也被水体包围，但可能没有像岛那么大或重要。
|
||||
|
||||
所以我们的产品取 `岛屿` 二字，当然，它分为两个模块，`屿灵` 用来记录那些琐碎的灵感，`岛记` 用来编排我们记录的这些灵感。So，这也是岛屿笔记 `Slogan` 的来源： 记录灵感，编排灵感！
|
||||
|
||||
为了达到良好的用户体验，我们自始至终都在为产品做减法。岛屿专注于记&录，不同与市面上功能繁杂的笔记产品，岛屿的功能很简单，它的核心始终围绕在记录上。`屿灵` 让我们随时随地的记下那些虚无缥缈的灵感片段，我们做的是让用户可以能更便捷的记录下那些碎片化灵感；`岛记` 用最朴实的 `Markdown` 语法去编辑、去连接接我们的想法，你并不能看到一个功能复杂的笔记产品，我们做的只是在还原一款最基础的 `Markdown` 笔记的同时让灵感得以在笔记中填充。
|
||||
|
||||
可以再简单一点，其实我们做的只是让数据同步、让碎片连接，仅此而已！
|
||||
|
||||
哦，对，我想你应该知道 `Markdown`，否则，，，岛屿将帮不了你！
|
||||
21
docs.md
21
docs.md
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# 文档
|
||||
|
||||
<!-- info 普通 warning 重要 tip 提示 danger 危险 details 组合 -->
|
||||
|
||||
TODO
|
||||
|
||||
<!-- ::: info 2023-09-20
|
||||
句末科技官网上线！
|
||||
:::
|
||||
|
||||
::: info 2023-09-04
|
||||
句末科技网站备案成功！
|
||||
:::
|
||||
|
||||
::: warning 2023-08-24
|
||||
句末科技成立了！
|
||||
::: -->
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
outline: deep
|
||||
footer: false
|
||||
---
|
||||
|
||||
# 关于我们
|
||||
|
||||
|
||||
和美式英语中岛屿的 `island` 不同，`isle` 是英式英语中岛屿的意思，所以岛屿笔记的英文是 `islenote`。
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
outline: deep
|
||||
footer: false
|
||||
---
|
||||
|
||||
# 快速了解
|
||||
|
||||
TODO
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
outline: deep
|
||||
footer: false
|
||||
---
|
||||
|
||||
# 联系我们
|
||||
|
||||
## 发送邮件
|
||||
|
||||
请发邮件至：
|
||||
|
||||
```
|
||||
islenote@sentenceend.com
|
||||
```
|
||||
|
||||
24 小时内无回复，请联系：
|
||||
|
||||
```
|
||||
lijianchao@sentenceend.com
|
||||
```
|
||||
|
||||
## 在线支持
|
||||
|
||||
请添加微信并备注 `岛屿笔记`：
|
||||
|
||||
```
|
||||
isboyjc_
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
outline: deep
|
||||
footer: false
|
||||
---
|
||||
|
||||
# 测试通告
|
||||
|
||||
TODO
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
outline: deep
|
||||
footer: false
|
||||
---
|
||||
|
||||
# About Us
|
||||
|
||||
|
||||
Unlike the `island` in American English, `isle` means island in British English, so the English word for island notes is `islenote`.
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
outline: deep
|
||||
footer: false
|
||||
---
|
||||
|
||||
# Guide
|
||||
|
||||
TODO
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
outline: deep
|
||||
footer: false
|
||||
---
|
||||
|
||||
# Contact Us
|
||||
|
||||
## Send email
|
||||
|
||||
Please send an email to:
|
||||
|
||||
```
|
||||
islenote@sentenceend.com
|
||||
```
|
||||
|
||||
No response within 24 hours, please contact:
|
||||
|
||||
```
|
||||
lijianchao@sentenceend.com
|
||||
```
|
||||
|
||||
## Online Support
|
||||
|
||||
Please add WeChat and note 'islenote':
|
||||
|
||||
```
|
||||
isboyjc_
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
outline: deep
|
||||
footer: false
|
||||
---
|
||||
|
||||
# Test Notice
|
||||
|
||||
TODO
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
# https://vitepress.dev/reference/default-theme-home-page
|
||||
layout: home
|
||||
sidebar: false
|
||||
title: ISLENOTE
|
||||
titleTemplate: "Record inspiration, arrange inspiration~"
|
||||
|
||||
---
|
||||
|
||||
<CustomHome />
|
||||
30
index.md
30
index.md
|
|
@ -2,33 +2,9 @@
|
|||
# https://vitepress.dev/reference/default-theme-home-page
|
||||
layout: home
|
||||
sidebar: false
|
||||
title: 岛屿笔记 | ISLENOTE
|
||||
titleTemplate: "记录灵感，编排灵感"
|
||||
title: 岛屿笔记
|
||||
titleTemplate: "记录灵感，编排灵感~"
|
||||
|
||||
hero:
|
||||
name: "\n屿灵 · 记录灵感"
|
||||
text: " 岛记 · 编排灵感"
|
||||
tagline: " "
|
||||
image:
|
||||
src: /svg/undraw_inspiration_re_ivlv.svg
|
||||
alt: "图片未加载..."
|
||||
actions:
|
||||
- theme: brand
|
||||
text: "立即登录"
|
||||
link: https://v.islenote.com/login
|
||||
- theme: alt
|
||||
text: "免费注册"
|
||||
link: https://v.islenote.com/register
|
||||
|
||||
# features:
|
||||
# - title: 创新
|
||||
# icon: 💡
|
||||
# details: 创新驱动发展，致力于推动产研创新，让体验更好。
|
||||
# - title: 生活
|
||||
# icon: 🌟
|
||||
# details: 凭借先进的技术和持续的创新，不断为生活带来惊喜。
|
||||
# - title: 技术
|
||||
# icon: 🖥️
|
||||
# details: 以创新为动力，以技术为支撑，让生活更加智能化、便捷化。
|
||||
---
|
||||
|
||||
<CustomHome />
|
||||
28
package.json
28
package.json
|
|
@ -5,13 +5,37 @@
|
|||
"private": true,
|
||||
"author": "isboyjc",
|
||||
"type": "module",
|
||||
"keywords": [],
|
||||
"keywords": [
|
||||
"islenote",
|
||||
"ISLENOTE",
|
||||
"岛屿",
|
||||
"岛屿笔记",
|
||||
"editor",
|
||||
"note",
|
||||
"isboyjc",
|
||||
"记录灵感",
|
||||
"record inspiration",
|
||||
"编排灵感",
|
||||
"arrange inspiration"
|
||||
],
|
||||
"devDependencies": {
|
||||
"vitepress": "^1.0.0-rc.14"
|
||||
"@iconify-json/lucide": "^1.1.188",
|
||||
"@iconify-json/material-symbols": "^1.1.81",
|
||||
"@unocss/transformer-directives": "^0.60.4",
|
||||
"@unocss/transformer-variant-group": "^0.60.4",
|
||||
"unocss": "^0.60.4",
|
||||
"unplugin-icons": "^0.19.0",
|
||||
"unplugin-vue-components": "^0.27.0",
|
||||
"vitepress": "^1.2.2",
|
||||
"vue": "^3.4.27"
|
||||
},
|
||||
"scripts": {
|
||||
"docs:dev": "vitepress dev",
|
||||
"docs:build": "vitepress build",
|
||||
"docs:preview": "vitepress preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/motion": "^2.2.3",
|
||||
"vite": "^5.2.12"
|
||||
}
|
||||
}
|
||||
2753
pnpm-lock.yaml
2753
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 427 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 431 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1697221162679" class="icon" viewBox="0 0 1216 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15246"><path d="M393.536 278.272c32.736-64.704 61.728-117.12 110.784-154.848 57.792-44.48 113.984-44.48 172.032 0.48 48.8 37.888 77.856 90.304 105.408 145.056 3.552-1.152 6.656-2.752 9.408-4.8l-0.096 0.064c77.152-78.496 148.736-74.656 212.416 13.888 53.632 74.4 72.736 161.504 85.984 250.304 1.92 12.768-3.36 17.024-15.008 16.704h-24.096c-307.456 0-614.88-0.48-922.336 0.736-34.592 0-42.624-8.032-35.488-42.304 13.728-66.72 28.896-132.448 61.888-192.736a252.48 252.48 0 0 1 48.064-63.744l0.096-0.096c55.552-51.68 115.424-51.68 170.016 0.8 7.456 8.96 14.4 18.944 20.416 29.504l0.544 1.024z m3.776 477.312c-24.096 0.64-57.792-16.928-88.288-42.4-51.456-42.784-72.256-41.728-126.816-2.336-12.608 9.056-24.96 40.128-46.144 16.608-30.272-33.312-28.576-65.664-1.376-87.168 77.696-61.568 146.656-60.928 224.032 2.08 42.304 34.528 67.904 36.352 109.568 2.656 71.776-57.952 152.512-75.552 235.776 4.576 26.816 25.76 57.952 24.096 88.288 5.696 13.632-8.032 25.376-19.424 38.528-28.512 73.536-50.88 185.344-34.048 230.784 39.648 13.408 21.664-9.536 49.6-22.4 71.136-10.848 18.144-25.76-0.64-32.096-7.392-57.568-61.088-109.344-53.952-172.096-1.696-56.192 46.464-129.312 34.912-186.944-13.568-52.672-44.32-69.984-44.544-125.152-1.92-42.048 32.672-68.704 43.36-125.632 42.56z m339.712 176.608c-21.824 0-54.016-16.704-83.232-41.728-48.8-41.888-69.984-42.24-118.72-3.776-80.288 63.168-144.48 62.944-222.688-0.896-21.024-17.024-42.208-32.096-72.256-26.016-13.472 2.72-61.664-45.28-61.664-59.168s11.552-12.288 19.584-15.584c59.168-24.096 112.384-10.528 160.544 27.52 59.072 46.304 70.72 46.56 131.744 0.8 73.696-55.232 142.72-54.176 210.784 3.2 47.52 40.128 68.64 41.088 118.976 2.496 45.12-34.592 92.384-57.152 151.392-40.704 27.36 8.032 40.128 17.408 16.064 43.264-17.728 18.88-30.496 40.864-64.224 38.848-23.36-1.376-42.784 19.104-61.664 34.112-31.616 24.736-66.72 38.944-124.672 37.568z" p-id="15247"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
13
support.md
13
support.md
|
|
@ -1,13 +0,0 @@
|
|||
# 在线支持
|
||||
|
||||
请发邮件至：
|
||||
|
||||
```
|
||||
islenote@sentenceend.com
|
||||
```
|
||||
|
||||
24 小时内无回复，请联系我：
|
||||
|
||||
```
|
||||
lijianchao@sentenceend.com
|
||||
```
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/*
|
||||
* @LastEditTime: 2024-06-03 16:00:11
|
||||
* @Description: unocss 配置
|
||||
* @Date: 2023-06-26 04:22:50
|
||||
* @Author: isboyjc
|
||||
* @LastEditors: isboyjc
|
||||
*/
|
||||
import { presetAttributify, presetUno, defineConfig } from "unocss";
|
||||
// Unocss 指令插件
|
||||
import transformerDirectives from '@unocss/transformer-directives'
|
||||
// 变体组 指令插件
|
||||
// 使用： <div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>
|
||||
// 转化： <div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>
|
||||
import transformerVariantGroup from '@unocss/transformer-variant-group'
|
||||
|
||||
export default defineConfig({
|
||||
// 快捷方式
|
||||
shortcuts: {
|
||||
'flex-center': 'flex justify-center items-center',
|
||||
'flex-justify-center': 'flex justify-center',
|
||||
'flex-items-center': 'flex items-center'
|
||||
// 'border-main': 'border-gray-400 border-opacity-30',
|
||||
// 'bg-main': 'bg-gray-400',
|
||||
// 'bg-base': 'bg-white dark:bg-hex-1a1a1a',
|
||||
},
|
||||
presets: [
|
||||
presetUno(),
|
||||
presetAttributify({
|
||||
prefix: 'uno-',
|
||||
prefixedOnly: true, // <--
|
||||
})
|
||||
],
|
||||
// 主题
|
||||
theme: {
|
||||
colors: {
|
||||
primary: 'var(--vp-c-indigo-1)',
|
||||
},
|
||||
fontFamily: {
|
||||
mono: 'var(--vt-font-family-mono)',
|
||||
},
|
||||
},
|
||||
transformers: [
|
||||
transformerDirectives(),
|
||||
transformerVariantGroup(),
|
||||
],
|
||||
})
|
||||
Loading…
Reference in New Issue