컨텐츠를 만들고 최적화 된 웹 사이트를 얻으십시오
css
Prop 및 css
템플릿 태그를 사용하여 MDX에 CSS를 적용하십시오.간단한 명령으로 NPM 또는 원사를 사용하여 설치하십시오.
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> 및 홈페이지에 사용 된 웹 사이트의 설명 | 아니오 (기본값 : 빈 설명) |
도메인 | RSS 피드에 사용되는 웹 사이트를 호스팅하는 데 사용할 도메인 | 예 |
언어 | 웹 사이트의 주요 언어는 기사 및 페이지의 폴백으로 사용됩니다. | 아니요 (기본값 : en) |
저장소 | 기사 및 페이지의 바닥 글에 사용되는 웹 사이트를 호스팅하는 Github 저장소 | 아니오 (기본값 : 편집 링크 숨기기) |
이메일 | 홈페이지의 이메일 아이콘에 사용되는 이메일 주소 | 아니오 (기본값 : 아이콘 숨기기) |
패트리온 | 홈페이지와 바닥 글에 사용되는 Patreon 사용자 이름 | 아니오 (기본값 : Hiden Patreon 메시지) |
해석학 | 귀하의 분석 UA | 아니오 (기본값 : 분석 숨기기) |
사회의 | 홈페이지에 연결하는 데 사용되는 소셜 네트워크 목록 | 아니오 (기본값 : 소셜 아이콘 숨기기) |
항해 | 헤더에서 링크 할 페이지 목록 | 아니오 (기본값 : 추가 링크를 추가하지 마십시오) |
SW | SW 생성을 비활성화하려면 false 로 설정하십시오. | 아니요 (기본값 : True) |
증분 | 증분 빌드를 비활성화하려면 false 로 설정하십시오. | 아니요 (기본값 : True) |
상 | 웹 사이트의 Favicon 경로를 설정하십시오 | 아니오 (기본값 : /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
실행하면 홈페이지, 아카이브 페이지 및 기사가 포함 된 /public
디렉토리를 만듭니다. /articles/
at /articles/:article/
at /articles/my-super-cool-article
에서 아카이브에 액세스 할 수 있습니다.
사용자 정의 페이지의 경우 /pages
폴더를 작성하고 .mdx
파일을 거기에 넣으십시오. 예제 페이지가 있습니다.
---
title : About me
---
Hi! I'm an example page.
이제 contentz
실행하면 홈페이지 및 페이지가 포함 된 /public
디렉토리를 만듭니다. 각 페이지는 public
의 기본 레벨에 놓여 지므로 /pages/about.mdx
에 /pages/about
/about/
에 액세스 할 수 있습니다.
흥미로운 링크를 공유 할 페이지가 있으시면 프로젝트의 루트에서 link.yml
파일을 만들 수 있습니다. 그런 다음 contentz
실행하면 모든 링크 목록으로 자동으로 A /link/
Page를 생성합니다. 각 링크에는 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
에서 오류 페이지를 자동으로 생성합니다. 배포 할 때 찾을 수없는 페이지를 reidirect /404.html
로 리디렉션 할 수 있습니다.
NetLify에 배포되면 해당 파일을 자동으로 선택합니다.
Contentz는 귀하를 위해 SW를 자동으로 생성합니다.이 SW는 모든 요청 ( location.origin
사용)에 모든 요청을 캐시합니다. 다른 도메인에 대한 요청을 캐시하지 않습니다.
이 동작은 config.yml
파일에 sw: false
추가하는 데 비활성화 될 수 있습니다. 이 추가하면 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는 또한 기사와 페이지에 사용할 소셜 이미지 (일명 Open Graph)를 자동으로 생성 할 수 있습니다. 사용하려면 명령을 실행합니다.
contentz social [path]
여기서 [path]
는 소셜 이미지를 생성하는 데 사용하는 파일입니다. 또한 파일 사이에 공간을 추가하는 파일 이상이 될 수도 있습니다.
contentz social [path1] [path2]
경로는 기사, 게시물 또는 자동 생성 된 페이지 중 하나의 경로가 될 수 있습니다.
처음에 실행하려는 경우
contentz social home articles links error
소셜 이미지를 생성 한 후 이미지와 함께 폴더 /static/_social
표시되면 페이지가 /static/_social/pages
/static/_social/article
에있는 기사가 배치됩니다. 특수 페이지는 _social
의 근본에 있습니다.
ContentZ는 웹 사이트의 고정 텍스트, Patreon 지원과 같은 텍스트 또는 GitHub의 편집에 대해 i18N을 지원합니다. 웹 사이트의 기본 언어를 변경하려면 주요 language
또는 키 lang
(언어)을 언어 코드로 설정합니다.
지원되는 언어는 스페인어에 대한 es
이고 영어 (잘못된 언어 코드의 경우 영어로 en
)입니다.
언어가 지원되지 않으면 메시지와 함께 JSON을 추가하여 i18n lib에로드하십시오. 그런 다음 PR을 보내서 추가하십시오.