Sitecore JSSで簡単なページを作ってみる

import {
  CommonFieldTypes,
  SitecoreIcon
} from "@sitecore-jss/sitecore-jss-manifest";

export default function (manifest) {
  manifest.addRouteType({
    name: "ArticlePage",             // テンプレート名
    displayName: "Article Page",     // テンプレートの表示名
    icon: SitecoreIcon.DocumentText, // テンプレートのアイコン
    fields: [
      {
        name: "articleTitle",                  // フィールド名
        displayName: "Article Title",          // フィールドの表示名
        type: CommonFieldTypes.SingleLineText, // フィールドタイプ
        standardValue: "$name"                 // デフォルト値
      },
      {
        name: "articleContent",
        displayName: "Article Content",
        type: CommonFieldTypes.RichText,
      }
    ]
  });
}

# アイテム名
name: article
# アイテムの表示名
displayName: Article
# テンプレート（先程定義したもの）
template: ArticlePage
# 各フィールドの値
fields:
  articleTitle: My first JSS page
  articleContent: |
    <div>
      <p>This is my first JSS page.</p>
    </div>

// eslint-disable-next-line no-unused-vars
import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';

/**
 * Adds the ArticlePageContent component to the disconnected manifest.
 * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
 * @param {Manifest} manifest Manifest instance to add components to
 */
export default function(manifest) {
  manifest.addComponent({
    name: 'ArticlePageContent',
    icon: SitecoreIcon.DocumentTag,
    fields: [
      { name: 'heading', type: CommonFieldTypes.SingleLineText },
    ],
    /*
    If the component implementation uses <Placeholder> or withPlaceholder to expose a placeholder,
    register it here, or components added to that placeholder will not be returned by Sitecore:
    placeholders: ['exposed-placeholder-name']
    */
  });
}

// eslint-disable-next-line no-unused-vars
import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';

/**
 * Adds the ArticlePageContent component to the disconnected manifest.
 * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
 * @param {Manifest} manifest Manifest instance to add components to
 */
export default function(manifest) {
  manifest.addComponent({
    name: 'ArticlePageContent',
    icon: SitecoreIcon.DocumentTag,
    fields: [
-     { name: 'heading', type: CommonFieldTypes.SingleLineText },
    ],
    /*
    If the component implementation uses <Placeholder> or withPlaceholder to expose a placeholder,
    register it here, or components added to that placeholder will not be returned by Sitecore:
    placeholders: ['exposed-placeholder-name']
    */
  });
}

import React from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';

const ArticlePageContent = (props) => (
  <div>
    <p>ArticlePageContent Component</p>
    <Text field={props.fields.heading} />
  </div>
);

export default HomePageContent;

import React from 'react';
import {
  Text,
  withSitecoreContext  // withSitecoreContextをインポート
} from '@sitecore-jss/sitecore-jss-react';

const ArticlePageContent = (props) => (
  <div>
    <p>ArticlePageContent Component</p>
    <Text field={props.fields.heading} />
  </div>
);

// エクスポート時にwithSitecoreContextを適用する
export default withSitecoreContext()(ArticlePageContent);

import React from 'react';
import {
  Text,
  RichText,  // RichTextコンポーネントを追加
  withSitecoreContext  // withSitecoreContextをインポート
} from '@sitecore-jss/sitecore-jss-react';

const ArticlePageContent = (props) => (
  <div>
    {/* articleTitleフィールドを表示 */}
    <h1><Text field={props.sitecoreContext.route.fields.articleTitle} /></h1>
    <div>
      {/* articleContentフィールドを表示 */}
      <RichText field={props.sitecoreContext.route.fields.articleContent} />
    </div>
  </div>
);

// withSitecoreContextを適用
export default withSitecoreContext()(ArticlePageContent);

import React from 'react';
import { Placeholder, VisitorIdentification } from '@sitecore-jss/sitecore-jss-react';
import { NavLink } from 'react-router-dom';
import { withTranslation } from 'react-i18next';
import Helmet from 'react-helmet';

///////// (省略) ///////////////

const Layout = ({ route }) => (
  <React.Fragment>
    {/* react-helmet enables setting <head> contents, like title and OG meta tags */}
    <Helmet>
      <title>
        {(route.fields && route.fields.pageTitle && route.fields.pageTitle.value) || 'Page'}
      </title>
    </Helmet>

    {/*
      VisitorIdentification is necessary for Sitecore Analytics to determine if the visitor is a robot.
      If Sitecore XP (with xConnect/xDB) is used, this is required or else analytics will not be collected for the JSS app.
      For XM (CMS-only) apps, this should be removed.

      VI detection only runs once for a given analytics ID, so this is not a recurring operation once cookies are established.
    */}
    <VisitorIdentification />

    <Navigation />

    {/* root placeholder for the app, which we add components to using route data */}
    <div className="container">
      <Placeholder name="jss-main" rendering={route} />
    </div>
  </React.Fragment>
);

export default Layout;

name: article
displayName: Article
template: ArticlePage
fields:
  articleTitle: My first JSS page
  articleContent: |
    <div>
      <p>This is my first JSS page.</p>
    </div>
# jss-mainプレースホルダーにTopPageContentコンポーネントを登録
placeholders:
  jss-main:
  - componentName: ArticlePageContent