refo
1.0.0
최신 웹을 위한 웹사이트 템플릿입니다.
강력한 개발자 경험이 가벼운 출력을 충족합니다.
유연성을 갖춘 손쉬운 정적 사이트 생성
정적 사이트 생성기 환경에 압도당하시나요? Refo는 전적으로 Node.js를 기반으로 구축된 매우 간단하고 사용자 정의 가능한 접근 방식을 제공합니다.
Jekyll, Gatsby, Astro 등과 달리 Node.js 모듈의 기능을 직접 활용할 수 있습니다. 즉, 즐겨 사용하는 Node.js 라이브러리와 서버의 유연성을 활용하여 상상할 수 있는 모든 종류의 웹사이트를 생성할 수 있습니다.
주요 이점:
SVG 를 가져오고, raw 가져오기를 활용하고, 구성 요소의 style 쉽게 지정할 수 있습니다.기존 정적 사이트 생성기의 한계를 뛰어넘으세요. 다음 프로젝트를 위해 Refo의 강력함과 유연성을 활용해 보세요!
️ 우리의 일을 응원해주는 스타!
이메일을 통해 새 릴리스에 대한 알림을 받으세요.
raw 수입품a , b , c , ..., aa , ab , ...)development 모드의 클래스 이름 레이블JSON 파일의 문자열에 대한 Markdown 지원PDF 생성 
크롬 파인더를 갖춘 인형극 JSON 파일로 편집하세요.PDF , HTML document 또는 웹사이트의 페이지로 보고 게시하세요.HTML 및 CSS 사용하여 이력서 레이아웃을 디자인하고 사용자 정의합니다.Letter 및 A4 와 같은 다양한 형식을 지원하는 하나 이상의 PDF 를 생성합니다.PDF 보려면 변경 사항을 저장한 후 PDF 새로 고치세요. 종속성을 설치합니다.
pnpm install
일종의 Unix 기반 시스템을 사용하고 있습니까? 스코틀랜드 사람? 리눅스? 그렇다면 Windows에서 작동하는
80으로 설정된index모듈의port변경할 수 있습니다. Superstatic의 기본값은3474이므로 원하는 경우 제거할 수 있습니다.
개발 모드에서 서버를 시작합니다.
pnpm dev
웹사이트에 접속하려면 http://localhost/를 방문하세요.
정적 사이트 생성:
pnpm static 웹 사이트에 액세스하려면 static 폴더 내의 index.html 엽니다.
import | 생성된 파일 | |
|---|---|---|
| 색인/ | static / | |
• favicon .ico (아이콘 file (Node.js 모듈)) | • 파비콘 .ico | |
• main .js .js (Node.js module ) | → | • 메인 .js |
• 인덱스 .html .jsx (Node.js module ) | • 색인 .html | |
firebase .json .js (Node.js module ) | 파이어베이스 .json |
가져온
file(특정 파일 확장자(ico,png))(Node.js) 모듈)은 모듈이 로드될 때 파일 자체를static폴더에 복사합니다. 모듈 재로드 모드에서는 더 이상 가져오지 않으면 제거합니다.
(Node.js)
module의defaultexport(기본 파일 이름에 특정 파일 확장자(js,json,html)가 있음)는 출력 파일의 내용으로static폴더에 기록됩니다. 출력 파일의 전체 파일 이름은 (Node.js)module의 기본 파일 이름입니다.
️ 우리의 일을 응원해주는 스타!
index .html .jsx ( import 오기 module ):
import template from '#@SolidJS/template'
import use from '#@style'
const [ { styled } , extract ] = use ( )
const Body = styled . body `
font-weight: bold;
`
export default < >
{ template ( `<!DOCTYPE HTML>` ) }
< html lang = "en" >
{ template ( `<head>` ) }
< style > { extract ( ) } </ style >
{ template ( `</head>` ) }
< Body >
example content
</ Body >
</ html >
</ > .html (생성된 파일):
<!DOCTYPE HTML > < html lang = en > < head > < style > .a{font-weight:700} </ style > </ head > < body class = a > example content </ body > </ html > 정적 docs 폴더를 그대로 배포할 수 있습니다.
project site 저장소의 이름에 따라 다음 파일의 prefixum 변경할 수 있습니다: index/index/site/ main/
index/resume/index/index user or an organization site 게시하는 경우 prefixum 완전히 제거할 수 있습니다.
prefixum 제거합니다..firebaserc 파일을 추가합니다. {
"projects" : {
"default" : " <projectId> "
}
}Firebase 호스팅에 사이트를 배포합니다.
pnpm deploy
이력서 템플릿을 분리하여 새로운 Refo 패키지로 게시하는 것이 유용할 수 있습니다.
그렇게 생각하시면 새로운 이슈를 열어서 이에 대해 논의해 봅시다. 이것이 유용하다고 판명되면 우리는 이것을 확실히 구현할 수 있습니다.
이 예에서는 Refo의 JSON 핸들러를 사용합니다. 따라서 JSON 핸들러 사용법 섹션에 있는 Refo의 추가 정보에 설명된 대로 index/index/site/index/resume/data.js 파일에서 특정 속성이 표시되는 방법과 표시 여부를 제어할 수 있습니다.
이 프로젝트에서는 생성된 정적 파일을 제공하기 위해 superstatic을 사용합니다. 파일을 직접 탐색하려는 경우 유사한 라이브러리를 사용하여 파일을 제공하거나 라이브러리를 전혀 제공하지 않을 수 있습니다. 예를 들어 이는 오프라인 문서에 유용할 수 있습니다.
원하는 경우 superstatic을 제거하고 대신 (superstatic을 사용하는) firebase-tools를 사용할 수 있습니다. 이 경우 package.json 파일의 scripts 수정하고 superstatic firebase serve 명령어로 바꿀 수 있습니다.
이 프로젝트는 동시에 Refo를 감시 모드로 실행하고 초정적으로 파일을 제공하는 데 사용됩니다. npm-run-all과 같은 유사한 라이브러리를 사용하여 Refo와 서버를 병렬로 실행하거나 파일 서버가 필요하지 않은 경우 라이브러리를 전혀 실행할 수 없습니다.
원하는 경우 firebase.json 파일 이름을 superstatic.json 으로 지정할 수 있습니다. 이 템플릿은 Firebase 자체에 의존하지 않습니다. 그러나 지속적으로 가장 빠른 정적 호스팅 솔루션 중 하나를 제공합니다.
JavaScript 템플릿 리터럴은 HTML 문서 템플릿에 사용됩니다.
이 예에서는 또한 특정 템플릿에서 공통 태그를 사용하여 많은 경우에 더 짧은 구문을 사용할 수 있습니다.
이 예에서 일반적으로 사용되는 몇 가지 시나리오는 다음과 같습니다.
기본적으로 선택적 값을 표시하고 조건부 연산자를 사용하여 undefined 과 같은 거짓 값이 표시되는 것을 방지할 수 있습니다. 예를 들면 다음과 같습니다.
module . exports = `
${ item ? item : '' }
`Common-tags가 이 작업을 수행합니다. 따라서 태그가 지정된 템플릿 리터럴과 함께 더 짧은 구문을 사용할 수 있습니다.
const { html } = require ( 'common-tags' )
module . exports = html `
${ item }
` 기본적으로 선택적 템플릿 부분을 표시하고 조건부 연산자를 사용하여 undefined 같은 잘못된 값이 표시되는 것을 방지할 수 있습니다. 예를 들면 다음과 같습니다.
module . exports = `
${ item ? `
<div>
` + item + `
</div>
` : '' }
`공통 태그를 사용하면 논리 연산자와 함께 간단한 조건을 사용하여 동일한 결과를 얻을 수 있습니다.
const { html } = require ( 'common-tags' )
module . exports = html `
${ item && `
<div>
` + item + `
</div>
` }
` 기본적으로 반환된 항목 사이에 쉼표가 표시되는 것을 방지하기 위해 항목 배열을 반복할 때 결과를 join 할 수 있습니다.
module . exports = `<section>
${ items . map ( item => `
<div>
${ item }
</div>
` ) . join ( '' ) }
</section>`Common-tags가 이 작업을 수행합니다. 따라서 더 짧은 구문을 사용할 수 있습니다.
const { html } = require ( 'common-tags' )
module . exports = html ` < section >
${ items . map ( item => `
<div>
${ item }
</div>
` ) }
</ section > ` 공통 태그 또는 유사한 라이브러리와 함께 태그된 템플릿 리터럴을 사용하지 않는 경우 원하는 경우 템플릿 부분을 + 연산자로 연결할 수 있습니다.
module . exports = `
<div>
` + item + `
</div>
` 또는 대신 ${expression} 구문과 함께 자리 표시자를 사용할 수 있습니다.
module . exports = `
<div>
${ item }
</div>
`어떤 경우에는 이들 중 하나가 다른 것보다 읽기 쉬울 수 있으므로 상황에 따라 스타일을 사용하거나 다른 것보다 하나를 선택하고 일관성을 유지할 수 있습니다. 이 예에서는 두 가지를 모두 사용합니다.
예를 들어 Atom 및 GitHub와 같은 일부 코드 편집기는 위에서 볼 수 있듯이 html 태그가 지정된 템플릿 리터럴을 HTML로 강조 표시합니다.
Preferencies / Package Settings / JS Custom / Settings 으로 이동합니다.JS Custom.sublime-settings — User 파일을 편집합니다. {
"configurations" : {
"jsx" : true
, "custom_templates" : {
"styled_components" : true
, "lookaheads" : {
" \ <" : " scope:text.html.basic "
, " \ .|height|padding|margin" : " scope:source.js.css "
, "import|minify|await|export|if|window| \ (|," : " scope:source.js "
}
, "tags" : {
"injectGlobal" : " scope:source.js.css "
, "css" : " scope:source.js.css "
, "html" : " scope:text.html.basic "
}
}
}
} 이제 JavaScript 파일에 대해 JS Custom - Default 구문 강조 옵션을 사용할 수 있습니다.
JSON 핸들러는 독립형 패키지입니다. 주로 이력서 관련 데이터를 처리하는 데 유용하지만 다른 용도로도 사용할 수 있습니다.
예제(asset/resume/getHandledJson.js)에서 볼 수 있듯이 이를 사용할 수도 있습니다.
const handleJSON = require ( 'refo-handle-json' )
var json = JSON . parse ( JSON . stringify ( require ( './data' ) ) )
json = handleJSON ( json ) 예를 들어 watch 모드(관련 주석)에서 Refo를 사용할 때 JSON.parse(JSON.stringify(json)) 함수를 사용하여 필수 JSON의 복사본을 생성하는 것이 좋습니다. JSON 처리기가 개체 속성을 변경하기 때문입니다.
JSON 처리기는 markdown-it을 사용하여 문자열 개체 값을 Markdown 으로 구문 분석합니다. 예: example/asset/resume/data.json#L7
-private 로 끝나는 속성은 다음과 같습니다. 제거됨 . 예: example/asset/resume/data.json#L4
private 이라는 속성을 가진 객체도 제거됩니다.
-full 로 끝나는 속성은 두 번째 참값 매개변수가 핸들러 함수에 전달될 때만 포함됩니다. 예: example/asset/resume/data.json#L8, example/asset/resume/getHandledJson.js#L9
full 이라는 속성을 가진 객체는 두 번째 참값 매개변수가 핸들러 함수에 전달될 때만 포함됩니다.
객체에 endDate 속성 없이 startDate 속성이 포함된 경우 hidePresent 속성을 사용하여 현재 레이블을 숨기고 대신 현재 연도를 표시할 수 있습니다.
hideEndDate 속성을 사용하면 현재 레이블 대신 표시된 현재 연도를 숨길 수 있습니다.
hideDuration 속성을 사용하여 계산된 기간을 숨길 수 있습니다. 그렇지 않은 경우 duration 속성은 계산된 기간(예: 7개월, 1년, 1.5년, 2년)으로 정의됩니다.
각 Refo 패키지에 대한 심층적인 문서를 작성하는 것이 유용할 수 있습니다.
그렇게 생각하시면 새로운 이슈를 열어서 이에 대해 논의해 봅시다. 이것이 유용하다고 판명되면 우리는 이것을 확실히 구현할 수 있습니다.
여기에 프로젝트를 추가하려면 파일 변경을 제안하세요.
이력서 + 포트 폴리오 = Refo
