首页 > 其他分享 >ReactPress最佳实践—搭建导航网站实战

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

时间:2024-12-15 14:03:33浏览次数:13  
标签:实战 string ReactPress 配置 blog CategoryItem 地址 导航 搭建

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

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

在这里插入图片描述

导航站

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

关键词搜索

ReactPress 搜索

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

导航详情

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

如何配置?

方式一:在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。

标签:实战,string,ReactPress,配置,blog,CategoryItem,地址,导航,搭建
From: https://blog.csdn.net/m0_37981569/article/details/144485793

相关文章

  • Qt | 安全的udp服务器搭建(代码框架值得学习)
    点击上方"蓝字"关注我们01、项目框架>>>02、QHostAddress>>>QHostAddress 是 Qt 网络模块中的一个类,用于表示IP地址。它支持IPv4和IPv6地址,可以用于网络编程中,如建立TCP或UDP连接。QHostAddress 提供了一些方法来处理和转换IP地址03、m......
  • Go实战全家桶之二十四: 指标系统的一个大坑
    历史代码:大坑指标系统的代码使用的时间标准time,.Local而PC上是Asia/Shanghai,而linux环境为utc而es存贮的是utc时间,不能简单的用+8,-8而是计算查询用北京时间,保存按utc\还有一个问题用的是utc天执行的定时任务解决办法:测试func(self*TestGeneralserviceSuite)Test00......
  • SpringCloud微服务实战系列:01让SpringCloud项目在你机器上运行起来
    目录项目选型项目安装-本地运行起来软件安装:项目启动:总结&答疑项目选型软件开发,基本上都不会从0开始,一般都是在其他项目或者组件的基础上进行整合优化迭代,站在巨人肩膀上才能看得更远,其实这条规则也适用于任何行业。软件项目组件选型最好的地方就是公有git库,最出......
  • Dart Flutter教程_Dart Flutter3.x入门实战视频教程-16讲后是Flutter教程
    DartFlutter教程_DartFlutter3.x入门实战视频教程-16讲后是Flutter教程https://www.bilibili.com/video/BV1S4411E7LY/2P101Dart介绍WinMac上面分别搭建Dart...Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用和物联网等领域的开发。Dart诞生于201......
  • lvs搭建负载均衡
    vip:192.168.56.120#设置VIPipaddradd192.168.56.120/24devenp0s8#添加路由表routeadd-host192.168.56.120devenp0s8ipvsadm-C#擦除之前的设置ipvsadm-Lnipvsadm-A-t192.168.56.120:80-srr#添加一个TCP类型的虚拟服务,IP为192.168.56.120,端口为80,使......
  • mysql-搭建主从复制
    mysql-搭建主从复制Master(主):dockerrun-p3339:3306--namemaster-eMYSQL_ROOT_PASSWORD=123456-dmysql:5.7Slave(从):dockerrun-p3340:3306--nameslave-eMYSQL_ROOT_PASSWORD=123456-dmysql:5.7Master对外映射的端口是3339,Slave对外映射的端口是3340。因为do......
  • AI大模型10月新书!大模型项目实战:多领域智能应用开发(附PDF)
    今天没有多的废话,直接给大家推荐这本书----《大模型项目实战:多领域智能应用开发》!这本书面向大语言模型应用的使用者和开发者,从大语言模型的基础知识开始,逐步深入,详细介绍了常见的操作方法和各类型应用的开发过程。全书共18章,分为三篇。基础篇(第1~3章),讲解大语言模型的基础......
  • docker搭建nginx-php环境
    首先,创建一个Dockerfile文件,内容如下:FROMphp:7.4-fpmRUNsed-i's/deb.debian.org/mirrors.tuna.tsinghua.edu.cn/g'/etc/apt/sources.listRUNsed-i's/security.debian.org/mirrors.tuna.tsinghua.edu.cn/g'/etc/apt/sources.list#安装NginxRUNapt-ge......
  • Laya实战系列《打地鼠》从入门到实战 引擎版本2.x
    Laya实战系列《打地鼠》从入门到实战引擎版本2.xhttps://www.bilibili.com/video/BV1Wf4y1t7KQ 1 2Laya实战系列《打地鼠》01Laya实战系列《打地鼠》02Laya实战系列《打地鼠》03Laya实战系列《打地鼠》04Laya实战系列《打地鼠》05Laya实战系列《打地鼠》06Laya实战系列......
  • Uni-App从入门到实战
    Uni-App从入门到实战-黑马程序员杭州校区出品https://www.bilibili.com/video/BV1BJ411W7pX?from=search&seid=15850546966096735238&spm_id_from=333.337.0.0P101-课程和uni的基本介绍P202-uni-app的环境搭建并创建项目运行HBuilderX2.4.6同样更新3.2.1620211122P303-......