用React和N必威滚ext.js创建一个博客
添加静态资产
一个公共
目录用于静态资产,如图标,robots . txt
或任何其他不变的文件。您可以添加自己的文件或复制favicon.ico
和图片
子目录。<一个href="https://github.com/sitepoint-editors/nextjs-starter/tree/main/public" class="" target="_blank">启动项目存储库一个>.
创建模板
js使用React组件来实现模板。您将添加几个文件,所以最好停止使用Next.js服务器Ctrl
|Cmd
+C
.
创建一个新的组件
文件夹,然后添加layouts.js
定义一个新的<设计>
组件:
进口头从“/头。”;进口页脚从“/页脚。”;出口默认的函数布局({孩子们,英雄}){返回(<><头英雄={英雄}/><主要>{孩子们}</主要><页脚/></>);}
使用此组件的任何页面都将传递道具
对象,该对象将内容包含为孩子们
价值。<设计>
引用另外两个组件。
首先,它引用了<标题>
在组件/ header.js
,该方法呈现<标题>
包含主页链接、内联SVG标志和一个英雄
默认为/图片/ orb.jpg
如果没有定义:
进口链接从“下一个/链接”;出口默认的函数头({英雄}){英雄=“/图片/”+(英雄||“orb.jpg”);返回(<头><p类名=“标志”><链接href=“/”><一个><svg xmlns=“http://www.w3.org/2000/svg”viewBox="0 0 20 20"宽度=“50”高度=“50”><路维="M10.394 2.08a1 1 000 -。788 0l-7 3a1 10 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 10 11.788 1.838L7.667 9.088l1.94.831a1 10 00.787 0l7- 3zm3.31 9.397L5 10.12v4.102a8.969 8.969 00-1.05-。174 1 1 0 01-.89-。89 11.115 11.115 0 01.25-3.762 zm9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 11 001 01-.89.89 8.968 8.968 0 00-5.35 2.524 11 001- 1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-。712V17a1 1 0 001 1z"></路径></svg>下一个.js起动器</一个></链接></p><数字><img src={英雄}宽度=“400”高度=“300”alt=“装饰”/></数字></头>);}