链接天文媒体

huangapple
go评论51阅读模式
英文:

linking media in astro

问题

I have a website built with Astro and use Netlify CMS for content management. The media upload location seems to be different from where I want to link. I had a look at the documentation and the config seems to be correct but the path is being created inside the pages folder which I think might be the issue: link to documentation.

If I use the upload widget for the pdf file then it uploads in my pages/forms/static/upload which is correct but if I want to link it then it might be a problem. Does anyone have an idea how to get this linked up with Astro inside the pages folder? If I use the config as below then it uploads to src/pages/forms/static/upload.

Here is a snippet of my Astro config:

NetlifyCMS({
  config: {
    backend: {
      name: 'git-gateway',
      branch: 'latest',
    },
    collections: [
      {
        name: 'forms',
        label: 'Forms',
        label_singular: 'Forms',
        folder: 'src/pages/forms',
        create: true,
        delete: true,
        fields: [
          { name: 'title', widget: 'string', label: 'Post Title' },
          {
            name: 'publishDate',
            widget: 'datetime',
            format: 'DD MMM YYYY',
            date_format: 'DD MMM YYYY',
            time_format: false,
            label: 'Publish Date',
          },
          { name: 'author', widget: 'string', label: 'Author Name', required: false },
          { name: 'authorURL', widget: 'string', label: 'Author URL', required: false },
          { name: 'description', widget: 'string', label: 'Description', required: false },
          {
            name: 'pdfFile',
            widget: 'file',
            label: 'PDF File',
            required: false,
            media_folder: 'static/upload',
            public_folder: '/upload',
            accept: ['application/pdf'],
          },
          { name: 'body', widget: 'markdown', label: 'Post Body' },
          {
            name: 'layout',
            widget: 'select',
            default: '../../layouts/BlogPost.astro',
            options: [
              { label: 'Forms', value: '../../layouts/BlogPost.astro' },
            ],
          },
        ],
      },          
    ],
  },
  previewStyles: ['/src/styles/blog.css'],
})

Here is the component I am using to render the data:

<article class="post-preview mt-5 mb-5 flex md:justify-start justify-center">
  <FileIcon /><a href={post.url}><a href={post.frontmatter.pdfFile}>
    <p class="text-xl">
      {post.frontmatter.title}
    </p></a>
  </a>
</article>

(Note: I have translated the provided code as requested.)

英文:

I have a website built with Astro and use Netlify CMS for content management. The media upload location seems to be different from where I want to link. I had a look at the documentation and the config seems to be correct but the path is being created inside the pages folder which I think might be the issue: https://docs-starters--netlify-cms-www.netlify.app/docs/configuration-options/.

If I use the upload widget for the pdf file then it uploads in my pages/forms/static/upload which is correct but if I want to link it then it might be a problem. Does anyone have an idea how to get this linked up with Astro inside the pages folder? If I use the config as below then it uploads to src/pages/forms/static/upload.

Here is a snippet of my Astro config:

