rideWind97/chengfeng-blog

handsome-css的架构

Opened this issue · 1 comments

rideWind97 commented

先附上网址，求star

https://www.handsome-css.com
初衷就是做点东西，然后好玩。

#handsome-css的主要结构
1、mdx markdown文件（主要是title、html、css三部分）
2、mdx-bundler，使用mdx-bundler解析，获得css和html
3、渲染

解析mdx

export async function getFileBySlug(type: ContentType, slug: string) {
  const source = slug
    ? readFileSync(
        join(process.cwd(), 'src', 'contents', type, `${slug}.mdx`),
        'utf8'
      )
    : readFileSync(
        join(process.cwd(), 'src', 'contents', `${type}.mdx`),
        'utf8'
      );
  const { data, content } = matter(source);
  const { code } = await bundleMDX({
    source: source,
    mdxOptions(options, _) {
      options.rehypePlugins = [
        ...(options.rehypePlugins ?? []),
        [rehypePrism, { showLineNumbers: true }]
      ];
      return options;
    }
  });
  const result = {
    html: '',
    css: ''
  };
  const format = content.split('```');
  format.forEach(e => {
    if (e.indexOf('html') != -1) {
      result.html = e.replace('html', '');
    } else if (e.indexOf('css') != -1) {
      result.css = e.replace('css', '');
    }
  });
  return {
    code,
    ...(data as any),
    ...result
  };
}

获取html和css后就可以直接渲染了

编写手册

1、添加一个组件大类
image
2、contents新建一个大类的文件夹（名称需要一致）
image
3、编写css，html（文件名称需要和title一致）
image
4、提交pr，注意pr提交规范

指南

网站主旨在于收集网上仅靠 CSS 与 HTML 就可以实现的动效UI。
目的是为了提高开发者的审美和技术。
有兴趣的小伙伴可以通过 issue 联系我，一起维护这个平台。
虽然内容全部完全开源，但尽可能的标注了每个组件的作者名称。
github：https://github.com/ZiYi0414/handsome-css3-lib

希望这个网站，越来越好！

rideWind97 commented

目前，阮一峰已经点赞好评了喔！
image