`}),(0,e.jsx)(n.span,{className:"code-line",children:` This is a test for MDX `}),(0,e.jsx)(n.span,{className:"code-line",children:`

`})]})}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:"Output"})}),` `,(0,e.jsx)("div",{style:{padding:"1rem",backgroundColor:"darkOrange",borderRadius:"10px",color:"white"},children:(0,e.jsx)("span",{children:"This is a test for MDX"})}),` `,(0,e.jsx)(n.h3,{children:"Local Image and Cover"}),` `,(0,e.jsx)(n.p,{children:"Generaly images located on the public directory. This theme has a special discipline to keep the structure clean for images."}),` `,(0,e.jsxs)(n.p,{children:["We assume that the name of our blog post file is ",(0,e.jsx)(n.code,{children:"hello-world.mdx"})," and the name of image is ",(0,e.jsx)(n.code,{children:"cover.png"})]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Example 1:"}),` `]}),` `,(0,e.jsxs)("div",{style:{border:"2px solid green",padding:"1rem",marginBottom:"1rem"},children:[(0,e.jsx)("div",{style:{color:"green"},children:(0,e.jsxs)(n.p,{children:["blog post is under ",(0,e.jsx)(n.code,{children:"blog"})," directory"]})}),(0,e.jsxs)(n.p,{children:["So we need to move the images used for hello-world.mdx to this directory:",(0,e.jsx)(n.code,{children:"\\public\\images\\blogs\\hello-world"})]}),(0,e.jsxs)(n.p,{children:["then our image path will be: ",(0,e.jsx)(n.code,{children:"\\public\\images\\blogs\\hello-world\\cover.png"})]})]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Example 2:"}),` `]}),` `,(0,e.jsxs)("div",{style:{border:"2px solid green",padding:"1rem",marginBottom:"1rem"},children:[(0,e.jsx)("div",{style:{color:"blue"},children:(0,e.jsxs)(n.p,{children:["blog post is under ",(0,e.jsx)(n.code,{children:"blog\\documents"})," directory"]})}),(0,e.jsxs)(n.p,{children:["So we need to move the images used for hello-world.mdx to this directory:",(0,e.jsx)(n.code,{children:"\\public\\images\\blogs\\documents\\hello-world"})]}),(0,e.jsxs)(n.p,{children:["then our image path will be: ",(0,e.jsx)(n.code,{children:"\\public\\images\\blogs\\documents\\hello-world\\cover.png"})]})]}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.img,{src:"/images/blogs/documents/blogs-tags/local-image.png",alt:"yaml|contain"})}),` `,(0,e.jsx)(n.p,{children:"The structure for this blog post is:"}),` `,(0,e.jsx)(n.p,{children:"Blog structure"}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsxs)(n.code,{className:"code-highlight",children:[(0,e.jsx)(n.span,{className:"code-line",children:`blogs `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2514\u2500\u2500 documents `}),(0,e.jsx)(n.span,{className:"code-line",children:` \u251C\u2500\u2500 blogs-tags.mdx `}),(0,e.jsx)(n.span,{className:"code-line",children:` \u251C\u2500\u2500 getting-started.mdx `}),(0,e.jsx)(n.span,{className:"code-line",children:` \u251C\u2500\u2500 menu.mdx `}),(0,e.jsx)(n.span,{className:"code-line",children:` \u2514\u2500\u2500 pages.mdx `})]})}),` `,(0,e.jsx)(n.p,{children:"According to the structure of the blog, the structure of our image will be as follows:"}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsxs)(n.code,{className:"code-highlight",children:[(0,e.jsx)(n.span,{className:"code-line",children:`public `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u251C\u2500\u2500 images `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u2514\u2500\u2500 blogs `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u2514\u2500\u2500 documents `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u251C\u2500\u2500 blogs-tags `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u2502 \u251C\u2500\u2500 cover.png `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u2502 \u251C\u2500\u2500 local-image.png `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u2502 \u2514\u2500\u2500 yml.png `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u251C\u2500\u2500 getting-started `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u251C\u2500\u2500 menu `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u2514\u2500\u2500 pages `}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsx)(n.span,{className:"code-line",children:` `})]})}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsxs)(n.p,{children:["Image syntax: ",(0,e.jsx)(n.code,{children:"![yaml|contain](/images/blogs/documents/blogs-tags/local-image.png)"})," ",(0,e.jsx)(n.img,{src:"/images/blogs/documents/blogs-tags/object-fit.png",alt:"object-fit|contain"})]}),` `]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsxs)(n.p,{children:["I've used a component for modify img tag . the component name is ",(0,e.jsx)(n.code,{children:"MDXCompoenet.tsx"})," that located on ",(0,e.jsx)(n.code,{children:"_includes/MDXCompoenet.tsx"})]}),` `]}),` `,(0,e.jsx)(n.h3,{children:"External Image"}),` `,(0,e.jsxs)(n.p,{children:["For external image, you need to add the hostname of your URL to the ",(0,e.jsx)(n.code,{children:"images.domains"})," config in ",(0,e.jsx)(n.code,{children:"next.config.js"}),":"]}),` `,(0,e.jsxs)(n.p,{children:["Ex: we modify ",(0,e.jsx)(n.code,{children:"images.domains"})," for 'unsplash.com' & 'pexels.com' as follow:"]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsxs)(n.code,{className:"code-highlight",children:[(0,e.jsx)(n.span,{className:"code-line",children:`const nextConfig = { `}),(0,e.jsx)(n.span,{className:"code-line",children:` reactStrictMode: true, `}),(0,e.jsx)(n.span,{className:"code-line",children:` images: { `}),(0,e.jsx)(n.span,{className:"code-line",children:` domains: ['unsplash.com', 'pexels.com'], `}),(0,e.jsx)(n.span,{className:"code-line",children:` }, `}),(0,e.jsx)(n.span,{className:"code-line",children:`}; `})]})}),` `,(0,e.jsx)(n.h1,{children:"Single Tag"}),` `,(0,e.jsxs)(n.p,{children:["The single tag is generated automatically, the source code of tags located on ",(0,e.jsx)(n.code,{children:"pages/tag/[slug.tsx]"}),"."]}),` `,(0,e.jsx)(n.p,{children:"The single tag page lists posts that have same tag. (You wrote the tags on the front matter of the blog post.)"})]})}}var w=x;return y(v);})(); ;return Component;

Document's Post