NetlifyCMS({
config: {
backend: {
name: &#39;git-gateway&#39;,
branch: &#39;latest&#39;,
},
collections: [
{
name: &#39;forms&#39;,
label: &#39;Forms&#39;,
label_singular: &#39;Forms&#39;,
folder: &#39;src/pages/forms&#39;,
create: true,
delete: true,
fields: [
{ name: &#39;title&#39;, widget: &#39;string&#39;, label: &#39;Post Title&#39; },
{
name: &#39;publishDate&#39;,
widget: &#39;datetime&#39;,
format: &#39;DD MMM YYYY&#39;,
date_format: &#39;DD MMM YYYY&#39;,
time_format: false,
label: &#39;Publish Date&#39;,
},
{ name: &#39;author&#39;, widget: &#39;string&#39;, label: &#39;Author Name&#39;, required: false },
{ name: &#39;authorURL&#39;, widget: &#39;string&#39;, label: &#39;Author URL&#39;, required: false },
{ name: &#39;description&#39;, widget: &#39;string&#39;, label: &#39;Description&#39;, required: false },
{
name: &#39;pdfFile&#39;,
widget: &#39;file&#39;,
label: &#39;PDF File&#39;,
required: false,
media_folder: &#39;static/upload&#39;,
public_folder: &#39;/upload&#39;,
accept: [&#39;application/pdf&#39;],
},
{ name: &#39;body&#39;, widget: &#39;markdown&#39;, label: &#39;Post Body&#39; },
{
name: &#39;layout&#39;,
widget: &#39;select&#39;,
default: &#39;../../layouts/BlogPost.astro&#39;,
options: [
{ label: &#39;Forms&#39;, value: &#39;../../layouts/BlogPost.astro&#39; },
],
},
],
},          
],
},
previewStyles: [&#39;/src/styles/blog.css&#39;],
}),

Here is the component I am using to render the data:

&lt;article class=&quot;post-preview mt-5 mb-5 flex md:justify-start justify-center&quot;&gt;
&lt;FileIcon /&gt;&lt;a href={post.url}
&gt;&lt;a href={post.frontmatter.pdfFile}
&gt;&lt;p class=&quot;text-xl&quot;&gt;
{post.frontmatter.title}
&lt;/p&gt;&lt;/a
&gt;
&lt;/a&gt;
&lt;/article&gt;

答案1

得分: 0

我成功解决了它。配置应该位于根目录而不是单独的集合中。以下是一个示例：

NetlifyCMS({
  config: {
    backend: {
      name: 'git-gateway',
      branch: 'latest',
    },
    media_folder: 'public/upload',
    public_folder: '/upload',
    collections: [
      {
        name: 'forms',
        label: 'Forms',
        label_singular: 'Forms',
        folder: 'src/pages/forms',
        create: true,
        delete: true,
        fields: [
          { name: 'title', widget: 'string', label: 'Post Title' },
          {
            name: 'publishDate',
            widget: 'datetime',
            format: 'DD MMM YYYY',
            date_format: 'DD MMM YYYY',
            time_format: false,
            label: 'Publish Date',
          },
          { name: 'author', widget: 'string', label: 'Author Name', required: false },
          { name: 'authorURL', widget: 'string', label: 'Author URL', required: false },
          { name: 'description', widget: 'string', label: 'Description', required: false },
          {
            name: 'pdfFile',
            widget: 'file',
            label: 'PDF File',
            accept: ['application/pdf'],
          },
          { name: 'body', widget: 'markdown', label: 'Post Body' },
          {
            name: 'layout',
            widget: 'select',
            default: '../../layouts/BlogPost.astro',
            options: [
              { label: 'Forms', value: '../../layouts/BlogPost.astro' },
            ],
          },
        ],
      },          
    ],
  },
  previewStyles: ['/src/styles/blog.css'],
}),
英文:

I managed to solve it. The config was supposed to be in root and not in the individual collection. Here is an example:

NetlifyCMS({
config: {
backend: {
name: &#39;git-gateway&#39;,
branch: &#39;latest&#39;,
},
media_folder: &#39;public/upload&#39;,
public_folder: &#39;/upload&#39;,
collections: [
{
name: &#39;forms&#39;,
label: &#39;Forms&#39;,
label_singular: &#39;Forms&#39;,
folder: &#39;src/pages/forms&#39;,
create: true,
delete: true,
fields: [
{ name: &#39;title&#39;, widget: &#39;string&#39;, label: &#39;Post Title&#39; },
{
name: &#39;publishDate&#39;,
widget: &#39;datetime&#39;,
format: &#39;DD MMM YYYY&#39;,
date_format: &#39;DD MMM YYYY&#39;,
time_format: false,
label: &#39;Publish Date&#39;,
},
{ name: &#39;author&#39;, widget: &#39;string&#39;, label: &#39;Author Name&#39;, required: false },
{ name: &#39;authorURL&#39;, widget: &#39;string&#39;, label: &#39;Author URL&#39;, required: false },
{ name: &#39;description&#39;, widget: &#39;string&#39;, label: &#39;Description&#39;, required: false },
{
name: &#39;pdfFile&#39;,
widget: &#39;file&#39;,
label: &#39;PDF File&#39;,
accept: [&#39;application/pdf&#39;],
},
{ name: &#39;body&#39;, widget: &#39;markdown&#39;, label: &#39;Post Body&#39; },
{
name: &#39;layout&#39;,
widget: &#39;select&#39;,
default: &#39;../../layouts/BlogPost.astro&#39;,
options: [
{ label: &#39;Forms&#39;, value: &#39;../../layouts/BlogPost.astro&#39; },
],
},
],
},          
],
},
previewStyles: [&#39;/src/styles/blog.css&#39;],
}),

huangapple
  • 本文由 发表于 2023年6月12日 13:43:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/76453881.html
  • astro
  • netlify-cms
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定