mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 15:09:22 +00:00
heo封面居中
动画调整 单独控制标题处NotionIcon使其居中
This commit is contained in:
@@ -5,16 +5,18 @@ import LazyImage from './LazyImage'
|
||||
* 可能是emoji 可能是 svg 也可能是 图片
|
||||
* @returns
|
||||
*/
|
||||
const NotionIcon = ({ icon }) => {
|
||||
const NotionIcon = ({ icon, className = 'w-8 h-8 my-auto inline mr-1' }) => {
|
||||
if (!icon) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
if (icon.startsWith('http') || icon.startsWith('data:')) {
|
||||
return <LazyImage src={icon} className='w-8 h-8 my-auto inline mr-1'/>
|
||||
// 这里优先使用传入的 className
|
||||
return <LazyImage src={icon} className={className} />
|
||||
}
|
||||
|
||||
return <span className='mr-1'>{icon}</span>
|
||||
// 对于 emoji 或 svg,设置默认 className,也可以传递不同的样式
|
||||
return <span className={`inline-block ${className}`}>{icon}</span>
|
||||
}
|
||||
|
||||
export default NotionIcon
|
||||
export default NotionIcon
|
||||
@@ -29,7 +29,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
|
||||
|
||||
return (
|
||||
<article
|
||||
className={` ${COVER_HOVER_ENLARGE} ? ' hover:scale-110 transition-all duration-150' : ''}`}>
|
||||
className={` ${COVER_HOVER_ENLARGE} ? ' hover:transition-all duration-150' : ''}`}>
|
||||
<div
|
||||
data-wow-delay='.2s'
|
||||
className={
|
||||
@@ -48,7 +48,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
|
||||
priority={index === 0}
|
||||
src={post?.pageCoverThumbnail}
|
||||
alt={post?.title}
|
||||
className='h-60 w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'
|
||||
className='h-full w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-500 ease-in-out' //宽高都调整为自适应,保证封面居中
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
@@ -74,7 +74,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 标题 */}
|
||||
{/* 标题和图标 */}
|
||||
<Link
|
||||
href={post?.href}
|
||||
passHref
|
||||
@@ -82,7 +82,10 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
|
||||
' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100 line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'
|
||||
}>
|
||||
{siteConfig('POST_TITLE_ICON') && (
|
||||
<NotionIcon icon={post.pageIcon} />
|
||||
<NotionIcon
|
||||
icon={post.pageIcon}
|
||||
className="w-6 h-6 mr-1 align-middle transform translate-y-[-8%]" // 这里控制图标的大小和位置
|
||||
/>
|
||||
)}
|
||||
<span className='menu-link '>{post.title}</span>
|
||||
</Link>
|
||||
@@ -109,4 +112,4 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogPostCard
|
||||
export default BlogPostCard
|
||||
@@ -4,12 +4,13 @@ const CONFIG = {
|
||||
|
||||
HEO_HOME_BANNER_ENABLE: true,
|
||||
|
||||
HEO_SITE_CREATE_TIME: '2021-09-21', // 建站日期,用于计算网站运行的第几天
|
||||
HEO_SITE_CREATE_TIME: '2023-02-21', // 建站日期,用于计算网站运行的第几天
|
||||
|
||||
// 首页顶部通知条滚动内容,如不需要可以留空 []
|
||||
HEO_NOTICE_BAR: [
|
||||
{ title: '欢迎来到我的博客', url: 'https://blog.tangly1024.com' },
|
||||
{ title: '访问文档中心获取更多帮助', url: 'https://docs.tangly1024.com' }
|
||||
{ title: '👏欢迎来到我的博客', url: 'https://nav.laogou717.com' },
|
||||
{ title: '🔥访问导航网站,获取更多免费AI工具', url: 'https://nav.laogou717.com' },
|
||||
{ title: ' 🔱 🐹 🫵 我来助你!', url: 'https://nav.laogou717.com' }
|
||||
],
|
||||
|
||||
// 英雄区左右侧组件颠倒位置
|
||||
@@ -18,17 +19,17 @@ const CONFIG = {
|
||||
HEO_HERO_BODY_REVERSE: false,
|
||||
|
||||
// 英雄区(首页顶部大卡)
|
||||
HEO_HERO_TITLE_1: '分享编程',
|
||||
HEO_HERO_TITLE_2: '与思维认知',
|
||||
HEO_HERO_TITLE_3: 'TANGLY1024.COM',
|
||||
HEO_HERO_TITLE_4: '新版上线',
|
||||
HEO_HERO_TITLE_5: 'NotionNext4.0 轻松定制主题',
|
||||
HEO_HERO_TITLE_LINK: 'https://tangly1024.com',
|
||||
HEO_HERO_TITLE_1: '热爱生活',
|
||||
HEO_HERO_TITLE_2: '无限进步',
|
||||
HEO_HERO_TITLE_3: '神烦老狗',
|
||||
HEO_HERO_TITLE_4: '我们的目标是',
|
||||
HEO_HERO_TITLE_5: '星辰大海',
|
||||
HEO_HERO_TITLE_LINK: 'https://www.laogou666.com',
|
||||
|
||||
// 英雄区显示三个置顶分类
|
||||
HEO_HERO_CATEGORY_1: { title: '必看精选', url: '/tag/必看精选' },
|
||||
HEO_HERO_CATEGORY_1: { title: '干货精选', url: '/tag/干货精选' },
|
||||
HEO_HERO_CATEGORY_2: { title: '热门文章', url: '/tag/热门文章' },
|
||||
HEO_HERO_CATEGORY_3: { title: '实用教程', url: '/tag/实用教程' },
|
||||
HEO_HERO_CATEGORY_3: { title: '狂人日记', url: '/tag/狂人日记' },
|
||||
|
||||
// 英雄区右侧推荐文章标签, 例如 [推荐] , 最多六篇文章; 若留空白'',则推荐最近更新文章
|
||||
HEO_HERO_RECOMMEND_POST_TAG: '推荐',
|
||||
@@ -37,22 +38,23 @@ const CONFIG = {
|
||||
|
||||
// 右侧个人资料卡牌欢迎语,点击可自动切换
|
||||
HEO_INFOCARD_GREETINGS: [
|
||||
'你好!我是',
|
||||
'🔍 分享与热心帮助',
|
||||
'🤝 专修交互与设计',
|
||||
'🏃 脚踏实地行动派',
|
||||
'🏠 智能家居小能手',
|
||||
'🤖️ 数码科技爱好者',
|
||||
'🧱 团队小组发动机'
|
||||
'🎨 艺术创作发烧友',
|
||||
'💻 编程技巧分享者',
|
||||
'🏠 捕捉生活的瞬间',
|
||||
'📹 视频创作艺术家',
|
||||
'🔍 挖掘编程的秘密',
|
||||
'🏃 不放弃无限进步',
|
||||
'🧱 现实中唯唯诺诺',
|
||||
'💢 互联网重拳出击'
|
||||
],
|
||||
|
||||
// 个人资料底部按钮
|
||||
HEO_INFO_CARD_URL1: '/about',
|
||||
HEO_INFO_CARD_ICON1: 'fas fa-user',
|
||||
HEO_INFO_CARD_URL2: 'https://github.com/tangly1024',
|
||||
HEO_INFO_CARD_URL1: 'https://space.bilibili.com/46377861',
|
||||
HEO_INFO_CARD_ICON1: 'fa-brands fa-bilibili',
|
||||
HEO_INFO_CARD_URL2: 'https://github.com/laogou717',
|
||||
HEO_INFO_CARD_ICON2: 'fab fa-github',
|
||||
HEO_INFO_CARD_URL3: 'https://www.tangly1024.com',
|
||||
HEO_INFO_CARD_TEXT3: '了解更多',
|
||||
HEO_INFO_CARD_URL3: 'https://nav.laogou717.com',
|
||||
HEO_INFO_CARD_TEXT3: '免费AI工具',
|
||||
|
||||
// 用户技能图标
|
||||
HEO_GROUP_ICONS: [
|
||||
@@ -118,7 +120,7 @@ const CONFIG = {
|
||||
HEO_SOCIAL_CARD_TITLE_1: '交流频道',
|
||||
HEO_SOCIAL_CARD_TITLE_2: '加入我们的社群讨论分享',
|
||||
HEO_SOCIAL_CARD_TITLE_3: '点击加入社群',
|
||||
HEO_SOCIAL_CARD_URL: 'https://docs.tangly1024.com/article/how-to-question',
|
||||
HEO_SOCIAL_CARD_URL: 'https://qm.qq.com/q/MDtzhPE2qs',
|
||||
|
||||
// ***** 以下配置无效,只是预留开发 ****
|
||||
// 菜单配置
|
||||
@@ -129,7 +131,7 @@ const CONFIG = {
|
||||
HEO_MENU_SEARCH: true, // 显示搜索
|
||||
|
||||
HEO_POST_LIST_COVER: true, // 列表显示文章封面
|
||||
HEO_POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
|
||||
HEO_POST_LIST_COVER_HOVER_ENLARGE: true, // 列表鼠标悬停放大
|
||||
|
||||
HEO_POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
|
||||
HEO_POST_LIST_SUMMARY: true, // 文章摘要
|
||||
@@ -141,7 +143,7 @@ const CONFIG = {
|
||||
HEO_ARTICLE_RECOMMEND: true, // 文章关联推荐
|
||||
|
||||
HEO_WIDGET_LATEST_POSTS: true, // 显示最新文章卡
|
||||
HEO_WIDGET_ANALYTICS: false, // 显示统计卡
|
||||
HEO_WIDGET_ANALYTICS: true, // 显示统计卡
|
||||
HEO_WIDGET_TO_TOP: true,
|
||||
HEO_WIDGET_TO_COMMENT: true, // 跳到评论区
|
||||
HEO_WIDGET_DARK_MODE: true, // 夜间模式
|
||||
|
||||
Reference in New Issue
Block a user