コンテンツを作成し、高度に最適化された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を送信して追加します。