11tyby

11tyby

一個有組織的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文件將可以訪問該數據文件中持有的值。

安裝

1。克隆或下載存儲庫

git clone [email protected]:jahilldev/11tyby.git

2。安裝項目依賴項

yarn

發展

yarn start

建立生產

yarn build