π wow ο½ use react + style-components write your hexo theme
- zero configure
- import sub components directly
- file extensions support
.tsx
.ts
.jsx
.svg
.css
- auto transform svg source file to react component by svgr
- theme directory example
βββ your-theme
βββ layout
β βββ components
β β βββ header.tsx
β β βββ index.ts
β βββ index.tsx
β βββ layout.tsx
βββ tsconfig.json
- page view example
// index.tsx
import React, {FC} from 'react';
import styled from 'styled-components';
// import directly
import {Posts} from './components';
// see usage/svg
import Github from './icons/github.svg';
// see usage/css
import MarkdownCSS from './css/markdown.css';
const Index = styled.div`
// ... css
`;
const Main = styled.div`
// ... css
${MarkdownCSS}
`;
const Sidebar = styled.div`
// ... css
`;
// Perfect type hint
const Component: FC<HexoComponentProps> = props => {
const {page} = props;
return (
<Index>
<Main>
<Posts posts={page.posts} />
</Main>
<Sidebar>
<Github />
</Sidebar>
</Index>
);
};
export default Component;
Try it ?π
yarn add hexo-renderer-react-styled # Or npm install --save hexo-renderer-react-styled
That's all, hexo will auto load
If need import ".svg" file, add module declare file for your project.
declare module '*.svg' {
const fc: (props: any) => any;
export default fc;
}
svgComplier will replace #000
/#000000
to currentColor
by default
If need import ".css" file, add module declare file for your project.
declare module '*.css' {
const text: string;
export default text;
}
usage example
import markdownCSS from './markdown.css';
const MarkdownContent = styled.div`
${markdownCSS}
`;
- hexo-theme-wanghu - βεΏδΉβοΌ δ»Ώη₯δΉδΈ»ι’ οΌ
MIT License.