refo
1.0.0
Шаблон сайта для современной сети.
Мощный опыт разработчика и легкий результат.
Легкое создание статических сайтов с гибкостью
Чувствуете себя подавленным статическим генератором сайтов? Refo предлагает удивительно простой и настраиваемый подход, полностью построенный на Node.js.
В отличие от Jekyll, Gatsby, Astro и других, мы позволяем вам напрямую использовать возможности модулей Node.js. Это означает, что вы можете создать любой веб-сайт, который только можете себе представить, используя гибкость ваших любимых библиотек и серверов Node.js.
Ключевые преимущества:
SVG , используйте raw импорт и с легкостью style свои компоненты.Выйдите за рамки ограничений традиционных генераторов статических сайтов. Используйте мощь и гибкость Refo для своего следующего проекта!
‼️Звездочка поддержит нашу работу!
Получайте уведомления о новых выпусках по электронной почте.
rawa , b , c ,..., aa , ab ,...)development с использованием stack-tracerMarkdown для строк в файлах JSON с помощью markdown-itPDF с использованием 
Кукольник с хромоискателем JSON .PDF , HTML document или страницы на веб-сайте.HTML и CSS .PDF файлов, поддерживающих различные форматы, такие как Letter и A4 .PDF после сохранения изменений, чтобы просмотреть обновленный PDF . Установите зависимости:
pnpm install
Вы используете какую-то систему на базе Unix? Мак? Линукс? В этом случае вы можете изменить
portвindexмодуле, для которого установлено значение80, которое работает в Windows. Значение по умолчанию в Superstatic —3474поэтому вы можете удалить его, если хотите.
Запустите сервер в режиме разработки:
pnpm dev
Посетите http://localhost/, чтобы получить доступ к веб-сайту.
Создайте статический сайт:
pnpm static Откройте index.html в static папке, чтобы получить доступ к веб-сайту.
import | сгенерированный файл | |
|---|---|---|
| индекс/ | static / | |
• favicon .ico ( file значков (модуль Node.js)) | • значок .ico | |
• основной .js .js ( module Node.js) | → | • основной .js |
• индекс .html .jsx ( module Node.js) | • индекс .html | |
firebase .json .js ( module Node.js) | .json |
Импортированные файлы
file(которые имеют определенное расширение файлов (ico,png)) (Node.js)) сами копируют файлы вstaticпапку при загрузке модулей. В режиме перезаписи модулей они удаляются, если они больше не импортируются.
exportmodule(Node.js)default(которые имеют определенное расширение файла (js,json,html) в базовом имени файла) записываются как содержимое выходных файлов (вstaticпапку). Полные имена выходных файлов — это базовые имена файловmodule(Node.js).
‼️Звездочка поддержит нашу работу!
.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 как есть.
Возможно, вы захотите изменить prefixum в следующих файлах в соответствии с именем репозитория project site : index/index/site/ main/
index/resume/index/index Вы можете полностью удалить prefixum , если публикуете user or an organization site .
prefixum из файлов, перечисленных выше в разделе «Развертывание страниц GitHub»..firebaserc с идентификатором вашего проекта Firebase: {
"projects" : {
"default" : " <projectId> "
}
}Разверните свой сайт на хостинге Firebase:
pnpm deploy
Может быть полезно отделить шаблон резюме и опубликовать его как новый пакет Refo.
Если вы так считаете, откройте новый вопрос и давайте обсудим это. Мы определенно сможем реализовать это, если это окажется полезным.
В этом примере используется обработчик JSON Refo. Таким образом, вы можете контролировать, как и будут ли отображаться определенные свойства из файла index/index/site/index/resume/data.js, как описано в файле readme Refo в разделе «Использование обработчика JSON».
Этот проект использует суперстатику для обслуживания сгенерированных статических файлов. Вы можете использовать любую аналогичную библиотеку для обслуживания файлов или вообще не использовать библиотеку, если хотите просматривать файлы напрямую. Это может быть полезно, например, для автономной документации.
Если хотите, вы можете удалить суперстатику и вместо этого использовать firebase-tools (который использует суперстатику). В этом случае вы можете изменить scripts в файле package.json и заменить 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 "
}
}
}
} Теперь вы можете использовать опцию подсветки синтаксиса JS Custom - Default для файлов JavaScript.
Обработчик JSON — это отдельный пакет. В основном он полезен для обработки данных, связанных с резюме, но вы можете использовать его и для чего-то еще.
Вы также можете использовать его, как показано в примере (asset/resume/getHandledJson.js):
const handleJSON = require ( 'refo-handle-json' )
var json = JSON . parse ( JSON . stringify ( require ( './data' ) ) )
json = handleJSON ( json ) Рекомендуется создать копию необходимого JSON с помощью функций JSON.parse(JSON.stringify(json)) например, когда вы используете Refo в режиме watch (связанный комментарий), поскольку обработчик JSON меняет свойства объекта.
Обработчик JSON анализирует значения строкового объекта как Markdown используя markdown-it. Пример: 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 включаются только тогда, когда второй параметр истинного значения передается функции-обработчику.
Если объект содержит свойство startDate без свойства endDate , то hidePresent можно использовать, чтобы скрыть текущую метку и вместо этого отобразить текущий год.
Свойство hideEndDate можно использовать, чтобы скрыть текущий год, отображаемый вместо текущей метки.
Свойство hideDuration можно использовать, чтобы скрыть рассчитанную продолжительность. В противном случае свойство duration определяется с рассчитанной продолжительностью (примеры: 7 месяцев, 1 год, 1,5 года, 2 года).
Может быть полезно создать подробную документацию по каждому пакету Refo.
Если вы так считаете, откройте новый вопрос и давайте обсудим это. Мы определенно сможем реализовать это, если это окажется полезным.
Предложите изменить файл, чтобы добавить сюда свой проект.
Резюме + порт fo lio = Refo
