Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

投稿一覧と投稿記事表示機能を作成しました #1

Merged
merged 2 commits into from May 21, 2019
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -0,0 +1,14 @@
---
title: Default Starterからブログを作成する
category: Tech
tags:
- Gridsome
- Netlify
slug: first-post
date: 2019-05-20
description: GridsomeのDefault Starterからブログを作成しています。
---

外部リンクはtransformerにより、別タブで開きます。

外部リンクテスト: [ぺんすけブログ](https://pensuke.work)
@@ -1,10 +1,28 @@
// This is where project configuration and plugin options are located.
// Learn more: https://gridsome.org/docs/config

// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`

module.exports = {
siteName: 'Gridsome',
plugins: []
siteName: 'Gridsomeで作るブログ',
plugins: [
{
use: '@gridsome/source-filesystem',
options: {
typeName: 'Post',
path: 'content/posts/*.md',
route: ':slug',
refs: {
tags: {
typeName: 'Tag',
route: '/tag/:id',
create: true
}
}
}
},
],

transformers: {
remark: {
externalLinksTarget: '_blank',
externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
anchorClassName: 'icon icon-link',
}
},
}
@@ -7,6 +7,8 @@
"explore": "gridsome explore"
},
"dependencies": {
"@gridsome/source-filesystem": "0.5.0",
"@gridsome/transformer-remark": "0.3.2",
"gridsome": "^0.6.0"
}
}
}
@@ -1,33 +1,46 @@
<template>
<Layout>

<!-- Learn how to use images here: https://gridsome.org/docs/images -->
<g-image alt="Example image" src="~/favicon.png" width="135" />

<h1>Hello, world!</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi labore tempore expedita, et iste tenetur suscipit explicabo! Dolores, aperiam non officia eos quod asperiores
</p>

<p class="home-links">
<a href="https://gridsome.org/docs" target="_blank" rel="noopener">Gridsome Docs</a>
<a href="https://github.com/gridsome/gridsome" target="_blank" rel="noopener">GitHub</a>
</p>
<h1>Gridsomeで作るブログ</h1>

<h2>投稿一覧</h2>
<div v-for="post in $page.posts.edges" :key="post.node.id">
タイトル: <g-link :to="post.node.path">
{{ post.node.title }}
</g-link>
<p>概要: {{ post.node.description }}</p>
<p>タグ:</p>
<ul v-if="post.node.tags">
<li v-for="tag in post.node.tags" :key="tag.id">{{ tag.title }}</li>
</ul>
</div>
</Layout>
</template>

<page-query>
{
posts: allPost {
edges {
node {
path
title
tags {
id
title
path
}
description
content
}
}
}
}
</page-query>

<script>
export default {
metaInfo: {
title: 'Hello, world!'
}
}
</script>

<style>
.home-links a {
margin-right: 1rem;
}
</style>
</script>
@@ -0,0 +1,37 @@
<template>
<Layout>
<h1>{{ $page.post.title }}</h1>
<p>タグ:</p>
<ul v-if="$page.post.tags">
<li v-for="tag in $page.post.tags" :key="tag.id">{{ tag.title }}</li>
</ul>
<div v-html="$page.post.content"/>
</Layout>
</template>

<page-query>
query Post ($path: String!) {
post: post (path: $path) {
title
path
date (format: "YYYY/MM/DD")
tags {
id
title
path
}
description
content
}
}
</page-query>

<script>
export default {
metaInfo() {
return {
title: this.$page.post.title
}
}
}
</script>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.