diff --git a/packages/code-gen/_templates/infoapp/agg/posts.ejs b/packages/code-gen/_templates/infoapp/agg/posts.ejs
new file mode 100644
index 0000000..b9b01f4
--- /dev/null
+++ b/packages/code-gen/_templates/infoapp/agg/posts.ejs
@@ -0,0 +1,19 @@
+---
+to: ../transparent-info-app/gen/posts.js
+---
+
+/*********************
+
+this is generated code ,donot edit me !!!!!
+
+****************************/
+
+import withExtra from '../components/post/PostWrap';
+
+<% h.posts.forEach( e => { %>
+import * as N<%= h.changeCase.constant(e) %> from '../pages/posts/<%- e %>'; <% }) %> 
+
+export const posts = [ <% h.posts.forEach( e => { %>
+    withExtra(N<%= h.changeCase.constant(e) %>.default,{fileName: '<%= e %>', title: N<%= h.changeCase.constant(e) %>.title , category: 'posts'}), <% }) %> 
+];
+
diff --git a/packages/code-gen/_templates/infoapp/agg/timelines.ejs b/packages/code-gen/_templates/infoapp/agg/timelines.ejs
index 8fc1664..38a57f2 100644
--- a/packages/code-gen/_templates/infoapp/agg/timelines.ejs
+++ b/packages/code-gen/_templates/infoapp/agg/timelines.ejs
@@ -1,5 +1,5 @@
 ---
-to: ../transparent-info-app/gen/timeline.jsx
+to: ../transparent-info-app/gen/timeline.js
 ---
 
 /*********************
diff --git a/packages/code-gen/main.ts b/packages/code-gen/main.ts
index a7e879f..be906c4 100644
--- a/packages/code-gen/main.ts
+++ b/packages/code-gen/main.ts
@@ -6,8 +6,10 @@ const Logger = require('hygen/lib/logger');
 
 const defaultTemplates = path.join(__dirname, '_templates');
 
-async function genTimelines() {
-  const files = await fs.promises.readdir(`${__dirname}/../transparent-info-app/timeline`);
+async function genAggregation() {
+  const timelines = await fs.promises.readdir(`${__dirname}/../transparent-info-app/timeline`);
+
+  const posts = await fs.promises.readdir(`${__dirname}/../transparent-info-app/pages/posts`);
 
   runner(['infoapp', 'agg'], {
     templates: defaultTemplates,
@@ -19,13 +21,14 @@ async function genTimelines() {
     //   return require('execa').shell(action, opts);
     // },
     helpers: {
-      timelines: files,
+      timelines,
+      posts: posts.filter(e => !e.startsWith('index.')),
     },
   });
 }
 
 async function main() {
-  await genTimelines();
+  await genAggregation();
 }
 
 main();
diff --git a/packages/transparent-info-app/components/BottomNav.tsx b/packages/transparent-info-app/components/BottomNav.tsx
index 6c78b97..9b696d1 100644
--- a/packages/transparent-info-app/components/BottomNav.tsx
+++ b/packages/transparent-info-app/components/BottomNav.tsx
@@ -55,7 +55,7 @@ export function BottomNav() {
       <HiddenPrefetch />
       <BottomNavigation value={value} onChange={handleChange} className={classes.root}>
         <BottomNavigationAction label="经过" value="/event" icon={<RestoreIcon />} />
-        <BottomNavigationAction label="文章" value="/postlist" icon={<ListIcon />} />
+        <BottomNavigationAction label="文章" value="/posts" icon={<ListIcon />} />
         <BottomNavigationAction label="捐赠" value="/donation" icon={<EmojiPeopleIcon />} />
         {/* <BottomNavigationAction label="关于" value="/about" icon={<InfoIcon />} /> */}
       </BottomNavigation>
diff --git a/packages/transparent-info-app/components/Posts.tsx b/packages/transparent-info-app/components/Posts.tsx
deleted file mode 100644
index 8a62a2a..0000000
--- a/packages/transparent-info-app/components/Posts.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { PostList } from './PostList';
-import { postsList } from '../pages/posts/index';
-
-export const Posts = () => {
-  return <PostList posts={postsList} />;
-};
diff --git a/packages/transparent-info-app/components/PostList.tsx b/packages/transparent-info-app/components/post/PostList.tsx
similarity index 72%
rename from packages/transparent-info-app/components/PostList.tsx
rename to packages/transparent-info-app/components/post/PostList.tsx
index 32c38f8..0d0f40d 100644
--- a/packages/transparent-info-app/components/PostList.tsx
+++ b/packages/transparent-info-app/components/post/PostList.tsx
@@ -1,20 +1,15 @@
 import * as React from 'react';
