Skip to content

Commit

Permalink
style(heo): 修复在较小屏幕尺寸时,文章宽度样式问题
Browse files Browse the repository at this point in the history
  • Loading branch information
real-jacket committed Sep 7, 2023
1 parent 141c3cd commit 801898d
Showing 1 changed file with 29 additions and 14 deletions.
43 changes: 29 additions & 14 deletions themes/heo/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import CONFIG from './config'

import CommonHead from '@/components/CommonHead'
import { useEffect } from 'react'
import { useEffect, useState } from 'react'
import Footer from './components/Footer'
import SideRight from './components/SideRight'
import NavBar from './components/NavBar'
Expand Down Expand Up @@ -123,11 +123,13 @@ const LayoutIndex = props => {
<div id="post-outer-wrapper" className="px-5 md:px-0">
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? (
{BLOG.POST_LIST_STYLE === 'page'
? (
<BlogPostListPage {...props} />
) : (
)
: (
<BlogPostListScroll {...props} />
)}
)}
</div>
</LayoutBase>
)
Expand Down Expand Up @@ -155,11 +157,13 @@ const LayoutPostList = props => {
<div id="post-outer-wrapper" className="px-5 md:px-0">
{/* 文章分类条 */}
<CategoryBar {...props} />
{BLOG.POST_LIST_STYLE === 'page' ? (
{BLOG.POST_LIST_STYLE === 'page'
? (
<BlogPostListPage {...props} />
) : (
)
: (
<BlogPostListScroll {...props} />
)}
)}
</div>
</LayoutBase>
)
Expand Down Expand Up @@ -206,17 +210,21 @@ const LayoutSearch = props => {
headerSlot={headerSlot}
>
<div id="post-outer-wrapper" className="px-5 md:px-0">
{!currentSearch ? (
{!currentSearch
? (
<SearchNav {...props} />
) : (
)
: (
<div id="posts-wrapper">
{BLOG.POST_LIST_STYLE === 'page' ? (
{BLOG.POST_LIST_STYLE === 'page'
? (
<BlogPostListPage {...props} />
) : (
)
: (
<BlogPostListScroll {...props} />
)}
)}
</div>
)}
)}
</div>
</LayoutBase>
)
Expand Down Expand Up @@ -272,6 +280,13 @@ const LayoutSlug = props => {
const { post, lock, validPassword } = props
const { locale } = useGlobal()

const [hasCode, setHasCode] = useState(false)

useEffect(() => {
const hasCode = document.querySelectorAll('[class^="language-"]').length > 0
setHasCode(hasCode)
}, [])

// 右侧栏
const slotRight = <SideRight {...props} />
const headerSlot = (
Expand All @@ -298,7 +313,7 @@ const LayoutSlug = props => {
showTag={false}
slotRight={slotRight}
>
<div className="w-full max-w-5xl lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article">
<div className={`w-full xl:max-w-5xl${hasCode ? ' xl:w-[73.15vw]' : ''} lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article`}>
{lock && <ArticleLock validPassword={validPassword} />}

{!lock && (
Expand Down

0 comments on commit 801898d

Please sign in to comment.