网站建设首页包括什么软件seo提升排名技巧
介绍
 你将为⼀个技术社区设计并实现⼀个官⽹。该社区旨在为软件⼯程师、开发⼈员和技术  
 
 爱好者提供⼀个交流平台,分享最新的技术动态、⽂章、项⽬案例。  
 
 
项目模块
项目分为三个模块 : 主页展示模块,文章详情模块,文章专栏模块。
主页展示模块:
主页展示模块设计:
主要设计分为两个模块:layout模块显示,中间为内容模块
layout模块

顶部导航栏区域:使用antd组件中 Layout ,Menu,Input组件进行开发完成
使用css固定样式将顶部导航栏固定在页面头部
左侧 菜单分别为文章,问答,专栏,文档 链接,点击后可进入专属模块中
右侧为 搜索框,按钮,图标模块。
中间为内容模块

 
中间内容模块:使用antd组件中Carousel, Avatar, List, Tabs, Row, Col等组件开发完成
中间内容模块:分为三部分 :头部图片展示部分,底部左侧:列表部分,底部右侧:列表部分
头部部分:

 
分为轮播图和热⻔⽂章列表组件展示
轮播图模块 使用了Carousel组件来完成,设置 autoplay, autoplaySpeed={5000}属性完成轮播图自动轮播,间隔时间5s。同时点击下标可切换轮播图片
 热⻔⽂章列表 使用了List组件 点击⽂章可进⾏跳转⽂章详情⻚ 
 
 
底部左侧:

 
使用了antd组件中 Input,Tabs ,Flex,List,Tag等组件开发完成
 模糊搜索框中实现了搜索防抖功能点,防止用户频繁搜索 
 
 
 列表展示模块中使用了 Tabs ,List,Tag组件开发完成 
 
 
 点击不同的tab可以切换出tab下对应的内容,同时激活状态的tab高亮展示 
 
 
 ⽂章列表组件 使用List组件开发完成,点击文章可以进行跳转到文章详情页面 
  底部右侧: 

 使用了 Tab ,List 组件开发完成
点击不同的tab可以切换出tab下对应的内容,同时激活状态的tab高亮展示
文章详情模块

 
使用了Card, List, Typography, Avatar, Button组件完成开发 
 
 
文章详情模块页面布局 
   
 
实现了从上之下:文章标题-文章基本信息-文章内容-评论区 
 
 
左侧实现了回复评论,发表评论,点赞评论功能点 
 
 
 
文章专栏模块

 
分类头部图片展示模块,底部卡片展示模块 
 
 
头部图片展示模块:使用了card组件开发完成
底部卡片展示模块:使用了Tab,List组件开发完成
 点击不同 tab 正常切换 tab 下对应内容。  
 
 激活状态的 tab ⾼亮展示 
 
 
项目难点:
对于搜索框,实现防抖功能点:
  
  function debounce<T extends (...args: any[]) => any>(  func: T,  wait: number  ): (this:any,...args: any) => ReturnType<T> {  let timeoutId: any= null;  return function(...args: any): any { const context = this;  if (timeoutId) {clearTimeout(timeoutId);}timeoutId = setTimeout(() => func.apply(context, args), wait);  };  } 
其次在对于页面样式方式:修改组件库样式,使用了穿透
项目总结:
总体完成了网站的开发,学习到了关于react 路由,组件中的知识,对于Antd组件有了一定的了解,对于TypeScript类型有所掌握。
不足之处:对于页面样式方面有所欠缺
