基本設定はsiteConfig.jsonだけでできます

タイトル、ロゴ、注目カテゴリ、広告表示などに関するサイトの基本設定は、テンプレートフォルダ直下にあるsiteConfig.jsonを編集することで簡単に変更できます。

サイトの基本情報

タイトル

"title": "タイトル", 
"subtitle": "サブタイトル",

サイトのタイトル、サブタイトルを記入してください。ここに記入された内容は、ロゴ画像のaltテキストや、各ページのタイトル、ディスクリプションの一部としても使われます。

ロゴ & アイコン

"logo": "/<ロゴ画像ファイル名>",
"logoWithTitles": "/<タイトル付きロゴ画像ファイル名>",
"logoWithTitlesSmall": "/<タイトル付きのロゴ（スマホページ用）画像ファイル名>",
"icon": "/<アイコン画像ファイル名>",
"favicon": "/<ファビコン画像ファイル名>",

ヘッダー部分のロゴとして使いたい画像がある場合、テンプレートフォルダ直下にあるstaticというフォルダ内に画像ファイルを入れた上で、logo部分に/に続けて画像名を記入してください。

テキストのタイトルなしで、タイトル付きのロゴだけを表示させたい場合も、同様にlogoWithTitles部分にファイル名を入れてください。

テキストタイトル＆サブタイトルのみを表示させたい場合は、これらの項目を空白にしてください。

URL

"baseURL": "トップページのURL",

表示

注目カテゴリ（トップにリスト表示したいカテゴリ）

"categoriesFeatured": [
  {
    "name": "Get Started",
    "slug": "get-started",
    "description": "blackJAMをはじめよう"
  },
  {
    "name": "Customize",
    "slug": "customize",
    "description": "オリジナルのブログをつくろう"
  }
],

トップページにリストとして表示させたい記事カテゴリを設定できます。nameにはカテゴリ名を、slugにはスラッグ名を、descriptionにはカテゴリ名の下に表示させたいメッセージを記入してください（記入しない場合、カテゴリ名のみが表示されます）。デフォルトでは上のような設定がされています。

リスト

"listOption": {
  "showNum": <各リストで初期表示させたい記事数>,
  "loadNum": <「もっとみる」で追加したい記事数>,
  "showNumTop": <トップページの各リストで表示させたい記事数>,
  "showNumLatest": <「最新の記事」部分で表示させたい記事数>,
  "showNumRec": <「お薦め記事」部分で表示させたい記事数>,
  "notFoundMessage": "<検索ページで記事が見つからなかった時に表示させたいメッセージ>"
  "swiperPostsOrder": "fields.<スワイパー部分の記事の並びについて基準にしたいフィールドのスラッグ>",
  "swiperPostsOrderDirection": 1,
  "listPostsOrder": "fields.<リスト部分の記事の並びについて基準にしたいフィールドのスラッグ>",
  "listPostsOrderDirection": -1
},

記事の並び順に関する設定は、基準としたいフィールド名をPostsOrderの項目に記入した上で、昇順か降順かをPostsOrderDirectionの項目に記入します。昇順の場合は1と、降順の場合は-1としてください。つまり、スワイパー部分の記事を日付が新しい順に並べたい場合は、

"swiperPostsOrder": "fields.date,
"swiperPostsOrderDirection": -1,

とします。

著者情報

"showAuthor": true

ページ下部に著者情報を表示させたい場合trueを、させたくない場合はfalseを記入してください。

ローダー

"loaderOption": {
  "color": "<ローダーの色>"
},

記事ページ

"postOption": {
  "fontSize": "<文字サイズ>",
  "lineHeight": "<行間>",
  "defaultImg": "/<デフォルトのサムネイル画像名>"
},

Contentful側で記事のサムネイル画像が設定されていない場合、defaultImgが表示されます。

背景画像

"backgroundImageOption": {
  "repeat": "no-repeat",
  "size": "contain",
  "position": "center center",
  "attachment": "auto",
  "filter": "opacity(.2)"
}

記事の背景画像の表示のされ方を設定できます。CSSのbackground-imageに関する設定方法に従うので、こちらのページなどを参考に設定を行ってください。

コメント

"disqusShortName": "<disqusのshortname>",
"commentMessage": "<コメント欄に表示させたいメッセージ>",

記事ページの下部にコメント機能を追加したい場合は、disqusのアカウントを作成したのち、自分のshortnameをdisqusShortNameに記入してください。

shortnameは、サイト登録後、サイトの基本設定タブから確認することができます。

PWA

"manifest": {
  "lang": "<サイト言語>",
  "background_color": "<サイトの背景カラー>",
  "theme_color": "<サイトのメインカラー>",
  "icons": [
    {
      "src": "/<ロゴ画像名>",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "display": "standalone"
},

ウェブアプリ・マニフェストに関する設定ができます。こちらのページを参考に設定してください。

Adsense & Analytics

Adsense

"adsenseID": "ca-pub-***",

IDを記入後、nuxt.config.jsを開いて、modules箇所のコメントアウトしてある部分を有効にしてください（=//を消してください）。

modules: [ 
  '@nuxtjs/pwa',
  'nuxt-clipboard2',
  ['@nuxtjs/google-adsense', {
    id: siteConfig.adsenseID
  }],

Aalytics

"analyticsID": "UA-***",

設定変更後の手順

設定を変更した場合、そのままではウェブサイトに反映されません。サイトを更新するには、GitHubにアップロードされているフォルダを更新する必要があります。

ターミナルにて、テンプレートフォルダ直下で次のコマンドを順番に一行ずつ実行してください。

$ git add .
$ git commit -m"updated siteConfig"
$ git push origin master

NetlifyとGitHubとの連携が正常であれば、自動でサイトの内容が更新されます。