Skip to content

Commit

Permalink
优化网站的link
Browse files Browse the repository at this point in the history
  • Loading branch information
@white0dew
white0dew committed Jun 15, 2024
1 parent 7a5c58f commit 7f2eb9f
Show file tree
Hide file tree
Showing 4 changed files with 301 additions and 123 deletions.
128 changes: 70 additions & 58 deletions components/SideChapterList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,88 @@
"use client";

import { ElogChapter } from '@/types/elog';
import React, { useState } from 'react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
import { Icons } from './Icons';
import { usePathname, useRouter } from 'next/navigation';
import { cn } from '@/lib/utils';

import { ElogChapter } from "@/types/elog";
import React, { useState } from "react";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "./ui/collapsible";
import { Icons } from "./Icons";
import { usePathname, useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
import Link from "next/link";

interface SidebarProps {
chapters: ElogChapter[];
chapters: ElogChapter[];
}

function SidebarItem({ chapter }: { chapter: ElogChapter }) {
const router = useRouter()
const path = usePathname()
const [isOpen, setIsOpen] = useState(path.includes(chapter.nav_path));
return (
<Collapsible
open={isOpen} onOpenChange={setIsOpen} className="w-full space-y-2"
>
<CollapsibleTrigger
className={cn(`relative flex items-center
const router = useRouter();
const path = usePathname();
const [isOpen, setIsOpen] = useState(path.includes(chapter.nav_path));
// 判断是否为可导航项目
const isNavigable =
!chapter.is_nav && (!chapter.children || chapter.children.length === 0);

return (
<Collapsible
open={isOpen}
onOpenChange={setIsOpen}
className="w-full space-y-2"
>
<CollapsibleTrigger
className={cn(
`relative flex items-center
justify-between
py-1
px-3 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-600 w-full text-start
shadow-sm
rounded-sm
break-all
truncate
`, `${path == chapter.url ? "bg-blue-200 dark:bg-blue-700" : ""}`,
`${chapter.level === 4 ? "text-base" : ""}`,
`${chapter.level === 3 ? "text-sm" : ""}`,
`${chapter.level === 1 ? "text-lg font-semibold" : ""},`,
`${chapter.level === 2 ? "text-md font-semibold" : ""},`)}

onClick={(event: any) => {
// nav或者有子菜单不跳转
if (chapter.is_nav || (chapter.children && chapter.children.length > 0)) {
return;
}

// 其他跳转
router.push(chapter.url);
event.preventDefault();
}}
>
`,
`${path == chapter.url ? "bg-blue-200 dark:bg-blue-700" : ""}`,
`${chapter.level === 4 ? "text-base" : ""}`,
`${chapter.level === 3 ? "text-sm" : ""}`,
`${chapter.level === 1 ? "text-lg font-semibold" : ""},`,
`${chapter.level === 2 ? "text-md font-semibold" : ""},`
)}
>
{isNavigable ? (
<Link href={chapter.url} passHref>
<text>{chapter.title}</text>
</Link>
) : (
<div onClick={() => setIsOpen(!isOpen)} className="flex-grow">
<text>{chapter.title}</text>
</div>
)}
{chapter.children && chapter.children.length > 0 && (
<Icons.cheverDown
className={`h-4 w-4 ${!isOpen ? "rotate-180" : ""}`}
/>
)}
</CollapsibleTrigger>

<text className={'text-nowrap'}> {chapter.title}</text>
{chapter.children && chapter.children.length > 0 &&
(!isOpen ? <Icons.cheverUp className="h-4 w-4" /> : <Icons.cheverDown className="h-4 w-4" />)}
</CollapsibleTrigger>

{chapter.children && (
<CollapsibleContent className="ml-2 space-y-1">
{chapter.children.map((child) => (
<SidebarItem key={child.urlname} chapter={child} />
))}
</CollapsibleContent>
)}
</Collapsible>
);
};
{chapter.children && (
<CollapsibleContent className="ml-2 space-y-1">
{chapter.children.map((child) => (
<SidebarItem key={child.urlname} chapter={child} />
))}
</CollapsibleContent>
)}
</Collapsible>
);
}

function SidebarChapter({ chapters }: { chapters: ElogChapter[] }) {
return (
<div className='space-y-2 overflow-x-hidden'>
{chapters.map((chapter) => (
<SidebarItem key={chapter.urlname} chapter={chapter} />
))}
</div>
);
};
return (
<div className="space-y-2 overflow-x-hidden">
{chapters.map((chapter) => (
<SidebarItem key={chapter.urlname} chapter={chapter} />
))}
</div>
);
}

