Skip to content

Commit

Permalink
添加blog列表页
Browse files Browse the repository at this point in the history
  • Loading branch information
MichaelHao25 committed Aug 16, 2019
1 parent 60beb88 commit 532d74e
Show file tree
Hide file tree
Showing 15 changed files with 572 additions and 83 deletions.
Binary file added .DS_Store
Binary file not shown.
18 changes: 18 additions & 0 deletions components/BackGround.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
const BackGround = () => {
return <div className="background">
<style jsx>{`
.background{
position: relative;
background: url('../static/img/blog.jpg') center center/cover no-repeat;
min-height: 200px;
max-height: 400px;
}
.background:after{
content: '';
display: block;
padding-top:21%;
}
`}</style>
</div>
}
export default BackGround
71 changes: 71 additions & 0 deletions components/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import Link from 'next/link';
const CopyRight = () => {
return (
<footer className="footer">
<div className="w1500">
<div className="list">
<div className="item">
<h3>关于Blog</h3>
<p>此Blog诞生的原因是想记录一些日常踩到的坑,也希望借此可以结交到其他的小伙伴啦,分享技术,一起进步.</p>
</div>
<div className="item">
<h3>友情链接</h3>
<div className="links">
<Link href="/blog"><a className="blog">博文</a></Link>
<Link href="/"><a className="dev">实验室</a></Link>
<Link href="/"><a className="message">留言</a></Link>
<Link href="/"><a className="about">关于</a></Link>
</div>
</div>
</div>
<p>Design & Code by Blue.use Mongodb + Next.js</p>
</div>
<style jsx>{`
.footer{
padding: 20px 0;
color: #ccc;
background: #333;
font-size: 14px;
}
.list{
display: flex;
justify-content: space-between;
}
h3{
font-size: 20px;
padding-bottom: 10px;
white-space: nowrap;
}
p{
padding-bottom: 10px;
}
.links{
display: flex;
flex-direction: column;
}
.links a{
line-height: 1.8;
transition: 0.3s;
}
.links a:hover{
color: #1890ff;
}
@media(max-width:500px){
.list{
flex-direction: column;
}
.w1500{
width: 100%;
}
.links{
align-items: flex-start;
}
.footer{
padding: 20px 15px;
}
}
`}</style>
</footer>
)
}
export default CopyRight
13 changes: 7 additions & 6 deletions components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,9 @@ const Header = (props) => {
</Link>
</div>
<div className="links">
<Link href="/"><a className="blog">博文</a></Link>
<Link href="/blog"><a className="blog">博文</a></Link>
<Link href="/"><a className="dev">实验室</a></Link>
<Link href="/"><a className="works">作品展</a></Link>
<Link href="/"><a className="message">留言</a></Link>
<Link href="/"><a className="about">关于</a></Link>
</div>
Expand Down Expand Up @@ -116,7 +117,7 @@ const Header = (props) => {
border-radius: 1px;
}
@media(max-width:500px){
@media(max-width:700px){
.arrow.active{
top: 5px;
transform: translateY(0);
Expand Down Expand Up @@ -170,7 +171,7 @@ const Header = (props) => {
opacity: 0;
visibility: hidden;
}
@media(max-width:500px){
@media(max-width:700px){
.nav{
height: auto;
}
Expand All @@ -186,7 +187,7 @@ const Header = (props) => {
justify-content: space-between;
transition: 0.3s;
}
@media(max-width:500px){
@media(max-width:700px){
.w1500{
flex-direction:column;
width: 100%;
Expand All @@ -203,7 +204,7 @@ const Header = (props) => {
padding: 0 10px;
line-height: 56px;
}
@media(max-width:500px){
@media(max-width:700px){
.brand a{
display: inline-block;
}
Expand All @@ -221,7 +222,7 @@ const Header = (props) => {
.links a:hover{
color: #1890ff;
}
@media(max-width:500px){
@media(max-width:700px){
.links{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
Expand Down
2 changes: 2 additions & 0 deletions components/Layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
createRef
} from 'react';
import Header from './Header';
import Footer from './Footer';

const Layout = props => {
const [blur, setBlur] = useState(false);
Expand All @@ -12,6 +13,7 @@ const Layout = props => {
<Header blur={blur} setBlur={setBlur} />
<div className={`${blur ? 'blur' : ''}`}>
{props.children}
<Footer />
</div>
{/* background: rgba(255,255,255,0.6) */}
<style jsx>{`
Expand Down
30 changes: 30 additions & 0 deletions pages/_app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react'
import App, { Container } from 'next/app'
import '../css/reset.styl';
import Head from 'next/head'

class MyApp extends App {
// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// static async getInitialProps(appContext) {
// // calls page's `getInitialProps` and fills `appProps.pageProps`
// const appProps = await App.getInitialProps(appContext);
//
// return { ...appProps }
// }

render() {
const { Component, pageProps } = this.props
return <Container>
<Head>
<title>Blog</title>
</Head>
<Component {...pageProps} />
</Container>
}
}

export default MyApp
20 changes: 20 additions & 0 deletions pages/_document.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<html lang="zh-cmn-Hans">
<Head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
File renamed without changes.
Loading

0 comments on commit 532d74e

Please sign in to comment.