ReactPress最佳实践—搭建导航网站实战

Github项目地址:https://github.com/fecommunity/easy-blog 欢迎Star。

近期,阮一峰在科技爱好者周刊第 325 期中推荐了一款开源工具------ReactPress,ReactPress一个基于 Next.js 的博客和 CMS 系统,可查看 demo站点。(@fecommunity 投稿)

导航站

可以通过后台配置分类网站,展示效果如下。

关键词搜索

可以根据关键词指定站内或者其他搜索引擎的方式搜索。

导航详情

点击导航地址后,会进入详情页,然后可以使用按钮跳转。

如何配置?

方式一:在config路径下的settings配置:

复制代码
interface IGlobalConfig {
  navConfig: NavSetting; // 导航配置
  urlConfig: any[]; // 地址配置
}

interface CategoryItem {
  label: string; // 展示的名称
  key: string; // 唯一标识
  url?: string; //地址
}

interface NavSetting {
  categories: CategoryItem[]; // 分类信息
  subCategories: {
    [k: string]: CategoryItem[]
  }
}

方式二:后台管理系统中配置

也是支持全局配置的。

体验地址:https://blog.gaoredu.com/nav

Github项目地址:https://github.com/fecommunity/easy-blog 欢迎Star。

相关推荐
How_doyou_do1 小时前
样式冲突修复组件
前端·javascript·html
**之火1 小时前
中止 Web 请求新方式 - AbortController API
开发语言·前端·javascript
说私域1 小时前
基于开源AI智能名片与链动2+1模式的S2B2C商城小程序研究:构建“信息找人”式精准零售新范式
人工智能·小程序·开源
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互
m0_616188492 小时前
CSS中的伪类和伪元素
前端·javascript·css
快乐就好ya2 小时前
React基础到进阶
前端·javascript·react.js
悠哉摸鱼大王2 小时前
多模态场景下tts功能实现
前端·javascript
初出茅庐的2 小时前
hooks&&状态管理&&业务管理
前端·javascript·vue.js
aricvvang2 小时前
一行 Promise.all 争议:数据库查询并行真的没用?我和同事吵赢了!!!
javascript·后端·node.js
YH丶浩2 小时前
vue自定义数字滚动插件
开发语言·前端·javascript·vue