-import Layout from '../components/Layout';
+import Layout from '../Layout';
 import { NextPage, NextPageContext } from 'next';
 import { Container, ListItem, List } from '@material-ui/core';
-import { postsList } from '../pages/posts/index';
-import Link from '../src/Link';
+import Link from '../../src/Link';
 // import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { FunctionComponent } from 'react';
-
-interface Post {
-  href: string;
-  title?: string;
-}
+import withExtra, { WithExtra } from './PostWrap';
 
 interface Props {
-  posts: Post[];
+  posts: WithExtra[];
 }
 
 export const PostList: FunctionComponent<Props> = ({ posts }) => {
@@ -26,14 +21,14 @@ export const PostList: FunctionComponent<Props> = ({ posts }) => {
 
   return (
     <List>
-      {posts.map((e, i) => (
+      {posts.map(([Item, extra], i) => (
         <ListItem key={i}>
           <Link
             passHref={false}
-            onClick={(evt: React.MouseEvent) => handleLinkClick(evt, e.href)}
-            href={e.href}
+            onClick={(evt: React.MouseEvent) => handleLinkClick(evt, extra.href as string)}
+            href={extra.href as string}
           >
-            {e.title}
+            {extra.title}
           </Link>
         </ListItem>
       ))}
diff --git a/packages/transparent-info-app/components/post/PostWrap.tsx b/packages/transparent-info-app/components/post/PostWrap.tsx
new file mode 100644
index 0000000..eafc268
--- /dev/null
+++ b/packages/transparent-info-app/components/post/PostWrap.tsx
@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'react';
+
+type Category = 'posts';
+
+export interface WrapExtra {
+  fileName: string;
+  title: string;
+  category: Category;
+  href?: string;
+}
+
+type PostProps = WrapExtra;
+
+export type WithExtra = [FunctionComponent<PostProps>, WrapExtra];
+
+export default function withExtra(
+  WrapComponent: FunctionComponent<PostProps>,
+  extra: WrapExtra
+): WithExtra {
+  const href = `/${extra.category}/${extra.fileName.split('.')[0]}`;
+  return [
+    (props: any) => <WrapComponent {...extra} {...props} />,
+    {
+      ...extra,
+      href,
+    },
+  ];
+}
diff --git a/packages/transparent-info-app/pages/postlist.tsx b/packages/transparent-info-app/pages/postlist.tsx
deleted file mode 100644
index d5c5207..0000000
--- a/packages/transparent-info-app/pages/postlist.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import Layout from '../components/Layout';
-import { NextPage, NextPageContext } from 'next';
-import { Container, ListItem, List } from '@material-ui/core';
-import Link from '../src/Link';
-import { Posts } from '../components/Posts';
-// import Link from 'next/link';
-
-export default () => {
-  return (
-    <Layout title="文章列表">
-      <Posts />
-    </Layout>
-  );
-};
diff --git a/packages/transparent-info-app/pages/posts/index.jsx b/packages/transparent-info-app/pages/posts/index.jsx
deleted file mode 100644
index fc5b986..0000000
--- a/packages/transparent-info-app/pages/posts/index.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import PostList from '../postlist';
-import * as sample from './section.mdx';
-import * as post2 from './post2.mdx';
-import * as basic from './basic.mdx';
-
-export const postsList = [basic, sample, post2];
-
-export default () => <PostList />;
diff --git a/packages/transparent-info-app/pages/posts/index.tsx b/packages/transparent-info-app/pages/posts/index.tsx
new file mode 100644
index 0000000..80df1a2
--- /dev/null
+++ b/packages/transparent-info-app/pages/posts/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { PostList } from '../../components/post/PostList';
+
+import { posts } from '../../gen/posts';
+import Layout from '../../components/Layout';
+
+export default () => {
+  return (
+    <Layout title="文章列表">
+      <PostList posts={posts} />
+    </Layout>
+  );
+};
diff --git a/packages/transparent-info-app/pages/posts/post2.mdx b/packages/transparent-info-app/pages/posts/post2.mdx
index fcd9a05..4dc5c6a 100644
--- a/packages/transparent-info-app/pages/posts/post2.mdx
+++ b/packages/transparent-info-app/pages/posts/post2.mdx
@@ -1,5 +1,4 @@
 import Layout from '../../components/Layout';
-import { Posts } from '../../components/Posts';
 import Md2 from '../../components/md2.mdx';
 import { EditMe } from '../../components/Github.tsx';
 
@@ -50,15 +49,6 @@ export default ({children})=>(<Layout title="高端玩法"> {children} </Layout>
 ---
 
 <Md2 />
-
----
-
-下面是引用 react 组件
-
-<Posts />
-
----
-
 <EditMe path="pages/posts/post2.mdx" />
 
 export default ({ children }) => <Layout title="高端玩法"> {children} </Layout>;