图标样式
This commit is contained in:
tangly1024
2021-12-13 17:45:40 +08:00
parent b2d2afc704
commit cfa2fd1c42
8 changed files with 19 additions and 15 deletions

View File

@@ -20,7 +20,7 @@ const BlogPostCard = ({ post, tags }) => {
<div>
<Link href={`/category/${post.category}`} passHref>
<span className='cursor-pointer dark:text-gray-200 font-light text-gray-500 text-sm hover:underline hover:text-blue-500 dark:hover:text-blue-400 transform'>
<FontAwesomeIcon icon={faFolder} size='sm' className='mr-1 w-5 text-sm' />{post.category}
<FontAwesomeIcon icon={faFolder} className='mr-1' />{post.category}
</span>
</Link>
<span className='mx-2 dark:text-gray-400 text-gray-500'>|</span>

View File

@@ -17,7 +17,7 @@ const CategoryList = ({ currentCategory, categories }) => {
return (
<Link key={category} href={`/category/${category}`} passHref>
<li
className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap dark:text-gray-300
className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-light text-sm whitespace-nowrap dark:text-gray-300
${selected
? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
: 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:hover:bg-gray-700 dark:bg-gray-600 dark:border-gray-600'

View File

@@ -10,16 +10,16 @@ const Footer = ({ fullWidth = true }) => {
<footer
className='bg-gray-800 dark:bg-black dark:border-gray-900 border-t flex-shrink-0 justify-center text-center m-auto w-full text-gray-400 text-sm p-6'
>
<FontAwesomeIcon size='sm' className='text-sm w-5' icon={faCopyright} /> {` ${y}`} <span> <a href='https://blog.tangly1024.com/article/about' className='underline font-bold text-gray-100'>blog.tangly1024.com</a>. Powered by <a href='https://notion.so' className='underline font-bold text-gray-100'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold text-gray-100'>NotionNext</a>.</span>
<FontAwesomeIcon icon={faCopyright} /> {` ${y}`} <span> <a href='https://blog.tangly1024.com/article/about' className='underline font-bold text-gray-100'>blog.tangly1024.com</a>. Powered by <a href='https://notion.so' className='underline font-bold text-gray-100'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold text-gray-100'>NotionNext</a>.</span>
<br />
<FontAwesomeIcon size='sm' className='text-sm w-5' icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='ml-1 font-bold'>闽ICP备20010331号</a>
<FontAwesomeIcon icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='ml-1 font-bold'>闽ICP备20010331号</a>
<span > <Link href='/article/privacy-policy' ><a className='ml-1 font-bold underline'>隐私政策</a></Link></span>
<span id='busuanzi_container_site_pv' className='hidden'>
<FontAwesomeIcon size='sm' className='text-sm w-5' icon={faEye}/><span id='busuanzi_value_site_pv' className='px-1'> </span>pv
<FontAwesomeIcon icon={faEye}/><span id='busuanzi_value_site_pv' className='px-1'> </span>pv
</span>
<span id='busuanzi_container_site_uv' className='pl-2 hidden'>
<FontAwesomeIcon size='sm' className='text-sm w-5' icon={faUser}/> <span id='busuanzi_value_site_uv' className='px-1'> </span>uv </span>
<FontAwesomeIcon icon={faUser}/> <span id='busuanzi_value_site_uv' className='px-1'> </span>uv </span>
</footer>
)
}

View File

@@ -4,7 +4,7 @@ import { faSpinner } from '@fortawesome/free-solid-svg-icons'
export default function LoadingCover () {
return (<div id="loading-cover" className={'bg-white dark:bg-gray-800 dark:text-white text-black animate__animated animate__fadeIn flex-grow flex flex-col justify-center z-10 w-full h-screen container mx-auto'}>
<div className="mx-auto">
<FontAwesomeIcon icon={faSpinner} spin={true} className="text-2xl" />
<FontAwesomeIcon icon={faSpinner} spin size='2x'/>
</div>
</div>
)

View File

@@ -28,12 +28,12 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <Link key={link.id + link.icon} title={link.to} href={link.to} >
<a className={'py-2 px-5 text-lg hover:bg-blue-400 hover:text-white cursor-pointer duration-100 font-light flex flex-nowrap align-middle ' +
<a className={'py-2 px-5 text-lg hover:bg-blue-400 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap align-middle ' +
(selected ? 'bg-blue-500 text-white ' : ' ')} >
<div className='my-auto w-5 justify-center flex'>
<div className='my-auto justify-center flex'>
<FontAwesomeIcon icon={link.icon} />
</div>
<div className={'ml-4 w-32'}>{link.name}</div>
<div className={'ml-4'}>{link.name}</div>
</a>
</Link>
} else {

View File

@@ -42,14 +42,14 @@ const SearchInput = ({ currentTag, currentSearch }) => {
ref={searchInputRef}
type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'w-full pl-2 transition font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
className={'w-full pl-2 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch}
/>
{(searchKey && searchKey.length && <FontAwesomeIcon icon={faTimes} className='text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
<div className='p-3 text-xl bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center align-middle cursor-pointer'
<div className='p-3 bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center align-middle cursor-pointer'
onClick={() => { handleSearch(searchKey) }}>
<FontAwesomeIcon spin={onLoading} icon={onLoading ? faSpinner : faSearch} className='hover:scale-125 hover:text-black transform duration-200 dark:text-gray-300 dark:hover:text-white text-gray-600 cursor-pointer ' />
</div>

View File

@@ -42,7 +42,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{posts && (
<section className='mt-4'>
<div className='text-sm pb-4 px-5 flex flex-nowrap justify-between'>
<div className='font-light text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2 w-5' />{locale.COMMON.LATEST_POSTS}</div>
<div className='font-light text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
</div>
<LatestPostsGroup posts={posts} />
</section>
@@ -52,7 +52,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{categories && (
<section className='mt-8'>
<div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
<div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2 w-5' />{locale.COMMON.CATEGORY}</div>
<div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
<Link href='/category' passHref>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -67,7 +67,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{tags && (
<section className='mt-8'>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200'>
<div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-2 w-5'/>{locale.COMMON.TAGS}</div>
<div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-2'/>{locale.COMMON.TAGS}</div>
<Link href='/tag' passHref>
<div className='text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />

View File

@@ -6,6 +6,10 @@ import 'animate.css'
import BLOG from 'blog.config'
import dynamic from 'next/dynamic'
import { GlobalContextProvider } from '@/lib/global'
// 解决React-FontAwesome图标问题
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false
const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })