如何在 Nuxt.js Nuxt/Content 博客中使用内容文件夹中的图像设置 og:image

关键词：

【中文标题】如何在 Nuxt.js Nuxt/Content 博客中使用内容文件夹中的图像设置 og:image【英文标题】：How to set og:image in Nuxt.js Nuxt/Content blog with images in content folders 【发布时间】：2021-11-16 13:54:36 【问题描述】：

如何获取已部署图像的最终位置的字符串表示形式，我可以将其提供给 og:image 标头代码，并在部署时让 og:header 指向正确的 url？ p>

我有一个基于 Nuxt.js 和 Nuxt Content 的 website。为了使事情井井有条，我修改了通常的 nuxt 设置，以便我可以将发布的 .md 文件和它们引用的图像捆绑到一个文件夹中，而不是将所有图像保存在单独的 /static 或 /assets 文件夹中。该站点以静态/生成模式部署在 netlify 上。

当我分享帖子时，我希望 reddit 等服务选择合适的缩略图，因此我想在每个帖子上配置 og:image 标题。

Github code here。这些帖子位于/content/posts，我使用markdown 文件中的v-img component 来显示该帖子文件夹中的图像。

我已经知道如何在 slug file for posts 中添加 og:image 标题：

  head () 
    return 
      title: this.post.title,
      meta: [
        
          hid: 'description',
          name: 'description',
          content: this.post.description
        ,
        
          hid: 'og:image',
          property: 'og:image',
          content: 'https://brianssparetime.com/_nuxt/content' + this.post.dir + '/' + this.post.image
        
      ]
    
  

但是，当部署博客时，这不起作用，因为部署的图像链接发生了变化。例如，在开发模式下，this.post.image 可能指向 pos_DSC01447.jpg，但在部署的站点中，图像已移动到 pos_DSC01447.37e98b4.jpg，其中额外的位会随着每次部署而更改。在部署的版本中，this.post.image 缺少这个额外的位，导致 og:image 的 url 不正确。

【问题讨论】：

【参考方案1】：

