コンテンツを作成し、高度に最適化されたWebサイトを取得します
css
Propとcss
テンプレートタグを使用してMDXにCSSを適用しますNPMまたはYARNを使用して簡単なコマンドを使用してインストールします
yarn add contentz
# npm install contentz
ContentZをインストールした後、簡単なコマンドで使用できます。
contentz build
それはあなたのファイルを読み取り、あなたのためにあなたのウェブサイトを生成します。
config.yml
と呼ばれる構成ファイルを作成します
---
title : Sergio Xalambrí
description : Senior Software Engineer and Technical Writer
domain : https://sergiodxa.com
language : en
repository : https://github.com/sergiodxa/personal-site/
email : [email protected]
patreon : sergiodxa
analytics : UA-XXXXXXXXX-2
social :
twitter : sergiodxa
github : sergiodxa
npm : sergiodxa
linkedin : sergiodxa
dev : sergiodxa
meetup : 182915204
navigation :
- name : About
path : /about
- name : Services
path : /services
オプション | 説明 | 必須 |
---|---|---|
タイトル | <title> およびホームページで使用されるウェブサイトのタイトル | いいえ(デフォルト: Just another Contentz site ) |
説明 | <meta> およびHomepageで使用されるWebサイトの説明 | いいえ(デフォルト:空の説明) |
ドメイン | RSSフィードで使用されるWebサイトをホストするために使用するドメイン | はい |
言語 | 記事やページのフォールバックとして使用されるウェブサイトの主要言語 | いいえ(デフォルト:en) |
リポジトリ | 記事やページのフッターで使用されるWebサイトをホストするGitHubリポジトリ | いいえ(デフォルト:編集へのリンクを非表示) |
メール | ホームページの電子メールアイコンで使用されるメールアドレス | いいえ(デフォルト:アイコンを非表示) |
パトレオン | ホームページとフッターで使用されるパトレオンのユーザー名 | いいえ(デフォルト:Hiden Patreonメッセージ) |
分析 | あなたの分析UA | いいえ(デフォルト:分析を非表示) |
社交 | ホームページにリンクするために使用されるソーシャルネットワークのリスト | いいえ(デフォルト:ソーシャルアイコンを非表示) |
ナビゲーション | ヘッダーにリンクするページのリスト | いいえ(デフォルト:追加のリンクを追加しないでください) |
SW | SW生成を無効にしたい場合はfalse て設定します | いいえ(デフォルト:true) |
増分 | インクリメンタルビルドを無効にしたい場合は、それをfalse として設定します | いいえ(デフォルト:true) |
アイコン | ウェブサイトのファビコンのパスを設定します | いいえ(default: /static/favicon.png ) |
他のソーシャルネットワークの場合、新しいアイコンを使用してPRを送信し、そのアイコンのURLをフォーマットする方法を追加します。
フォルダー/articles
を作成して、 .mdx
ファイルをそこに配置します。ここに投稿の例を示します。
---
title : My super cool article
description : This is the description of the article
date : 2018-01-01T00:00:00.000Z
published : true
---
This is my content, here I could use markdown or import a component and render it.
contentz
実行すると、ホームページ、アーカイブページ、および記事を使用してA /public
Directoryが作成されます。 Archive at /articles/
および各記事As /articles/:article/
、その例では/articles/my-super-cool-article
で表示される場合があります。
カスタムページの場合、A /pages
フォルダーを作成し、 .mdx
ファイルをそこに配置します。例を次に示します。
---
title : About me
---
Hi! I'm an example page.
contentz
実行すると、ホームページとページでA /public
Directoryが作成されます。各ページはpublic
の基本レベルに配置されます。つまり、 /pages/about.mdx
には、ブラウザではなく/pages/about
/about/
arboutにアクセスできることがわかります。
興味深いリンクを共有するページが必要な場合は、プロジェクトのルートでlink.yml
ファイルを作成できます。次に、 contentz
を実行すると、すべてのリンクのリストを使用してA /link/
ページを自動的に生成します。各リンクには、 url
、 title
、 comment
、 date
キーが必要です。例ファイル:
---
- url : https://sergiodxa.com/
title : Sergio Xalambrí
comment : The website of the creator of Contentz
date : 2019-01-28T19:44:10.945Z
- url : https://sergiodxa.dev/
title : sergiodxa.dev
comment : The alias of the website of the creator of Contentz
date : 2019-01-28T19:44:10.945Z
contentzは、 /404.html
でエラーページを自動的に生成します。展開すると、見つかっていないページを/404.html
にリダイレクトできます。
Netlifyに展開すると、そのファイルが自動的にピックアップされます。
ContentzはSWを自動的に生成します。このSWは、すべてのリクエストを自分のWebサイト( location.origin
を使用して)にキャッシュします。別のドメインにリクエストをキャッシュすることはありません。
この動作は無効になる可能性がありsw: false
config.yml
ファイルに追加します。これを追加すると、de sw.js
とload-sw.js
を削除して、キャッシュされたアクセスを避け、 unload-sw.js
ファイルを作成します。
ContentZは、記事のリストで有効なRSSアトムフィードを自動的に生成し、[各ページ]に/atom.xml
に配置され、 <meta>
タグが自動的に追加され、発見可能になります。
画像、ビデオなどなどの静的ファイルにリンクする場合は、 /static
フォルダーを作成し、すべてのファイルをそこに配置します。 content
実行すると、 /public/static
に自動的にコピーされます
MDXコンテンツに直接カスタムスタイルを備えたHTMLタグを追加する場合は、 css
Propと感情のcss
テンプレートタグを使用できます。
例:
< div css = { { color : "red" } } > This is red </ div >
< div css = { css `color: blue` } > This is blue < / div>
ContentZは、どのファイルが変更されたかを検出し、関連ファイルのみを更新します。これは、新しいリンクのみ/link/
追加すると再生される場合を意味しますが、記事を記事のページを変更すると、記事とRSSフィードのリストが再生されます。
構成を更新する場合、またはContentZバージョンを更新する場合、すべてのページが再生されます。
この機能をオプトアウトする場合は、 config.yml
のincremental: false
を設定します。これにより、以前のキャッシュが自動的に無効になり、常にすべてのページが生成されます。
Contentzは、記事やページで使用できるソーシャルイメージ(別名オープングラフ)を自動的に生成することもできます。使用するには、コマンドを実行します。
contentz social [path]
ここで、 [path]
ソーシャルイメージを生成するために使用するファイルです。また、それらの間にスペースを追加する複数のファイルがある場合があります。
contentz social [path1] [path2]
パスは、記事、投稿、または自動生成されたページの1つのパスになる可能性があります。
最初に実行したい場合
contentz social home articles links error
ソーシャルイメージを生成した後、 _social
にフォルダー/static/_social
が表示されます。ページは/static/_social/pages
と/static/_social/article
に配置されます。
contentzは、Webサイトの固定されたテキストのためにi18nを箱から出してサポートします。これは、PatreonサポートやGithubでの編集などのテキストです。あなたのウェブサイトの主要な言語を変更するには、キーlanguage
またはlang
(言語が好ましい)を言語コードに設定します。
サポートされている言語は、スペイン語のes
であり、英語のen
(無効な言語コードの場合は英語にデフォルト)です。
言語がサポートされていない場合は、メッセージを含むJSONを追加し、i18n libにロードします。次に、PRを送信して追加します。