λ§ν¬ λ€μ΄ νμ΄μ§μ κ°μΌλ‘ λ체λλ λ³μλ₯Ό κ°λ λ°©λ²μ΄ μμ΅λκΉ? URLλ‘ μλΉμ€μ λν λ¬Έμλ₯Ό μμ± μ€μ λλ€. URLμ λͺ κ°μ λ§ν¬ λ€μ΄ νμΌμ μμΌλ©° λ³κ²½ λ κ²½μ° μ°Ύμμ κ΅μ²΄ ν νμκ° μμ΅λλ€.
Markdownμμ μ¬μ©μ μ»΄ν¬λνΈλ₯Ό μΆκ°νλ κ°μ₯ μ’μ λ°©λ²μ 무μμ λκΉ? μ΄κ²μ μν΄ λ¬΄κ±°μ΄ κ² κ°μ΅λλ€.
μ΄μ λν μ½κ°μ μ¬μ©μ μ§μ λμ°λ―Έλ₯Ό μμ±ν μ μμ΅λλ€ (λλ lodash.template
https://lodash.com/docs/4.17.11#templateκ³Ό κ°μ κ²μ μ¬μ©).
λΉ λ₯΄κ³ λλ¬μ΄ ν΄κ²°μ± μ λ€μκ³Ό κ°μ΅λλ€.
λ€μ λ΄μ©μ΄ ν¬ν¨ λ sample.md
λ§ν¬ λ€μ΄ νμΌμ΄ μ 곡λ©λλ€.
---
title: Sample
---
## Hello World
This is a [link](%URL%/sub-path), and so is [this](%URL%/sub-path)
νμΌμ μμ±νκ³ ( src/utils/template.js
λΌκ³ ν©μλ€) λ€μκ³Ό κ°μ΄ μμ±ν μ μμ΅λλ€.
export default function template(content, data) {
return content.replace(/%(.+)%/g, (match, key) => {
const value = data[key]
if (typeof value !== 'undefined') {
return value
}
return match // guards against some unintentional prefix
});
}
μ΄μ λͺ¨λ ν¨κ» μ°κ²°νκ³ ,μ΄ ν
νλ¦Ώ κΈ°λ₯μ _use_νμ¬ μ½ν
μΈ λ₯Ό κ΅μ²΄νλ©΄λ©λλ€. data
κ°μ²΄λ μνλλλ‘ μ¬μ©ν μ μμΌλ©° μ΄λμμλ κ°μ Έμ¬ μ μμ΅λλ€ (μ : graphql, μΌλΆ μμ νμΌ, νκ²½ λ³μ λ±).
import React from 'react'
import template from '../utils/template';
const URL = 'https://google.com'; // this can be from wherever
export default function SomeMarkdownPage({ data }) {
// data is from GraphQL, presume the parent is data.markdown
return (
<div dangerouslySetInnerHTML={{
__html: template(data.markdown.html, {
URL
})
}} />
)
}
μ΄κ² λ§μ΄ λΌ? μ΄κ²μ μλΉν μ μ©ν gatsby-remark- νλ¬κ·ΈμΈ μΌ μλ μμ§λ§, κ·Έκ²μ΄ μ‘΄μ¬νλμ§ νμ€νμ§ μμ΅λλ€! κΈμ μ°λ λ° κ΄μ¬μ΄ μλ€λ©΄ λ©μ§ κ² μ§λ§ μ§κΈμ μ¬μ© μ¬λ‘μμ νμ€ν μλν©λλ€!
λ΅λ³μΌλ‘ μ’ λ£νκ² μ΅λλ€. μΆκ°λ‘ λμμ΄ νμνλ©΄ μΈμ λ μ§ λ€μ μ΄μ΄ μ£ΌμκΈ° λ°λλλ€. Gatsbyλ₯Ό μ¬μ©ν΄ μ£Όμ μ κ°μ¬ν©λλ€!
κ°μ₯ μ μ©ν λκΈ
μ΄μ λν μ½κ°μ μ¬μ©μ μ§μ λμ°λ―Έλ₯Ό μμ±ν μ μμ΅λλ€ (λλ
lodash.template
https://lodash.com/docs/4.17.11#templateκ³Ό κ°μ κ²μ μ¬μ©).λΉ λ₯΄κ³ λλ¬μ΄ ν΄κ²°μ± μ λ€μκ³Ό κ°μ΅λλ€.
λ€μ λ΄μ©μ΄ ν¬ν¨ λ
sample.md
λ§ν¬ λ€μ΄ νμΌμ΄ μ 곡λ©λλ€.νμΌμ μμ±νκ³ (
src/utils/template.js
λΌκ³ ν©μλ€) λ€μκ³Ό κ°μ΄ μμ±ν μ μμ΅λλ€.μ΄μ λͺ¨λ ν¨κ» μ°κ²°νκ³ ,μ΄ ν νλ¦Ώ κΈ°λ₯μ _use_νμ¬ μ½ν μΈ λ₯Ό κ΅μ²΄νλ©΄λ©λλ€.
data
κ°μ²΄λ μνλλλ‘ μ¬μ©ν μ μμΌλ©° μ΄λμμλ κ°μ Έμ¬ μ μμ΅λλ€ (μ : graphql, μΌλΆ μμ νμΌ, νκ²½ λ³μ λ±).μ΄κ² λ§μ΄ λΌ? μ΄κ²μ μλΉν μ μ©ν gatsby-remark- νλ¬κ·ΈμΈ μΌ μλ μμ§λ§, κ·Έκ²μ΄ μ‘΄μ¬νλμ§ νμ€νμ§ μμ΅λλ€! κΈμ μ°λ λ° κ΄μ¬μ΄ μλ€λ©΄ λ©μ§ κ² μ§λ§ μ§κΈμ μ¬μ© μ¬λ‘μμ νμ€ν μλν©λλ€!
λ΅λ³μΌλ‘ μ’ λ£νκ² μ΅λλ€. μΆκ°λ‘ λμμ΄ νμνλ©΄ μΈμ λ μ§ λ€μ μ΄μ΄ μ£ΌμκΈ° λ°λλλ€. Gatsbyλ₯Ό μ¬μ©ν΄ μ£Όμ μ κ°μ¬ν©λλ€!