70 lines
No EOL
2.1 KiB
Markdown
70 lines
No EOL
2.1 KiB
Markdown
11ty
|
|
https://snipcart.com/blog/11ty-tutorial
|
|
|
|
- install globally using `npm install -g @11ty/eleventy`
|
|
- to build it use `eleventy` and for hot reloading in dev mode use `eleventy --serve`.
|
|
|
|
|
|
for integrating with react
|
|
https://github.com/kaicataldo/eleventy-plugin-react
|
|
sample project : [react.zip](../../../../_resources/react.zip)
|
|
|
|
|
|
|
|
- install all thise required modules
|
|
`npm install eleventy-plugin-react babel-loader @babel/core @babel/preset-env @babel/preset-react react react-dom core-js@3 regenerator-runtime`
|
|
- in project , in .eleventy.js configuration is like this: the layout with .njk and postprocess option is changed to just return html because rest part is hamdled by this layout `base.njk`.
|
|
- for custom layout for separate pages do this in `.eleventy.js`
|
|
```js
|
|
module.exports = function(eleventyConfig) {
|
|
eleventyConfig.addPlugin(eleventyReact);
|
|
|
|
// Set custom layouts for different pages
|
|
eleventyConfig.addPassthroughCopy("src/assets"); // Optional: For copying static assets
|
|
|
|
// This is where you can set different layouts based on conditions
|
|
eleventyConfig.addGlobalData("layout", (data) => {
|
|
if (data.page.url === "/about/") {
|
|
return "about-layout.njk"; // Use 'about-layout.njk' for the about page
|
|
} else {
|
|
return "base.njk"; // Default layout for all other pages
|
|
}
|
|
});
|
|
|
|
return {
|
|
dir: {
|
|
input: "src/pages", // Input directory for pages
|
|
output: "_site", // Output directory for generated static files
|
|
},
|
|
};
|
|
};
|
|
|
|
```
|
|
|
|
- in gatsby for client side component
|
|
```js
|
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
const ClientOnlyComponent = () => {
|
|
const [isClient, setIsClient] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsClient(true); // This sets isClient to true only on the client-side
|
|
}, []); // The empty dependency array ensures this effect runs only once after the initial render
|
|
|
|
if (!isClient) {
|
|
return null; // Avoid rendering anything on the server-side
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
This component is rendered on the client-side only.
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ClientOnlyComponent;
|
|
|
|
``` |