serious
v1.2.2
Serious는 웹용 에피소드(또는 연재) 소설을 구축하기 위한 프레임워크입니다. 마크다운 형식으로 작성된 여러 소스 파일을 사용하여 이러한 파일을 간단하고 구조화된 단일 페이지 웹 앱으로 컴파일하여 웹 호스트에 배포합니다.
MIT 라이센스.
NPM을 통해 설치: npm install -g serious-fiction
Serious를 설치하면 간단한 CLI에 액세스하여 스토리를 작성할 수 있습니다. 저는 CLI 작성이 처음이므로 기대만큼 완전한 기능을 갖춘 경험이 아닐 수도 있습니다.
이상적으로는 빈 디렉터리에 스토리를 만드는 것이 좋습니다. 시작하려면 디렉토리에서 serious init 실행하세요.
serious build 실행하여 스토리를 재구성하고, serious serve 실행하여 로컬에서 확인하세요. 이 두 명령(예: serious build serve 또는 serious serve build )을 결합하여 스토리를 빠르게 빌드하고 볼 수 있습니다. 웹 사이트를 다시 제공할 필요 없이 업데이트를 보려면 serious build 실행하고 브라우저 탭을 새로 고칠 수도 있습니다(때로는 Ctrl + F5 로 강제 새로 고쳐야 할 수도 있음).
Serious는 AJAX를 사용하므로 localhost를 통해 제공해야 하며 index.html 파일만 열 수는 없습니다.
serious init 실행하면 config.json 파일이 디렉터리에 추가됩니다. 앞으로는 이 부분을 CLI로 만들고 싶지만 지금은 직접 편집해야 합니다. 기본적으로 다음과 같습니다.
{
"title" : " The Title of Your Story " ,
"displayTitle" : " " ,
"subtitle" : " " ,
"description" : " A description of your website (for web searches) goes here. " ,
"copyright" : " © [year] [your name]. All rights reserved. " ,
"posts" : " episodes " ,
"input" : " ./src " ,
"output" : " ./publish " ,
"links" : [
{ "text" : " Website " , "url" : " https://twinelab.net " , "label" : " Learn more about Serious. " },
{ "text" : " Blog " , "url" : " https://twinelab.net/blog " , "label" : " Visit my blog. " }
],
"recentMax" : 5 ,
"recentsExcerpts" : 1 ,
"episodesExcerpts" : 3 ,
"debug" : false ,
"disqusShortname" : " " ,
"googleAnalytics" : " " ,
"cookieWarning" : true ,
"nswf" : false ,
"version" : " latest "
}| 옵션 | 기본 | 설명 |
|---|---|---|
title | "The Title of Your Story" | 이것이 당신의 이야기의 이름입니다. 최근 에피소드 페이지와 에피소드 목록 페이지, 브라우저 탭에 표시됩니다. Disqus 댓글은 제목에 맞춰져 있으므로 제목을 변경하고 싶지 않을 것입니다. |
displayTitle | "" | 여기에 인용문 사이에 무언가를 넣으면 Disqus 댓글을 제외한 스토리의 모든 부분에서 제목이 대체됩니다. |
subtitle | "" | 일부 페이지에서는 메인 스토리 제목 아래에 표시됩니다. 작성자 이름, 부제 또는 매우 짧은 설명으로 사용할 수 있습니다. |
description | "A description of your website (for web searches) goes here. | 여기에 입력한 내용은 어떤 페이지에도 표시되지 않고 대신 검색 엔진이나 소셜 미디어 사이트와 같은 일부 웹사이트에 스토리 링크와 함께 나열됩니다. |
copyright | "© [year] [your name]. All rights reserved." | 저작권 표시는 모든 페이지의 맨 아래, "Powered by Serious." 메시지는. 저작권 정보를 위해 반드시 이를 사용할 필요는 없습니다. © ©(저작권 기호)의 HTML 코드입니다. |
posts | "episodes" | 이 옵션을 사용하면 에피소드 게시물을 참조하는 데 사용되는 단어를 변경할 수 있으므로 필요에 따라 "chapters" 또는 "verses" 와 같은 다른 단어로 변경할 수 있습니다. |
input | "./src" | 이는 config.json 기준으로 게시물을 찾을 위치를 Serious에게 알려줍니다. 폴더를 전달하면 게시물로 변환할 마크다운 파일( .md 확장자를 가짐)을 재귀적으로 검색합니다. 일반적으로 이를 변경할 필요는 없으며 모든 게시물을 src 폴더에 배치하면 됩니다. |
output | "./publish" | 위와 유사하게 이것은 구축된 웹 페이지를 어디에 배치하고 어디서 실행할 것인지를 Serious에게 알려줍니다. 다시 말하지만, 일반적으로 이를 변경할 필요는 없습니다. |
links | ... | 이 옵션을 사용하여 사이드바 메뉴에 링크를 추가할 수 있습니다. 각 링크는 다음과 같아야 합니다. { "text": "Click here", "url": "www.somesite.com", "label": "this is a tooltip!" } . text 속성은 링크의 표시 텍스트를 제어하며, url 클릭 시 링크가 이동하는 위치입니다. label 속성은 사용자가 링크 위에 마우스를 올리면 도구 설명으로 표시됩니다( title html 속성 사용). 이를 사용하여 개인 블로그, 기본 웹사이트, Patreon 등에 대한 링크를 만들 수 있습니다. |
recentMax | 5 | 이는 최근 페이지(및 랜딩 페이지)에 몇 개의 심각한 에피소드가 표시되는지 제어합니다. |
recentsExcerpts | 1 | 이는 최근 목록에 콘텐츠가 표시되는 에피소드 수를 제어합니다. 표시되지 않은 항목은 대신 타원(&helli;)을 표시합니다. 모든 콘텐츠를 표시하려면 이것을 recentMax 와 같거나 높게 설정하세요. |
episodesExcerpts | 3 | recentsExcerpts 와 유사하게 에피소드 목록에 콘텐츠가 표시되는 에피소드 수를 제어합니다. |
debug | false | 그러면 콘솔 로그 및 기타 항목을 포함한 디버그 기능이 활성화됩니다. 일반적으로 대부분의 사용자에게는 필요하지 않습니다. 아마도 배포하기 전에 그것이 거짓인지 확인하십시오. |
disqusShortname | "" | Disqus를 통해 댓글을 설정할 수 있습니다. 댓글 스레드는 모든 에피소드에 추가되지만 메타 게시물, 목록 등에 추가되지는 않습니다. 여기에 짧은 이름만 추가하면 추가 구성이 필요하지 않습니다! |
googleAnalytics | "" | 심각한 이야기에 대해 Google Analytics를 설정할 수 있습니다. 계정을 만들고 사이트 URL을 입력한 후 여기에 추적 ID를 복사하여 붙여넣으면 됩니다. |
cookieWarning | true | 쿠키 동의로 생성된 쿠키 동의 경고를 프로젝트에 추가합니다. 자신만의 솔루션이 있거나 상관하지 않는 경우 이를 false로 설정할 수 있습니다. Serious 자체는 쿠키를 사용하지 않으며 Disqus 및/또는 Google Analytics를 사용하는 경우에만 쿠키가 필요합니다. |
nsfw | false | true인 경우 사용자에게 연령 확인을 요청하는 전체 화면 경고 대화 상자를 추가하며 기본값은 18세 이상입니다. 값을 숫자(예: 13 또는 21 로 변경하여 사용자에게 다른 연령 이상인지 확인하도록 요청할 수 있습니다. 확인하고 싶습니다. |
version | "latest" | 포함할 Serious의 렌더링 엔진 버전입니다. "최신"을 권장하지만, 다른 버전을 사용해야 하는 경우 여기에 태그할 수 있습니다. 버전 목록은 아래 변경 로그를 참조하세요. |
GitHub Flavored Markdown을 사용하여 에피소드를 작성할 수 있습니다. 각 에피소드 상단에는 에피소드를 설명하는 YAML 머리말이 있어야 합니다.
---
title: Example Episode
subtitle: Serious Examples for Serious People
episode: 1
description: Welcome to Serious!
---
This is an **example episode**!
Welcome to Serious. To create episodes, you create a heading block like the one at the top of this file, then write your *markdown format content* after that.
| 매개변수 | 설명 |
|---|---|
| 제목 | 에피소드 제목입니다. 필수의. |
| 부제 | 에피소드의 자막입니다. 선택 과목. |
| 삽화 | 에피소드 번호입니다. 필수의. 아래에서 자세한 내용을 확인하세요. |
| 설명 | 에피소드에 대한 간략한 설명입니다(발췌 제외). 필수는 아니지만 권장됩니다. |
에피소드 번호를 매길 때 1부터 시작하고 (0부터 시작하지 마세요. 오류가 발생합니다.) 숫자를 두 배로 늘리지 마세요(또한 오류가 발생합니다). 에피소드도 드물어서는 안 됩니다. 에피소드 1과 에피소드 3이 있으면 에피소드 2도 있어야 합니다. 이로 인해 오류가 발생하지는 않지만 생성된 웹 사이트가 손상될 수 있습니다.
"메타" 게시물은 일반적인 에피소드 구조 외부에 존재하는 특수 게시물입니다. 정보 페이지, 요약 등과 같은 메타 게시물은 자동으로 사이드바에 링크로 추가됩니다. 이 링크를 클릭하면 메타 포스트가 렌더링됩니다. 하나를 만들려면 머리말의 episode 매개변수가 숫자가 아닌 meta 인지 확인하세요. 사이드바 링크 텍스트를 변경하는 데 사용할 수 있는 추가 link 매개변수도 있습니다. link 매개변수가 제공되지 않으면 title 대신 사용됩니다. link 매개변수를 _ (단일 밑줄)로 설정하면 사이드바 링크가 전혀 생성되지 않습니다.
---
title: About My Story
link: About
label : Learn more...
subtitle: This is a meta post!
episode: meta
description: Meta posts are awesome!
---
By creating a post and making it's episode property in the header `meta` instead of a number, you can create a *meta post*, which will automatically appear as a link in the sidebar.
label 매개변수는 사이드바에 생성된 링크에 제목 속성(및 "도구 설명")을 추가합니다.
메타 포스트의 매개변수는 일반 에피소드와 동일합니다. 메타 게시물의 제목은 고유해야 합니다. 에피소드에는 이러한 제한이 없습니다(현명하긴 하지만).
다음과 같은 링크를 생성하여 특정 에피소드에 대한 마크다운 링크를 생성할 수 있습니다.
[Last week](./?ep=10) our heroes...
위의 내용은 에피소드 10에 대한 링크를 생성합니다. 메타 게시물에 대한 링크를 생성하려면 정규화되고 슬러그화된 제목을 알아야 합니다(예: 잘림, 소문자, 문자가 아닌 모든 값과 숫자가 아닌 값은 다음으로 대체됨). 대시). 예를 들어, title 매개변수가 ' About '이면 ./?meta=about 이 되고, Where is This Going? ./?meta=where-is-this-going- 이 됩니다.
웹 사이트를 배포하려면 출력 폴더(기본적으로 publish )의 모든 항목이 필요합니다. 배포할 호스팅 솔루션에 모든 파일을 복사합니다.
내가 만든 일부 CSS 테마.
출력 디렉터리에 있는 theme.css 파일을 편집하여 테마를 생성할 수 있습니다. 기본값을 복원하거나 파일을 삭제하여 다시 시작할 수 있습니다. 다음에 빌드할 때 비어 있는 새 theme.css 파일이 생성됩니다. 동일한 파일을 덮어써서 테마를 다운로드하고 설치할 수 있습니다.
현재 이 프로젝트에는 세 가지 주요 구성 요소가 있습니다: Serious CLI인 NPM 패키지; CDN을 통해 생성된 웹앱에 제공되는 렌더링 엔진, 스크립트 및 스타일의 저장소 그리고 내가 만든 테마에 대한 저장소입니다. 이러한 모든 구성 요소는 약간의 정리 작업과 관련이 있지만 요점은 이 세 가지가 동시에 개발되고 있지만 기능적으로 서로 거의 관련이 없다는 것입니다.
nsfw 구성 설정을 추가했습니다.
