diff --git a/.gitignore b/.gitignore
index 7ed189a..f7e8e8d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .next/
 node_modules/
 out/
+.DS_Store
diff --git a/Backup/1.html b/Backup/1.html
new file mode 100644
index 0000000..e69de29
diff --git a/components/BackGround.js b/components/BackGround.js
index a40c518..8a2520a 100644
--- a/components/BackGround.js
+++ b/components/BackGround.js
@@ -1,17 +1,55 @@
-const BackGround = () => {
-    return <div className="background">
+const BackGround = (props) => {
+    const { url, title, content } = props;
+
+    return <div className={`background ${url ? 'bg' : 'bg-image'}`} style={url ? { backgroundImage: `url(${url})` } : {}}>
+        <div className="w1500">
+            <div className="container">
+                {
+                    title && <h2>{title}</h2>
+                }
+                {
+                    content && <p>{content}</p>
+                }
+            </div>
+        </div>
         <style jsx>{`
+            .bg{
+                background-position: center center;
+                background-repeat: no-repeat;
+                background-size: cover;
+            }
+            .bg-image{
+                background: #1f3747;
+                background-image:linear-gradient(left,#1f3747,#293d31);
+            }
             .background{
                 position: relative;
-                background: url('../static/img/blog.jpg') center center/cover no-repeat;
                 min-height: 200px;
                 max-height: 400px;
+                overflow: hidden;
             }
             .background:after{
                 content: '';
                 display: block;
                 padding-top:21%;
             }
+            .w1500{
+                position: relative;
+            }
+            .container{
+                position: absolute;
+                color: #fff;
+                line-height: 1.5;
+            }
+            h2{
+                padding-top: 60px;
+                font-size: 36px;
+                padding-bottom: 18px;
+            }
+            p{
+                font-size: 18px;
+                max-width: 1000px;
+            }
         `}</style>
     </div>
 }
diff --git a/components/MarkDown.js b/components/MarkDown.js
new file mode 100644
index 0000000..6301b70
--- /dev/null
+++ b/components/MarkDown.js
@@ -0,0 +1,237 @@
+const MarkDownContainer = () => {
+    return <div className="markdown article">
+        {/* <Markdown
+		source={` */}
+        <p>熟悉小剧的同学应该都知道，小剧客栈上面没有友情链接这样一个东西。很多朋友问过小剧这个问题，我也给过很多版本的原因，今天就来详细说一下为什么小剧客栈没有友情链接。</p><p>其实小剧在2012刚开始玩博客的时候，也曾经运营过一段时间友情链接。应该在 2013 年博客进行全新版本设计的时候就没有考虑友情链接模块，新版本博客上线以后就再也没有添加过友情链接，那具体是为什么呢 ？</p><p>可能很多朋友没有运营过网站、博客，不太了解友情链接背后的东西，我先来简单介绍一下友情链接是什么样的。</p><h2 id="">友情链接是什么 ？</h2><p>对于一个网站来说，一般会在首页或者是每一页的页脚、侧边栏有这样一个区块，叫友情链接。上面会罗列着一些和自己网站相关或者不相关链接，这是一种比较常见的形态。</p><p>还有另外一种形态，是隐藏的友情链接，用户看不见。可能你会问了，这种友情链接有什么用呢？</p><p>这其实是一种畸形的搜索引擎优化方案，是权重较高的网站上给一些新网站导流的一种方式。其实这种行为本身没有导流，只是被权重高的网站链接，搜索引擎可能会适当提高对应网站的权重。</p><p>在小剧看来，但凡是违背内容本身的搜索引擎优化都是作弊，因此第二种友情链接是搜索引擎所不推荐的。</p><h2 id="-1">对于网站运营者，友情链接又是什么？</h2><p>一般对于网站运营者来说，都期望添加一些个人感兴趣的，或者同类型的网站作为友情链接。或者是一些能给你的网站带来流量的高权重、大流量的网站。</p><p>当你有交换友情链接的意向时，你会主动跟对方的运营者去请求：想我们交换一下友情链接可不可以 ？</p><p>或者你是被邀请的那个人，当有人和你提出交换一下友情链接的意愿时，你会怎么考虑？</p><p>一般来说你会看对方网站的主题、权重、用户群体等信息，以及友情链接设置方式对你是否有利。</p><blockquote>  <p>注意：由于友情链接的「友情」成分很低，功利性特别强，因此衍生出很多种友情链接作弊方式，比如异步渲染、noflollow等手段。</p>  <p>因而对于网站的运营者来说，对方网站的考察会花很大功夫。</p></blockquote><p>假如一切都很顺利，合作意向很快达成一致。都互相在自己的友情链接模块，添加了对方的网站链接。这一切就结束了吗？</p><p>其实并没有结束。所有网站的运营者都会隔三差五去对方网站检查一下，看下自己网站的链接还在不在？有没有被转移？有没有使用作弊手段？</p><p>如果你是一位资深的网站运营人员，你手上一定会有一到两个友情链接检查工具。</p><h2 id="-2">小剧希望友情链接做什么？</h2><p>以上带有个人感情色彩的描述，大致就是小剧不做友情链接的原因。</p><p>当然还有很多理由可以支持我添加友情链接，比如说我就是喜欢这个人，这个人是我的老师，这个人是我的前辈，我的某一个同行。我就是要把对方添加在我的网站链接中。</p><p>这其实才应该是友情链接的初衷，是网站向受众推荐另一个站点，而不是荒谬的要求对方一定同时也要添加自己。</p><p>因此小剧上线过「前端英雄榜」，用来链接小剧在前端行业中的一些前辈好友，算是友情链接的另一种尝试吧。</p><h2 id="-3">小剧不做友情链接的原因？</h2><p>根据上面的描述来总结下来，小剧不做友情链接主要有以下三个原因。</p><h3 id="1">1、友情链接太单薄。</h3><p>友情链接的形式较弱、太单薄，仅仅是一个文字链接而已，对用户起不到太多的推荐作用，用户的观感很差。</p><h3 id="2">2、不靠流量、权重而活</h3><p>对于小剧客栈来说，博客是个人的附属品，是小剧这个人在网络世界里的一个延伸。</p><p>个人博客只是一个比较小众的小站点，我们不靠流量来养活自己，由于博客主题限制也不期待会有很大的流量。</p><p>最重要的是，由于小剧客栈本身流量极低，也无法为对方提供比较可观的流量，因此友情链接在小剧这里无法发挥其该有的价值。</p><h3 id="3">3、「友情」成分太低</h3><p>前面其实提到过，目前常见的友情链接功利目的太强，会要求流量、链接位置等条件。并且在作弊成风的现状下，运营成本较高。</p><h2 id="-4">放弃友情链接有没有什么损失 ？</h2><p>任何一件事都是有得就有失，放弃友情链接谈不上什么损失，但是客观上使得小剧客栈这样本来就小众的博客变得更加冷僻。</p><p>曾经做内容聚合平台的朋友和我聊过友情链接的事。聚合网站有它自己的价值，但是对于小剧来说更期望链接的是具体的人，而非平台，因此婉拒了交换友情链接的请求。</p><p>另外由于小剧客栈没有友情链接模块，唯一能够链接站外的「前端英雄榜」也略显高冷，也让很多有交换友情链接的小伙伴望而却步。</p><p>当然，这些“损失”本身就在小剧的预期范围内，所以并不会在意。</p><p>最让我在意的损失是：由于没有友情链接模块，小剧客栈缺少了向的受众展示小剧在前端、设计、摄影等兴趣上遇到的一些非常有趣，非常富有创造力朋友的途径。</p><p>虽然我曾试图通过「前端英雄榜」来补救，但是过于杂乱管理方式并没有起到特别好的效果。</p><hr /><p>本文只是为了阐述小剧为什么不做友情链接，如果你读到了这里，你一定会意识到小剧想表达的并不止于此。</p><p>最近小剧在规划一个全新的模块，叫「剧中人的朋友圈」，它将会是「前端英雄榜」的全新版本。这里会展示小剧在各个兴趣爱好里认识到的，一个个非常有趣的灵魂，并且会引用一些伙伴发布的文章、项目、作品等等。</p><p>记住它不是友情链接哦！</p><p>友情链接只是一个站点对另一个站点的链接。而我这里引用的是朋友愿意公开的个人属性、动态等。背后可能是TA的一篇博文，一个 Github 项目的，或者是某幅照片、视频的链接等等。总之我要链接的是小剧的朋友这个人以及TA背后的一些非常值得分享的动态，大家敬请期待吧！</p>
+
+        {/* `} */}
+        {/* /> */}
+        <style jsx>{`
+			.markdown{
+				padding-top:40px;
+			}
+
+.article {
+    font-size: 1rem;
+    line-height: 1.6;
+    word-wrap: break-word
+}
+
+.article:after,.article:before {
+    display: table;
+    content: ""
+}
+
+.article:after {
+    clear: both
+}
+
+.article>:first-child {
+    margin-top: 0!important
+}
+
+.article>:last-child {
+    margin-bottom: 0!important
+}
+
+.article a:not([href]) {
+    color: inherit;
+    text-decoration: none
+}
+
+.article b,.article strong {
+    font-weight: 500
+}
+
+.article h1,.article h2,.article h3,.article h4,.article h5,.article h6 {
+    margin-top: 1em;
+    margin-bottom: 16px;
+    font-weight: 500;
+    line-height: 1.4
+}
+
+.article h1 {
+    font-size: 2.25em;
+    line-height: 1.2
+}
+
+.article h1,.article h2 {
+    padding-bottom: .3em;
+    border-bottom: 1px solid #eee
+}
+
+.article h2 {
+    font-size: 1.75em;
+    line-height: 1.225
+}
+
+.article h3 {
+    font-size: 1.5em;
+    line-height: 1.43
+}
+
+.article h4 {
+    font-size: 1.25em
+}
+
+.article h5,.article h6 {
+    font-size: 1em
+}
+
+.article h6 {
+    color: #777
+}
+
+.article blockquote,.article dl,.article ol,.article p,.article pre,.article table,.article ul {
+    margin-top: 0;
+    margin-bottom: 16px
+}
+
+.article hr {
+    height: 4px;
+    padding: 0;
+    margin: 16px 0;
+    background-color: #e7e7e7;
+    border: 0 none
+}
+
+.article ol,.article ul {
+    padding-left: 2em
+}
+
+.article ul {
+    list-style: disc
+}
+
+.article ol {
+    list-style: decimal
+}
+
+.article ol ol,.article ol ul,.article ul ol,.article ul ul {
+    margin-top: 0;
+    margin-bottom: 0
+}
+
+.article li {
+    list-style: inherit
+}
+
+.article li>p {
+    margin-top: 16px
+}
+
+.article dl {
+    padding: 0
+}
+
+.article dl dt {
+    padding: 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: 700
+}
+
+.article dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px
+}
+
+.article blockquote {
+    padding: 0 15px;
+    color: #777;
+    border-left: 4px solid #ddd
+}
+
+.article blockquote>:first-child {
+    margin-top: 0
+}
+
+.article blockquote>:last-child {
+    margin-bottom: 0
+}
+
+.article table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: normal;
+    word-break: keep-all
+}
+
+.article table th {
+    font-weight: 700
+}
+
+.article table td,.article table th {
+    padding: 6px 13px;
+    border: 1px solid #ddd
+}
+
+.article table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccc
+}
+
+.article table tr:nth-child(2n) {
+    background-color: #f8f8f8
+}
+
+.article img {
+    max-width: 100%;
+    box-sizing: content-box;
+    background-color: #fff
+}
+
+.article a {
+    color: #4078c0;
+    text-decoration: none
+}
+
+.article a:active,.article a:hover {
+    text-decoration: underline
+}
+
+.article code,.article tt {
+    padding: 0;
+    padding-top: .2em;
+    padding-bottom: .2em;
+    margin: 0;
+    font-size: 85%;
+    background-color: #f5f5f5;
+    border-radius: 3px
+}
+
+.article code:after,.article code:before,.article tt:after,.article tt:before {
+    letter-spacing: -.2em;
+    content: "\A0"
+}
+
+.article del code {
+    text-decoration: inherit
+}
+
+.article pre {
+    word-wrap: normal
+}
+
+.article pre code,.article pre tt {
+    display: inline;
+    max-width: none;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0
+}
+
+.article pre code:after,.article pre code:before,.article pre tt:after,.article pre tt:before {
+    content: normal
+}
+		`}</style>
+    </div>
+}
+
+export default MarkDownContainer
diff --git a/css/reset.styl b/css/reset.styl
index eeb5a08..9cc362b 100644
--- a/css/reset.styl
+++ b/css/reset.styl
@@ -167,6 +167,11 @@ input[type=radio]::-ms-check, input[type=checkbox]::-ms-check
 	margin 0 auto
 	max-width 1500px
 	width 100%
+
 @media (max-width: 1600px)
 	.w1500
 		width 80%
+
+html, body
+	scroll-behavior smooth
+// 页面滚动更顺滑
diff --git a/pages/api/blog/[id].js b/pages/api/blog/[id].js
new file mode 100644
index 0000000..0b9e239
--- /dev/null
+++ b/pages/api/blog/[id].js
@@ -0,0 +1,5 @@
+export default (req, res) => {
+    res.setHeader('Content-Type', 'application/json')
+    res.statusCode = 200
+    res.end(JSON.stringify({ name: 'Nextjs' }))
+  }
diff --git a/pages/blog.js b/pages/blog.js
index da53784..95fb41e 100644
--- a/pages/blog.js
+++ b/pages/blog.js
@@ -12,7 +12,7 @@ import Link from 'next/link';
 export default (props) => {
     // const router = useRouter();    
     return <Layout>
-        <BackGround />
+        <BackGround url={'../static/img/blog.jpg'} />
         <Container>
             <List />
             <Aside />
@@ -88,6 +88,7 @@ const Aside = () => {
                     display: block;
                     margin: 0 auto;
                     min-width: auto;
+                    max-width: none;
                 }
             }
         `}</style>
@@ -137,7 +138,7 @@ const UserInfo = () => {
 }
 const List = () => {
     const Item = () => {
-        return <Link href="/">
+        return <Link href="/blog/1">
             <a>
                 <div className="item">
                     <div className="img">
diff --git a/pages/blog/[id].js b/pages/blog/[id].js
new file mode 100644
index 0000000..b47f83d
--- /dev/null
+++ b/pages/blog/[id].js
@@ -0,0 +1,162 @@
+import { useRouter } from 'next/router';
+import Markdown from 'react-markdown';
+import Layout from '../../components/Layout';
+import BackGround from '../../components/BackGround';
+import Link from 'next/link';
+import MarkDownContainer from '../../components/MarkDown';
+// background: #1f3747;
+// background-image: -webkit-linear-gradient(left,#1f3747,#293d31);
+
+export default () => {
+	const router = useRouter();
+	// console.log(router.query.id);
+	return (
+		<Layout>
+			<BackGround title="为什么明明相爱" content="到最后确实要分开,哈哈哈哈啦啦啦咕咕咕咪咪咪咪到最后确实要分开,哈哈哈哈啦啦啦咕咕咕咪咪咪咪到最后确实要分开,哈哈哈哈啦啦啦咕咕咕咪咪咪咪" />
+			<Container>
+				<Content />
+				<Aside />
+			</Container>
+		</Layout>
+	);
+};
+const Content = (props) => {
+	return <div className="container">
+		<h1>为什么小剧客栈没有友情链接</h1>
+		<div className="time">发布时间：2019-04-01</div>
+		<MarkDownContainer />
+		<style jsx>{`
+			.container{
+				flex: 8;
+				box-sizing: border-box;
+				padding:90px 100px 90px 0;
+			}
+			h1{
+				font-size: 28px;
+				font-weight: 500;
+				line-height: 1.5;
+			}
+			.time{
+				padding-top:10px;
+				font-size: 14px;
+				line-height: 1.5;
+			}
+			
+		`}</style>
+	</div>
+}
+
+const Aside = (props) => {
+	return <aside className="aside">
+		<div className="toc-content">
+			<div className="title">TOC</div>
+			<Link href="#a666"><a style={{ paddingLeft: '0em' }}>友情链接是什么 ？</a></Link>
+			<Link href="#a666"><a style={{ paddingLeft: '0em' }}>对于网站运营者，友情链接又是什么？</a></Link>
+			<Link href="#a666"><a style={{ paddingLeft: '0em' }}>小剧希望友情链接做什么？</a></Link>
+			<Link href="#a666"><a style={{ paddingLeft: '0em' }}>小剧不做友情链接的原因？</a></Link>
+			<Link href="#a666"><a style={{ paddingLeft: '1em' }}>1、友情链接太单薄。</a></Link>
+			<Link href="#a666"><a style={{ paddingLeft: '1em' }}>2、不靠流量、权重而活</a></Link>
+			<Link href="#a666"><a style={{ paddingLeft: '1em' }}>3、「友情」成分太低</a></Link>
+			<Link href="#a666"><a id="a666" style={{ paddingLeft: '0em' }}>放弃友情链接有没有什么损失 ？</a></Link>
+		</div>
+
+		<style jsx>{`
+			.aside{
+				max-width: 300px;
+				flex: 4;
+				border-left:1px solid #edeff3;
+			}
+
+			.toc-content {
+				padding: 90px 0 0 30px;
+			}
+
+			.toc-content .title {
+				margin-bottom: 10px;
+				line-height: 2em;
+				font-size: 15px;
+				color: #c2ccd6
+			}
+
+			.toc-content a {
+				display: block;
+				margin-bottom: 10px;
+				line-height: 1.2em;
+				font-size: 14px;
+				color: #8599ad;
+				transition: .2s
+			}
+
+			.toc-content a:hover {
+				color: #407fbf
+			}
+
+		`}</style>
+	</aside>
+}
+const Container = (props) => {
+	return <div className="w1500">
+		{props.children}
+		<style jsx>{`
+			.w1500{
+				display: flex;
+			}
+		`}</style>
+	</div>
+}
+{/*<div className="markdown">
+        
+         <Markdown
+          source={`
+This is our blog post.
+Yes. We can have a [link](/link).
+And we can have a title as well.
+
+### This is a title
+
+And here's the content.
+      `}
+        />
+      </div>
+      <style jsx global>{`
+        .markdown {
+          font-family: 'Arial';
+        }
+
+        .markdown a {
+          text-decoration: none;
+          color: blue;
+        }
+
+        .markdown a:hover {
+          opacity: 0.6;
+        }
+
+        .markdown h3 {
+          margin: 0;
+          padding: 0;
+          text-transform: uppercase;
+        }
+      `}</style> */}
+// import Layout from '../../components/MyLayout';
+// import fetch from 'isomorphic-unfetch';
+
+// const Post = props => (
+//   <Layout>
+//     <h1>{props.show.name}</h1>
+//     <p>{props.show.summary.replace(/<[/]?p>/g, '')}</p>
+//     <img src={props.show.image.medium} />
+//   </Layout>
+// );
+
+// Post.getInitialProps = async function(context) {
+//   const { id } = context.query;
+//   const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
+//   const show = await res.json();
+
+//   console.log(`Fetched show: ${show.name}`);
+
+//   return { show };
+// };
+
+// export default Post;
diff --git a/pages/p/[id].js b/pages/p/[id].js
deleted file mode 100644
index a6f1982..0000000
--- a/pages/p/[id].js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useRouter } from 'next/router';
-import Markdown from 'react-markdown';
-import Layout from '../../components/MyLayout';
-
-export default () => {
-  const router = useRouter();
-  return (
-    <Layout>
-      <h1>{router.query.id}</h1>
-      <div className="markdown">
-        <Markdown
-          source={`
-This is our blog post.
-Yes. We can have a [link](/link).
-And we can have a title as well.
-
-### This is a title
-
-And here's the content.
-      `}
-        />
-      </div>
-      <style jsx global>{`
-        .markdown {
-          font-family: 'Arial';
-        }
-
-        .markdown a {
-          text-decoration: none;
-          color: blue;
-        }
-
-        .markdown a:hover {
-          opacity: 0.6;
-        }
-
-        .markdown h3 {
-          margin: 0;
-          padding: 0;
-          text-transform: uppercase;
-        }
-      `}</style>
-    </Layout>
-  );
-};
-
-
-// import Layout from '../../components/MyLayout';
-// import fetch from 'isomorphic-unfetch';
-
-// const Post = props => (
-//   <Layout>
-//     <h1>{props.show.name}</h1>
-//     <p>{props.show.summary.replace(/<[/]?p>/g, '')}</p>
-//     <img src={props.show.image.medium} />
-//   </Layout>
-// );
-
-// Post.getInitialProps = async function(context) {
-//   const { id } = context.query;
-//   const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
-//   const show = await res.json();
-
-//   console.log(`Fetched show: ${show.name}`);
-
-//   return { show };
-// };
-
-// export default Post;
diff --git a/pages/post.js b/pages/post.js
deleted file mode 100644
index 55310d3..0000000
--- a/pages/post.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useRouter } from 'next/router';
-import Layout from '../components/MyLayout';
-
-const Page = () => {
-  const router = useRouter();
-  console.log(router);
-  
-
-  return (
-    <Layout>
-      <h1>{router.query.title}</h1>
-      <p>This is the blog post content.</p>
-    </Layout>
-  );
-};
-
-export default Page;