body背景色 提出

This commit is contained in:
tangly1024
2023-07-15 11:57:51 +08:00
parent eb3a0a0bae
commit a5892cb467
15 changed files with 81 additions and 55 deletions

View File

@@ -17,7 +17,7 @@ class MyDocument extends Document {
<CommonScript />
</Head>
<body className={`${BLOG.FONT_STYLE} font-light bg-day dark:bg-night`}>
<body className={`${BLOG.FONT_STYLE} font-light`}>
<Main />
<NextScript />
</body>

View File

@@ -6,9 +6,9 @@
*/
const Style = () => {
return <style jsx global>{`
.test {
text-color: red;
// 底色
.dark body{
background-color: black;
}
`}</style>

View File

@@ -6,11 +6,13 @@
*/
const Style = () => {
return <style jsx global>{`
.test {
text-color: red;
// 底色
body{
background-color: #eeedee;
}
.dark body{
background-color: black;
}
/* fukasawa的首页响应式分栏 */
#theme-fukasawa .grid-item {

View File

@@ -7,8 +7,9 @@
const Style = () => {
return <style jsx global>{`
.test {
text-color: red;
// 底色
.dark body{
background-color: black;
}
`}</style>

View File

@@ -10,7 +10,7 @@ import throttle from 'lodash.throttle'
*/
const Header = props => {
const [isOpen, changeShow] = useState(false)
const [headerBgShow, setHeaderBgShow] = useState(false)
const [fixedNav, setHeaderBgShow] = useState(false)
const [whiteTitle, setWhiteTitle] = useState(false)
const toggleMenuOpen = () => {
@@ -29,15 +29,15 @@ const Header = props => {
const throttleMs = 200
/**
* 根据滚动条,切换导航栏样式
*/
* 根据滚动条,切换导航栏样式
*/
const scrollTrigger = useCallback(throttle(() => {
const scrollS = window.scrollY
const header = document.querySelector('#header')
const postHeader = document.querySelector('#post-bg')
// 导航栏设置 白色背景
if (header && scrollS > 60) {
if (header && scrollS > 0) {
setHeaderBgShow(true)
setWhiteTitle(false)
} else {
@@ -50,21 +50,23 @@ const Header = props => {
return (<>
{/* 头条 */}
<nav id='header' className={`${headerBgShow ? 'bg-white' : 'bg-none'} ${whiteTitle ? 'text-white' : 'text-black'} h-16 flex justify-center items-center fixed top-0 duration-150 transition-all w-full z-20 transform`}>
<div className='w-full max-w-[86rem] mx-auto flex justify-between items-center px-8'>
<div className='flex'>
<Logo {...props} />
</div>
<header id='header' className={' h-16 w-full z-20 '}>
<nav className={`${fixedNav ? 'fixed bg-white' : 'relative bg-none'} ${whiteTitle ? 'text-white' : 'text-black'} h-16 top-0 w-full`}>
<div className='flex h-full mx-auto justify-between items-center max-w-[86rem] px-8'>
<div className='flex'>
<Logo {...props} />
</div>
{/* 右侧功能 */}
<div className='mr-1 justify-end items-center '>
<div className='hidden lg:flex'> <MenuListTop {...props} /></div>
<div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
{isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
{/* 右侧功能 */}
<div className='mr-1 justify-end items-center '>
<div className='hidden lg:flex'> <MenuListTop {...props} /></div>
<div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
{isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
</div>
</div>
</div>
</div>
</nav>
</nav>
</header>
</>)
}

View File

@@ -27,10 +27,12 @@ const PaginationNumber = ({ page, totalPage }) => {
}
/**
* 调到指定页
*/
* 调到指定页
*/
const jumpToPage = () => {
router.push(value === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${value}`)
if (value) {
router.push(value === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${value}`)
}
}
return (

View File

@@ -124,7 +124,14 @@ const LayoutBase = props => {
* @returns
*/
const LayoutIndex = (props) => {
return <LayoutPostList {...props} />
// 博客列表上方嵌入一个 通知横幅和英雄块
const headerSlot = <>
{/* 通知横幅 */}
<NoticeBar />
<Hero {...props} />
</>
return <LayoutPostList {...props} headerSlot={headerSlot} />
}
/**
@@ -133,18 +140,10 @@ const LayoutIndex = (props) => {
* @returns
*/
const LayoutPostList = (props) => {
// 博客列表上方嵌入一个 通知横幅和英雄块
const headerSlot = <div className='mt-20'>
{/* 通知横幅 */}
<NoticeBar />
<Hero {...props} />
</div>
// 右侧栏
const slotRight = <SideRight {...props} />
return <LayoutBase {...props} headerSlot={headerSlot} slotRight={slotRight}>
return <LayoutBase {...props} slotRight={slotRight}>
{/* 文章分类条 */}
<CategoryBar {...props} />

View File

@@ -6,8 +6,8 @@
*/
const Style = () => {
return <style jsx global>{`
.test {
text-color: red;
body {
background-color: #f7f9fe;
}
// 公告栏中的字体固定白色

View File

@@ -6,6 +6,13 @@
*/
const Style = () => {
return (<style jsx global>{`
// 底色
body{
background-color: #f5f5f5
}
.dark body{
background-color: black;
}
/* 菜单下划线动画 */
#theme-hexo .menu-link {

View File

@@ -6,9 +6,12 @@
*/
const Style = () => {
return <style jsx global>{`
.test {
text-color: red;
// 底色
body{
background-color: #f5f5f5
}
.dark body{
background-color: black;
}
/* 设置了从上到下的渐变黑色 */

View File

@@ -7,8 +7,9 @@
const Style = () => {
return <style jsx global>{`
.test {
text-color: red;
// 底色
.dark body{
background-color: black;
}
`}</style>

View File

@@ -6,9 +6,13 @@
*/
const Style = () => {
return <style jsx global>{`
.test {
text-color: red;
// 底色
body{
background-color: #eeedee
}
.dark body{
background-color: black;
}
`}</style>

View File

@@ -7,8 +7,9 @@
const Style = () => {
return <style jsx global>{`
.test {
text-color: red;
// 底色
.dark body{
background-color: black;
}
`}</style>

View File

@@ -6,11 +6,10 @@
*/
const Style = () => {
return <style jsx global>{`
.test {
text-color: red;
// 底色
.dark body{
background-color: black;
}
`}</style>
}

View File

@@ -7,6 +7,11 @@
const Style = () => {
return <style jsx global>{`
// 底色
.dark body{
background-color: black;
}
#theme-simple #announcement-content {
/* background-color: #f6f6f6; */
}