链接

我们为您提供了两种链接跳转语法。

#原生链接

使用 Markdown 链接,请使用 [text](url) 格式。其中 text 用于描述链接标题,url 用于指定链接地址。

[bing搜索](https://www.bing.com/)

效果:

bing搜索

#To 链接

这是 Daymd 为您提供的链接方式。它支持内部跳转和外部跳转。

#外部跳转

<To to="https://www.bing.com/"> bing 搜索 </To>

#内部跳转

内部跳转时只能跳转到已经存在的 Next.js 路由,你可以在浏览器导航栏中得到它。

http://localhost:3001/zh/docs/fastgo/preparation

例如在浏览器导航栏中得到上面的链接,那么 http://localhost:3001/zh 之后的内容 /docs/fastgo/preparation就是内部路由,可以填写在 to 属性中。

<To to="/posts"> 博客首页 </To>

又或者跳转到某篇具体的文章:

<To to="/docs/fastgo/preparation"> 准备工作 </To>
提示
进阶内容

同时,To标签还接受参数 className ,用于指定跳转按钮的样式。建议使用 Tailwind 语法,如:

<To to="/docs/fastgo/preparation" className="bg-opacity-25"> 准备工作 </To>

又或者,你可以为其添加自定义类名,如:

<To to="/docs/fastgo/preparation" className="my-btn-style"> 准备工作 </To>

然后在 styles/global.css 文件中添加如下代码:

.my-btn-style {
  background-color: #dd68edee !important;
  box-shadow: none !important;
  border: 2px soild #d43111 !important;
  transition: all 2s ease-in-out !important;
  height: 100px !important;
  margin-bottom: 10px;
}

就可以自定义按钮样式了。

注意,请记得添加 !important,否则可能会导致样式无法生效。

提示
遇到问题?
如需要帮助,可以选择给电子邮箱发邮件: czhorange@foxmail.com 或者点击进入 issue 提交界面.
Last Updated:2022-08-30
文档地址