export default SidebarChapter;
export default SidebarChapter;
95 changes: 64 additions & 31 deletions components/home/ProductShow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,74 @@

"use client"
"use client";

import { useRouter } from "next/navigation";

import Link from "next/link";

// 示例产品数据
// 产品数据
// TODO 改成语雀可配置
const products = [
{ name: '程序员自我修养', description: '软技能同样重要。提升沟通、团队协作能力，培养解决问题的思维，助你成为更全面的开发者。', path: '/s/self_improve/screct_qas' },
// ...更多产品
{ name: '编程语言', description: '掌握流行的编程语言是开发者的基础。详解Java、Golang、Python、JavaScript等语言特性，助你深入理解语法和应用场景。', path: '/s/language' },
{ name: '计算机基础', description: '精炼的计算机基础讲解，包括数据结构、算法、计算机网络等计算机基础知识，帮助你通过技术面试的第一关。', path: '/s/cs_base' },
{ name: '实践项目', description: '实战项目经验分享，包括项目规划、开发到部署的全过程，提升你的项目构建与管理能力。', path: '/s/project' },
{ name: '大厂面经', description: '来自一线大厂的真实面试经验总结，涵盖前端、后端到AI等多个领域，为你的求职之路增添砝码。', path: '/s/interview/chat_view' },
{ name: '区区算法', description: '汲取大厂资深面试官的智慧精华，提供全面的前端、后端及人工智能面试策略，助你在职场竞争中脱颖而出。', path: '/s/algorithm/hogrunp9g0bggri2' },
{
name: "程序员自我修养",
description:
"软技能同样重要。提升沟通、团队协作能力，培养解决问题的思维，助你成为更全面的开发者。",
path: "/s/self_improve/screct_qas",
},
// ...更多产品
{
name: "编程语言",
description:
"掌握流行的编程语言是开发者的基础。详解Java、Golang、Python、JavaScript等语言特性，助你深入理解语法和应用场景。",
path: "/s/language",
},
{
name: "计算机基础",
description:
"精炼的计算机基础讲解，包括数据结构、算法、计算机网络等计算机基础知识，帮助你通过技术面试的第一关。",
path: "/s/cs_base",
},
{
name: "实践项目",
description:
"实战项目经验分享，包括项目规划、开发到部署的全过程，提升你的项目构建与管理能力。",
path: "/s/project",
},
{
name: "大厂面经",
description:
"来自一线大厂的真实面试经验总结，涵盖前端、后端到AI等多个领域，为你的求职之路增添砝码。",
path: "/s/interview/chat_view",
},
{
name: "区区算法",
description:
"汲取大厂资深面试官的智慧精华，提供全面的前端、后端及人工智能面试策略，助你在职场竞争中脱颖而出。",
path: "/s/algorithm/hogrunp9g0bggri2",
},
];


export default function ProductList() {
const router = useRouter()
return (
<section className="container mx-auto mt-10 " >
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-6">
{products.map((product, index) => (
<div key={index} className=" rounded shadow-lg overflow-hidden transform
transition duration-500 hover:scale-105 hover:bg-teal-200 dark:bg-slate-800">
{/* Icon */}
<div className="p-6 cursor-pointer" onClick={() => {
router.push(product.path)
}} >
<h3 className="text-2xl font-semibold mb-2 dark:text-yellow-200">{product.name}</h3>
<p className="text-gray-700 dark:text-yellow-100 ">{product.description}</p>
</div>
</div>
))}
</div>
</section >
);
};
const router = useRouter();
return (
<section className="container mx-auto mt-10 ">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-6">
{products.map((product, index) => (
<div
key={index}
className=" rounded shadow-lg overflow-hidden transform
transition duration-500 hover:scale-105 hover:bg-teal-200 dark:bg-slate-800"
>
{/* Icon */}
<Link className="p-6 cursor-pointer" href={product.path}>
<h3 className="pl-3 text-2xl font-semibold mb-2 dark:text-yellow-200">
{product.name}
</h3>
<p className="p-3 text-gray-700 dark:text-yellow-100 ">
{product.description}
</p>
</Link>
</div>
))}
</div>
</section>
);
}
3 changes: 2 additions & 1 deletion public/robots.txt
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
User-agent: *
Allow: *
Allow: *
Sitemap: https://offernow.cn/sitemap.xml
Loading

0 comments on commit 7f2eb9f

Please sign in to comment.