添加详情页

.gitignore

@@ -1,3 +1,4 @@
 .next/
 node_modules/
 out/
+.DS_Store

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>
 }

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

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
+// 页面滚动更顺滑

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' }))
+  }

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">