Nuxt 및 가격 인하로 놀이터 만들기
이게 어떻게 된 일이야, 너도 스스로 꺼져도 돼.다음 단계를 완료합니다.
아니면 귀찮으면 GitHub 리턴 here 에서 가져가세요.
셸 응용 프로그램 만들기
명령줄에서 다음 명령을 실행하여 기본 Nuxt starter 템플릿에서 셸 응용 프로그램을 만듭니다.
yarn create nuxt-app starter-for-nuxt-markdown-blog다음은 출력 결과입니다.➜ examples yarn create nuxt-app starter-for-nuxt-markdown-blog
yarn create v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "[email protected]" with binaries:
- create-nuxt-app
[#################################################################################################################################################################################################] 373/373
create-nuxt-app v2.10.1
✨ Generating Nuxt.js project in starter-for-nuxt-markdown-blog
? Project name starter-for-nuxt-markdown-blog
? Project description Starter for a Nuxt Markdown Blog
? Author name Jenna Pederson
? Choose the package manager Yarn
? Choose UI framework Bulma
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
yarn run v1.17.3
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
✨ Done in 3.35s.
🎉 Successfully created project starter-for-nuxt-markdown-blog
To get started:
cd starter-for-nuxt-markdown-blog
yarn dev
To build & start for production:
cd starter-for-nuxt-markdown-blog
yarn build
yarn start
✨ Done in 191.25s.
yarn dev그리고 http://localhost:3000로 가세요.태그 파일 로드
다음은
frontmatter-markdown-loader 패키지를 사용하여 content라는 디렉터리에서 가격 인하 파일을 불러오고 모든 게시물에 대한 가격 인하 프론트 매트릭스 (가격 인하 파일에 대한 메타데이터는 본 예에서 제목, 라벨, 영웅 이미지 등 메타데이터를 발표하는 방문권을 얻습니다.패키지 추가:
yarn add frontmatter-markdown-loader컨텐츠 디렉토리를 만들려면 다음과 같이 하십시오.mkdir -P content/blog첫 번째 게시물을 만들려면 this file 을 content/blog 에 넣으십시오.그리고 이미지 자산에 대한 관련 디렉터리를 만듭니다.
mkdir -P assets/images/blogthis image를 
assets/images/blog에 추가합니다.현재 저희는
frontmatter-markdown-loader 를 nuxt.config.js 에 추가하는 구축 절차를 통해 웹 팩 설정을 확장할 수 있는 내용이 있습니다.build: {
...
extend(config, ctx) {
config.module.rules.push(
{
test: /\.md$/,
include: path.resolve(__dirname, "content"),
loader: "frontmatter-markdown-loader",
}
);
}
}
블로그 게시물 표시
우리는 모든 게시물에 대해 정적 페이지를 만들 필요가 없기 때문에 동적 루트를 사용하여 가격 인하 파일을 끌어들일 것이다.다음 URL 경로를 고려합니다.
/blog/2019-09-22-veggies /blog/:blog_post_title또는/users/jenna-pederson /users/:username이 두 예에서 :blog_post_title 과 :username 은 노선의 동적 부분이나 세그먼트를 나타낸다.블로그 디렉토리를 만들려면 다음과 같이 하십시오.
mkdir pages/blog우리는 blog 디렉터리를 만들고 _slug.vue 파일을 추가할 것입니다.이 _slug.vue 파일은 우리 블로그 글의 Vue 템플릿이 될 것입니다.pages/blog/_slug.vue에 다음 기본 템플릿을 추가합니다. <template>
<div class="container">
<h1 class="title">
{{ post.attributes.title }}
</h1>
<h2 class="subtitle">
{{ post.attributes.date }}
</h2>
<div class="columns">
<div class="column is-half is-offset-one-quarter">
<figure class="image">
<img :src="imgSrc">
</figure>
</div>
</div>
<!-- eslint-disable-next-line -->
<div class="content" v-html="post.html" />
</div>
</template>
<script>
export default {
computed: {
imgSrc () {
return require(`~/assets/images/blog/${this.post.attributes.hero}`)
}
},
async asyncData ({ params }) {
try {
const post = await import(`~/content/blog/${params.slug}.md`)
return {
post
}
} catch (error) {
return false
}
},
head () {
return {
title: this.post.attributes.title
}
}
}
</script>
asyncData에서 얻은 slug 값에 따라 가격 인하 파일을 가져왔습니다.마찬가지로 slug는 URL로 정의됩니다.예를 들어 우리의 URLhttp://localhost:3000/blog/2019-09-22-veggies의 slug는 params이기 때문에 2019-09-22-veggies 파일을 가져오고post 대상을 구성 요소에 분배하는 데이터입니다.우리는 가격 인하에서 원래 HTML을 나타내기 위해
2019-09-22-veggies.md 명령을 사용합니다.이것은 eslint 경고를 초래할 수 있습니다.v-htmlXSS 취약점here 및here에 대한 자세한 내용을 볼 수 있습니다.컨텐트가 어디에서 왔는지 확인하십시오. 컨텐트를 작성하고 있는 경우 타사 UI 라이브러리에서도 보안 취약점을 발견할 수 있습니다.우리는 바로 위의 9:26 warning 'v-html' directive can lead to XSS attack vue/no-v-html 줄로 이 경고를 무시할 수 있다.이제 브라우저를 가리키고 댓글을 볼 수 있습니다!
http://localhost:3000/blog/2019- 09-22 - 야채 게시물 목록 표시
다음 단계는 저희 홈페이지의 블로그 게시물 목록을 표시하고 모든 게시물을 탐색할 수 있습니다.
따라서 블로그 게시물 목록에 표시할 게시물이 여러 개 있습니다. 을
eslint-disable-next-line 과 this post 을 content/blog 에 추가하십시오.assets/images/blog 에서는 페이지에 표시할 수 있도록 모든 블로그 게시물을 Nuxt pages/index.vue 방법으로 다시 불러옵니다.앞으로 우리는 이러한 내용을 페이지로 나누거나 특색 있는 게시물만 불러와 사이트 홈페이지에 표시할 수 있다.그리고 템플릿에 asyncData 순환을 추가하여 게시물을 표시합니다. <template>
<div class="container">
<h1 class="title">
Blog Posts
</h1>
<section class="posts">
<div v-for="post in posts" :key="post.attributes.title" class="columns">
<div class="column is-one-quarter">
<figure class="image">
<img :src="imgSrc(post)" :alt="post.attributes.title">
</figure>
</div>
<div class="column is-three-quarters">
<p class="title is-4">
<nuxt-link :to="post._path">
{{ post.attributes.title }}
</nuxt-link>
</p>
<p class="subtitle is-6">
{{ post.attributes.tags }}
</p>
<div class="content">
<p>{{ post.attributes.excerpt }}</p>
<p>{{ post.attributes.date }}</p>
<nuxt-link :to="post._path">
Read
</nuxt-link>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
async asyncData () {
const context = await require.context('~/content/blog', true, /\.md$/)
const posts = await context.keys().map(key => ({
...context(key),
_path: `/blog/${key.replace('.md', '').replace('./', '')}`
}))
return { posts: posts.reverse() }
},
methods: {
imgSrc (post) {
return require(`~/assets/images/blog/${post.attributes.hero}`)
}
}
}
</script>
v-for 디렉터리와 하위 디렉터리에 있는 모든 태그 파일을 불러옵니다.그리고 나서 우리는 모든 키 (파일 이름) 를 상하문과 우리가 원하는 다른 내용에 비추었다.이 예에서는 나중에 링크를 만들 수 있도록 게시물의 URL 경로에 content/blog 를 매핑합니다.상하문은 최종적으로frontmatter 태그 로드 프로그램이 불러오는 내용: 속성(태그 파일의frontmatter)과 html(html로 컴파일된 태그)이다.이제 브라우저를 가리킬 때 it's image
http://localhost:3000/
정적 사이트에 대한 동적 라우팅 생성
우리는 또 한 가지 해야 할 일이 있다. 바로 사용할 동적 루트
true 를 설정하는 것이다. 이 단계는 생산에 사용할 정적 사이트를 생성할 것이다._path 에서 우리는 yarn generate 디렉터리의 가격 인하 파일에 따라 루트를 생성할 것이다.먼저 파일 맨 위에
nuxt.config.js 을 추가한 다음 정의content:const glob = require('glob')이것은 하나의 수조가 될 것이다...우리가 가격을 인하하는 서류의 경로.우리의 예에서, 우리는 단지 하나이지만, 당신은 그것을 markdownPaths 또는 당신이 필요로 하는 값으로 확장할 수 있습니다.그리고 이 파일의 밑에 이 함수를 추가합니다.
function dynamicMarkdownRoutes() {
return [].concat(
...markdownPaths.map(mdPath => {
return glob.sync(`${mdPath}/*.md`, { cwd: 'content' })
.map(filepath => `${mdPath}/${path.basename(filepath, '.md')}`);
})
);
}
const markdownPaths = ['blog'] 블록에서 이 함수를 호출할 것이다.['blog', 'portfolio', 'photos', 'recipes'] 또는 generate.routes와 같은 수준에서 추가할 수 있습니다.generate: {
routes: dynamicMarkdownRoutes()
},
modules하면 다음과 같은 출력이 생성됩니다.➜ starter-for-nuxt-markdown-blog git:(master) ✗ yarn generate
yarn run v1.17.3
$ nuxt generate
ℹ Production build 16:54:52
✔ Builder initialized 16:54:52
✔ Nuxt files generated 16:54:52
✔ Client
Compiled successfully in 6.85s
✔ Server
Compiled successfully in 2.18s
Hash: edf5326aac7133378e50
Version: webpack 4.40.2
Time: 6853ms
Built at: 2019-09-25 16:55:01
Asset Size Chunks Chunk Names
../server/client.manifest.json 7.26 KiB [emitted]
125f300a35d8d87618b7.js 2.08 KiB 2 [emitted] [immutable] pages/blog/_slug
2eef474de7f0fce0b490.js 2.29 KiB 7 [emitted] [immutable]
47f38e821f6391ec3abe.js 2.38 KiB 4 [emitted] [immutable] runtime
50c6bbcdbcd3e3f623ea.js 34.9 KiB 0 [emitted] [immutable] app
72339ed6891dc9a5bab0.js 192 KiB 5 [emitted] [immutable] vendors.app
LICENSES 389 bytes [emitted]
d6bf890be21b759c97e5.js 3.38 KiB 6 [emitted] [immutable]
dc728afc9091988c21a1.js 8.63 KiB 3, 6, 7 [emitted] [immutable] pages/index
fc1ca6aa66dbc344a014.js 152 KiB 1 [emitted] [immutable] commons.app
img/8c66f4e.jpg 5.78 MiB [emitted] [big]
img/ca9c582.jpg 1.03 MiB [emitted] [big]
+ 2 hidden assets
Entrypoint app = 47f38e821f6391ec3abe.js fc1ca6aa66dbc344a014.js 72339ed6891dc9a5bab0.js 50c6bbcdbcd3e3f623ea.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
img/8c66f4e.jpg (5.78 MiB)
img/ca9c582.jpg (1.03 MiB)
Hash: 898a2ef2951dc7e6c3b6
Version: webpack 4.40.2
Time: 2180ms
Built at: 2019-09-25 16:55:03
Asset Size Chunks Chunk Names
461c3c4ac5f760555a13.js 1.67 KiB 1 [emitted] [immutable] pages/blog/_slug
8ca9a115422e5af94cd9.js 2.32 KiB 4 [emitted] [immutable]
abf1051240f49f9b6062.js 3.41 KiB 3 [emitted] [immutable]
ec1f17082565c8004784.js 7.71 KiB 2, 3, 4 [emitted] [immutable] pages/index
server.js 214 KiB 0 [emitted] app
server.manifest.json 603 bytes [emitted]
+ 5 hidden assets
Entrypoint app = server.js server.js.map
ℹ Generating pages 16:55:03
WARN Cannot stringify POJOs with symbolic keys Symbol(Symbol.toStringTag) 16:55:03
WARN Cannot stringify POJOs with symbolic keys Symbol(Symbol.toStringTag) (repeated 1 times) 16:55:03
✔ Generated / 16:55:04
✔ Generated blog/2019-09-25-cupcake 16:55:04
✔ Generated blog/2019-09-22-veggies 16:55:04
✨ Done in 16.11s.
build 디렉터리에 사이트를 생성합니다.만약 네가 테스트를 하고 싶다면 (아마도 너는 마땅히!)실시간 배포 전에 yarn generate 를 실행한 다음 dist 을 실행하여 이 디렉터리에서 정적 사이트의 HTTP 서버를 시작할 수 있습니다.이것이 너로 하여금 Nuxt와 가격 인하 파일을 사용하여 블로그를 만들기 시작하게 할 수 있기를 바란다.이 버전의 코드는 에서 확인할 수 있습니다.나는 더 많은 것을 세웠기 때문에 이 환매 협의를 계속 갱신할 것이다.아마도 우리는 기호 키로 POJO를 직렬화할 수 없거나 직사각형 포맷 날짜로 표시할 수 없다는 경고에 대해 깊이 연구할 것이다.헤드 없는 CMS에 연결할 수도 있습니다.
Netlify의 선발로 나설 준비가 되셨나요?너도 이렇게 할 수 있어!
here
Reference
이 문제에 관하여(Nuxt 및 가격 인하로 놀이터 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jennapederson/building-a-playground-with-nuxt-and-markdown-4c5e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
