添加 DIY 引入 CSS 数组

This commit is contained in:
Vixcity
2023-02-01 14:39:40 +08:00
parent c9ab963891
commit 006bb82170
8 changed files with 32 additions and 16 deletions

View File

@@ -71,16 +71,19 @@ const BLOG = {
SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关
// 漂浮线段特效
NEST: process.env.NEXT_PUBLIC_NEST || false, // 开关
NEST: process.env.NEXT_PUBLIC_NEST || true, // 开关
// 动态彩带特效
FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_FLUTTERINGRIBBON || false, // 开关
FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_FLUTTERINGRIBBON || true, // 开关
// 静态彩带特效
RIBBON: process.env.NEXT_PUBLIC_RIBBON || false, // 开关
// 星空雨特效 黑夜模式才会生效
STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关
// 样式代码
CSS_LIST: [''],
// 悬浮挂件
WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models

View File

@@ -11,20 +11,33 @@ class MyDocument extends Document {
render() {
return (
<Html lang={BLOG.LANG} className='test'>
<Html lang={BLOG.LANG} className="test">
<Head>
<link rel='icon' href='/favicon.ico' />
<link rel='icon' href='/favicon.svg' type='image/svg+xml' />
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<CommonScript />
{console.log(this.renderCSS())}
{this.renderCSS()}
</Head>
<body className={'tracking-wider subpixel-antialiased bg-day dark:bg-night'}>
<Main />
<NextScript />
<body
className={'tracking-wider subpixel-antialiased bg-day dark:bg-night'}
>
<Main />
<NextScript />
</body>
</Html>
)
}
renderCSS() {
if (BLOG.CSS_LIST && BLOG.CSS_LIST.length > 0) {
return BLOG.CSS_LIST.map((item, index) => {
return (
<link rel="stylesheet" key={index + 'stylesheet'} href={item}></link>
)
})
}
}
}
export default MyDocument

View File

@@ -46,7 +46,7 @@ export const LayoutSlug = props => {
showTag={false}
floatSlot={floatSlot}
>
<div className="w-full lg:shadow-sm lg:hover:shadow lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
<div className="w-full lg:shadow-sm lg:hover:shadow lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id="container" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">

View File

@@ -14,7 +14,7 @@ const BlogPostCard = ({ post, showSummary }) => {
data-aos-easing="ease-in-out"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
className="w-full drop-shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300">
className="w-full drop-shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300 coverArticle">
<div
key={post.id}
className="animate__animated animate__fadeIn flex flex-col-reverse lg:flex-row justify-between duration-300"

View File

@@ -1,7 +1,7 @@
const Card = ({ children, headerSlot, className }) => {
return <div className={className}>
<>{headerSlot}</>
<section className=" drop-shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
<section className="rightBgColor drop-shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
{children}
</section>
</div>

View File

@@ -14,7 +14,7 @@ const Footer = ({ title }) => {
return (
<footer
className='relative dark:bg-black flex-shrink-0 bg-hexo-light-gray justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm p-6'
className='relative dark:bg-black flex-shrink-0 bg-hexo-light-gray justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm p-6 z-10'
>
<DarkModeButton/>

View File

@@ -19,7 +19,7 @@ export default function HeaderArticle({ post, siteInfo }) {
return (
<div
id="header"
className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn relative"
className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn relative z-10"
style={{ backgroundImage: headerImage }}
>
<header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
@@ -65,5 +65,5 @@ export default function HeaderArticle({ post, siteInfo }) {
</div>
</header>
</div>
);
)
}

View File

@@ -22,7 +22,7 @@ export default function SideRight(props) {
} = props
return (
<div className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
<div id='sideRight' className={'space-y-4 lg:w-80 lg:pt-0 px-2 pt-4'}>
<InfoCard {...props} />
{CONFIG_HEXO.WIDGET_ANALYTICS && <AnalyticsCard {...props} />}