当前位置: 首页> 汽车> 车展 > 设计公司加盟_迅雷黄冈网站推广软件_seo广告平台_市场调研流程

设计公司加盟_迅雷黄冈网站推广软件_seo广告平台_市场调研流程

时间:2025/7/12 2:02:12来源:https://blog.csdn.net/qq_54869075/article/details/142918287 浏览次数: 0次
设计公司加盟_迅雷黄冈网站推广软件_seo广告平台_市场调研流程

原文链接

CSDN 的排版/样式可能有问题,去我的博客查看原文系列吧,觉得有用的话,给我的库点个star,关注一下吧 

创建项目

创建项目​

在创建项目中可以找到相关内容,这里不再赘述

First commit​

创建好项目之后,在 global.css 中删除 liner-gradient 相关内容

# /appglobal.cssbody {color: rgb(var(--foreground-rgb));
-   background: linear-gradient(
-       to bottom,
-       transparent,
-       rgb(var(--background-end-rgb))
-     ) rgb(var(--background-start-rgb));}

在 /app/page.tsx 中删除 Next.js 相关内容,仅返回一个 <>Hello World!<> 即可

# /app/page.tsxexport default function Home() {return (<><h1>Hello World!</h1></>);
}

完成以上步骤,即可进行第一次 commit

创建 NavBar​

本节代码链接

最简单的 NavBar 应该包含如下内容,包括一个 Logo 和几个 Link 用于导航。给他们都添加 flex 属性,即可横向布局,并添加一些边框,gap,垂直居中等样式

# NavBar.tsximport Link from "next/link";const NavBar = () => {return (<nav className="flex border-b mb-5 px-5 h-14"><Link href=""/>Logo</Link><ul className="flex"><li><Link href="/">Dashboard</li><li><Link href="/issues">Issues</li></ul></nav>);
};export default NavBar;

react-icon​

然后我们使用 react-icon 来添加图标

npm i react-icon

在 react-icon 官网中找到想要的图标之后,可以直接 copy 代码使用

# NavBar.tsximport Link from "next/link";// import进来
+ import { AiFillBug } from "react-icons/ai";const NavBar = () => {return (<nav className="flex border-b mb-5 px-5 h-14">{/*直接像这样使用即可*/}
+       <Link href=""/><AiFillBug /></Link><ul className="flex"><li><Link href="/">Dashboard</Link></li><li><Link href="/issues">Issues</Link></li></ul></nav>);};export default NavBar;

为链接添加样式​

# NavBar.tsx...<li className="text-zinc-500 hover:text-zinc-800 transaition-colors" ><Link href="/">Dashboard</Link></li>
...

如果链接多起来,我们需要一个个去添加样式。我们可以将所有的链接提取出来,放到一个 array 里面,再 map 为一个个的 <Link > 标签,以减少冗余代码

# NavBar.tsximport Link from "next/link";
import { AiFillBug } from "react-icons/ai";const NavBar = () => {const links = [{ label: "DashBoard", href: "/dashboard" },{ label: "Issues", href: "/issues" },];return (<nav className="flex border-b mb-5 px-5 h-14"><Link href=""/><AiFillBug /></Link><ul>{links.map((link) => (<LinkclassName="text-zinc-500 hover:text-zinc-800 transaition-colors"key={link.href}href={link.href}>{link.label}</Link>));}</ul></nav>);
};export default NavBar;

为当前页面 Link 添加样式​

比如我们目前在 /Issue 页面下,我们希望把这个链接凸显一下。首先我们需要使用 usePathname() 获取当前路径,然后我们在 links.map 中判断当前路径与 link.href 是否相等,若相等则应用另一个样式

# NavBar.tsx// 由于要获取用户端数据,使用 use client
+ "use client";import Link from "next/link";import { AiFillBug } from "react-icons/ai";// 导入 usePathname
+ import { usePathname } from "next/navigation";const NavBar = () => {// 获取当前路径
+   const currentPath = usePathname();const links = [{ label: "DashBoard", href: "/dashboard" },{ label: "Issues", href: "/issues" },];return (<nav className="flex border-b mb-5 px-5 h-14"><Link href=""/><AiFillBug /></Link><ul>{links.map((link) => (<LinkclassName={`${link.href === currentPath ? "text-zinc-900" : "text-zinc-500"}hover:text-zinc-800 transaition-colors`}key={link.href}href={link.href}>{link.label}</Link>));}</ul></nav>);};export default NavBar;

但是随着判断条件越来越复杂,单行内代码越来越多,导致代码不宜于维护。这里使用 classnames 包来解决此问题,使用下面命令安装后,在代码内调用 classNames 函数,其参数为一个键值对,键为样式,值为一个 boolen 表达式,若值为 true 则代表应用该条样式,若为 false 则代表不应用该条样式

npm install classnames
# NavBar.tsximport classNames from "classnames";...
<LinkclassName={classNames({"text-zinc-900": link.href === currentPath,"text-zinc-500": link.href !== currentPath,"hover:text-zinc-800 transaition-colors": true,})}key={link.href}href={link.href}
>
...

其他优化点​

最后,我们的代码应该尽量应用 oop 的原则,将部分内容抽象出来封装为函数,以提高代码可读性,可维护性

最终代码如下:

# NavBar.tsx"use client";
import classNames from "classnames";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { AiFillBug } from "react-icons/ai";const NavBar = () => {return (<nav className="flex border-b mb-5 px-5 h-14"><NavLinks /></nav>);
};export default NavBar;const links = [{ label: <AiFillBug />, href: "/" },{ label: "DashBoard", href: "/dashboard" },{ label: "Issues", href: "/issues" },
];const NavLinks = () => {const currentPath = usePathname();return (<ul className="flex gap-6 items-center">{links.map((link) => (<LinkclassName={classNames({"text-zinc-900": link.href === currentPath,"text-zinc-500": link.href !== currentPath,"hover:text-zinc-800 transaition-colors": true,})}key={link.href}href={link.href}>{link.label}</Link>))}{" "}</ul>);
};

CSDN 的排版/样式可能有问题,去我的博客查看原文系列吧,觉得有用的话,给我的库点个star,关注一下吧 

下一篇讲创建 Issue

下一篇【Next.js 项目实战系列】02-创建 Issue

关键字:设计公司加盟_迅雷黄冈网站推广软件_seo广告平台_市场调研流程

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: