首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Gatsby URL中添加发布日期?

在Gatsby中,可以通过在URL中添加发布日期来实现对博客文章或其他内容的时间戳标记。这可以通过在Gatsby的配置文件中进行设置来实现。

首先,在Gatsby的配置文件(gatsby-config.js)中,你需要添加一个slug字段来表示URL的一部分,该字段将包含发布日期。你可以使用Gatsby的节点API来修改节点并添加slug字段。以下是一个示例配置文件:

代码语言:javascript
复制
// gatsby-config.js

module.exports = {
  // 其他配置项...
  plugins: [
    // 其他插件...
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts`,
      },
    },
    // 其他插件...
  ],
}

接下来,在你的项目中的src/posts目录下,你可以创建一个Markdown文件(或其他格式的文件),并在文件的开头添加一个frontmatter字段,用于存储文章的元数据,包括发布日期。以下是一个示例Markdown文件:

代码语言:markdown
复制
---
title: "我的博客文章"
date: "2022-01-01"
---

这是我的博客文章的内容。

然后,你可以使用Gatsby的节点API来修改节点并添加slug字段。在gatsby-node.js文件中,你可以使用createNodeField方法来添加slug字段。以下是一个示例gatsby-node.js文件:

代码语言:javascript
复制
// gatsby-node.js

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

现在,你可以在你的页面组件中使用slug字段来构建URL。以下是一个示例页面组件:

代码语言:jsx
复制
// src/templates/blog-post.js

import React from "react"
import { graphql } from "gatsby"

export default function BlogPost({ data }) {
  const post = data.markdownRemark

  return (
    <div>
      <h1>{post.frontmatter.title}</h1>
      <p>{post.frontmatter.date}</p>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </div>
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        date(formatString: "YYYY-MM-DD")
      }
    }
  }
`

在上述示例中,我们使用了GraphQL查询来获取指定slug的文章数据,并在页面中展示标题、发布日期和内容。

通过以上步骤,你就可以在Gatsby的URL中添加发布日期了。这样做的好处是可以使URL更具有可读性和信息性,方便搜索引擎索引和用户阅读。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供弹性计算能力,满足各类业务需求。
  • 腾讯云对象存储(COS):安全可靠的云端存储服务,适用于图片、视频、文档等各类文件的存储和管理。
  • 腾讯云云数据库 MySQL 版:高性能、可扩展的关系型数据库服务,适用于各类应用的数据存储和管理。
  • 腾讯云人工智能:提供丰富的人工智能服务和工具,包括图像识别、语音识别、自然语言处理等,帮助开发者构建智能化应用。
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,包括设备连接、数据采集、远程控制等功能,帮助开发者快速搭建物联网应用。
  • 腾讯云移动开发:提供移动应用开发和运营的一站式解决方案,包括移动后端服务、移动推送、移动分析等。
  • 腾讯云区块链:提供安全可靠的区块链服务,帮助开发者构建区块链应用和解决方案。
  • 腾讯云视频处理:提供视频上传、转码、剪辑、播放等功能,适用于各类视频应用的处理和管理。
  • 腾讯云音视频通信(TRTC):提供实时音视频通信能力,支持多人音视频通话、互动直播等场景。
  • 腾讯云云原生应用引擎(TKE):提供全托管的容器化应用服务,简化应用的构建、部署和管理过程。
  • 腾讯云网络安全:提供全面的网络安全解决方案,包括DDoS防护、Web应用防火墙等,保护应用和数据的安全。
  • 腾讯云存储(COS):安全可靠的云端存储服务,适用于图片、视频、文档等各类文件的存储和管理。
  • 腾讯云元宇宙:提供全面的元宇宙解决方案,包括虚拟现实、增强现实等技术,帮助开发者构建沉浸式体验的应用。

请注意,以上链接仅供参考,具体产品选择应根据实际需求和情况进行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在keras添加自己的优化器(adam等)

Anaconda3\envs\tensorflow-gpu\Lib\site-packages\tensorflow\python\keras 3、找到keras目录下的optimizers.py文件并添加自己的优化器...找到optimizers.py的adam等优化器类并在后面添加自己的优化器类 以本文来说,我在第718行添加如下代码 @tf_export('keras.optimizers.adamsss') class...Adamsss, self).get_config() return dict(list(base_config.items()) + list(config.items())) 然后修改之后的优化器调用类添加我自己的优化器...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras添加自己的优化器...(adam等)就是小编分享给大家的全部内容了,希望能给大家一个参考。

45K30

何在Power Pivot通过添加列计算不连续日期移动平均?

(二) 通过添加列计算不连续日期移动平均 之前我们讲了连续日期的移动平均的求法,那我们这次来看下如果不连续日期如何计算移动平均。 数据表——表1 ? 效果 ?...因为之前我们的起始值表示的是 '表1'[日期]>=Earlier('表1'[日期])-5),但是在不连续日期时,这个计算表达式就不能准确的表示。所以我们需要另外换一种方式来表达往前推5日。 1....计算均值的起始日期 因为日期是不连续的,所以起始日应该是当天往前推第5天,而要表达不连续往前推5天就不能直接用日期-5的表示方式,所以我们需要计算当前日期的排序,这里可以使用2种表达方式,一种是CountRows...计算均值的结束日期 结束日期应该就是当前日期,这里会涉及到Earlier函数 '表1'[日期]<Earlier('表1'[日期]) C....然后取最后一天的日期

2.1K20
  • 一文详解动态 Schema

    为了更好地满足用户需求,Milvus 在 2.2.9 中发布了这一功能,数据库 Schema 便可以根据用户添加数据而“动态变化”。...我们举例来看: Schema 定义了如何在数据库插入和存储数据,上图展示了如何为关系型数据库创建一个标准的 Schema。 在上图的数据库, 一共有 4 张表,每张表都有各自的 Schema。...其中,“id”、“paragraph”、“subtitle”、“publication”、“article_url”和“title” 这 6 列数据类型为VARCHAR;“reading_time”、“...如何使用 Milvus 向量数据库的 Dynamic Schema 功能? 下面的代码片段展示了如何在 Milvus 开启动态 Schema 功能,以及如何将数据插入到动态字段并执行过滤搜索。...简而言之,只需要添加enable_dynamic_field 并将其参数值设置为True 即可。

    35910

    如何利用机器学习和Gatsby.js创建假新闻网站​

    目录 Gatsby.js设置 配置 页面布局 机器学习设置与谷歌Colab 假文章代 Google Drive API 编程式页面生成 部署 改进的领域 如果您想要更深入地了解这个项目,或者想要添加到代码...Gatsby.js是一个web应用程序生成器。该框架使用一些web资源,HTML、CSS和JavaScript,通过各种api加载数据,然后将所有这些资源加载到带有预抓取资源的站点中。...(1)使用gatsby new [yoursite -name]完全从头开始, (2)使用gatsby new [yoursite -name] [starter-git-url]的启动模板, (3)使用我发布在...Gatsby附带了许多插件,您可以通过运行在终端npm install轻松地安装它们。下载插件后,可以将其添加gatsby-config.js。 下面是这个项目的文件。 ?...然后需要将其添加gatsby-config.js,并从谷歌驱动器文件夹获得唯一的ID。

    4.5K60

    Gatsby 创建一个博客

    一旦呈现为静态 HTML,客户端站点的React和JavaScript会接管它并添加动态的内容。 Gatsby 最近发布了v1.0.0,推出了很多新特性。...这个过程现在应该很熟悉了,安装之后再添加到配置。...我们定义的每个键都可以被注入到查询。 现在,我们已经安装了一堆插件来从磁盘加载文件,将 Markdown 转换为HTML。我们有一个单独的 Markdown 文件,它将作为一个博客发布。...添加一个 tag 列表和 tag 查询页 提示: gatsby-node.js 文件的 createPages API 在这里很有用,还有之前的 frontmatter 在特定的博客文章之间添加导航(...CLI,用于在预定义的 Gatsby 结构和 frontmatter、日期、路径等方面搭建一个博客帖子。

    2.5K30

    学习gatsby,从这里开始!

    轻松发布:只需执行 gatsby build 命令,所有网站数据都被打包到 public 文件夹,拷贝此文件夹到 nginx 即可完成网站发布。...使用场景 如果你有一堆用 Markdown 编辑的文章,想要发布到网上,又不想浪费时间在编辑排版上,那么用 Gatsby 生成一个博客网站,是一个非常不错的解决方案。...使用 Gatsby CLI 工具,三句命令就可以新建一个静态网站。详情步骤,看这里! --- 四、怎么新增网站页面? 浏览器打开的URL是怎么跟项目中的代码页面 (js文件) 对应起来的?...这种 URL 与 代码文件 之间的对应关系就称之为页面路由。那么Gatsby 怎么新建代码页面?其页面路由又有哪些规则? 1、新建页面及其路由 详细步骤,看这里!...--- 七、部署 怎么部署发布gatsby项目? 第一步:有一个备案过的域名。可以在阿里云上进行域名注册和备案; 第二步:需要一个服务器。

    2.2K20

    一杯茶的时间,上手 Gatsby 搭建个人博客

    /gatsby-browser.js 可以调用 Gatsby 浏览器 APIs[14],一般插件才会用到,滚动到特定位置。 /gatsby-ssr.js 服务器渲染的配置,一般也是插件才用到。...但这么做还是略嫌不便,通过 CMS 一般可以在一个可视化的在线环境编辑文章,然后一键即可发布Gatsby 主流的两个 CMS 是 Contentful 和 Netlify CMS。...如我的博客[23]每篇文章都有一个 quote 域放些引用文字,那么在配置[24]添加上 fields: - label: "Quote" name: "quote" widget...通过实现自定义路径基本上可以了解 Gatsby 页面生成的方式了。下节我会继续谈谈其它个性化的配置,草稿模式和显示上下篇博文。 草稿模式 草稿模式即可以将文章保存为草稿而不被渲染出来。...上下篇 在文章页面我们通常会加入上下篇来引导继续浏览。这里我们同样在 createPages 钩子处理,但这回我们添加到 context 域中,这个域里的数据会作为 props 传到模板组件

    3.2K20

    Gatsby 博客部署到腾讯云教程

    WordPress 搭建起来,与传统服务端语言 + 数据库的架构相比,近年流行的静态编译博客, Hexo、Jekyll、Hugo 显然更容易部署和维护,这里我选择了 Gatsby,并用 wp-gatsby-markdown-exporter...插件,把原来 WordPress 的文章转成 Markdown 完成数据迁移。...腾讯云上搭建 Nginx; 腾讯云上搭建 Git; 配置 Nginx 站点 这里为了方便,我们直接用 root 账号为博客设置 Web 目录,在服务器创建 /www/blog 目录。...Nginx 服务 systemctl start nginx.service  配置 Git 仓库 接着,我们创建 Git 仓库,本地推送到仓库的文件,同步到前面创建的 Web 站点目录,同样先在服务器创建...本地安装 gh-pages 包 npm install gh-pages --save-dev 配置 package.json,在 scripts 添加 deploy 发布指令,这段指令的意思是运行

    4.3K111

    你的博客用不着什么JavaScript框架

    如果你也有我这样的经历,那么开始添加 JavaScript 的那一刻,你的网页性能就开始急剧下降了。...静态渲染和水化的页面还是比完全客户端渲染的 React 应用( create-react-app 生成的页面)要好得多,后者没有 JavaScript 就没法用。...那么如何在构建 Gatsby 网站时避免那些因为大量使用 JS 而带来的固有问题呢?当然,我们应该尽量删掉那些 JavaScript。...使用并发包,我可以在 Eleventy 的 serve 过程同时运行构建脚本。 像 Gatsby 一样,Eleventy 也有一个插件生态系统(虽然很小,但增长迅速)。...我挑选了一些不需要添加客户端 JavaScript 也能添加功能的插件: 在帖子显示代码段时,通常会包含特定于语言的语法高亮显示。

    4.1K10

    前端之变(三):变革与突破

    Our latest product: ${latestProduct.name}!...,基本的if,else,for等能力支持。...由于浏览器提供的能力有限,这就造成了前端始终难以发展现能与其它现代语言相比的语言设计与框架,比如 面向对象的能力特性,继承,封装,多态在前端技术不知道如何实现 很像将一些设计原则应用到前端,单例,工厂...比如less 其实less总体上与css基本一致,它也并未提供任何新的css样式,它的区别只是在单纯的静态CSS样式基础上,添加了一些动态能力,比如变量,函数等 @width: 10px; @height...那就是依赖--转换技术 由于突破了浏览器的限制,使得一切皆有可能,那当然也可以添加翻译这个能力。

    2K20

    第 24 期 - 子舒周刊 231026

    2.Jamstack Themes (Jamstack 主题) 3.Lorem Picsum 免费的图像 api 4.Clash-for-Windows_Chinese 推荐文章 科技新闻 每周四发布...周刊列表 | rss 订阅 来自一位叫做 @洋洋 的网友拍摄的黄山,如诗如画,彷佛梦中走来的景象。...Jamstack Themes (Jamstack 主题) https://jamstackthemes.dev/ 收录各种博客程序主题,包括不限于 hexo, hugo, jekyll, astro, gatsby...3.Lorem Picsum 免费的图像 api https://picsum.photos/ 可免费调用的图像 api,只需在我们的 URL添加您想要的图像尺寸(宽度和高度),您就会获得随机图像。...要获得正方形图像,只需添加尺寸即可。 通过在 URL 开头添加 /id/{image} 来获取特定图像。 通过将 /seed/{seed} 添加URL 的开头,每次都根据种子获取相同的随机图像。

    13920

    【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比

    非常适合简单的网站,作品集。 ? 虽然您可以手动创建静态站点,但这样做有很多缺点。这可能是一个困难的过程,当您打算进行更改时,许多问题会浮出水面,而扩展不是您所期待的。...Gatsby、Hugo和Jekyll是最受欢迎的静态站点生成器的三种,它们受欢迎的原因有很多。让我们看看他们能提供什么。 盖茨比(Gatsby) 由节点。盖茨比是这三款中最新的静态网站生成器。...Gatsby还支持GraphQL,这意味着数据查询变得更加容易。由于有了GraphQL, Gatsby可以生成能够访问和利用来自不同来源的数据的站点。...变身怪医(Jekyll) Jekyll由Tom Preston-Werner在2009年发布,是这个列表中最老的静态站点生成器。 Jekyll是用Ruby编写的,全世界都在使用。...选择静态站点生成器 尝试从这三种静态站点生成器挑选可能是一项困难的任务。它们本身都是伟大的工具。让我们来看看为什么你可能想要选择一个在其余的原因。 ?

    3K20

    2022 年的 React 生态

    从一个简单的 HTML JavaScript 项目开始,并自己添加 React 及其支持工具(例如 Webpack、Babel)。...如果你已经在使用 Redux,并且想要在 Redux 添加集成状态管理的数据请求功能,建议你看看 RTK Query,它将数据请求的功能更巧妙的集成到 Redux 。...JavaScript 动态添加样式,而外部 CSS 文件可以包含 React 应用的所有剩余样式: import '....以下所有的UI组件库都带有基本组件, Buttons、Dropdowns、Dialogs 和 Lists: Material UI (MUI) (最流行):https://material-ui.com...例如,你可以在 ESLint 要求遵循一个流行的风格指南( Airbnb 风格指南)。之后,将 ESLint 与你的IDE/编辑器集成,它会指出你的每一个错误。

    5.8K20

    2018年1月份最热门的JavaScript开源项目

    它可从本地磁盘、Google 云端硬盘、Dropbox、Instagram、远程 URL、摄像机和其他位置提取文件,然后将其上传到最终目的地。它非常快速并且易于使用。...它会将你在 Webpack 构建开发和生产过程的所有相关信息都放到浏览器。 JARVIS 非常漂亮,可显示导入的 ES Harmony 模块的数量,以及资产在 12 种不同的连接类型的表现。...github.com/Chalarangelo/30-seconds-of-code Star 16705 这个项目里精心收集了大量有用的JavaScript代码片段文章,让你能够在极短的时间内可以理解使用它们,分为日期...在浏览器手动完成的大多数事情都可以通过使用 Puppeteer 完成,生成屏幕截图和 PDF 页面、检索 SPA 并生成预渲染内容(即“SSR”)、从网站上爬取内容等 九、静态网站建站工具 Docusaurus...十五、Gatsby https://github.com/gatsbyjs/gatsby Star 18245 ? Gatsby 可以使用 React.js 把纯文本转换到动态博客或者网站上。

    2.1K80

    从技术博客到个人IP矩阵:全面攻略与实战示例

    摘要本文旨在探讨如何在自媒体时代,通过技术博客打造和维护个人 IP 矩阵。文章将结合实际经验和具体操作方法,帮助技术爱好者更好地树立个人品牌。...设定内容方向确定博客的主要内容方向,编程教程、技术文章、项目分享等。保持内容的专业性和连续性。制定发布计划制定详细的发布计划,确保定期更新内容。可以使用Excel或Trello等工具进行管理。...表格总结:日期 主题 文章标题 状态 2024-07-01编程教程 如何使用Hugo搭建博客 已发布 2024-07-05技术文章...内链和外链在文章添加内部链接,增加站内访问深度。同时,尽量获取高质量的外部链接,提升博客的权重。...明确目标受众,制定详细的内容方向和发布计划,以高质量的原创内容吸引读者。通过关键词研究、内外链建设和元标签优化,提升博客在搜索引擎的可见度。

    20910
    领券