首页文章卡片左上角添加标签

文章详情

互动

最近评论

暂无评论

标签

寻找感兴趣的领域

暂无标签

功能

深色模式

标签

JavaScript¹² TypeScript⁸ React¹⁵ Next.js⁶ Vue¹⁰ Node.js⁷ CSS⁵ 前端²⁰

文章摘要

本文提供了一篇关于如何为网站首页文章卡片添加标签的教程。教程中详细介绍了在post-ui.pug文件中添加标签代码的方法，并给出了具体的代码示例。首先，在layout/includes/mixins目录下的post-ui.pug文件中约21行位置添加特定代码以实现标签功能。接着，在文章中添加cardtag属性，并创建custom.css文件来定义标签样式，包括位置、边框、背景颜色、字体大小等。最后，确保将custom.css文件引入到站点中，以便正确显示标签。文章还提醒用户根据实际情况修改标签名，并注意引入样式文件。

仿照着空梦的首页，写出了这个首页文章卡片左上角添加标签的教程。

效果示例

我们先找到post-ui.pug文件，位置为layout/includes/mixins，在文件的约21行的位置添加如下内容

pug

      ···
      if article.cardtag
        .card-tag= article.cardtag

      if post_cover && theme.cover.index_enable
      ···

打开你的文章，添加cardtag: 魔改

创建custom.css位置如下source/css/custom/custom.css

css

/* 文章标签*/
#recent-posts .recent-post-item .card-tag {
  left: 0;
  border-bottom-right-radius: 12px;
  position: absolute;
  top: 0;
  padding: 3px 8px;
  background: linear-gradient(90deg,#e5b085,#d48f16);
  color: #fff;
  font-size: .85em;
  z-index: 1;
}

可能标签名和你的不一样，记得自己修改，不要忘记把custom.css引入到你的站点。

白夜

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自白夜

Butterfly8 魔改12 Hexo15

喜欢这篇文章的人也看了

随便逛逛

评论个人信息表单自动化填充与匿名评论功能实现

Anheyu-app 新建邮箱模板分享

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...