このブログのソースコードを公開しました。
どうぞお気軽にダウンロードしてください。
共有リンク
Githubに公開しています。
https://github.com/andou0/nuxt_blog_template_v4
clone作成方法
< >内はご自身の情報に書き換える部分を表しています。
実際には< >の記号を含めずに設定してください。
まずはcloneコマンドをターミナルで実行し、依存するモジュールをインストールしてください。
$ git clone https://github.com/andou0/nuxt_blog_template_v4.git <app_name>
$ cd <app_name>
$ yarn install
次に.envファイルをルートディレクトリ直下に作成し、以下の環境変数を設定してください。
<app_name>/.env
## contentful
CTF_PERSON_ID=<person_id>
CTF_SPACE_ID=<space_id>
CTF_CDA_ACCESS_TOKEN=<access_token>
CTF_PREVIEW_API_KEY=<preview_api_key>
POSTLIMIT=20
## meta data
BASE_URL=http://localhost:3000
SITE_NAME=<サイト名>
BASE_DESC=<サイトの説明>
## SNS
TWITTER_ACCOUNT=<@を含めないtwitter_id>
FB_APP_ID=<facebook_user_id>
SLACK_LINK=<slackの招待link>
EMAIL=<問い合わせ先email>
## Google
GA_ADSENSE_ID=<ca-pub-から始まるadsense_id>
GA_TRACKING_ID=<UA-から始まるanalytics_tracking_id>
以上の設定が完了したらNuxt.jsを起動し、ブラウザで表示を確認してください。
$ yarn dev
Googleアドセンスの設定方法
components/ui/adsense/*内にあるコンポーネントファイルは、全てGoogleアドセンスのコンポーネントです。
slotIDは全て0000…に置き換えていますので、ご自身のIDに書き換えてください。
export default {
data () {
return {
slot: '0000000000', // 書き換え
env: process.env.NODE_ENV
}
}
}
Contentfulのmodel郡
contentfulのmodelとそのfields、model間の関連付けは以下の通りとなります。
レイアウトの設計
レイアウト設計は以下の通りとなります。
コードのご質問は
Twitterでお気軽に。