一个有组织的110个样板,可以使您快速运行。功能标题,本机JSX通过preaxct,带有SASS的CSS模块,一个定义的WebPack配置,用于出色的DX,并且全部预先优化以进行性能。
演示:https://11tyby.netlify.app/
使用必要的工具来处理打字条,JSX,动态导入,SASS等进行设置。该项目还具有部分水合,以减少运送给用户的代码量。
该项目是通过模块模式构成的,文件是通过功能分组的,例如./src/modules/home
。这使您可以更好地证明应用程序的增长,并将代码定位在需要的位置。您的页面*.11ty.tsx
文件位于其相关功能文件夹中,并导出permalink
属性供您定义其URL结构,例如:
module . exports = {
render : Page ,
data : ( ) => ( {
permalink : '/my-feature/index.html' ,
} ) ,
} ;
11tyby是预设的,并支持CSS模块和SASS。您有两种选择可以导入全球或本地化的样式。要将SASS或CSS文件转换为CSS模块,您需要在文件中应用.module
后缀,例如login.module.css
。然后,您可以将其直接导入到一个组件中:
import style from './login.module.scss' ;
/*[...]*/
function Login ( ) {
return < form class = { style . form } > /*[...]*/ </ form > ;
}
要在全球导入样式,只需将非返回导入语句添加到您希望从中加载的文件中,例如:
import './global.css' ;
/*[...]*/
要将生成的样式表应用于页面,您需要在从您的*.11ty.tsx
文件导出的数据对象中添加cssPath
属性,例如:
function Page ( ) {
return < main class = { style . wrapper } > { /*[...]*/ } </ main > ;
}
/*[...]*/
module . exports = {
render : Page ,
data : ( ) => ( {
permalink : 'index.html' ,
cssPath : 'login/login.11ty.css' , // <----
} ) ,
} ;
该路径将匹配相应的模块文件夹,该名称将映射您的*.11ty.tsx
文件名但带有CSS扩展名的名称。
11tyby包括用于应用部分水合的软件包。这是一个事件,将您希望在客户端保湿的组件包装。您可以按以下方式应用:
import { define } from 'preactement' ;
/*[...]*/
function MainForm ( ) {
return < form > /*[...]*/ </ form > ;
}
/*[...]*/
const Form = define ( 'main-form' , ( ) => MainForm ) ;
/*[...]*/
export { Form } ;
建议您在自己的文件夹中创建组件,并将此功能应用于index.ts
文件中。这样,您可以在运行时与组件本身分开任何“变换”组件可能需要的组件,您可以在此处看到一个示例。
有水合成分后,您需要将其导入“条目”文件。将它们带有.entry
后缀,并且必须放置在其各自的模块文件夹中,例如./src/home/home.entry.ts
。
输入文件需要导入您的水合成分,例如:
import '@/modules/home/components/form' ;
然后,通过将其传递到从组件导出的data
*.11ty.tsx
中,例如:
/*[...]*/
function Page ( ) {
return < main > { /*[...]*/ } </ main > ;
}
/*[...]*/
module . exports = {
render : Page ,
data : ( ) => ( {
permalink : 'index.html' ,
jsPath : 'home/home.entry.js' , // <----
} ) ,
} ;
在工作示例中,请在此处查看home
模块。
从API或其他其他方式收集数据的所有官方11th方法都将在这里工作。有许多很棒的例子在官方的110个文档中如何执行此操作,包括使用GraphQl:https://www.11ty.dev/docs/data-js/。
要定义全局数据,请将JSON,JS或TypeScript文件添加到./src/data
文件夹。然后将通过11TY解析这些,并通过数据级联添加。您可以直接在.11ty.ts*
文件中访问。
例如,如果要将global.ts
文件添加到./src/data
,则可以通过页面参数对象中的global
属性访问此文件:
interface IProps {
global : {
title : string ;
} ;
}
/*[...]*/
function Page ( { global } : IProps ) {
return (
< main >
< h1 > { global . title } </ h1 >
</ main >
) ;
}
要添加本地数据,例如特定于模块的数据,请在相关模块文件夹中添加带有.data
的文件。然后,这将以与上面显示的完全相同的方式访问,但仅适用于该页面。例如,如果您将home.data.ts
添加到./src/modules/home
,则您的主页Page 11ty.tsx
文件将可以访问该数据文件中持有的值。
git clone [email protected]:jahilldev/11tyby.git
yarn
yarn start
yarn build