SocialAI homepage
This is a Next.js project bootstrapped with create-next-app.
npx create-next-app@latest --use-pnpm .Environment setup:
- nodejs - refer to
.node-version. Use fnm to install the correct version. - pnpm -
pnpm install - Start dev server -
pnpm dev - Pull videos -
git lfs pull
验证可用版本：node v18.17.0
本项目Next.js是基于 [create-next-app]引导建立的。
-
下载nodejs(https://nodejs.org/en)（不推荐安装最新版本，并注意安装的目录，后面环境变量有用到）
-
管理者模式运行终端 ==> 分别输入[
node -v]和[npm-v]检验版本号确认是否安装成功 -
在nodejs文件夹下新建两个文件夹node_glabal和node_cache用来配置环境变量.==>管理者模式运行终端==> 分别输入[
npm config set prefix “node_glabal文件的路径”]和[npm config set cache “node_cache文件的路径”] -
配置环境变量: 我的电脑 ==> 高级系统设置 ==> 环境变量 ==>系统变量 ==>新建，变量名：NODE_PATH，变量值：node_modulesl文件夹的路径 ==>系统变量找到Path并打开 ==> 添加node_global的路径 ==> 保存退出
-
npm install==>npm run dev弹出提示(http://localhost:3000) ==> 本地运行
参考：
- (https://blog.csdn.net/qq_61214252/article/details/129914438)
- (https://www.bilibili.com/video/BV19F411t7zX/)
遇到过的报错：
- 设置页边距（如mt表示margin-top，用于设置元素的上外边距）
<div className="container mx-auto -mt-20 pt-20 md:-mt-16 md:pt-16">
xxxx
</div>- 页面内容分布的设置：
flex: 创建一个灵活的盒子，使用弹性布局。
flex-col: 设置元素的子元素垂直排列。
md:flex-row: 在中等屏幕及以上的宽度上，设置元素的子元素水平排列。
items-start: 设置元素的子元素在主轴上起始位置对齐。
justify-start: 设置元素的子元素在交叉轴上起始位置对齐。
border-t-[1px]: 添加一个顶部边框，边框样式为1像素的宽度。
border-[rgba(255,255,255,.2)]: 设置边框颜色为半透明的白色。
pt-4: 设置顶部内边距为4个间距单位。
order: order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
w-full 表示元素将占据其父容器的整个宽度。
md:w-1/2 md前缀表示在中等屏幕宽度。w-1/2表示将占据其父容器的二分之一宽度。
可以参考这篇文章：(https://zhuanlan.zhihu.com/p/393849980) 有图有代码的理解flex弹性布局
<div className='flex flex-col md:flex-row items-start justify-start border-t-[1px] border-[rgba(255,255,255,.2)] pt-4 pb-0 md:pb-16'>
<div className='w-full md:w-1/4 order-1 md:order-1 mt-10 md:mt-0'>
xxxxxxxxx
</div>
<div className='w-full md:w-1/2 order-2 md:order-2 mt-10 md:mt-0'>
xxxxxxxxx
</div>
</div>- 页面的跳转和路径设置：
className="underline"表示这个引用跳转的字段默认带下划线
aria-label="View careers"表示这个引用跳转的字段是View careers（可自行修改）
<a href="/research/overview" className="underline" aria-label="View careers">a href="/research/overview"是引用的文章路径，表示跳转到同一目录下的/research文件夹下/overview里面的page。
page的内容开头要设置对应的文件名
在这个项目最好用以下通用设置，其中Overview这个是你对应的路径下的文件名
export default function Overview() {
return <div className='bg-black text-white'>
<div className="container mx-auto -mt-20 pt-20 md:-mt-16 md:pt-16">
XXXXXX
</div>
</div>
}- 图片的引用：
本项目的图片都放在public的images下，如果是在子目录中，可以将[${basePath}]替换为[../]
<img alt="" src={`${basePath}/images/stangel-2022-0484.jpg`}
className='w-full h-full object-cover aspect-square'></img>以专栏 Latest updates 为例，我们有四个板块[Introducing ChatGPT team]、 [Introducing the GPT Store]、[SocialAI and journalism]和[Superalignment Fast Grants Dec 14, 2023]，将其中的板块跳转到我们对应的文章中。
1.找到app目录下的page.tsx文件，找到代码的{/* Latest updates */}下的Introducing the GPT Store部分
<li className='w-full md:w-1/4 mt-8 md:mt-0 pr-0 md:pr-4'>
<a href="/blog/introducing-chatgpt-team" className='group'>
<div className='flex flex-col items-start justify-start'>
<div className='relative w-full'>
<img alt='' src={`${basePath}/images/gpt-store-r3.png`}
className='w-full h-full object-cover aspect-square'></img>
</div>
<div>
<h3 className='text-lg mt-2 font-semibold group-hover:underline'>Introducing the GPT Store</h3>
<div className='mt-1'>
<span aria-hidden="true">Jan 10, 2024</span>
</div>
</div>
</div>
</a>
</li>2.该段代码设置文章跳转的路径[a href="/blog/introducing-chatgpt-team"],所以我们需要在目录在app目录下创建/blog/introducing-chatgpt-team文件夹，然后创建page.tsx文件，并用以下代码为模板创建文章：
export default function introducing-chatgpt-team() {
return <div className='bg-black text-white'>
<div className="container mx-auto -mt-20 pt-20 md:-mt-16 md:pt-16">
XXXXX
</div>
</div>
}注意default function XXXXX得对应上，比如这里就是introducing-chatgpt-team，在XXXX中可以加入各种组件和文章内容。