在github issue comment 中解决了但 davydnorris。答案是content: 'https://www.brianssparetime.com' + require(\@/content$this.post.dir/$this.post.image`)`

【讨论】：

如何在 nuxt.js 中定义路由

】如何在nuxt.js中定义路由【英文标题】：Howtodefinerouteinnuxt.js【发布时间】：2019-04-2421:11:53【问题描述】：我有一个使用Nuxt.Js的博客网站，假设xyz.com并希望显示特定国家/地区代码的所有页面，例如xyz.com/en/home、xyz.com/en/about等。... 查看详情

如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试

】如何在Vue.js/Nuxt.js中为RepositoryFactory编写测试【英文标题】：HowtowritetestforRepositoryFactoryinVue.js/Nuxt.js【发布时间】：2022-01-2106:03:34【问题描述】：夏天我已经为Vue.js/Nuxt.js应用程序中的API连接实现了RepositoryFactory模式。https://medium... 查看详情

如何在 nuxt.js 中编写全局路由器功能

】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情

如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？

】如何在nuxt.js中挑选bootstrap-vue.js模块？【英文标题】：Howtocherry-pickbootstrap-vue.jsmodulesinnuxt.js?【发布时间】：2019-04-0512:03:04【问题描述】：我无法理解如何在nuxt.js中挑选bootstrap-vue.js模块nuxt.config.js中的以下代码正在拉取整个库... 查看详情

Tabulator + Nuxt.js：如何在回调中使用 axios？

】Tabulator+Nuxt.js：如何在回调中使用axios？【英文标题】：Tabulator+Nuxt.js:Howtouseaxiosincallbacks?【发布时间】：2020-01-1608:48:53【问题描述】：我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件：<template><divref="table... 查看详情

如何使用 Nuxt.js 仅在一个组件中使用插件？

】如何使用Nuxt.js仅在一个组件中使用插件？【英文标题】：HowtouseplugininonlyonecomponentusingNuxt.js?【发布时间】：2021-11-1617:45:13【问题描述】：我正在用nuxt.js做一个简单的博客网站，我只需要在一个组件中导入编辑器，我不想使用n... 查看详情

如何使用 laravel 后端 API 在 nuxt.js 中上传图片

】如何使用laravel后端API在nuxt.js中上传图片【英文标题】：howtouploadimageinnuxt.jsusinglaravelbackendAPI【发布时间】：2021-01-2407:29:30【问题描述】：nuxt.js我搜索了很多关于使用laravelapi上传图片的教程，但我不知道如何编码图片上传的东... 查看详情

如何在 nuxt.js 上手动触发路由？

】如何在nuxt.js上手动触发路由？【英文标题】：Howtomanuallytriggerroutingonnuxt.js?【发布时间】：2021-07-2623:41:01【问题描述】：我想在回调中登录后手动导航到主页。methods:asyncuserLogin()varsession_url="/api/v1/authenticate";axios.post(session_url,thi... 查看详情

Nuxt.js - 如何在布局内使用布局

】Nuxt.js-如何在布局内使用布局【英文标题】：Nuxt.js-Howtouselayoutinsidelayout【发布时间】：2019-01-2710:58:07【问题描述】：我有我的默认布局，我想制作一个页面带有布局和布局内部的组件将更改insdie并将url更改为我如何用nuxt做到... 查看详情

如何在 Nuxt.js 中创建动态“面包屑”

】如何在Nuxt.js中创建动态“面包屑”【英文标题】：Howtocreatedynamic\'Breadcrumbs\'inNuxt.js【发布时间】：2019-12-3118:29:35【问题描述】：大家好，我正在尝试在Nuxt.js中创建动态“面包屑”，有没有人有一个工作示例，它应该如何工作... 查看详情

如何在 Nuxt.js 中使用官方 Swiper.js 作为插件

】如何在Nuxt.js中使用官方Swiper.js作为插件【英文标题】：HowtouseofficialSwiper.jsasplugininNuxt.js【发布时间】：2021-01-2106:39:49【问题描述】：我有插件swiper.js代码：importVuefrom"vue";//importSwipercoreandrequiredcomponentsimportSwiperCore,Navigation,Pagina... 查看详情

如何在 nuxt.js (vue.js) 中配置动态 og 标签？

】如何在nuxt.js(vue.js)中配置动态og标签？【英文标题】：HowdoIconfiguredynamicogtagsinnuxt.js(vue.js)?【发布时间】：2018-05-3112:59:18【问题描述】：我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-... 查看详情

如何在实际服务中运行 nuxt.js？

】如何在实际服务中运行nuxt.js？【英文标题】：Howtorunnuxt.jsinrealservice?【发布时间】：2017-10-2817:56:32【问题描述】：我在中使用了vue-clivueinitnuxt/expressmyProject和，npm运行开发开发。但是，npm运行构建之后，创建了dist文件。如何在... 查看详情

如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误

】如何在Nuxt.js中使用CKEditor-未定义窗口错误【英文标题】：HowtouseCKEditorwithNuxt.js-windowisnotdefinederror【发布时间】：2020-08-1503:00:36【问题描述】：在Vue.js中，这是我使用的设置。在Nuxt.js中，我收到“未定义窗口”错误。根据我的... 查看详情

如何在 nuxt.js 中创建动态锚链接？

】如何在nuxt.js中创建动态锚链接？【英文标题】：Howtocreateadynamicanchorlinkinnuxt.js?【发布时间】：2019-12-1221:56:56【问题描述】：我正在构建一个nuxtonepager，它接收来自WordpressRestApi的内容。我已经获得了Wordpress菜单结构，并且每个... 查看详情

如何在 nuxt.js 上从子组件获取父组件的值？

】如何在nuxt.js上从子组件获取父组件的值？【英文标题】：HowtogetanvaluefromChildcomponenttoParentonnuxt.js?【发布时间】：2019-11-3022:31:48【问题描述】：我一直在尝试将数据从子A($emit)组件传递给父组件，从父组件传递给子B(props)。使用n... 查看详情

如何在 Nuxt.js 的 axios 插件中访问当前的 fullPath？

】如何在Nuxt.js的axios插件中访问当前的fullPath？【英文标题】：HowcanIaccessthecurrentfullPathinsideofaaxiosplugininNuxt.js?【发布时间】：2020-02-0807:01:42【问题描述】：我正在尝试从Axios的Nuxt插件中获取通过route.fullPath的当前路径。它在一定... 查看详情

如何在 nuxt.js 中安装 trading-vue-js 插件？

】如何在nuxt.js中安装trading-vue-js插件？【英文标题】：Howtoinstalltrading-vue-jspluginsinnuxt.js?【发布时间】：2020-11-2901:39:27【问题描述】：我尝试使用nuxt.js和trading-vue-js插件（如Tradingview.com）制作网站。所以我在我的项目中安装了tradi... 查看详情