HEO主题

主题说明

使用主题

1. 顶部横幅

// 首页顶部通知条滚动内容，如不需要可以留空 []
  NOTICE_BAR: [
    { title: '欢迎来到我的博客', url: 'https://blog.tangly1024.com' },
    { title: '访问文档中心获取更多帮助', url: 'https://docs.tangly1024.com' }
  ],

2. 英雄区

英雄区左侧

1. 左上角的卡牌点击是随机跳转到一篇文章，此功能无法修改配置，但是可以在源代码themes/heo/components/Hero.js中看到。

// 跳转到任意文章
  function handleClickBanner() {
    const randomIndex = Math.floor(Math.random() * latestPosts.length)
    const randomPost = latestPosts[randomIndex]
    router.push(randomPost.slug) // 跳转到此链接
  }

2. 左上卡牌大标题 themes/heo/config.js



// 英雄区(首页顶部大卡)
HERO_TITLE_1: '分享编程',
HERO_TITLE_2: '与思维认知',
HERO_TITLE_3: 'TANGLY1024.COM',

3. 左上角卡牌背景滚动图，会循环展示一些技能的图标，可以在 themes/heo/config.js中配置
展开相关代码

// 用户技能图标 ; 两两一组
  GROUP_ICONS: [
    {
      title_1: 'AfterEffect',
      img_1: '/images/heo/20239df3f66615b532ce571eac6d14ff21cf072602.webp',
      color_1: '#989bf8',
      title_2: 'Sketch',
      img_2: '/images/heo/2023e0ded7b724a39f12d59c3dc8fbdc7cbe074202.webp',
      color_2: '#ffffff'
    },
    {
      title_1: 'Docker',
      img_1: '/images/heo/20231108a540b2862d26f8850172e4ea58ed075102.webp',
      color_1: '#57b6e6',
      title_2: 'Photoshop',
      img_2: '/images/heo/2023e4058a91608ea41751c4f102b131f267075902.webp',
      color_2: '#4082c3'
    },
    {
      title_1: 'FinalCutPro',
      img_1: '/images/heo/20233e777652412247dd57fd9b48cf997c01070702.webp',
      color_1: '#ffffff',
      title_2: 'Python',
      img_2: '/images/heo/20235c0731cd4c0c95fc136a8db961fdf963071502.webp',
      color_2: '#ffffff'
    },
    {
      title_1: 'Swift',
      img_1: '/images/heo/202328bbee0b314297917b327df4a704db5c072402.webp',
      color_1: '#eb6840',
      title_2: 'Principle',
      img_2: '/images/heo/2023f76570d2770c8e84801f7e107cd911b5073202.webp',
      color_2: '#8f55ba'
    },
    {
      title_1: 'illustrator',
      img_1: '/images/heo/20237359d71b45ab77829cee5972e36f8c30073902.webp',
      color_1: '#f29e39',
      title_2: 'CSS3',
      img_2: '/images/heo/20237c548846044a20dad68a13c0f0e1502f074602.webp',
      color_2: '#2c51db'
    },
    {
      title_1: 'JS',
      img_1: '/images/heo/2023786e7fc488f453d5fb2be760c96185c0075502.webp',
      color_1: '#f7cb4f',
      title_2: 'HTML',
      img_2: '/images/heo/202372b4d760fd8a497d442140c295655426070302.webp',
      color_2: '#e9572b'
    },
    {
      title_1: 'Git',
      img_1: '/images/heo/2023ffa5707c4e25b6beb3e6a3d286ede4c6071102.webp',
      color_1: '#df5b40',
      title_2: 'Rhino',
      img_2: '/images/heo/20231ca53fa0b09a3ff1df89acd7515e9516173302.webp',
      color_2: '#1f1f1f'
    }
  ],

4. 左下角三个导航标签，点击跳到特定页面，可以在 themes/heo/configs.js 中配置



// 英雄区显示三个置顶分类
HERO_CATEGORY_1: { title: '必看精选', url: '/tag/必看精选' },
HERO_CATEGORY_2: { title: '热门文章', url: '/tag/热门文章' },
HERO_CATEGORY_3: { title: '实用教程', url: '/tag/实用教程' },

目前这个三个卡牌，默认跳到的是三个标签归档页。
什么是标签归档？例如 /tag/必看精选 这个链接，展示的是所有标签中包含必看精选的文章：



一篇文章可以打多个标签，然后通过访问 /tag/[标签] 的方式，快速浏览一组包含了同一标签的文章，例如您希望某片文章出现在 /tag/必看精选 这个链接 这个链接下，只要给这篇文章打上必看精选的标签(tag)即可。



英雄区右侧

显示置顶文章的标题文字，以及跳转链接， 配置方式 themes/heo/config.js



HERO_TITLE_4: '新版上线',
HERO_TITLE_5: 'NotionNext4.0 轻松定制主题',
HERO_TITLE_LINK: 'https://tangly1024.com',

推荐置顶文章

点击更多推荐后，可以看到6篇被推荐制定的文章，只有被打了“推荐”标签的文章会在此置顶。
相关配置请查看 themes/heo/config.js

// 英雄区右侧推荐文章标签, 例如 [推荐] , 最多六篇文章; 若留空白''，则直接推荐最近更新文章
HERO_RECOMMEND_POST_TAG: '推荐',



3. 文章列表区



 
1. 文章分类横幅



这里显示您Notion中的所有文章分类，每篇文章可打多个标签，但只能归属于一个分类。 您可以直接在分类栏中输入分类名字，按下回车键即可创建。



2. 个人资料卡牌欢迎语
此处的文字点击会发生变化，在 themes/heo/config.js 中配置



INFOCARD_GREETINGS: [
    '你好！我是',
    '🔍 分享与热心帮助',
    '🤝 专修交互与设计',
    '🏃 脚踏实地行动派',
    '🏠 智能家居小能手',
    '🤖️ 数码科技爱好者',
    '🧱 团队小组发动机'
  ],

下方的 Tangly是显示作者名字，在blog.config.js中配置
3. 公告栏， 卡牌中间的文字是公告内容



公告内容是您Notion模板中类型为Notice的文章内容。



 

移动端-英雄区

在移动端英雄区被精减，默认显示如下：
左侧是两个标签，默认是必看精选和热门文章，第三个标签被隐藏。
右侧默认显示打了《推荐》标签的六篇文章