├── .nuxt
    ├── layouts
    │   └── default.vue
    ├── empty.js
    ├── middleware.js
    ├── views
    │   ├── app.template.html
    │   └── error.html
    ├── components
    │   ├── nuxt-link.server.js
    │   ├── nuxt.js
    │   ├── nuxt-error.vue
    │   ├── nuxt-link.client.js
    │   ├── nuxt-child.js
    │   ├── nuxt-build-indicator.vue
    │   └── nuxt-loading.vue
    ├── router.js
    ├── loading.html
    ├── router.scrollBehavior.js
    ├── store.js
    ├── App.js
    ├── index.js
    ├── server.js
    └── utils.js
├── static
    └── favicon.ico
├── .gitignore
├── assets
    ├── img
    │   ├── night.png
    │   ├── star-1.png
    │   ├── star-2.png
    │   ├── weixin.png
    │   ├── aside-bg.jpg
    │   ├── averter.jpg
    │   ├── cloud-2.jpg
    │   └── cloude-1.jpg
    └── css
    │   ├── codeStyle.css
    │   └── init.css
├── backpack.config.js
├── store
    ├── modules
    │   ├── hero.js
    │   ├── project.js
    │   └── article.js
    └── index.js
├── .editorconfig
├── utils
    ├── footer-mixin.js
    ├── time-mixin.js
    ├── music.js
    ├── blowser.js
    └── draw.js
├── config
    └── axios.js
├── .eslintrc.js
├── components
    ├── player.vue
    ├── toTop.vue
    ├── shear.vue
    └── comment.vue
├── server
    └── index.js
├── package.json
├── nuxt.config.js
├── api
    └── index.js
├── README.md
├── pages
    ├── allarticle.vue
    ├── project.vue
    ├── index.vue
    ├── hero.vue
    ├── article
    │   ├── index.vue
    │   └── _id.vue
    ├── about.vue
    └── music.vue
└── layouts
    ├── music-layout.vue
    └── layout.vue


/.nuxt/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <Nuxt />
3 | </template>
4 | 


--------------------------------------------------------------------------------
/.nuxt/empty.js:
--------------------------------------------------------------------------------
1 | // This file is intentionally left empty for noop aliases
2 | 


--------------------------------------------------------------------------------
/.nuxt/middleware.js:
--------------------------------------------------------------------------------
1 | const middleware = {}
2 | 
3 | export default middleware
4 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/naice-blog/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | node_modules
3 | 
4 | # logs
5 | npm-debug.log
6 | .DS_Store
7 | 


--------------------------------------------------------------------------------
/assets/img/night.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/naice-blog/HEAD/assets/img/night.png


--------------------------------------------------------------------------------
/assets/img/star-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/naice-blog/HEAD/assets/img/star-1.png


--------------------------------------------------------------------------------
/assets/img/star-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/naice-blog/HEAD/assets/img/star-2.png


--------------------------------------------------------------------------------
/assets/img/weixin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/naice-blog/HEAD/assets/img/weixin.png


--------------------------------------------------------------------------------
/assets/img/aside-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/naice-blog/HEAD/assets/img/aside-bg.jpg


--------------------------------------------------------------------------------
/assets/img/averter.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/naice-blog/HEAD/assets/img/averter.jpg


--------------------------------------------------------------------------------
/assets/img/cloud-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/naice-blog/HEAD/assets/img/cloud-2.jpg


--------------------------------------------------------------------------------
/assets/img/cloude-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/naihe138/naice-blog/HEAD/assets/img/cloude-1.jpg


--------------------------------------------------------------------------------
/backpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   webpack: (config, options, webpack) => {
3 |     config.entry.main = './server/index.js'
4 |     return config
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/store/modules/hero.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 | 	state: {
 4 | 		data: []
 5 | 	},
 6 | 	mutations: {
 7 | 		getHero (state, data) {
 8 | 			state.data = data
 9 | 		}
10 | 	}
11 | }
12 | 


--------------------------------------------------------------------------------
/store/modules/project.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 | 	state: {
 4 | 		data: []
 5 | 	},
 6 | 	mutations: {
 7 | 		getProject (state, data) {
 8 | 			state.data = data || []
 9 | 		}
10 | 	}
11 | }
12 | 


--------------------------------------------------------------------------------
/.nuxt/views/app.template.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html {{ HTML_ATTRS }}>
 3 |   <head {{ HEAD_ATTRS }}>
 4 |     {{ HEAD }}
 5 |   </head>
 6 |   <body {{ BODY_ATTRS }}>
 7 |     {{ APP }}
 8 |   </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 |   indent_style = space
 5 |   indent_size = 2
 6 |   end_of_line = lf
 7 |   charset = utf-8
 8 |   trim_trailing_whitespace = true
 9 |   insert_final_newline = true
10 | 
11 | [*.md]
12 |   trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/.nuxt/components/nuxt-link.server.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | export default {
 4 |   name: 'NuxtLink',
 5 |   extends: Vue.component('RouterLink'),
 6 |   props: {
 7 |     noPrefetch: {
 8 |       type: Boolean,
 9 |       default: false
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/utils/footer-mixin.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   methods: {
 3 |     footer() {
 4 |       if ($('#mailContent').height() < $(window).height()) {
 5 |         this.$store.commit('changeFooterFixed', true)
 6 |       } else {
 7 |         this.$store.commit('changeFooterFixed', false)
 8 |       }
 9 |     }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/config/axios.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import axios from 'axios'
 3 | 
 4 | axios.interceptors.response.use((response) => {
 5 | 	// Do something with response data
 6 | 	return response.data ? response.data : {};
 7 | }, function (error) {
 8 | 	// Do something with response error
 9 | 	return Promise.reject(error);
10 | })
11 | 
12 | export default axios


--------------------------------------------------------------------------------
/utils/time-mixin.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 | 	methods: {
 3 | 		toZero (num) {
 4 |         return num > 9 ? num : `0${num}`
 5 |       },
 6 |       toTime(str, type) {
 7 |           const date = new Date(str)
 8 |           return `${date.getFullYear()}${type}${this.toZero(date.getMonth() + 1)}${type}${this.toZero(date.getDate())}`
 9 |       }
10 | 	}
11 | }
12 | 


--------------------------------------------------------------------------------
/store/modules/article.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 | 	state: {
 4 | 		data: [],
 5 | 		hotData: [],
 6 | 		selectArticle: {
 7 | 			meta: {}
 8 | 		}
 9 | 	},
10 | 	mutations: {
11 | 		getArticle (state, data) {
12 | 			state.data = data || []
13 | 		},
14 | 		getHotArticle (state, data) {
15 | 			state.hotData = data || []
16 | 		},
17 | 		selectArticle (state, data) {
18 | 			state.selectArticle = data || {}
19 | 		}
20 | 	}
21 | }
22 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 |     'plugin:vue/essential'
14 |   ],
15 |   // required to lint *.vue files
16 |   plugins: [
17 |     'vue'
18 |   ],
19 |   // add your custom rules here
20 |   rules: {}
21 | }
22 | 


--------------------------------------------------------------------------------
/utils/music.js:
--------------------------------------------------------------------------------
 1 | function formatTime(num) {
 2 |   var arr = num.substring(1, num.length).split(':')
 3 |   return (parseFloat(arr[0] * 60) + parseFloat(arr[1]))
 4 | }
 5 | 
 6 | export const formatLyric = str => {
 7 |   let arr = []
 8 |   if (str) {
 9 |     arr = str.split('[').reduce((current, v) => {
10 |       let arr = v.trim().split(']')
11 |       if (arr[1])  {
12 |         current.push({time: formatTime(arr[0]), text: arr[1]})
13 |       }
14 |       return current
15 |     }, [])
16 |   }
17 |   return arr
18 | }
19 | 
20 | export const findLine = (time, arr) => {
21 |   let len = arr.length - 1
22 |   for (let i = 0; i < len; i++) {
23 |     if (time <= arr[i].time) {
24 |       return i
25 |     }
26 |   }
27 |   return len
28 | }
29 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import article from './modules/article'
 4 | import project from './modules/project'
 5 | import hero from './modules/hero'
 6 | 
 7 | Vue.use(Vuex)
 8 | 
 9 | const store = () => new Vuex.Store({
10 |   state: {
11 |     scrollTop: 0,
12 |     footerFixed: false,
13 |     averterNum: 0
14 |   },
15 |   modules: {
16 |     article,
17 |     project,
18 |     hero
19 |   },
20 |   mutations: {
21 |     changeScroll (state, num) {
22 |       state.scrollTop = num
23 |     },
24 |     changeFooterFixed (state, isb) {
25 |       state.footerFixed = isb
26 |     },
27 |     changeAverter (state, num) {
28 |       state.averterNum = num
29 |     }
30 |   }
31 | })
32 | 
33 | export default store


--------------------------------------------------------------------------------
/components/player.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="music">
 3 | 		<div class="mControl">
 4 | 			<span>
 5 | 				<i class="iconfont">&#xe67f;</i>
 6 | 			</span>
 7 | 			<span>
 8 | 				<i class="iconfont" v-if="isPlay">&#xe60d;</i>
 9 | 				<i class="iconfont" v-else>&#xe69d;</i>
10 | 			</span>
11 | 			<span>
12 | 				<i class="iconfont">&#xe67d;</i>
13 | 			</span>
14 | 			<span>
15 | 				<i class="iconfont" v-if="isMute">&#xe65e;</i>
16 | 				<i class="iconfont" v-else>&#xe637;</i>
17 | 			</span>
18 | 		</div>
19 | 		<p class="mName">放飞自我</p>
20 | 	</div>
21 | </template>
22 | <script>
23 | export default {
24 |   name: "player",
25 |   data () {
26 | 	return {
27 | 		isPlay: true,
28 | 		isMute: false
29 | 	}
30 |   }
31 | }
32 | </script>
33 | <style lang="css" scoped>
34 | 	.music{
35 | 		max-width: 250px;
36 | 		color: #cccccc
37 | 	}
38 | 	.mControl, .mName{
39 | 		text-align: center;
40 | 	}
41 | 	.mControl span{
42 | 		padding: 0 5px;
43 | 	}
44 | 	.mControl i{
45 | 		font-size: 12px;
46 | 	}
47 | </style>


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | import Koa from 'koa'
 2 | import { Nuxt, Builder } from 'nuxt'
 3 | 
 4 | async function start () {
 5 |   const app = new Koa()
 6 |   const host = process.env.HOST || '127.0.0.1'
 7 |   const port = process.env.PORT || 3002
 8 | 
 9 |   // Import and Set Nuxt.js options
10 |   let config = require('../nuxt.config.js')
11 |   config.dev = !(app.env === 'production')
12 | 
13 |   // Instantiate nuxt.js
14 |   const nuxt = new Nuxt(config)
15 | 
16 |   // Build in development
17 |   if (config.dev) {
18 |     const builder = new Builder(nuxt)
19 |     await builder.build()
20 |   }
21 | 
22 |   app.use(async (ctx, next) => {
23 |     await next()
24 |     ctx.status = 200 // koa defaults to 404 when it sees that status is unset
25 |     return new Promise((resolve, reject) => {
26 |       ctx.res.on('close', resolve)
27 |       ctx.res.on('finish', resolve)
28 |       nuxt.render(ctx.req, ctx.res, promise => {
29 |         // nuxt.render passes a rejected promise into callback on error.
30 |         promise.then(resolve).catch(reject)
31 |       })
32 |     })
33 |   })
34 | 
35 |   app.listen(port, host)
36 |   console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console
37 | }
38 | 
39 | start()
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blog-nuxt",
 3 |   "version": "1.1.0",
 4 |   "description": "Nuxt.js project",
 5 |   "author": "何文林 <370215230@qq.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "backpack dev",
 9 |     "build": "nuxt build && backpack build",
10 |     "start": "cross-env NODE_ENV=production node build/main.js",
11 |     "precommit": "npm run lint",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "pm2": "pm2 deploy ecosystem.json production"
14 |   },
15 |   "dependencies": {
16 |     "axios": "^0.18.0",
17 |     "clipboard": "^2.0.0",
18 |     "cross-env": "^5.0.1",
19 |     "koa": "^2.4.1",
20 |     "nuxt": "^2.0.0",
21 |     "source-map-support": "^0.4.15"
22 |   },
23 |   "devDependencies": {
24 |     "babel-eslint": "^10.0.1",
25 |     "backpack-core": "^0.3.0",
26 |     "eslint": "^4.19.1",
27 |     "eslint-config-standard": "^10.2.1",
28 |     "eslint-friendly-formatter": "^4.0.1",
29 |     "eslint-loader": "^2.1.1",
30 |     "eslint-plugin-html": "^2.0.3",
31 |     "eslint-plugin-import": "^2.2.0",
32 |     "eslint-plugin-node": "^4.2.2",
33 |     "eslint-plugin-promise": "^3.4.0",
34 |     "eslint-plugin-standard": "^3.0.1",
35 |     "eslint-plugin-vue": "^4.3.0",
36 |     "nodemon": "^1.11.0",
37 |     "scmp": "^2.0.0"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'Naice',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { 'http-equiv': 'cleartype', content: 'on' },
10 |       { 'http-equiv': 'Cache-Control' },
11 |       { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },
12 |       { hid: 'description', name: 'description', content: 'Naice, 前端, blog' },
13 |       { hid: 'keywords', name: 'keywords', content: '前端开发，JavaScript, Node, Vue，nuxt' },
14 |       { name: 'author', content: '370215230@qq.com' }
15 |     ],
16 |     link: [
17 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
18 |     ],
19 |     script: [
20 |       { src: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js' },
21 |       { src: 'https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js' }
22 |     ]
23 |   },
24 |   css: [
25 |     '~assets/css/init.css',
26 |     '~assets/css/codeStyle.css'
27 |   ],
28 |   /*
29 |   ** Customize the progress bar color
30 |   */
31 |   loading: { color: '#3B8070' },
32 |   /*
33 |   ** Build configuration
34 |   */
35 |   build: {
36 |     /*
37 |     ** Run ESLint on save
38 |     */
39 |     extend (config, { isDev, isClient }) {
40 |       if (isDev && isClient) {
41 |         config.module.rules.push({
42 |           enforce: 'pre',
43 |           test: /\.(js|vue)$/,
44 |           loader: 'eslint-loader',
45 |           exclude: /(node_modules)/
46 |         })
47 |       }
48 |     }
49 |   },
50 |   cache: true
51 | }
52 | 


--------------------------------------------------------------------------------
/components/toTop.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sideIcon">
 3 | 	  <i class="iconfont" @click="mail">&#xe654;</i>
 4 | 	  <i class="iconfont" @click="scroll(1)">&#xe638;</i>
 5 | 	  <i class="iconfont" @click="scroll(0)">&#xe635;</i>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 | 	data() {
12 | 		return {
13 | 			scrollDom: null,
14 | 			scrollNum: 0
15 | 		}
16 | 	},
17 | 	computed: {
18 | 		scrollTop () {
19 | 			return this.$store.state.scrollTop
20 | 		}
21 | 	},
22 | 	methods: {
23 | 		scroll(dir) {
24 | 			if (dir === 1) {
25 | 				this.scrollNum += 400
26 | 			} else {
27 | 				this.scrollNum = 0
28 | 			}
29 | 			$("html,body").animate({scrollTop:`${this.scrollNum}px`}, 300);
30 | 		},
31 | 		mail() {
32 | 			window.open('http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=CTo_OTs4PDs6OUl4eCdqZmQ', '_blank')
33 | 		}
34 | 	},
35 | 	watch: {
36 | 		scrollTop (val) {
37 | 			this.scrollNum = val
38 | 		}
39 | 	}
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | .sideIcon{
45 | 	position: fixed;
46 | 	width: 42px;
47 | 	height: 126px;
48 | 	background: hsla(0,0%,77%,.4);
49 | 	bottom: 100px;
50 | 	left: 50%;
51 | 	margin-left: 500px;
52 | }
53 | .sideIcon i{
54 | 	display: block;
55 | 	height: 42px;
56 | 	text-align: center;
57 | 	line-height: 42px;
58 | 	cursor: pointer;
59 | 	box-sizing: border-box;
60 | 	font-size: 20px;
61 | }
62 | .sideIcon i:nth-of-type(1){
63 | 	border-bottom: 1px solid #f1f1f1;
64 | }
65 | .sideIcon i:nth-of-type(2){
66 | 	border-bottom: 1px solid #f1f1f1;
67 | }
68 | .sideIcon i:hover{
69 | 	background: #8ed53c;
70 | 	color: #ffffff;
71 | }
72 | </style>
73 | 
74 | 


--------------------------------------------------------------------------------
/api/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import axios from '../config/axios'
 3 | 
 4 | const baseUrl = process.env.NODE_ENV === 'production' ? 'production api' : 'http://127.0.0.1:3009/api/'
 5 | // const baseUrl = 'http://127.0.0.1:3009/api/'
 6 | 
 7 | export const getArticle = (params = {}) => axios.get(`${baseUrl}article/get`, {params})
 8 | 
 9 | export const getArticleId = (id) => axios.get(`${baseUrl}article/get/${id}`)
10 | 
11 | export const getArticleAll = () => axios.get(`${baseUrl}article/getAll`)
12 | 
13 | export const articleLike = (id) => axios.post(`${baseUrl}article/like/${id}`)
14 | 
15 | export const getTag = () => axios.get(`${baseUrl}tag/get`)
16 | 
17 | export const getComment = (params) => axios.get(`${baseUrl}comment/get`, {params})
18 | 
19 | export const addComment = (params) => axios.put(`${baseUrl}comment/add`, {...params})
20 | 
21 | export const commentLike = (id) => axios.post(`${baseUrl}comment/like/${id}`)
22 | 
23 | export const addReply = (params) => axios.put(`${baseUrl}reply/add`, {...params})
24 | 
25 | export const getReply = (cid) => axios.get(`${baseUrl}reply/get/${cid}`)
26 | 
27 | export const getHero = (params) => axios.get(`${baseUrl}hero/get`, {params})
28 | 
29 | export const addHero = (params) => axios.put(`${baseUrl}hero/add`, {...params})
30 | 
31 | export const addArticleLike = () => axios.put(`${baseUrl}hero/add`, {...params})
32 | 
33 | export const addCommentLike = () => axios.put(`${baseUrl}hero/add`, {...params})
34 | 
35 | export const replyCommentLike = () => axios.put(`${baseUrl}hero/add`, {...params})
36 | 
37 | export const getProject = (params) => axios.get(`${baseUrl}project/get`, {params})
38 | 
39 | export const getMusic = (params) => axios.get(`${baseUrl}music/get`, {params})


--------------------------------------------------------------------------------
/.nuxt/views/error.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <title>Server error</title>
 5 | <meta charset="utf-8">
 6 | <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name=viewport>
 7 | <style>
 8 | .__nuxt-error-page{padding: 1rem;background:#f7f8fb;color:#47494e;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:sans-serif;font-weight:100!important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0;right:0;bottom:0}.__nuxt-error-page .error{max-width:450px}.__nuxt-error-page .title{font-size:24px;font-size:1.5rem;margin-top:15px;color:#47494e;margin-bottom:8px}.__nuxt-error-page .description{color:#7f828b;line-height:21px;margin-bottom:10px}.__nuxt-error-page a{color:#7f828b!important;text-decoration:none}.__nuxt-error-page .logo{position:fixed;left:12px;bottom:12px}
 9 | </style>
10 | </head>
11 | <body>
12 |   <div class="__nuxt-error-page">
13 |     <div class="error">
14 |         <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48"><path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"/></svg>
15 |         <div class="title">Server error</div>
16 |         <div class="description">{{ message }}</div>
17 |     </div>
18 |     <div class="logo">
19 |       <a href="https://nuxtjs.org" target="_blank" rel="noopener">Nuxt.js</a>
20 |     </div>
21 |   </div>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/.nuxt/components/nuxt.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { compile } from '../utils'
 3 | 
 4 | import NuxtError from './nuxt-error.vue'
 5 | 
 6 | import NuxtChild from './nuxt-child'
 7 | 
 8 | export default {
 9 |   name: 'Nuxt',
10 |   components: {
11 |     NuxtChild,
12 |     NuxtError
13 |   },
14 |   props: {
15 |     nuxtChildKey: {
16 |       type: String,
17 |       default: undefined
18 |     },
19 |     keepAlive: Boolean,
20 |     keepAliveProps: {
21 |       type: Object,
22 |       default: undefined
23 |     },
24 |     name: {
25 |       type: String,
26 |       default: 'default'
27 |     }
28 |   },
29 |   computed: {
30 |     routerViewKey() {
31 |       // If nuxtChildKey prop is given or current route has children
32 |       if (typeof this.nuxtChildKey !== 'undefined' || this.$route.matched.length > 1) {
33 |         return this.nuxtChildKey || compile(this.$route.matched[0].path)(this.$route.params)
34 |       }
35 | 
36 |       const [matchedRoute] = this.$route.matched
37 | 
38 |       if (!matchedRoute) {
39 |         return this.$route.path
40 |       }
41 | 
42 |       const Component = matchedRoute.components.default
43 | 
44 |       if (Component && Component.options) {
45 |         const { options } = Component
46 | 
47 |         if (options.key) {
48 |           return (typeof options.key === 'function' ? options.key(this.$route) : options.key)
49 |         }
50 |       }
51 | 
52 |       const strict = /\/$/.test(matchedRoute.path)
53 |       return strict ? this.$route.path : this.$route.path.replace(/\/$/, '')
54 |     }
55 |   },
56 |   beforeCreate() {
57 |     Vue.util.defineReactive(this, 'nuxt', this.$root.$options.nuxt)
58 |   },
59 |   render(h) {
60 |     // If there is some error
61 |     if (this.nuxt.err) {
62 |       return h('NuxtError', {
63 |         props: {
64 |           error: this.nuxt.err
65 |         }
66 |       })
67 |     }
68 |     // Directly return nuxt child
69 |     return h('NuxtChild', {
70 |       key: this.routerViewKey,
71 |       props: this.$props
72 |     })
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/assets/css/codeStyle.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Agate by Taufik Nurrohman <https://github.com/tovic>
  3 |  * ----------------------------------------------------
  4 |  *
  5 |  * #ade5fc
  6 |  * #a2fca2
  7 |  * #c6b4f0
  8 |  * #d36363
  9 |  * #fcc28c
 10 |  * #fc9b9b
 11 |  * #ffa
 12 |  * #fff
 13 |  * #333
 14 |  * #62c8f3
 15 |  * #888
 16 |  *
 17 |  */
 18 | 
 19 | .hljs {
 20 |   display: block;
 21 |   overflow-x: auto;
 22 |   padding: 1em;
 23 |   background: #333;
 24 |   color: white;
 25 | }
 26 | 
 27 | .hljs-name,
 28 | .hljs-strong {
 29 |   font-weight: bold;
 30 | }
 31 | 
 32 | .hljs-code,
 33 | .hljs-emphasis {
 34 |   font-style: italic;
 35 | }
 36 | 
 37 | .hljs-tag {
 38 |   color: #62c8f3;
 39 | }
 40 | 
 41 | .hljs-variable,
 42 | .hljs-template-variable,
 43 | .hljs-selector-id,
 44 | .hljs-selector-class {
 45 |   color: #ade5fc;
 46 | }
 47 | 
 48 | .hljs-string,
 49 | .hljs-bullet {
 50 |   color: #a2fca2;
 51 | }
 52 | 
 53 | .hljs-type,
 54 | .hljs-title,
 55 | .hljs-section,
 56 | .hljs-attribute,
 57 | .hljs-quote,
 58 | .hljs-built_in,
 59 | .hljs-builtin-name {
 60 |   color: #ffa;
 61 | }
 62 | 
 63 | .hljs-number,
 64 | .hljs-symbol,
 65 | .hljs-bullet {
 66 |   color: #d36363;
 67 | }
 68 | 
 69 | .hljs-keyword,
 70 | .hljs-selector-tag,
 71 | .hljs-literal {
 72 |   color: #fcc28c;
 73 | }
 74 | 
 75 | .hljs-comment,
 76 | .hljs-deletion,
 77 | .hljs-code {
 78 |   color: #888;
 79 | }
 80 | 
 81 | .hljs-regexp,
 82 | .hljs-link {
 83 |   color: #c6b4f0;
 84 | }
 85 | 
 86 | .hljs-meta {
 87 |   color: #fc9b9b;
 88 | }
 89 | 
 90 | .hljs-deletion {
 91 |   background-color: #fc9b9b;
 92 |   color: #333;
 93 | }
 94 | 
 95 | .hljs-addition {
 96 |   background-color: #a2fca2;
 97 |   color: #333;
 98 | }
 99 | 
100 | .hljs a {
101 |   color: inherit;
102 | }
103 | 
104 | .hljs a:focus,
105 | .hljs a:hover {
106 |   color: inherit;
107 |   text-decoration: underline;
108 | }
109 | 
110 | code, kbd, pre, samp{
111 |   font-family: Monaco, Menlo, Consolas, -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
112 | }
113 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 一直以来都想用自己所想的技术做一些个人小项目，之前的[博客](https://segmentfault.com/a/1190000010301516)觉从视觉上和交互上得有点小小不满足，所以想着做一些小小的重构。陆陆续续花了两个多月的时间，原因是工作特别的忙（为自己懒惰找借口），所以知道今天才发布上线。
 2 | 
 3 | 博客地址：[naice-blog](https://github.com/naihe138/naice-blog)
 4 | 
 5 | 博客管理：[naice-blog-admin](https://github.com/naihe138/naice-blog-admin)
 6 | 
 7 | 博客后台：[node-koa](https://github.com/naihe138/naice-blog-koa)
 8 | 
 9 | 
10 | ### 相关截图:
11 | 
12 | 
13 | ![首页](https://user-gold-cdn.xitu.io/2018/4/1/1627f9d60ba1bb5d?w=1440&h=877&f=png&s=259281)
14 | 
15 | ![文章](https://user-gold-cdn.xitu.io/2018/4/1/1627f9dd172c24fb?w=1440&h=877&f=png&s=294054)
16 | 
17 | ![文章详情](https://user-gold-cdn.xitu.io/2018/4/1/1627fa172d40b56e?w=1500&h=1055&f=png&s=644818)
18 | 
19 | ![评论](https://user-gold-cdn.xitu.io/2018/4/1/1627fa1d85695f5d?w=1500&h=1055&f=png&s=299251)
20 | 
21 | ![音乐](http://img.store.naice.me/upqtsjle8.png)
22 | 
23 | ![留言](https://user-gold-cdn.xitu.io/2018/4/1/1627f9f2b869f78d?w=1440&h=877&f=png&s=175663)
24 | 
25 | ![归档](https://user-gold-cdn.xitu.io/2018/4/1/1627fa33c4308b1d?w=1440&h=877&f=png&s=285072)
26 | 
27 | ![关于](https://user-gold-cdn.xitu.io/2018/4/1/1627fa36c72e2f13?w=1440&h=877&f=png&s=345397)
28 | 
29 | 
30 | ### 相关技术栈：
31 | 
32 | + vue + vuex + vue-router +nuxt
33 | + react + redux + react-router + ant design
34 | + token控制
35 | + 按需加载，ssr
36 | + ....
37 | 
38 | 
39 | ### server
40 | 
41 | + node + koa + mongoose
42 | + 路由用了装饰器包装，鉴别参数是否正确
43 | + 登录权限jwt
44 | + 百度sro推送，邮件通知
45 | + pm2自动化部署
46 | + nginx + ssl + http2
47 | + 缓存
48 | + ....
49 | 
50 | 
51 | ### 未来可能加入
52 | 
53 | + ~~音乐可视化~~
54 | + 移动适配
55 | + 页面数据可视化统计
56 | + react-native
57 | + ....
58 | 
59 | 
60 | ### 启动
61 | 
62 | >启动前一定要先启动[服务器](https://github.com/naihe138/naice-blog-koa)，不然那请求不到数据
63 | 
64 | #### Clone
65 | ````
66 | git clone git@github.com:naihe138/naice-blog.git
67 | 
68 | ````
69 | 
70 | #### Install
71 | ````
72 | npm install
73 | 
74 | ````
75 | 
76 | #### Dev
77 | 
78 | ````
79 | npm run dev
80 | ````
81 | 
82 | #### Build
83 | 
84 | ````
85 | npm run build
86 | ````
87 | 
88 | #### View build
89 | 
90 | ````
91 | npm start
92 | ````
93 | 
94 | 如在浏览中遇到任何的bug，请留言我，我会第一时间修复，就此先谢谢
95 | 


--------------------------------------------------------------------------------
/.nuxt/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import { interopDefault } from './utils'
 4 | import scrollBehavior from './router.scrollBehavior.js'
 5 | 
 6 | const _70fb4839 = () => interopDefault(import('../pages/about.vue' /* webpackChunkName: "pages/about" */))
 7 | const _7f5d3839 = () => interopDefault(import('../pages/allarticle.vue' /* webpackChunkName: "pages/allarticle" */))
 8 | const _744ca525 = () => interopDefault(import('../pages/article/index.vue' /* webpackChunkName: "pages/article/index" */))
 9 | const _33d8927e = () => interopDefault(import('../pages/hero.vue' /* webpackChunkName: "pages/hero" */))
10 | const _4fd3f25e = () => interopDefault(import('../pages/music.vue' /* webpackChunkName: "pages/music" */))
11 | const _315c1676 = () => interopDefault(import('../pages/project.vue' /* webpackChunkName: "pages/project" */))
12 | const _06c8a666 = () => interopDefault(import('../pages/article/_id.vue' /* webpackChunkName: "pages/article/_id" */))
13 | const _de99ba04 = () => interopDefault(import('../pages/index.vue' /* webpackChunkName: "pages/index" */))
14 | 
15 | Vue.use(Router)
16 | 
17 | export const routerOptions = {
18 |   mode: 'history',
19 |   base: decodeURI('/'),
20 |   linkActiveClass: 'nuxt-link-active',
21 |   linkExactActiveClass: 'nuxt-link-exact-active',
22 |   scrollBehavior,
23 | 
24 |   routes: [{
25 |       path: "/about",
26 |       component: _70fb4839,
27 |       name: "about"
28 |     }, {
29 |       path: "/allarticle",
30 |       component: _7f5d3839,
31 |       name: "allarticle"
32 |     }, {
33 |       path: "/article",
34 |       component: _744ca525,
35 |       name: "article"
36 |     }, {
37 |       path: "/hero",
38 |       component: _33d8927e,
39 |       name: "hero"
40 |     }, {
41 |       path: "/music",
42 |       component: _4fd3f25e,
43 |       name: "music"
44 |     }, {
45 |       path: "/project",
46 |       component: _315c1676,
47 |       name: "project"
48 |     }, {
49 |       path: "/article/:id",
50 |       component: _06c8a666,
51 |       name: "article-id"
52 |     }, {
53 |       path: "/",
54 |       component: _de99ba04,
55 |       name: "index"
56 |     }],
57 | 
58 |   fallback: false
59 | }
60 | 
61 | export function createRouter() {
62 |   return new Router(routerOptions)
63 | }
64 | 


--------------------------------------------------------------------------------
/pages/allarticle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="allArticleBox">
 3 | 	  <div class="tags">
 4 | 		  <nuxt-link 
 5 | 		  	:to="`/article?tag=${item._id}`"
 6 | 		  	v-for="(item, index) in tags.result.list" 
 7 | 			:key="index">{{item.name}}<span>({{item.count}})</span></nuxt-link>
 8 | 	  </div>
 9 | 	  <div class="articleList" v-if="article.length > 0">
10 | 		  <div class="item" v-for="(item, index) in article" :key="index">
11 | 			  <div  v-for="(article, j) in item.monthList" :key="j">
12 | 				  	<h2>{{item.year}}/{{article.month}}</h2>
13 | 					<div class="itemLink">
14 | 						<nuxt-link :to="`/article/${a._id}`" v-for="(a,i) in article.articleList" :key="i">{{a.title}}</nuxt-link>
15 | 					</div>
16 | 			  </div>
17 | 		  </div>
18 | 	  </div>
19 |   </section>
20 | </template>
21 | 
22 | <script>
23 | import FooterMixin from '../utils/footer-mixin'
24 | import {getArticleAll, getTag} from '../api'
25 | 
26 | export default {
27 | 	head: {
28 | 		title: 'naice | 归档'
29 | 	},
30 | 	layout: 'layout',
31 | 	mixins: [FooterMixin],
32 | 	async asyncData ({ params }) {
33 |         const tags = await getTag()
34 |         return {tags}
35 | 	},
36 | 	data() {
37 | 		return {
38 | 			article: []
39 | 		}
40 | 	},
41 | 	created () {
42 | 		getArticleAll().then(res => {
43 | 			this.article = res.result || []
44 | 		})
45 | 		this.$nextTick(() => {
46 | 			this.footer()
47 | 		})
48 | 	}
49 | }
50 | </script>
51 | 
52 | <style scoped>
53 | .allArticleBox{
54 | 	margin: 0 auto;
55 | 	width: 900px;
56 | 	overflow: hidden;
57 | }
58 | .tags{
59 | 	width: 100%;
60 | 	overflow: hidden;
61 | 	border: 1px solid #f1f1f1;
62 | 	padding: 20px;
63 | }
64 | .tags a{
65 | 	display: inline-block;
66 | 	padding: 5px 10px;
67 | }
68 | .articleList{
69 | 	border: 1px solid #f1f1f1;
70 | 	padding: 20px;
71 | 	margin-top: 20px;
72 | }
73 | .item{
74 | 	margin-bottom: 20px;
75 | }
76 | .itemLink{
77 | 	box-sizing: border-box;
78 | 	width: 100%;
79 | 	padding-top: 5px;
80 | }
81 | .itemLink a{
82 | 	display: block;
83 | 	width: 100%;
84 | 	box-sizing: border-box;
85 | 	overflow: hidden;
86 | 	text-overflow: ellipsis;
87 | 	white-space: nowrap;
88 | 	height: 32px;
89 | 	line-height: 32px;
90 | 	padding-left: 20px;
91 | }
92 | .itemLink a::before{
93 | 	content: "•";
94 | 	display: inline-block;
95 | 	padding-right: 5px;
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/.nuxt/loading.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 | #nuxt-loading {
  3 |   visibility: hidden;
  4 |   opacity: 0;
  5 |   position: absolute;
  6 |   left: 0;
  7 |   right: 0;
  8 |   top: 0;
  9 |   bottom: 0;
 10 |   display: flex;
 11 |   justify-content: center;
 12 |   align-items: center;
 13 |   flex-direction: column;
 14 |   animation: nuxtLoadingIn 10s ease;
 15 |   -webkit-animation: nuxtLoadingIn 10s ease;
 16 |   animation-fill-mode: forwards;
 17 |   overflow: hidden;
 18 | }
 19 | 
 20 | @keyframes nuxtLoadingIn {
 21 |   0% {
 22 |     visibility: hidden;
 23 |     opacity: 0;
 24 |   }
 25 |   20% {
 26 |     visibility: visible;
 27 |     opacity: 0;
 28 |   }
 29 |   100% {
 30 |     visibility: visible;
 31 |     opacity: 1;
 32 |   }
 33 | }
 34 | 
 35 | @-webkit-keyframes nuxtLoadingIn {
 36 |   0% {
 37 |     visibility: hidden;
 38 |     opacity: 0;
 39 |   }
 40 |   20% {
 41 |     visibility: visible;
 42 |     opacity: 0;
 43 |   }
 44 |   100% {
 45 |     visibility: visible;
 46 |     opacity: 1;
 47 |   }
 48 | }
 49 | 
 50 | #nuxt-loading>div,
 51 | #nuxt-loading>div:after {
 52 |   border-radius: 50%;
 53 |   width: 5rem;
 54 |   height: 5rem;
 55 | }
 56 | 
 57 | #nuxt-loading>div {
 58 |   font-size: 10px;
 59 |   position: relative;
 60 |   text-indent: -9999em;
 61 |   border: .5rem solid #F5F5F5;
 62 |   border-left: .5rem solid #3B8070;
 63 |   -webkit-transform: translateZ(0);
 64 |   -ms-transform: translateZ(0);
 65 |   transform: translateZ(0);
 66 |   -webkit-animation: nuxtLoading 1.1s infinite linear;
 67 |   animation: nuxtLoading 1.1s infinite linear;
 68 | }
 69 | 
 70 | #nuxt-loading.error>div {
 71 |   border-left: .5rem solid #ff4500;
 72 |   animation-duration: 5s;
 73 | }
 74 | 
 75 | @-webkit-keyframes nuxtLoading {
 76 |   0% {
 77 |     -webkit-transform: rotate(0deg);
 78 |     transform: rotate(0deg);
 79 |   }
 80 |   100% {
 81 |     -webkit-transform: rotate(360deg);
 82 |     transform: rotate(360deg);
 83 |   }
 84 | }
 85 | 
 86 | @keyframes nuxtLoading {
 87 |   0% {
 88 |     -webkit-transform: rotate(0deg);
 89 |     transform: rotate(0deg);
 90 |   }
 91 |   100% {
 92 |     -webkit-transform: rotate(360deg);
 93 |     transform: rotate(360deg);
 94 |   }
 95 | }
 96 | </style>
 97 | 
 98 | <script>
 99 | window.addEventListener('error', function () {
100 |   var e = document.getElementById('nuxt-loading');
101 |   if (e) e.className += ' error';
102 | });
103 | </script>
104 | 
105 | <div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div>
106 | 
107 | <!-- https://projects.lukehaas.me/css-loaders -->
108 | 


--------------------------------------------------------------------------------
/.nuxt/components/nuxt-error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="__nuxt-error-page">
 3 |     <div class="error">
 4 |       <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48">
 5 |         <path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" />
 6 |       </svg>
 7 | 
 8 |       <div class="title">{{ message }}</div>
 9 |       <p v-if="statusCode === 404" class="description">
10 |         <NuxtLink class="error-link" to="/">Back to the home page</NuxtLink>
11 |       </p>
12 | 
13 |       <p class="description" v-else>An error occurred while rendering the page. Check developer tools console for details.</p>
14 | 
15 |       <div class="logo">
16 |         <a href="https://nuxtjs.org" target="_blank" rel="noopener">Nuxt.js</a>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: 'NuxtError',
25 |   props: {
26 |     error: {
27 |       type: Object,
28 |       default: null
29 |     }
30 |   },
31 |   head() {
32 |     return {
33 |       title: this.message,
34 |       meta: [
35 |         {
36 |           name: 'viewport',
37 |           content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
38 |         }
39 |       ]
40 |     }
41 |   },
42 |   computed: {
43 |     statusCode() {
44 |       return (this.error && this.error.statusCode) || 500
45 |     },
46 |     message() {
47 |       return this.error.message || `Error`
48 |     }
49 |   }
50 | }
51 | </script>
52 | 
53 | <style>
54 | .__nuxt-error-page {
55 |   padding: 1rem;
56 |   background: #F7F8FB;
57 |   color: #47494E;
58 |   text-align: center;
59 |   display: flex;
60 |   justify-content: center;
61 |   align-items: center;
62 |   flex-direction: column;
63 |   font-family: sans-serif;
64 |   font-weight: 100 !important;
65 |   -ms-text-size-adjust: 100%;
66 |   -webkit-text-size-adjust: 100%;
67 |   -webkit-font-smoothing: antialiased;
68 |   position: absolute;
69 |   top: 0;
70 |   left: 0;
71 |   right: 0;
72 |   bottom: 0;
73 | }
74 | .__nuxt-error-page .error {
75 |   max-width: 450px;
76 | }
77 | .__nuxt-error-page .title {
78 |   font-size: 1.5rem;
79 |   margin-top: 15px;
80 |   color: #47494E;
81 |   margin-bottom: 8px;
82 | }
83 | .__nuxt-error-page .description {
84 |   color: #7F828B;
85 |   line-height: 21px;
86 |   margin-bottom: 10px;
87 | }
88 | .__nuxt-error-page a {
89 |   color: #7F828B !important;
90 |   text-decoration: none;
91 | }
92 | .__nuxt-error-page .logo {
93 |   position: fixed;
94 |   left: 12px;
95 |   bottom: 12px;
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/.nuxt/components/nuxt-link.client.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | const requestIdleCallback = window.requestIdleCallback ||
 4 |   function (cb) {
 5 |     const start = Date.now()
 6 |     return setTimeout(function () {
 7 |       cb({
 8 |         didTimeout: false,
 9 |         timeRemaining: function () {
10 |           return Math.max(0, 50 - (Date.now() - start))
11 |         }
12 |       })
13 |     }, 1)
14 |   }
15 | const observer = window.IntersectionObserver && new window.IntersectionObserver((entries) => {
16 |   entries.forEach(({ intersectionRatio, target: link }) => {
17 |     if (intersectionRatio <= 0) {
18 |       return
19 |     }
20 |     link.__prefetch()
21 |   })
22 | })
23 | 
24 | export default {
25 |   name: 'NuxtLink',
26 |   extends: Vue.component('RouterLink'),
27 |   props: {
28 |     noPrefetch: {
29 |       type: Boolean,
30 |       default: false
31 |     }
32 |   },
33 |   mounted() {
34 |     if (!this.noPrefetch) {
35 |       requestIdleCallback(this.observe, { timeout: 2e3 })
36 |     }
37 |   },
38 |   beforeDestroy() {
39 |     if (this.__observed) {
40 |       observer.unobserve(this.$el)
41 |       delete this.$el.__prefetch
42 |     }
43 |   },
44 |   methods: {
45 |     observe() {
46 |       // If no IntersectionObserver, avoid prefetching
47 |       if (!observer) {
48 |         return
49 |       }
50 |       // Add to observer
51 |       if (this.shouldPrefetch()) {
52 |         this.$el.__prefetch = this.prefetch.bind(this)
53 |         observer.observe(this.$el)
54 |         this.__observed = true
55 |       }
56 |     },
57 |     shouldPrefetch() {
58 |       return this.getPrefetchComponents().length > 0
59 |     },
60 |     canPrefetch() {
61 |       const conn = navigator.connection
62 |       const hasBadConnection = this.$nuxt.isOffline || (conn && ((conn.effectiveType || '').includes('2g') || conn.saveData))
63 | 
64 |       return !hasBadConnection
65 |     },
66 |     getPrefetchComponents() {
67 |       const ref = this.$router.resolve(this.to, this.$route, this.append)
68 |       const Components = ref.resolved.matched.map(r => r.components.default)
69 | 
70 |       return Components.filter(Component => typeof Component === 'function' && !Component.options && !Component.__prefetched)
71 |     },
72 |     prefetch() {
73 |       if (!this.canPrefetch()) {
74 |         return
75 |       }
76 |       // Stop obersing this link (in case of internet connection changes)
77 |       observer.unobserve(this.$el)
78 |       const Components = this.getPrefetchComponents()
79 | 
80 |       for (const Component of Components) {
81 |         const componentOrPromise = Component()
82 |         if (componentOrPromise instanceof Promise) {
83 |           componentOrPromise.catch(() => {})
84 |         }
85 |         Component.__prefetched = true
86 |       }
87 |     }
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/.nuxt/router.scrollBehavior.js:
--------------------------------------------------------------------------------
 1 | import { getMatchedComponents } from './utils'
 2 | 
 3 | if (process.client) {
 4 |   if ('scrollRestoration' in window.history) {
 5 |     window.history.scrollRestoration = 'manual'
 6 | 
 7 |     // reset scrollRestoration to auto when leaving page, allowing page reload
 8 |     // and back-navigation from other pages to use the browser to restore the
 9 |     // scrolling position.
10 |     window.addEventListener('beforeunload', () => {
11 |       window.history.scrollRestoration = 'auto'
12 |     })
13 | 
14 |     // Setting scrollRestoration to manual again when returning to this page.
15 |     window.addEventListener('load', () => {
16 |       window.history.scrollRestoration = 'manual'
17 |     })
18 |   }
19 | }
20 | 
21 | export default function (to, from, savedPosition) {
22 |   // if the returned position is falsy or an empty object,
23 |   // will retain current scroll position.
24 |   let position = false
25 | 
26 |   // if no children detected and scrollToTop is not explicitly disabled
27 |   const Pages = getMatchedComponents(to)
28 |   if (
29 |     Pages.length < 2 &&
30 |     Pages.every(Page => Page.options.scrollToTop !== false)
31 |   ) {
32 |     // scroll to the top of the page
33 |     position = { x: 0, y: 0 }
34 |   } else if (Pages.some(Page => Page.options.scrollToTop)) {
35 |     // if one of the children has scrollToTop option set to true
36 |     position = { x: 0, y: 0 }
37 |   }
38 | 
39 |   // savedPosition is only available for popstate navigations (back button)
40 |   if (savedPosition) {
41 |     position = savedPosition
42 |   }
43 | 
44 |   const nuxt = window.$nuxt
45 | 
46 |   // triggerScroll is only fired when a new component is loaded
47 |   if (to.path === from.path && to.hash !== from.hash) {
48 |     nuxt.$nextTick(() => nuxt.$emit('triggerScroll'))
49 |   }
50 | 
51 |   return new Promise((resolve) => {
52 |     // wait for the out transition to complete (if necessary)
53 |     nuxt.$once('triggerScroll', () => {
54 |       // coords will be used if no selector is provided,
55 |       // or if the selector didn't match any element.
56 |       if (to.hash) {
57 |         let hash = to.hash
58 |         // CSS.escape() is not supported with IE and Edge.
59 |         if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') {
60 |           hash = '#' + window.CSS.escape(hash.substr(1))
61 |         }
62 |         try {
63 |           if (document.querySelector(hash)) {
64 |             // scroll to anchor by returning the selector
65 |             position = { selector: hash }
66 |           }
67 |         } catch (e) {
68 |           console.warn('Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).')
69 |         }
70 |       }
71 |       resolve(position)
72 |     })
73 |   })
74 | }
75 | 


--------------------------------------------------------------------------------
/utils/blowser.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export const getBrowserVersion = (agent) => {
 3 | 	let Browser = '';
 4 | 	//IE
 5 | 	if (agent.indexOf('msie') > 0) {
 6 | 		let regStr_ie = /msie [\d.]+;/gi
 7 | 		Browser = 'Ie'
 8 | 	}
 9 | 	//firefox
10 | 	else if (agent.indexOf('firefox') > 0) {
11 | 		let regStr_ff = /firefox\/[\d.]+/gi;
12 | 		Browser = 'Firefox';
13 | 	}
14 | 	//Chrome
15 | 	else if (agent.indexOf('chrome') > 0) {
16 | 		let regStr_chrome = /chrome\/[\d.]+/gi;
17 | 		Browser = "Chrome";
18 | 	}
19 | 	// Safari
20 | 	else if (agent.indexOf('safari') > 0 && agent.indexOf
21 | ('chrome') < 0) {
22 | 		let regStr_saf = /version\/[\d.]+/gi;
23 | 		Browser = 'Safari'
24 | 	} else {
25 | 		Browser = 'Chrome'
26 | 	}
27 | 	return Browser;
28 | }
29 | 
30 | export const currentSystem = (str) => {
31 | 	const reg = /mac/ig
32 | 	return reg.test(str) ? 'Mac' : 'Window'
33 | }
34 | 
35 | export const avarterArr = [
36 | 	'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3954676606,1888158900&fm=11&gp=0.jpg',
37 | 	'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1286998490,3468341349&fm=11&gp=0.jpg',
38 | 	'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=353868547,2822233069&fm=27&gp=0.jpg',
39 | 	'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1178011732,3353631614&fm=27&gp=0.jpg',
40 | 	'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2481763586,4087522518&fm=27&gp=0.jpg',
41 | 	'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1034317729,337624616&fm=27&gp=0.jpg',
42 | 	'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=128013007,1946750280&fm=27&gp=0.jpg',
43 | 	'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4148795727,732143832&fm=27&gp=0.jpg',
44 | 	'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4121225864,785761951&fm=27&gp=0.jpg',
45 | 	'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3619070856,3103619106&fm=27&gp=0.jpg',
46 | 	'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1910862757,2676655804&fm=27&gp=0.jpg',
47 | 	'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=977468359,542518020&fm=27&gp=0.jpg',
48 | 	'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=600840806,2113634000&fm=27&gp=0.jpg',
49 | 	'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2475222708,3513835460&fm=27&gp=0.jpg',
50 | 	'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1478849654,1851926890&fm=27&gp=0.jpg',
51 | 	'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1921393379,4069134737&fm=27&gp=0.jpg',
52 | 	'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1067594990,1110172622&fm=27&gp=0.jpg',
53 | 	'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=566083323,1162924276&fm=27&gp=0.jpg',
54 | 	'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2200767505,492420988&fm=27&gp=0.jpg',
55 | 	'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1873573939,3515804663&fm=27&gp=0.jpg'
56 | ]
57 | 
58 | 


--------------------------------------------------------------------------------
/pages/project.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<section class="projectBox">
  3 | 		<div class="item" v-for="(item, index) in project" :key="index">
  4 | 			<div class="iconfont icon" :class="item.icon"></div>
  5 | 			<h3 class="title">{{item.title}}</h3>
  6 | 			<p class="desc">{{item.descript}}</p>
  7 | 			<div class="btn">
  8 | 				<a class="github" target="_blank" :href="item.github"><i class="iconfont">&#xe8b6;</i>github</a>
  9 | 				<a class="view" target="_blank" :href="item.view"><i class="iconfont">&#xe7b9;</i>view</a>
 10 | 			</div>
 11 | 		</div>
 12 | 	</section>
 13 | </template>
 14 | 
 15 | <script>
 16 | import FooterMixin from '../utils/footer-mixin'
 17 | import {getProject} from '../api'
 18 | export default {
 19 | 	head () {
 20 | 		return {
 21 | 			title: 'naice | 项目'
 22 | 		}
 23 | 	},
 24 | 	layout: 'layout',
 25 | 	mixins: [FooterMixin],
 26 | 	computed: {
 27 | 		project() {
 28 | 			return this.$store.state.project.data
 29 | 		}
 30 | 	},
 31 | 	created() {
 32 | 		if (this.project.length == 0) {
 33 | 			getProject({}).then(res => {
 34 | 				if (res.code === 1) {
 35 | 					this.$store.commit('getProject', res.result.list)
 36 | 					this.$nextTick(() => {
 37 | 						this.footer()
 38 | 					})
 39 | 				}
 40 |       })
 41 | 		}
 42 | 	},
 43 |   beforeRouteEnter (to, from, next) {
 44 |     next(vm => {
 45 |       vm.$nextTick(() => {
 46 | 				vm.footer()
 47 | 			})
 48 |     })
 49 |   },
 50 | }
 51 | </script>
 52 | 
 53 | <style scoped>
 54 | .projectBox{
 55 | 	width: 900px;
 56 | 	margin: 0 auto;
 57 | 	overflow: hidden;
 58 | }
 59 | .item{
 60 | 	width: 217px;
 61 | 	height: 280px;
 62 | 	background: rgba(0, 0, 0, 0.02);
 63 | 	border: 1px solid #f1f1f1;
 64 | 	box-sizing: border-box;
 65 | 	padding: 10px;
 66 | 	cursor: pointer;
 67 | 	transition: background 0.3s;
 68 | 	float: left;
 69 | 	margin-right: 10px;
 70 | 	margin-bottom: 10px;
 71 | }
 72 | .projectBox .item:nth-child(4n) {
 73 | 	margin-right: 0;
 74 | }
 75 | .item:hover{
 76 | 	background: #ffffff;
 77 | }
 78 | .item:hover .icon{
 79 | 	transform: rotate(180deg);
 80 | }
 81 | .item:hover .title{
 82 | 	color: #000;
 83 | }
 84 | .icon{
 85 | 	height: 120px;
 86 | 	text-align: center;
 87 | 	line-height: 120px;
 88 | 	font-size: 70px;
 89 | 	transition: transform 0.5s;
 90 | }
 91 | .title{
 92 | 	text-align: center;
 93 | 	white-space: nowrap;
 94 | 	text-overflow: ellipsis;
 95 | 	width: 100%;
 96 | 	height: 32px;
 97 | 	line-height: 32px;
 98 | 	overflow: hidden;
 99 | 	font-size: 16px;
100 | 	transition: 0.3s;
101 | }
102 | .desc{
103 | 	width: 100%;
104 | 	height: 50px;
105 | 	margin-top: 10px;
106 | 	overflow: hidden;
107 | 	line-height: 26px;
108 | 	margin-bottom: 10px;
109 | }
110 | .btn{
111 | 	border-top: 1px solid #eeeeee;
112 | 	display: flex;
113 | 	height: 40px;
114 | }
115 | .btn > a{
116 | 	width: 50%;
117 | 	position: relative;
118 | 	text-align: center;
119 | 	line-height: 40px;
120 | 	box-sizing: border-box;
121 | }
122 | .btn > a:hover{
123 | 	color: #8ed53c;
124 | }
125 | .github::before{
126 | 	content: "";
127 | 	display: block;
128 | 	position: absolute;
129 | 	right: 0;
130 | 	top: 15%;
131 | 	width: 1px;
132 | 	height: 70%;
133 | 	background: #eeeeee;
134 | }
135 | </style>
136 | 
137 | 


--------------------------------------------------------------------------------
/.nuxt/components/nuxt-child.js:
--------------------------------------------------------------------------------
  1 | 
  2 | export default {
  3 |   name: 'NuxtChild',
  4 |   functional: true,
  5 |   props: {
  6 |     nuxtChildKey: {
  7 |       type: String,
  8 |       default: ''
  9 |     },
 10 |     keepAlive: Boolean,
 11 |     keepAliveProps: {
 12 |       type: Object,
 13 |       default: undefined
 14 |     }
 15 |   },
 16 |   render(h, { parent, data, props }) {
 17 |     data.nuxtChild = true
 18 |     const _parent = parent
 19 |     const transitions = parent.$nuxt.nuxt.transitions
 20 |     const defaultTransition = parent.$nuxt.nuxt.defaultTransition
 21 | 
 22 |     let depth = 0
 23 |     while (parent) {
 24 |       if (parent.$vnode && parent.$vnode.data.nuxtChild) {
 25 |         depth++
 26 |       }
 27 |       parent = parent.$parent
 28 |     }
 29 |     data.nuxtChildDepth = depth
 30 |     const transition = transitions[depth] || defaultTransition
 31 |     const transitionProps = {}
 32 |     transitionsKeys.forEach((key) => {
 33 |       if (typeof transition[key] !== 'undefined') {
 34 |         transitionProps[key] = transition[key]
 35 |       }
 36 |     })
 37 | 
 38 |     const listeners = {}
 39 |     listenersKeys.forEach((key) => {
 40 |       if (typeof transition[key] === 'function') {
 41 |         listeners[key] = transition[key].bind(_parent)
 42 |       }
 43 |     })
 44 |     // Add triggerScroll event on beforeEnter (fix #1376)
 45 |     const beforeEnter = listeners.beforeEnter
 46 |     listeners.beforeEnter = (el) => {
 47 |       // Ensure to trigger scroll event after calling scrollBehavior
 48 |       window.$nuxt.$nextTick(() => {
 49 |         window.$nuxt.$emit('triggerScroll')
 50 |       })
 51 |       if (beforeEnter) {
 52 |         return beforeEnter.call(_parent, el)
 53 |       }
 54 |     }
 55 | 
 56 |     // make sure that leave is called asynchronous (fix #5703)
 57 |     if (transition.css === false) {
 58 |       const leave = listeners.leave
 59 | 
 60 |       // only add leave listener when user didnt provide one
 61 |       // or when it misses the done argument
 62 |       if (!leave || leave.length < 2) {
 63 |         listeners.leave = (el, done) => {
 64 |           if (leave) {
 65 |             leave.call(_parent, el)
 66 |           }
 67 | 
 68 |           _parent.$nextTick(done)
 69 |         }
 70 |       }
 71 |     }
 72 | 
 73 |     let routerView = h('routerView', data)
 74 | 
 75 |     if (props.keepAlive) {
 76 |       routerView = h('keep-alive', { props: props.keepAliveProps }, [routerView])
 77 |     }
 78 | 
 79 |     return h('transition', {
 80 |       props: transitionProps,
 81 |       on: listeners
 82 |     }, [routerView])
 83 |   }
 84 | }
 85 | 
 86 | const transitionsKeys = [
 87 |   'name',
 88 |   'mode',
 89 |   'appear',
 90 |   'css',
 91 |   'type',
 92 |   'duration',
 93 |   'enterClass',
 94 |   'leaveClass',
 95 |   'appearClass',
 96 |   'enterActiveClass',
 97 |   'enterActiveClass',
 98 |   'leaveActiveClass',
 99 |   'appearActiveClass',
100 |   'enterToClass',
101 |   'leaveToClass',
102 |   'appearToClass'
103 | ]
104 | 
105 | const listenersKeys = [
106 |   'beforeEnter',
107 |   'enter',
108 |   'afterEnter',
109 |   'enterCancelled',
110 |   'beforeLeave',
111 |   'leave',
112 |   'afterLeave',
113 |   'leaveCancelled',
114 |   'beforeAppear',
115 |   'appear',
116 |   'afterAppear',
117 |   'appearCancelled'
118 | ]
119 | 


--------------------------------------------------------------------------------
/components/shear.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="shearComponnent"> 
  3 |       <a title="qq" target="_blank" :href="`http://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}`"><i class="iconfont">&#xe602;</i></a>
  4 |       <a title="豆瓣" target="_blank" :href="`https://www.douban.com/share/service?url=${url}&title=${title}`"><i class="iconfont">&#xe649;</i></a>
  5 |       <a title="qq空间" target="_blank" :href="`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&title=${title}`"><i class="iconfont">&#xe7dc;</i></a>
  6 |       <a title="新浪微博" target="_blank" :href="`http://service.weibo.com/share/share.php?url=${url}&title=${title}`"><i class="iconfont">&#xe63d;</i></a>
  7 |       <a title="印象笔记" target="_blank" :href="`https://www.evernote.com/clip.action?url=${url}=&title=${title}`"><i class="iconfont">&#xe764;</i></a>
  8 |       <a title="谷歌" target="_blank" :href="`https://plus.google.com/share?url=${url}`"><i class="iconfont">&#xe6b2;</i></a>
  9 |       <a title="Facebook" target="_blank" :href="`https://www.facebook.com/sharer/sharer.php?u=${url}`"><i class="iconfont">&#xe6e2;</i></a>
 10 |       <a title="人人网" target="_blank" :href="`http://widget.renren.com/dialog/share?resourceUrl=${url}&srcUrl=${url}&title=${title}`"><i class="iconfont">&#xe608;</i></a>
 11 |       <a title="twitter" target="_blank" :href="`https://twitter.com/intent/tweet?text=${title}&url=${url}`"><i class="iconfont">&#xec9c;</i></a>
 12 |       <a title="邮件" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=CTo_OTs4PDs6OUl4eCdqZmQ" target="_blank"><i class="iconfont">&#xe60a;</i></a>
 13 |       <a title="复制链接" @click="copy" :data-clipboard-text="url" ref="copy"><i class="iconfont">&#xe609;</i></a>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | import Clipboard from 'clipboard'
 19 | export default {
 20 |     name: "shear",
 21 |     props: {
 22 |         title: {
 23 |             type: String,
 24 |             default: 'naice的博客'
 25 |         },
 26 |         url: {
 27 |             type: String,
 28 |             default: 'blog.naice.me'
 29 |         }
 30 |     },
 31 |     methods: {
 32 |         copy () {
 33 |             new Clipboard(this.$refs.copy)
 34 |         }
 35 |     },
 36 |     data () {
 37 |         return {
 38 |             isPlay: true,
 39 |             isMute: false
 40 |         }
 41 |     }
 42 | }
 43 | </script>
 44 | <style scoped>
 45 |     .shearComponnent{
 46 |         display: flex;
 47 |         justify-content: space-around;
 48 |         padding: 10px 0;
 49 |     }
 50 |     .shearComponnent a{
 51 |         display: inline-block;
 52 |         padding: 1px 20px;
 53 |         background: #eee;
 54 |         color: #555;
 55 |         cursor: pointer;
 56 |     }
 57 |     .shearComponnent a i {
 58 |         font-size: 20px;
 59 |     }
 60 |     .shearComponnent a:hover{
 61 |         text-decoration: none
 62 |     }
 63 |     .shearComponnent a:nth-of-type(1):hover{
 64 |         background: #e46666;
 65 |         color: #ffffff
 66 |     }
 67 |     .shearComponnent a:nth-of-type(2):hover{
 68 |         background: #5ece4e;
 69 |         color: #ffffff
 70 |     }
 71 |     .shearComponnent a:nth-of-type(3):hover{
 72 |         background: #9c27b0;
 73 |         color: #ffffff
 74 |     }
 75 |     .shearComponnent a:nth-of-type(4):hover{
 76 |         background: #3f51b5;
 77 |         color: #ffffff
 78 |     }
 79 |     .shearComponnent a:nth-of-type(5):hover{
 80 |         background: #2196f3;
 81 |         color: #ffffff
 82 |     }
 83 |     .shearComponnent a:nth-of-type(6):hover{
 84 |         background: #00bcd4;
 85 |         color: #ffffff
 86 |     }
 87 |     .shearComponnent a:nth-of-type(7):hover{
 88 |         background: #8bc34a;
 89 |         color: #ffffff
 90 |     }
 91 |     .shearComponnent a:nth-of-type(8):hover{
 92 |         background: #ff6f00;
 93 |         color: #ffffff
 94 |     }
 95 |     .shearComponnent a:nth-of-type(9):hover{
 96 |         background: #e64a19;
 97 |         color: #ffffff
 98 |     }
 99 |     .shearComponnent a:nth-of-type(10):hover{
100 |         background: #ad22a5;
101 |         color: #ffffff
102 |     }
103 |     .shearComponnent a:nth-of-type(11):hover{
104 |         background: #03a9f4;
105 |         color: #ffffff
106 |     }
107 |     .shearComponnent a:nth-of-type(12):hover{
108 |         background: #e44c1c;
109 |         color: #ffffff
110 |     }
111 | </style>


--------------------------------------------------------------------------------
/.nuxt/components/nuxt-build-indicator.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition appear>
  3 |     <div class="nuxt__build_indicator" :style="indicatorStyle" v-if="building">
  4 |       <svg viewBox="0 0 96 72" version="1" xmlns="http://www.w3.org/2000/svg">
  5 |         <g fill="none" fill-rule="evenodd">
  6 |           <path d="M6 66h23l1-3 21-37L40 6 6 66zM79 66h11L62 17l-5 9 22 37v3zM54 31L35 66h38z"/>
  7 |           <path d="M29 69v-1-2H6L40 6l11 20 3-6L44 3s-2-3-4-3-3 1-5 3L1 63c0 1-2 3 0 6 0 1 2 2 5 2h28c-3 0-4-1-5-2z" fill="#00C58E"/>
  8 |           <path d="M95 63L67 14c0-1-2-3-5-3-1 0-3 0-4 3l-4 6 3 6 5-9 28 49H79a5 5 0 0 1 0 3c-2 2-5 2-5 2h16c1 0 4 0 5-2 1-1 2-3 0-6z" fill="#00C58E"/>
  9 |           <path d="M79 69v-1-2-3L57 26l-3-6-3 6-21 37-1 3a5 5 0 0 0 0 3c1 1 2 2 5 2h40s3 0 5-2zM54 31l19 35H35l19-35z" fill="#FFF" fill-rule="nonzero"/>
 10 |         </g>
 11 |       </svg>
 12 |       {{ animatedProgress }}%
 13 |     </div>
 14 |   </transition>
 15 | </template>
 16 | 
 17 | <script>
 18 | export default {
 19 |   name: 'nuxt-build-indicator',
 20 |   data() {
 21 |     return {
 22 |       building: false,
 23 |       progress: 0,
 24 |       animatedProgress: 0,
 25 |       reconnectAttempts: 0,
 26 |     }
 27 |   },
 28 |   mounted() {
 29 |     if (typeof EventSource === undefined) {
 30 |       return // Unsupported
 31 |     }
 32 |     this.sseConnect()
 33 |   },
 34 |   beforeDestroy() {
 35 |     this.sseClose()
 36 |     clearInterval(this._progressAnimation)
 37 |   },
 38 |   computed: {
 39 |     options: () => (false),
 40 |     indicatorStyle() {
 41 |       const [ d1, d2 ] = this.options.position.split('-')
 42 |       return {
 43 |         [d1]: '20px',
 44 |         [d2]: '20px',
 45 |         'background-color': this.options.backgroundColor,
 46 |         color: this.options.color,
 47 |       }
 48 |     }
 49 |   },
 50 |   watch: {
 51 |     progress(val, oldVal) {
 52 |       // Average progress may decrease but ignore it!
 53 |       if (val < oldVal) {
 54 |         return
 55 |       }
 56 |       // Cancel old animation
 57 |       clearInterval(this._progressAnimation)
 58 |       // Jump to edge immediately
 59 |       if (val < 10 || val > 90) {
 60 |         this.animatedProgress = val
 61 |         return
 62 |       }
 63 |       // Animate to value
 64 |       this._progressAnimation = setInterval(() => {
 65 |         const diff = this.progress - this.animatedProgress
 66 |         if (diff > 0) {
 67 |           this.animatedProgress++
 68 |         } else {
 69 |           clearInterval(this._progressAnimation)
 70 |         }
 71 |       }, 50)
 72 |     }
 73 |   },
 74 |   methods: {
 75 |     sseConnect() {
 76 |       if (this._connecting) {
 77 |         return
 78 |       }
 79 |       this._connecting = true
 80 |       this.sse = new EventSource('/_loading/sse')
 81 |       this.sse.addEventListener('message', (event) => this.onSseMessage(event))
 82 |     },
 83 |     onSseMessage(message) {
 84 |       const data = JSON.parse(message.data)
 85 |       if (!data.states) return
 86 | 
 87 |       this.progress = Math.round(data.states.reduce((p, s) => p + s.progress, 0) / data.states.length)
 88 | 
 89 |       if (!data.allDone) {
 90 |         this.building = true
 91 |       } else {
 92 |         this.$nextTick(() => {
 93 |           this.building = false
 94 |           this.animatedProgress = 0
 95 |           this.progress = 0
 96 |           clearInterval(this._progressAnimation)
 97 |         })
 98 |       }
 99 |     },
100 | 
101 |     sseClose() {
102 |       if (this.sse) {
103 |         this.sse.close()
104 |         delete this.sse
105 |       }
106 |     }
107 |   }
108 | }
109 | </script>
110 | 
111 | <style scoped>
112 | .nuxt__build_indicator {
113 |   box-sizing: border-box;
114 |   position: fixed;
115 |   font-family: monospace;
116 |   padding: 5px 10px;
117 |   border-radius: 5px;
118 |   box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
119 |   width: 88px;
120 |   z-index: 2147483647;
121 |   font-size: 16px;
122 |   line-height: 1.2rem;
123 | }
124 | .v-enter-active, .v-leave-active {
125 |   transition-delay: 0.2s;
126 |   transition-property: all;
127 |   transition-duration: 0.3s;
128 | }
129 | .v-leave-to {
130 |   opacity: 0;
131 |   transform: translateY(20px);
132 | }
133 | svg {
134 |   display: inline-block;
135 |   vertical-align: baseline;
136 |   width: 1.1em;
137 |   position: relative;
138 |   top: 1px;
139 | }
140 | </style>
141 | 


--------------------------------------------------------------------------------
/.nuxt/components/nuxt-loading.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 |   name: 'NuxtLoading',
  4 |   data() {
  5 |     return {
  6 |       percent: 0,
  7 |       show: false,
  8 |       canSucceed: true,
  9 |       reversed: false,
 10 |       skipTimerCount: 0,
 11 |       rtl: false,
 12 |       throttle: 200,
 13 |       duration: 5000,
 14 |       continuous: false
 15 |     }
 16 |   },
 17 |   computed: {
 18 |     left() {
 19 |       if (!this.continuous && !this.rtl) {
 20 |         return false
 21 |       }
 22 |       return this.rtl
 23 |         ? (this.reversed ? '0px' : 'auto')
 24 |         : (!this.reversed ? '0px' : 'auto')
 25 |     }
 26 |   },
 27 |   beforeDestroy() {
 28 |     this.clear()
 29 |   },
 30 |   methods: {
 31 |     clear() {
 32 |       clearInterval(this._timer)
 33 |       clearTimeout(this._throttle)
 34 |       this._timer = null
 35 |     },
 36 |     start() {
 37 |       this.clear()
 38 |       this.percent = 0
 39 |       this.reversed = false
 40 |       this.skipTimerCount = 0
 41 |       this.canSucceed = true
 42 | 
 43 |       if (this.throttle) {
 44 |         this._throttle = setTimeout(() => this.startTimer(), this.throttle)
 45 |       } else {
 46 |         this.startTimer()
 47 |       }
 48 |       return this
 49 |     },
 50 |     set(num) {
 51 |       this.show = true
 52 |       this.canSucceed = true
 53 |       this.percent = Math.min(100, Math.max(0, Math.floor(num)))
 54 |       return this
 55 |     },
 56 |     get() {
 57 |       return this.percent
 58 |     },
 59 |     increase(num) {
 60 |       this.percent = Math.min(100, Math.floor(this.percent + num))
 61 |       return this
 62 |     },
 63 |     decrease(num) {
 64 |       this.percent = Math.max(0, Math.floor(this.percent - num))
 65 |       return this
 66 |     },
 67 |     pause() {
 68 |       clearInterval(this._timer)
 69 |       return this
 70 |     },
 71 |     resume() {
 72 |       this.startTimer()
 73 |       return this
 74 |     },
 75 |     finish() {
 76 |       this.percent = this.reversed ? 0 : 100
 77 |       this.hide()
 78 |       return this
 79 |     },
 80 |     hide() {
 81 |       this.clear()
 82 |       setTimeout(() => {
 83 |         this.show = false
 84 |         this.$nextTick(() => {
 85 |           this.percent = 0
 86 |           this.reversed = false
 87 |         })
 88 |       }, 500)
 89 |       return this
 90 |     },
 91 |     fail() {
 92 |       this.canSucceed = false
 93 |       return this
 94 |     },
 95 |     startTimer() {
 96 |       if (!this.show) {
 97 |         this.show = true
 98 |       }
 99 |       if (typeof this._cut === 'undefined') {
100 |         this._cut = 10000 / Math.floor(this.duration)
101 |       }
102 | 
103 |       this._timer = setInterval(() => {
104 |         /**
105 |          * When reversing direction skip one timers
106 |          * so 0, 100 are displayed for two iterations
107 |          * also disable css width transitioning
108 |          * which otherwise interferes and shows
109 |          * a jojo effect
110 |          */
111 |         if (this.skipTimerCount > 0) {
112 |           this.skipTimerCount--
113 |           return
114 |         }
115 | 
116 |         if (this.reversed) {
117 |           this.decrease(this._cut)
118 |         } else {
119 |           this.increase(this._cut)
120 |         }
121 | 
122 |         if (this.continuous) {
123 |           if (this.percent >= 100) {
124 |             this.skipTimerCount = 1
125 | 
126 |             this.reversed = !this.reversed
127 |           } else if (this.percent <= 0) {
128 |             this.skipTimerCount = 1
129 | 
130 |             this.reversed = !this.reversed
131 |           }
132 |         }
133 |       }, 100)
134 |     }
135 |   },
136 |   render(h) {
137 |     let el = h(false)
138 |     if (this.show) {
139 |       el = h('div', {
140 |         staticClass: 'nuxt-progress',
141 |         class: {
142 |           'nuxt-progress-notransition': this.skipTimerCount > 0,
143 |           'nuxt-progress-failed': !this.canSucceed
144 |         },
145 |         style: {
146 |           'width': this.percent + '%',
147 |           'left': this.left
148 |         }
149 |       })
150 |     }
151 |     return el
152 |   }
153 | }
154 | </script>
155 | 
156 | <style>
157 | .nuxt-progress {
158 |   position: fixed;
159 |   top: 0px;
160 |   left: 0px;
161 |   right: 0px;
162 |   height: 2px;
163 |   width: 0%;
164 |   opacity: 1;
165 |   transition: width 0.1s, opacity 0.4s;
166 |   background-color: #3B8070;
167 |   z-index: 999999;
168 | }
169 | 
170 | .nuxt-progress.nuxt-progress-notransition {
171 |   transition: none;
172 | }
173 | 
174 | .nuxt-progress-failed {
175 |   background-color: red;
176 | }
177 | </style>
178 | 


--------------------------------------------------------------------------------
/.nuxt/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Vuex from 'vuex'
  3 | 
  4 | Vue.use(Vuex)
  5 | 
  6 | const VUEX_PROPERTIES = ['state', 'getters', 'actions', 'mutations']
  7 | let store = {}
  8 | 
  9 | void (function updateModules() {
 10 |   store = normalizeRoot(require('../store/index.js'), 'store/index.js')
 11 | 
 12 |   // If store is an exported method = classic mode (deprecated)
 13 | 
 14 |   if (typeof store === 'function') {
 15 |     return console.warn('Classic mode for store/ is deprecated and will be removed in Nuxt 3.')
 16 |   }
 17 | 
 18 |   // Enforce store modules
 19 |   store.modules = store.modules || {}
 20 | 
 21 |   resolveStoreModules(require('../store/modules/article.js'), 'modules/article.js')
 22 |   resolveStoreModules(require('../store/modules/hero.js'), 'modules/hero.js')
 23 |   resolveStoreModules(require('../store/modules/project.js'), 'modules/project.js')
 24 | 
 25 |   // If the environment supports hot reloading...
 26 | 
 27 |   if (process.client && module.hot) {
 28 |     // Whenever any Vuex module is updated...
 29 |     module.hot.accept([
 30 |       '../store/index.js',
 31 |       '../store/modules/article.js',
 32 |       '../store/modules/hero.js',
 33 |       '../store/modules/project.js',
 34 |     ], () => {
 35 |       // Update `root.modules` with the latest definitions.
 36 |       updateModules()
 37 |       // Trigger a hot update in the store.
 38 |       window.$nuxt.$store.hotUpdate(store)
 39 |     })
 40 |   }
 41 | })()
 42 | 
 43 | // createStore
 44 | export const createStore = store instanceof Function ? store : () => {
 45 |   return new Vuex.Store(Object.assign({
 46 |     strict: (process.env.NODE_ENV !== 'production')
 47 |   }, store))
 48 | }
 49 | 
 50 | function resolveStoreModules(moduleData, filename) {
 51 |   moduleData = moduleData.default || moduleData
 52 |   // Remove store src + extension (./foo/index.js -> foo/index)
 53 |   const namespace = filename.replace(/\.(js|mjs)$/, '')
 54 |   const namespaces = namespace.split('/')
 55 |   let moduleName = namespaces[namespaces.length - 1]
 56 |   const filePath = `store/${filename}`
 57 | 
 58 |   moduleData = moduleName === 'state'
 59 |     ? normalizeState(moduleData, filePath)
 60 |     : normalizeModule(moduleData, filePath)
 61 | 
 62 |   // If src is a known Vuex property
 63 |   if (VUEX_PROPERTIES.includes(moduleName)) {
 64 |     const property = moduleName
 65 |     const storeModule = getStoreModule(store, namespaces, { isProperty: true })
 66 | 
 67 |     // Replace state since it's a function
 68 |     mergeProperty(storeModule, moduleData, property)
 69 |     return
 70 |   }
 71 | 
 72 |   // If file is foo/index.js, it should be saved as foo
 73 |   const isIndexModule = (moduleName === 'index')
 74 |   if (isIndexModule) {
 75 |     namespaces.pop()
 76 |     moduleName = namespaces[namespaces.length - 1]
 77 |   }
 78 | 
 79 |   const storeModule = getStoreModule(store, namespaces)
 80 | 
 81 |   for (const property of VUEX_PROPERTIES) {
 82 |     mergeProperty(storeModule, moduleData[property], property)
 83 |   }
 84 | 
 85 |   if (moduleData.namespaced === false) {
 86 |     delete storeModule.namespaced
 87 |   }
 88 | }
 89 | 
 90 | function normalizeRoot(moduleData, filePath) {
 91 |   moduleData = moduleData.default || moduleData
 92 | 
 93 |   if (moduleData.commit) {
 94 |     throw new Error(`[nuxt] ${filePath} should export a method that returns a Vuex instance.`)
 95 |   }
 96 | 
 97 |   if (typeof moduleData !== 'function') {
 98 |     // Avoid TypeError: setting a property that has only a getter when overwriting top level keys
 99 |     moduleData = Object.assign({}, moduleData)
100 |   }
101 |   return normalizeModule(moduleData, filePath)
102 | }
103 | 
104 | function normalizeState(moduleData, filePath) {
105 |   if (typeof moduleData !== 'function') {
106 |     console.warn(`${filePath} should export a method that returns an object`)
107 |     const state = Object.assign({}, moduleData)
108 |     return () => state
109 |   }
110 |   return normalizeModule(moduleData, filePath)
111 | }
112 | 
113 | function normalizeModule(moduleData, filePath) {
114 |   if (moduleData.state && typeof moduleData.state !== 'function') {
115 |     console.warn(`'state' should be a method that returns an object in ${filePath}`)
116 |     const state = Object.assign({}, moduleData.state)
117 |     // Avoid TypeError: setting a property that has only a getter when overwriting top level keys
118 |     moduleData = Object.assign({}, moduleData, { state: () => state })
119 |   }
120 |   return moduleData
121 | }
122 | 
123 | function getStoreModule(storeModule, namespaces, { isProperty = false } = {}) {
124 |   // If ./mutations.js
125 |   if (!namespaces.length || (isProperty && namespaces.length === 1)) {
126 |     return storeModule
127 |   }
128 | 
129 |   const namespace = namespaces.shift()
130 | 
131 |   storeModule.modules[namespace] = storeModule.modules[namespace] || {}
132 |   storeModule.modules[namespace].namespaced = true
133 |   storeModule.modules[namespace].modules = storeModule.modules[namespace].modules || {}
134 | 
135 |   return getStoreModule(storeModule.modules[namespace], namespaces, { isProperty })
136 | }
137 | 
138 | function mergeProperty(storeModule, moduleData, property) {
139 |   if (!moduleData) return
140 | 
141 |   if (property === 'state') {
142 |     storeModule.state = moduleData || storeModule.state
143 |   } else {
144 |     storeModule[property] = Object.assign({}, storeModule[property], moduleData)
145 |   }
146 | }
147 | 


--------------------------------------------------------------------------------
/layouts/music-layout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="musicLayoutBox" id="musicLayoutBox">
  3 | 		<header class="musicHeader" :class="isNavHidden ? 'navUp' : 'navDown'">
  4 | 			<section class="box header-content">
  5 | 			<nav>
  6 | 				<nuxt-link
  7 | 					v-for="(item, index) in nav"
  8 | 					:key="index"
  9 | 					:to="item.path"
 10 | 					:class="navIndex == index ? 'active' : ''"
 11 | 					>{{item.text}}</nuxt-link>
 12 | 			</nav>
 13 | 			<div class="musicSearchBox">
 14 | 				<div class="musicSearch"
 15 | 					:style="showSearch ? {paddingLeft: '5px'} : {paddingLeft: '0'}">
 16 | 					<div class="text" :class="showSearch ? 'showText' : 'hiddenText'">
 17 | 						<input type="text"
 18 | 							v-model="searchStr"
 19 | 							placeholder="你心所想...">
 20 | 					</div>
 21 | 					<div class="searchIcon">
 22 | 						<i class="iconfont"
 23 | 							@click="toShowSearch"
 24 | 							v-if="!showSearch">&#xe603;</i>
 25 | 						<i class="iconfont rightIcon"
 26 | 							@click="tohiddenSearch"
 27 | 							v-else>&#xe640;</i>
 28 | 					</div>
 29 | 				</div>
 30 | 			</div>
 31 | 			</section>
 32 | 		</header>
 33 | 		<div class="musicContent" id="musicContent">
 34 | 			<nuxt/>
 35 | 		</div>
 36 | 		<footer class="musicLayoutFooter">
 37 | 			© 2018 - <nuxt-link to="/">Naice的博客</nuxt-link>
 38 | 			 - Powered by Nuxt.js & Koa
 39 | 		</footer>
 40 | 	</div>
 41 | </template>
 42 | <script>
 43 | 
 44 | export default {
 45 |   	data () {
 46 | 		return {
 47 | 			searchStr: '',
 48 | 			showSearch: false,
 49 | 			canvasDom: null,
 50 | 			isNavHidden: false,
 51 | 			layoutBox: null,
 52 | 			navIndex: 0,
 53 | 			nav: [
 54 | 				{
 55 | 					path: '/',
 56 | 					text: '首页'
 57 | 				},
 58 | 				{
 59 | 					path: '/article',
 60 | 					text: '文章'
 61 | 				},
 62 | 				{
 63 | 					path: '/project',
 64 | 					text: '项目'
 65 | 				},
 66 | 				{
 67 | 					path: '/about',
 68 | 					text: '关于'
 69 | 				},
 70 | 				{
 71 | 					path: '/music',
 72 | 					text: '音乐'
 73 | 				}
 74 | 			]
 75 | 		}
 76 | 	},
 77 | 	methods: {
 78 | 		toShowSearch () {
 79 | 			this.showSearch = true
 80 | 		},
 81 | 		tohiddenSearch () {
 82 | 			this.$router.push(`/article?keyword=${this.searchStr}`)
 83 | 			this.searchStr = ''
 84 | 			this.showSearch = false
 85 | 		},
 86 | 		chanrouter(router) {
 87 | 			let index = 9
 88 | 			this.nav.forEach((item, i) => {
 89 | 				if (item.path == router.path) {
 90 | 					index = i
 91 | 				}
 92 | 			})
 93 | 			this.navIndex = index
 94 | 		}
 95 | 	},
 96 | 	mounted() {
 97 | 		this.chanrouter(this.$route)
 98 | 		const userinfo = localStorage.getItem('userInfo')
 99 | 		if (!userinfo) {
100 | 			this.$store.commit('changeAverter', Math.floor(Math.random() * 20))
101 | 		} else {
102 | 			let info = JSON.parse(userinfo)
103 | 			this.$store.commit('changeAverter', info.gravatar)
104 | 		}
105 | 	},
106 | 	watch: {
107 | 		$route (router) {
108 | 			this.chanrouter(router)
109 | 		}
110 | 	}
111 | }
112 | </script>
113 | <style>
114 | 	.musicLayoutBox{
115 | 		position: absolute;
116 | 		top: 0;
117 | 		bottom: 0;
118 | 		width: 100%;
119 | 		left: 0;
120 | 		overflow: hidden;
121 | 	}
122 | 	.navUp {
123 | 		transform: translate3d(0, -60px, 0)
124 | 	}
125 | 	.navDown {
126 | 		transform: translate3d(0, 0, 0)
127 | 	}
128 | 	.musicHeader {
129 | 		background: transparent;
130 | 		/* border-bottom: 1px solid #191919; */
131 | 		color: #909090;
132 | 		height: 60px;
133 | 		overflow: hidden;
134 | 		width: 100%;
135 | 		position: fixed;
136 | 		z-index: 2;
137 | 		transition: 0.3s
138 | 	}
139 | 	.box {
140 | 		width: 900px;
141 | 		margin: 0 auto;
142 | 	}
143 | 
144 | 	.musicHeader .header-content {
145 | 		display: flex;
146 | 		height: 59px;
147 | 		justify-content: space-between;
148 | 	}
149 | 
150 |   .musicHeader .header-content nav {
151 | 		height: 59px;
152 | 		line-height: 59px;
153 | 		font-size: 20px;
154 |   }
155 | 
156 |   .musicHeader .header-content nav a {
157 | 		display: inline-block;
158 | 		height: 59px;
159 | 		transition: 0.3s;
160 | 		padding: 0 20px;
161 | 		position: relative;
162 | 		color: #8c8c8c;
163 | 		text-decoration: none;
164 |   }
165 | 
166 | 	.musicHeader .header-content nav a:hover {
167 | 		color: #099edd
168 | 	}
169 | 
170 | 	.musicHeader .header-content nav a.active {
171 | 		color: #099edd
172 | 	}
173 | 
174 | 	.musicSearchBox{
175 | 		display: flex;
176 | 		align-items: center;
177 | 	}
178 | 	.musicSearch{
179 | 		height: 30px;
180 | 		border-bottom: 1px solid #454545;
181 | 		display: flex;
182 | 		overflow: hidden;
183 | 		padding-left: 5px;
184 | 
185 | 	}
186 | 	.musicSearch input{
187 | 		width: 100%;
188 | 		height: 100%;
189 | 		border: none;
190 | 		outline: none;
191 | 		background: transparent;
192 | 		color: #099edd;
193 | 	}
194 | 	.musicSearch .text{
195 | 		width: 158px;
196 | 		transform-origin: right center;
197 | 		transition: 0.3s;
198 | 	}
199 | 	.musicSearch .showText{
200 | 		width: 158px;
201 | 	}
202 | 	.musicSearch .hiddenText{
203 | 		width: 0px;
204 | 		padding-left: 0px;
205 | 	}
206 | 	.musicSearch .searchIcon{
207 | 		width: 30px;
208 | 		height: 30px;
209 | 		line-height: 30px;
210 | 		text-align: center;
211 | 		cursor: pointer;
212 | 	}
213 | 	.rightIcon{
214 | 		color: #099edd;
215 | 	}
216 | 	.musicContent{
217 | 		position: absolute;
218 | 		top: 0px;
219 | 		bottom: 0px;
220 | 		left: 0;
221 | 		overflow: hidden;
222 | 		width: 100%;
223 | 	}
224 | 	.musicLayoutFooter{
225 | 		position: absolute;
226 | 		bottom: 0;
227 | 		left: 0;
228 | 		height: 30px;
229 | 		background: transparent;
230 | 		text-align: center;
231 | 		line-height: 30px;
232 | 		font-size: 10px;
233 | 		color: #666;
234 | 		width: 100%;
235 | 	}
236 | </style>
237 | 


--------------------------------------------------------------------------------
/.nuxt/App.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import { getMatchedComponentsInstances, promisify, globalHandleError } from './utils'
  3 | import NuxtLoading from './components/nuxt-loading.vue'
  4 | 
  5 | import '../assets/css/init.css'
  6 | 
  7 | import '../assets/css/codeStyle.css'
  8 | 
  9 | import _7c6a36a0 from '../layouts/layout.vue'
 10 | import _40930270 from '../layouts/music-layout.vue'
 11 | import _6f6c098b from './layouts/default.vue'
 12 | 
 13 | const layouts = { "_layout": _7c6a36a0,"_music-layout": _40930270,"_default": _6f6c098b }
 14 | 
 15 | export default {
 16 |   head: {"title":"Naice","meta":[{"charset":"utf-8"},{"http-equiv":"cleartype","content":"on"},{"http-equiv":"Cache-Control"},{"name":"viewport","content":"width=device-width, initial-scale=1, user-scalable=no"},{"hid":"description","name":"description","content":"Naice, 前端, blog"},{"hid":"keywords","name":"keywords","content":"前端开发，JavaScript, Node, Vue，nuxt"},{"name":"author","content":"370215230@qq.com"}],"link":[{"rel":"icon","type":"image\u002Fx-icon","href":"\u002Ffavicon.ico"}],"script":[{"src":"https:\u002F\u002Fcdn.bootcss.com\u002Fjquery\u002F3.3.1\u002Fjquery.min.js"},{"src":"https:\u002F\u002Fcdn.bootcss.com\u002Fhighlight.js\u002F9.12.0\u002Fhighlight.min.js"}],"style":[]},
 17 | 
 18 |   render(h, props) {
 19 |     const loadingEl = h('NuxtLoading', { ref: 'loading' })
 20 |     const layoutEl = h(this.layout || 'nuxt')
 21 |     const templateEl = h('div', {
 22 |       domProps: {
 23 |         id: '__layout'
 24 |       },
 25 |       key: this.layoutName
 26 |     }, [ layoutEl ])
 27 | 
 28 |     const transitionEl = h('transition', {
 29 |       props: {
 30 |         name: 'layout',
 31 |         mode: 'out-in'
 32 |       },
 33 |       on: {
 34 |         beforeEnter(el) {
 35 |           // Ensure to trigger scroll event after calling scrollBehavior
 36 |           window.$nuxt.$nextTick(() => {
 37 |             window.$nuxt.$emit('triggerScroll')
 38 |           })
 39 |         }
 40 |       }
 41 |     }, [ templateEl ])
 42 | 
 43 |     return h('div', {
 44 |       domProps: {
 45 |         id: '__nuxt'
 46 |       }
 47 |     }, [loadingEl, transitionEl])
 48 |   },
 49 |   data: () => ({
 50 |     isOnline: true,
 51 |     layout: null,
 52 |     layoutName: ''
 53 |   }),
 54 |   beforeCreate() {
 55 |     Vue.util.defineReactive(this, 'nuxt', this.$options.nuxt)
 56 |   },
 57 |   created() {
 58 |     // Add this.$nuxt in child instances
 59 |     Vue.prototype.$nuxt = this
 60 |     // add to window so we can listen when ready
 61 |     if (process.client) {
 62 |       window.$nuxt = this
 63 |       this.refreshOnlineStatus()
 64 |       // Setup the listeners
 65 |       window.addEventListener('online', this.refreshOnlineStatus)
 66 |       window.addEventListener('offline', this.refreshOnlineStatus)
 67 |     }
 68 |     // Add $nuxt.error()
 69 |     this.error = this.nuxt.error
 70 |     // Add $nuxt.context
 71 |     this.context = this.$options.context
 72 |   },
 73 | 
 74 |   mounted() {
 75 |     this.$loading = this.$refs.loading
 76 |   },
 77 |   watch: {
 78 |     'nuxt.err': 'errorChanged'
 79 |   },
 80 | 
 81 |   computed: {
 82 |     isOffline() {
 83 |       return !this.isOnline
 84 |     }
 85 |   },
 86 |   methods: {
 87 |     refreshOnlineStatus() {
 88 |       if (process.client) {
 89 |         if (typeof window.navigator.onLine === 'undefined') {
 90 |           // If the browser doesn't support connection status reports
 91 |           // assume that we are online because most apps' only react
 92 |           // when they now that the connection has been interrupted
 93 |           this.isOnline = true
 94 |         } else {
 95 |           this.isOnline = window.navigator.onLine
 96 |         }
 97 |       }
 98 |     },
 99 |     async refresh() {
100 |       const pages = getMatchedComponentsInstances(this.$route)
101 | 
102 |       if (!pages.length) {
103 |         return
104 |       }
105 |       this.$loading.start()
106 |       const promises = pages.map(async (page) => {
107 |         const p = []
108 | 
109 |         if (page.$options.fetch) {
110 |           p.push(promisify(page.$options.fetch, this.context))
111 |         }
112 |         if (page.$options.asyncData) {
113 |           p.push(
114 |             promisify(page.$options.asyncData, this.context)
115 |               .then((newData) => {
116 |                 for (const key in newData) {
117 |                   Vue.set(page.$data, key, newData[key])
118 |                 }
119 |               })
120 |           )
121 |         }
122 |         return Promise.all(p)
123 |       })
124 |       try {
125 |         await Promise.all(promises)
126 |       } catch (error) {
127 |         this.$loading.fail()
128 |         globalHandleError(error)
129 |         this.error(error)
130 |       }
131 |       this.$loading.finish()
132 |     },
133 | 
134 |     errorChanged() {
135 |       if (this.nuxt.err && this.$loading) {
136 |         if (this.$loading.fail) this.$loading.fail()
137 |         if (this.$loading.finish) this.$loading.finish()
138 |       }
139 |     },
140 | 
141 |     setLayout(layout) {
142 |       if(layout && typeof layout !== 'string') throw new Error('[nuxt] Avoid using non-string value as layout property.')
143 | 
144 |       if (!layout || !layouts['_' + layout]) {
145 |         layout = 'default'
146 |       }
147 |       this.layoutName = layout
148 |       this.layout = layouts['_' + layout]
149 |       return this.layout
150 |     },
151 |     loadLayout(layout) {
152 |       if (!layout || !layouts['_' + layout]) {
153 |         layout = 'default'
154 |       }
155 |       return Promise.resolve(layouts['_' + layout])
156 |     }
157 |   },
158 |   components: {
159 |     NuxtLoading
160 |   }
161 | }
162 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="homePage">
  3 | 		<section id="aside">
  4 | 			<div class="aside-box">
  5 |         <div class="marsk"></div>
  6 |         <div class="aside-content">
  7 |           <a>
  8 |             <img src="../assets/img/averter.jpg" alt="">
  9 |           </a>
 10 |           <h1>
 11 |             <nuxt-link to="/article?page=0">Naice</nuxt-link>
 12 |             <p>很多事情不是因为有希望才去坚持，而是坚持了才有希望。</p>
 13 |           </h1>
 14 |           <slot></slot>
 15 |           <div class="aside-icon">
 16 |             <a href="https://github.com/naihe138">
 17 |               <i class="iconfont">&#xe621;</i>
 18 |             </a>
 19 |             <a href="https://segmentfault.com/u/naice">
 20 |               <i class="iconfont">&#xe610;</i>
 21 |             </a>
 22 |           </div>
 23 |         </div>
 24 |       </div>
 25 | 		</section>
 26 | 		<div class="home-view">
 27 | 			<section class="aboutMe">
 28 | 				<div class="about-nav">
 29 | 					<nuxt-link to="/article">
 30 | 						<span class="lt1">文章</span>
 31 | 						<span class="lt2">Article</span>
 32 | 					</nuxt-link>
 33 | 					<nuxt-link to="/music">
 34 | 						<span class="lt1">音乐</span>
 35 | 						<span class="lt2">Music</span>
 36 | 					</nuxt-link>
 37 | 				</div>
 38 | 				<div class="about-nav">
 39 | 					<nuxt-link to="/project">
 40 | 						<span class="lt1">项目</span>
 41 | 						<span class="lt2">Project</span>
 42 | 					</nuxt-link>
 43 | 					<nuxt-link to="/about">
 44 | 						<span class="lt1">关于</span>
 45 | 						<span class="lt2">About</span>
 46 | 					</nuxt-link>
 47 | 				</div>
 48 | 			</section>
 49 | 		</div>
 50 | 	</div>
 51 | </template>
 52 | 
 53 | <script>
 54 | 	export default {
 55 | 		head () {
 56 | 			return {
 57 | 				title: 'naice | 首页'
 58 | 			}
 59 | 		},
 60 | 		mounted() {
 61 | 			const userinfo = localStorage.getItem('userInfo')
 62 | 			if (!userinfo) {
 63 | 				this.$store.commit('changeAverter', Math.floor(Math.random() * 20))
 64 | 			} else {
 65 | 				let info = JSON.parse(userinfo)
 66 | 				this.$store.commit('changeAverter', info.gravatar)
 67 | 			}
 68 | 		}
 69 | 	}
 70 | </script>
 71 | 
 72 | <style scoped>
 73 | 	:root {
 74 | 		--fontColor: #5e5e5e; /*文字颜色*/
 75 | 		--titleColor: #3e3e3e; /*标题颜色*/
 76 | 		--lineColor: #3fb76c; /*线条绿色*/
 77 | 	}
 78 | 
 79 | 	.homePage {
 80 | 		width: 100%;
 81 | 		height: 100%;
 82 | 		display: flex;
 83 |     position: absolute;
 84 |     left: 0;
 85 |     top: 0;
 86 |     bottom: 0;
 87 | 	}
 88 | 
 89 | 	#aside {
 90 | 		width: 50%;
 91 | 		height: 100%;
 92 | 		background: url("../assets/img/aside-bg.jpg") no-repeat center center;
 93 | 		background-size: 100% 100%;
 94 | 		transition: width 0.3s;
 95 | 	}
 96 | 
 97 | 	.home-view {
 98 | 		display: flex;
 99 | 		justify-content: center;
100 | 		align-items: center;
101 | 		flex: 1;
102 | 		height: 100%;
103 | 		width: 100%;
104 | 		position: relative;
105 | 	}
106 | 
107 | 	.aboutMe {
108 | 		width: 260px;
109 | 		/*border: 1px solid red;*/
110 | 		height: 300px;
111 | 	}
112 | 
113 | 	.about-nav{
114 | 		display: flex;
115 | 		justify-content: space-between;
116 | 		margin-bottom: 30px;
117 | 	}
118 | 	.about-nav a{
119 | 		width: 100px;
120 | 		height: 100px;
121 | 		border: 1px solid #ccc;
122 | 		border-radius: 50%;
123 | 		text-align: center;
124 | 		line-height: 100px;
125 | 		font-size: 18px;
126 | 		color: #333;
127 | 		text-decoration: none;
128 | 		transition: background 0.3s;
129 | 	}
130 | 	.about-nav a .lt2 {
131 | 		display: none;
132 | 	}
133 | 	.about-nav a:hover{
134 | 		background: #3fb76c;
135 | 		color: #fff;
136 | 		border-color: #3fb76c;
137 | 	}
138 | 	.about-nav a:hover .lt2{
139 | 		display: inline;
140 | 	}
141 | 	.about-nav a:hover .lt1{
142 | 		display: none;
143 | 	}
144 |   .aside-box {
145 | 		/*width: 100%;*/
146 | 		overflow: hidden;
147 | 		height: 100%;
148 | 		display: flex;
149 | 		justify-content: center;
150 | 		align-items: center;
151 | 		background: rgba(255, 255, 255, 0.7) url("../assets/img/aside-bg.jpg") no-repeat center center;
152 | 		background-size: auto 100%;
153 | 	}
154 | 
155 | 	.marsk {
156 | 		position: absolute;
157 | 		width: 100%;
158 | 		height: 100%;
159 | 		background: rgba(255, 255, 255, 0.5);
160 | 	}
161 | 
162 | 	.aside-content {
163 | 		width: 400px;
164 | 		height: 400px;
165 | 		/*border: 1px solid red;*/
166 | 		text-align: center;
167 | 		position: relative;
168 | 		z-index: 2;
169 | 	}
170 | 
171 | 	.aside-content img {
172 | 		width: 100px;
173 | 		height: 100px;
174 | 		border-radius: 50%;
175 | 		transition: transform 0.5s;
176 | 		cursor: pointer;
177 | 	}
178 | 
179 | 	.aside-content img:hover {
180 | 		transform: rotate(360deg);
181 | 		box-shadow: 0 0 30px rgba(0, 255, 249, 0.57);
182 | 	}
183 | 
184 | 	.aside-content h1 {
185 | 		color: var(--titleColor);
186 | 		font-size: 22px;
187 | 		padding-top: 16px;
188 | 		padding-bottom: 30px;
189 | 	}
190 | 
191 | 	.aside-content h1 a{
192 | 		color: var(--titleColor);
193 | 		font-size: 22px;
194 | 		text-decoration: none;
195 | 	}
196 | 
197 | 	.aside-content h1:after {
198 | 		content: '';
199 | 		display: block;
200 | 		height: 1px;
201 | 		width: 200px;
202 | 		margin: 0 auto;
203 | 		background: var(--lineColor);
204 | 		margin-top: 15px;
205 | 	}
206 | 
207 | 	.aside-content p {
208 | 		font-size: 12px;
209 | 		padding-top: 10px;
210 | 		padding-bottom: 10px;
211 | 		color: var(--fontColor);
212 | 	}
213 | 
214 | 	.aside-icon {
215 | 		clear: both;
216 | 		display: flex;
217 | 		justify-content: center;
218 | 	}
219 | 
220 | 	.aside-icon a {
221 | 		width: 34px;
222 | 		height: 34px;
223 | 		background-color: #5e5e5e;
224 | 		margin: 0 10px;
225 | 		cursor: pointer;
226 | 		transition: background-color 0.3s;
227 | 		border-radius: 2px;
228 | 		color: #fff;
229 | 		text-decoration: none;
230 | 		text-align: center;
231 | 		line-height: 34px;
232 | 	}
233 | 
234 | 	.aside-icon a:hover {
235 | 		background-color: var(--lineColor);
236 | 	}
237 | </style>
238 | 


--------------------------------------------------------------------------------
/.nuxt/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Meta from 'vue-meta'
  3 | import ClientOnly from 'vue-client-only'
  4 | import NoSsr from 'vue-no-ssr'
  5 | import { createRouter } from './router.js'
  6 | import NuxtChild from './components/nuxt-child.js'
  7 | import NuxtError from './components/nuxt-error.vue'
  8 | import Nuxt from './components/nuxt.js'
  9 | import App from './App.js'
 10 | import { setContext, getLocation, getRouteData, normalizeError } from './utils'
 11 | import { createStore } from './store.js'
 12 | 
 13 | /* Plugins */
 14 | 
 15 | // Component: <ClientOnly>
 16 | Vue.component(ClientOnly.name, ClientOnly)
 17 | // TODO: Remove in Nuxt 3: <NoSsr>
 18 | Vue.component(NoSsr.name, {
 19 |   ...NoSsr,
 20 |   render(h, ctx) {
 21 |     if (process.client && !NoSsr._warned) {
 22 |       NoSsr._warned = true
 23 |       console.warn(`<no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead`)
 24 |     }
 25 |     return NoSsr.render(h, ctx)
 26 |   }
 27 | })
 28 | 
 29 | // Component: <NuxtChild>
 30 | Vue.component(NuxtChild.name, NuxtChild)
 31 | Vue.component('NChild', NuxtChild)
 32 | 
 33 | // Component NuxtLink is imported in server.js or client.js
 34 | 
 35 | // Component: <Nuxt>`
 36 | Vue.component(Nuxt.name, Nuxt)
 37 | 
 38 | // vue-meta configuration
 39 | Vue.use(Meta, {
 40 |   keyName: 'head', // the component option name that vue-meta looks for meta info on.
 41 |   attribute: 'data-n-head', // the attribute name vue-meta adds to the tags it observes
 42 |   ssrAttribute: 'data-n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
 43 |   tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
 44 | })
 45 | 
 46 | const defaultTransition = {"name":"page","mode":"out-in","appear":false,"appearClass":"appear","appearActiveClass":"appear-active","appearToClass":"appear-to"}
 47 | 
 48 | async function createApp(ssrContext) {
 49 |   const router = await createRouter(ssrContext)
 50 | 
 51 |   const store = createStore(ssrContext)
 52 |   // Add this.$router into store actions/mutations
 53 |   store.$router = router
 54 | 
 55 |   // Fix SSR caveat https://github.com/nuxt/nuxt.js/issues/3757#issuecomment-414689141
 56 |   const registerModule = store.registerModule
 57 |   store.registerModule = (path, rawModule, options) => registerModule.call(store, path, rawModule, Object.assign({ preserveState: process.client }, options))
 58 | 
 59 |   // Create Root instance
 60 | 
 61 |   // here we inject the router and store to all child components,
 62 |   // making them available everywhere as `this.$router` and `this.$store`.
 63 |   const app = {
 64 |     router,
 65 |     store,
 66 |     nuxt: {
 67 |       defaultTransition,
 68 |       transitions: [ defaultTransition ],
 69 |       setTransitions(transitions) {
 70 |         if (!Array.isArray(transitions)) {
 71 |           transitions = [ transitions ]
 72 |         }
 73 |         transitions = transitions.map((transition) => {
 74 |           if (!transition) {
 75 |             transition = defaultTransition
 76 |           } else if (typeof transition === 'string') {
 77 |             transition = Object.assign({}, defaultTransition, { name: transition })
 78 |           } else {
 79 |             transition = Object.assign({}, defaultTransition, transition)
 80 |           }
 81 |           return transition
 82 |         })
 83 |         this.$options.nuxt.transitions = transitions
 84 |         return transitions
 85 |       },
 86 |       err: null,
 87 |       dateErr: null,
 88 |       error(err) {
 89 |         err = err || null
 90 |         app.context._errored = Boolean(err)
 91 |         err = err ? normalizeError(err) : null
 92 |         const nuxt = this.nuxt || this.$options.nuxt
 93 |         nuxt.dateErr = Date.now()
 94 |         nuxt.err = err
 95 |         // Used in src/server.js
 96 |         if (ssrContext) ssrContext.nuxt.error = err
 97 |         return err
 98 |       }
 99 |     },
100 |     ...App
101 |   }
102 | 
103 |   // Make app available into store via this.app
104 |   store.app = app
105 | 
106 |   const next = ssrContext ? ssrContext.next : location => app.router.push(location)
107 |   // Resolve route
108 |   let route
109 |   if (ssrContext) {
110 |     route = router.resolve(ssrContext.url).route
111 |   } else {
112 |     const path = getLocation(router.options.base)
113 |     route = router.resolve(path).route
114 |   }
115 | 
116 |   // Set context to app.context
117 |   await setContext(app, {
118 |     route,
119 |     next,
120 |     error: app.nuxt.error.bind(app),
121 |     store,
122 |     payload: ssrContext ? ssrContext.payload : undefined,
123 |     req: ssrContext ? ssrContext.req : undefined,
124 |     res: ssrContext ? ssrContext.res : undefined,
125 |     beforeRenderFns: ssrContext ? ssrContext.beforeRenderFns : undefined,
126 |     ssrContext
127 |   })
128 | 
129 |   if (process.client) {
130 |     // Replace store state before plugins execution
131 |     if (window.__NUXT__ && window.__NUXT__.state) {
132 |       store.replaceState(window.__NUXT__.state)
133 |     }
134 |   }
135 | 
136 |   // Plugin execution
137 | 
138 |   // If server-side, wait for async component to be resolved first
139 |   if (process.server && ssrContext && ssrContext.url) {
140 |     await new Promise((resolve, reject) => {
141 |       router.push(ssrContext.url, resolve, () => {
142 |         // navigated to a different route in router guard
143 |         const unregister = router.afterEach(async (to, from, next) => {
144 |           ssrContext.url = to.fullPath
145 |           app.context.route = await getRouteData(to)
146 |           app.context.params = to.params || {}
147 |           app.context.query = to.query || {}
148 |           unregister()
149 |           resolve()
150 |         })
151 |       })
152 |     })
153 |   }
154 | 
155 |   return {
156 |     app,
157 |     store,
158 |     router
159 |   }
160 | }
161 | 
162 | export { createApp, NuxtError }
163 | 


--------------------------------------------------------------------------------
/components/comment.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="arcComment" v-on:click.stop.prevent="() => {}">
  3 | 		<div v-if="!reply" class="averter">
  4 | 			<img :src="avarterArr[averterNum]" alt="">
  5 | 		</div>
  6 | 		<div class="inputBox" :style="isShowBtn ? {height: '180px'} : null">
  7 | 			<div class="user" v-if="showUserSet">
  8 | 				<input type="text" v-model="userinfo.name" placeholder="称呼*" />
  9 | 				<input type="email" v-model="userinfo.email" placeholder="邮箱(不会公开)*" />
 10 | 				<input type="text" v-model="userinfo.site" placeholder="网站（http, https:// 开头)" />
 11 | 				<span class="confirm" v-if="showReset" @click="conform"><i class="iconfont">&#xe640;</i></span>
 12 | 			</div>
 13 | 			<div class="hasuser" v-else>
 14 | 				<span class="name">{{userinfo.name}}</span>
 15 | 				<div class="userSet">
 16 | 					<div class="setBtn"><i class="iconfont">&#xe60e;</i>账户设置</div>
 17 | 					<div class="setCon">
 18 | 						<p @click="editeInfo"><i>•</i>编辑信息</p>
 19 | 						<p @click="clearInfo"><i>•</i>清空信息</p>
 20 | 					</div>
 21 | 				</div>
 22 | 			</div>
 23 | 			<div class="comContent">
 24 | 				<textarea v-model="content"
 25 | 						  @focus="contenFocus"
 26 | 						  @blur="contenBlur"
 27 | 						  :placeholder="at.name ? `回复 ${at.name}:` : '这位大侠说说你的看法~'"
 28 | 						  :style="reply ? {height: '43px'} : null"
 29 | 						  ></textarea>
 30 | 				<div v-if="reply" class="rBtn">
 31 | 					<span @click="concleReply" v-if="at.name && !content">取消</span>
 32 | 					<span @click="submit" v-else>评论</span>
 33 | 				</div>
 34 | 			</div>
 35 | 			<transition name="fade">
 36 | 				<div class="submit" v-show="isShowBtn" @click="submit">
 37 | 					<span>评论</span>
 38 | 				</div>
 39 | 			</transition>
 40 | 		</div>
 41 | 	</div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import {avarterArr} from '../utils/blowser'
 46 | export default {
 47 | 	props: {
 48 | 		reply: {
 49 | 			type: String,
 50 | 			default: ''
 51 | 		},
 52 | 		at: {
 53 | 			type: Object,
 54 | 			default: () => {
 55 | 				return {}
 56 | 			}
 57 | 		},
 58 | 		cid: {
 59 | 			type: String,
 60 | 			default: ''
 61 | 		}
 62 | 	},
 63 | 	data () {
 64 | 		return {
 65 | 			content: '',
 66 | 			isShowBtn: false,
 67 | 			userinfo: {
 68 | 				name: '',
 69 | 				email: '',
 70 | 				site: '',
 71 | 				gravatar: ''
 72 | 			},
 73 | 			regexs: {
 74 | 				email: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
 75 | 				url: /^((https|http):\/\/)+[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/
 76 | 			},
 77 | 			showUserSet: true,
 78 | 			showReset: false,
 79 | 			avarterArr
 80 | 		}
 81 | 	},
 82 | 	computed: {
 83 | 		averterNum () {
 84 | 			return this.$store.state.averterNum
 85 | 		}
 86 | 	},
 87 | 	methods: {
 88 | 		contenFocus() {
 89 | 			if (!this.reply) {
 90 | 				this.isShowBtn = true
 91 | 			}
 92 | 		},
 93 | 		contenBlur() {
 94 | 			if (!this.content && !this.reply) {
 95 | 				this.isShowBtn = false
 96 | 			}
 97 | 		},
 98 | 		validate() {
 99 | 			const {name, email, site} = this.userinfo
100 | 			if (!name.trim()) {
101 | 				alert('请输入昵称哦~~');
102 | 				return false
103 | 			}
104 | 			if (!email.trim()) {
105 | 				alert('请输入邮箱哦~~');
106 | 				return false
107 | 			}
108 | 			if (!this.regexs.email.test(email)) {
109 | 				alert('请输入正确邮箱格式哦~~');
110 | 				return false
111 | 			}
112 | 			if (site && !this.regexs.url.test(site)) {
113 | 				alert('请输入正确网址格式哦~~');
114 | 				return false
115 | 			}
116 | 			return true
117 | 		},
118 | 		submit() {
119 | 			if (this.validate()){
120 | 				if (!this.content.trim()) {
121 | 					alert('请输入评论内容哦~~');
122 | 					return false
123 | 				}
124 | 				this.userinfo.gravatar = this.averterNum
125 | 				localStorage.setItem('userInfo', JSON.stringify(this.userinfo))
126 | 				const user = {
127 | 					content: this.content
128 | 				}
129 | 				if (this.reply) {
130 | 					if (this.at.name) {
131 | 						user.to = this.at
132 | 					}
133 | 					user.from = this.userinfo
134 | 					user.cid = this.cid
135 | 				} else {
136 | 					user.author = this.userinfo
137 | 				}
138 | 				this.showUserSet = false
139 | 				this.showReset = false
140 | 				this.$emit('pushComment', user)
141 | 				setTimeout(()=> {
142 | 					this.content = ''
143 | 					this.isShowBtn = false
144 | 				}, 500)
145 | 			}
146 | 		},
147 | 		editeInfo() {
148 | 			this.showUserSet = true
149 | 			this.showReset = true
150 | 		},
151 | 		clearInfo() {
152 | 			this.showUserSet = true
153 | 			this.showReset = true
154 | 			this.userinfo = {
155 | 				name: '',
156 | 				email: '',
157 | 				site: '',
158 | 				averter: this.averterNum
159 | 			}
160 | 			localStorage.setItem('userInfo', '')
161 | 		},
162 | 		conform() {
163 | 			if (this.validate()){
164 | 				localStorage.setItem('userInfo', JSON.stringify(this.userinfo))
165 | 				this.showUserSet = false
166 | 				this.showReset = false
167 | 			}
168 | 		},
169 | 		concleReply() {
170 | 			this.$emit('concleReply')
171 | 		}
172 | 	},
173 | 	mounted() {
174 | 		const userinfo = localStorage.getItem('userInfo')
175 | 		if (userinfo) {
176 | 			this.userinfo = JSON.parse(userinfo)
177 | 			this.showUserSet = false
178 | 		}
179 | 	}
180 | }
181 | </script>
182 | 
183 | <style scoped>
184 | /* 评论输入组件 */
185 | .arcComment{
186 | 	box-sizing: border-box;
187 | 	display: flex;
188 | }
189 | .averter{
190 | 	width: 60px;
191 | 	height: 50px;
192 | }
193 | .averter img {
194 | 	width: 50px;
195 | 	height: 50px;
196 | 	display: block;
197 | 	margin-top: 40px;
198 | }
199 | .inputBox{
200 | 	flex: 1;
201 | }
202 | .user{
203 | 	display: flex;
204 | 	justify-content: space-between;
205 | 	box-sizing: border-box;
206 | }
207 | .user input{
208 | 	outline: none;
209 | 	display: block;
210 | 	font-size: 14px;
211 | 	text-indent: 5px;
212 | 	width: 220px;
213 | 	height: 30px;
214 | 	border: 1px solid #f1f1f1;
215 | }
216 | .user input:focus{
217 | 	border-color: #0f9db7;
218 | }
219 | .confirm{
220 | 	width: 50px;
221 | 	background: red;
222 | 	text-align: center;
223 | 	height: 28px;
224 | 	line-height: 28px;
225 | 	background: hsla(0,0%,77%,.4);
226 | 	cursor: pointer;
227 | }
228 | .confirm:hover{
229 | 	background: #51ce23;
230 | 	color: #ffffff;
231 | }
232 | .comContent{
233 | 	display: flex;
234 | 	margin-top: 10px;
235 | }
236 | .comContent textarea {
237 | 	flex: 1;
238 | 	outline: none;
239 | 	height: 100px;
240 | 	box-sizing: border-box;
241 | 	padding: 10px;
242 | 	resize: none;
243 | 	font-size: 14px;
244 | 	border: 1px solid #f1f1f1;
245 | }
246 | .comContent textarea:focus{
247 | 	border-color: #0f9db7;;
248 | }
249 | .submit{
250 | 	clear: both;
251 | 	overflow: hidden;
252 | }
253 | .submit span{
254 | 	float: right;
255 | 	margin-top: 10px;
256 | 	margin-right: 10px;
257 | 	height: 36px;
258 | 	width: 70px;
259 | 	background: #0f9db7;
260 | 	color: #ffffff;
261 | 	text-align: center;
262 | 	line-height: 36px;
263 | 	cursor: pointer;
264 | }
265 | .hasuser{
266 | 	display: flex;
267 | 	justify-content: flex-end;
268 | 	height: 30px;
269 | 	font-size: 14px
270 | }
271 | .hasuser .name{
272 | 	font-weight: bold;
273 | 	padding-right: 10px;
274 | 	line-height: 30px;
275 | }
276 | .hasuser .userSet{
277 | 	position: relative;
278 | 	cursor: pointer;
279 | 	color: #333333;
280 | }
281 | .hasuser .userSet:hover .setCon{
282 | 	display: block
283 | }
284 | .hasuser .setBtn{
285 | 	line-height: 30px;
286 | 	width: 100px;
287 | }
288 | .hasuser .setBtn i {
289 | 	font-size: 14px;
290 | 	padding-right: 10px;
291 | }
292 | .hasuser .setCon{
293 | 	position: absolute;
294 | 	width: 100%;
295 | 	display: none;
296 | }
297 | .hasuser .setCon p{
298 | 	line-height: 30px;
299 | 	box-sizing: border-box;
300 | 	padding-left: 4px;
301 | }
302 | .hasuser .setCon p:hover{
303 | 	background: rgba(0, 0, 0, 0.08);
304 | 	width: 100%;
305 | }
306 | .hasuser .setCon i {
307 | 	padding-right: 12px;
308 | }
309 | .rBtn{
310 | 	background: #0f9db7;
311 | 	color: #ffffff;
312 | 	line-height: 41px;
313 | 	font-size: 16px;
314 | 	margin-left: 20px;
315 | 	width: 80px;
316 | 	text-align: center;
317 | 	cursor: pointer;
318 | }
319 | </style>
320 | 
321 | 


--------------------------------------------------------------------------------
/pages/hero.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<section class="heroBox">
  3 | 		<button class="bubbly-button"
  4 | 				@click="up"
  5 | 				:class="btnShow ? 'animate' : ''">我要上墙!</button>
  6 | 		<div class="heroList">
  7 | 			<div class="item" v-for="(item, index) in hero" :key="index">
  8 | 				<div class="time">{{toTime(item.create_time, '-')}}</div>
  9 | 				<p class="content">{{item.content}}</p>
 10 | 				<div class="author">——{{item.author.name}}</div>
 11 | 				<div class="bgcircle"></div>
 12 | 			</div>
 13 | 		</div>
 14 | 		<div class="loadmore more" v-if="hasMore" @click="getHeroData">{{loadText}}</div>
 15 | 		<div class="nomore" v-else>木有更多鸟</div>
 16 | 		<transition name="fade">
 17 | 			<div class="popup"
 18 | 				 v-show="showUp"
 19 | 				 @click="hidePopup">
 20 | 				<div>
 21 | 					<comment v-on:pushComment="toAddHero"></comment>
 22 | 				</div>
 23 | 			</div>
 24 | 		</transition>
 25 | 	</section>
 26 | </template>
 27 | 
 28 | <script>
 29 | import Comment from '../components/comment'
 30 | import FooterMixin from '../utils/footer-mixin'
 31 | import TimeMixin from '../utils/time-mixin'
 32 | import {getHero, addHero} from '../api'
 33 | var timer = null
 34 | 
 35 | export default {
 36 | 	head: {
 37 | 		title: 'naice | 留言墙'
 38 | 	},
 39 | 	layout: 'layout',
 40 | 	components: {
 41 | 		Comment
 42 | 	},
 43 | 	data () {
 44 | 		return {
 45 | 			btnShow: false,
 46 | 			showUp: false,
 47 | 			page: 0,
 48 | 			hasMore: true,
 49 | 			loadText: '加载中...'
 50 | 		}
 51 | 	},
 52 | 	mixins: [FooterMixin, TimeMixin],
 53 | 	computed: {
 54 | 		hero () {
 55 | 			return this.$store.state.hero.data
 56 | 		}
 57 | 	},
 58 | 	methods: {
 59 | 		up() {
 60 | 			this.btnShow = true
 61 | 			clearInterval(timer)
 62 | 			timer = setTimeout(() => {
 63 | 				this.btnShow = false
 64 | 				this.showUp = true
 65 | 			}, 500)
 66 | 		},
 67 | 		hidePopup() {
 68 | 			this.showUp = false
 69 | 		},
 70 | 		async getHeroData() {
 71 | 			this.page += 1
 72 | 			this.loadText = '加载中...'
 73 | 			const res = await getHero({current_page: this.page})
 74 | 			if (res.code === 1) {
 75 | 				let list = res.result.list || []
 76 | 				if (this.page > 1) {
 77 | 					list = this.hero.concat(list)
 78 | 				}
 79 | 				this.$store.commit('getHero', list)
 80 | 			}
 81 | 			if (this.page >= res.result.pagination.total_page) {
 82 | 				this.hasMore = false
 83 | 			} else {
 84 | 				this.hasMore = true
 85 | 			}
 86 | 			this.loadText = '加载更多'
 87 | 			this.$nextTick(() => {
 88 | 				this.footer()
 89 | 			})
 90 | 		},
 91 | 		async toAddHero(user) {
 92 | 			const res = await addHero(user)
 93 | 			if (res.code === 1) {
 94 | 				this.showUp = false
 95 | 				this.page = 0
 96 | 				this.getHeroData()
 97 | 			}
 98 | 		}
 99 | 	},
100 | 	mounted () {
101 | 		if (this.hero.length === 0) {
102 | 			this.getHeroData()
103 | 		}
104 | 	}
105 | }
106 | </script>
107 | 
108 | <style scoped>
109 | .heroBox{
110 | 	width: 900px;
111 | 	overflow: hidden;
112 | 	margin: 0 auto;
113 | }
114 | .up{
115 | 	width: 100px;
116 | 	height: 30px;
117 | 	border-radius: 6px;
118 | 	border: 1px solid #f1f1f1;
119 | 	margin: 0 auto;
120 | 	cursor: pointer;
121 | }
122 | .bubbly-button {
123 |   font-family: 'Helvetica', 'Arial', sans-serif;
124 |   display: block;
125 |   font-size: 1em;
126 |   padding: 10px 20px;
127 |   -webkit-appearance: none;
128 |   appearance: none;
129 |   background-color: #ff0081;
130 |   color: #fff;
131 |   border-radius: 4px;
132 |   border: none;
133 |   cursor: pointer;
134 |   position: relative;
135 |   transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
136 |   box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
137 |   margin: 20px auto 30px auto;
138 | }
139 | .bubbly-button:focus {
140 |   outline: 0;
141 | }
142 | .bubbly-button:before, .bubbly-button:after {
143 |   position: absolute;
144 |   content: '';
145 |   display: block;
146 |   width: 140%;
147 |   height: 100%;
148 |   left: -20%;
149 |   z-index: -1000;
150 |   transition: all ease-in-out 0.5s;
151 |   background-repeat: no-repeat;
152 | }
153 | .bubbly-button:before {
154 | 	display: none;
155 | 	top: -75%;
156 | 	background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
157 | 	background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
158 | }
159 | .bubbly-button:after {
160 | 	display: none;
161 | 	bottom: -75%;
162 | 	background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
163 | 	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
164 | }
165 | .bubbly-button:active {
166 | 	transform: scale(0.9);
167 | 	background-color: #e60074;
168 | 	box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
169 | }
170 | .bubbly-button.animate:before {
171 | 	display: block;
172 | 	animation: topBubbles ease-in-out 0.75s forwards;
173 | }
174 | .bubbly-button.animate:after {
175 | 	display: block;
176 | 	animation: bottomBubbles ease-in-out 0.75s forwards;
177 | }
178 | 
179 | @keyframes topBubbles {
180 | 	0% {
181 | 		background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
182 | 	}
183 | 	50% {
184 | 		background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
185 | 	}
186 | 	100% {
187 | 		background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
188 | 		background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
189 | 	}
190 | }
191 | @keyframes bottomBubbles {
192 | 	0% {
193 | 		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
194 | 	}
195 | 	50% {
196 | 		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
197 | 	}
198 | 	100% {
199 | 		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
200 | 		background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
201 | 	}
202 | }
203 | .heroList{
204 | 	clear: both;
205 | 	overflow: hidden;
206 | }
207 | .heroList .item:nth-child(4n) {
208 | 	margin-right: 0
209 | }
210 | .item{
211 | 	width: 210px;
212 | 	height: 210px;
213 | 	border: 1px solid #f1f1f1;
214 | 	box-sizing: border-box;
215 | 	padding: 10px;
216 | 	cursor: pointer;
217 | 	float: left;
218 | 	margin-right: 18px;
219 | 	margin-bottom: 18px;
220 | 	transition: background 0.3s;
221 | 	position: relative;
222 | 	overflow: hidden;
223 | }
224 | .bgcircle{
225 | 	content: "";
226 | 	display: block;
227 | 	width: 400px;
228 | 	height: 400px;
229 | 	position: absolute;
230 | 	left: -95px;
231 | 	top: -95px;
232 | 	background: rgba(241, 241, 241, 0.2);
233 | 	border-radius: 200px;
234 | 	transition: 0.3s;
235 | 	transform: scale(0);
236 | 	z-index: -1;
237 | }
238 | .item:hover .bgcircle{
239 | 	transform: scale(1);
240 | 	background: rgba(241, 241, 241, 1);
241 | }
242 | .time{
243 | 	height: 30px;
244 | 	color: #7f7f7f;
245 | 	font-size: 12px;
246 | }
247 | .content{
248 | 	height: 124px;
249 | 	overflow: hidden;
250 | 	line-height: 24px;
251 | 	text-overflow: ellipsis;
252 | 	display: -webkit-box;
253 | 	-webkit-line-clamp: 5;
254 | 	-webkit-box-orient: vertical;
255 | 	text-indent: 24px;
256 | 	word-wrap: break-word;
257 | }
258 | .author{
259 | 	text-align: right;
260 | 	color: #7f7f7f;
261 | 	margin-top: 14px;
262 | }
263 | .popup{
264 | 	position: fixed;
265 | 	width: 100%;
266 | 	height: 100%;
267 | 	background: rgba(255, 255, 255, 0.9);
268 | 	left: 0;
269 | 	top: 0;
270 | 	z-index: 100;
271 | 	display: flex;
272 | 	justify-content: center;
273 | 	align-items: center;
274 | }
275 | .popup > div {
276 | 	width: 800px;
277 | 	height: 200px;
278 | 	/* background: rgba(0, 0, 0, 0.6); */
279 | }
280 | .more{
281 | 	text-align: center;
282 | 	cursor: pointer;
283 | 	color: #878787;
284 | 	padding: 20px 0 10px 0;
285 | 	clear: both;
286 | 	overflow: hidden;
287 | }
288 | .nomore{
289 | 	text-align: center;
290 | 	cursor: pointer;
291 | 	color: #cccccc;
292 | 	padding: 20px 0 10px 0;
293 | }
294 | </style>
295 | 


--------------------------------------------------------------------------------
/.nuxt/server.js:
--------------------------------------------------------------------------------
  1 | import { stringify } from 'querystring'
  2 | import Vue from 'vue'
  3 | import fetch from 'node-fetch'
  4 | import middleware from './middleware.js'
  5 | import { applyAsyncData, getMatchedComponents, middlewareSeries, promisify, urlJoin, sanitizeComponent } from './utils.js'
  6 | import { createApp, NuxtError } from './index.js'
  7 | import NuxtLink from './components/nuxt-link.server.js' // should be included after ./index.js
  8 | 
  9 | // Component: <NuxtLink>
 10 | Vue.component(NuxtLink.name, NuxtLink)
 11 | Vue.component('NLink', NuxtLink)
 12 | 
 13 | if (!global.fetch) { global.fetch = fetch }
 14 | 
 15 | const noopApp = () => new Vue({ render: h => h('div') })
 16 | 
 17 | const createNext = ssrContext => (opts) => {
 18 |   ssrContext.redirected = opts
 19 |   // If nuxt generate
 20 |   if (!ssrContext.res) {
 21 |     ssrContext.nuxt.serverRendered = false
 22 |     return
 23 |   }
 24 |   opts.query = stringify(opts.query)
 25 |   opts.path = opts.path + (opts.query ? '?' + opts.query : '')
 26 |   const routerBase = '/'
 27 |   if (!opts.path.startsWith('http') && (routerBase !== '/' && !opts.path.startsWith(routerBase))) {
 28 |     opts.path = urlJoin(routerBase, opts.path)
 29 |   }
 30 |   // Avoid loop redirect
 31 |   if (opts.path === ssrContext.url) {
 32 |     ssrContext.redirected = false
 33 |     return
 34 |   }
 35 |   ssrContext.res.writeHead(opts.status, {
 36 |     'Location': opts.path
 37 |   })
 38 |   ssrContext.res.end()
 39 | }
 40 | 
 41 | // This exported function will be called by `bundleRenderer`.
 42 | // This is where we perform data-prefetching to determine the
 43 | // state of our application before actually rendering it.
 44 | // Since data fetching is async, this function is expected to
 45 | // return a Promise that resolves to the app instance.
 46 | export default async (ssrContext) => {
 47 |   // Create ssrContext.next for simulate next() of beforeEach() when wanted to redirect
 48 |   ssrContext.redirected = false
 49 |   ssrContext.next = createNext(ssrContext)
 50 |   // Used for beforeNuxtRender({ Components, nuxtState })
 51 |   ssrContext.beforeRenderFns = []
 52 |   // Nuxt object (window{{globals.context}}, defaults to window.__NUXT__)
 53 |   ssrContext.nuxt = { layout: 'default', data: [], error: null, state: null, serverRendered: true }
 54 |   // Create the app definition and the instance (created for each request)
 55 |   const { app, router, store } = await createApp(ssrContext)
 56 |   const _app = new Vue(app)
 57 | 
 58 |   // Add meta infos (used in renderer.js)
 59 |   ssrContext.meta = _app.$meta()
 60 |   // Keep asyncData for each matched component in ssrContext (used in app/utils.js via this.$ssrContext)
 61 |   ssrContext.asyncData = {}
 62 | 
 63 |   const beforeRender = async () => {
 64 |     // Call beforeNuxtRender() methods
 65 |     await Promise.all(ssrContext.beforeRenderFns.map(fn => promisify(fn, { Components, nuxtState: ssrContext.nuxt })))
 66 |     ssrContext.rendered = () => {
 67 |       // Add the state from the vuex store
 68 |       ssrContext.nuxt.state = store.state
 69 |     }
 70 |   }
 71 |   const renderErrorPage = async () => {
 72 |     // Load layout for error page
 73 |     const errLayout = (typeof NuxtError.layout === 'function' ? NuxtError.layout(app.context) : NuxtError.layout)
 74 |     ssrContext.nuxt.layout = errLayout || 'default'
 75 |     await _app.loadLayout(errLayout)
 76 |     _app.setLayout(errLayout)
 77 |     await beforeRender()
 78 |     return _app
 79 |   }
 80 |   const render404Page = () => {
 81 |     app.context.error({ statusCode: 404, path: ssrContext.url, message: `This page could not be found` })
 82 |     return renderErrorPage()
 83 |   }
 84 | 
 85 |   const s = Date.now()
 86 | 
 87 |   // Components are already resolved by setContext -> getRouteData (app/utils.js)
 88 |   const Components = getMatchedComponents(router.match(ssrContext.url))
 89 | 
 90 |   /*
 91 |   ** Dispatch store nuxtServerInit
 92 |   */
 93 |   if (store._actions && store._actions.nuxtServerInit) {
 94 |     try {
 95 |       await store.dispatch('nuxtServerInit', app.context)
 96 |     } catch (err) {
 97 |       console.debug('Error occurred when calling nuxtServerInit: ', err.message)
 98 |       throw err
 99 |     }
100 |   }
101 |   // ...If there is a redirect or an error, stop the process
102 |   if (ssrContext.redirected) return noopApp()
103 |   if (ssrContext.nuxt.error) return renderErrorPage()
104 | 
105 |   /*
106 |   ** Call global middleware (nuxt.config.js)
107 |   */
108 |   let midd = []
109 |   midd = midd.map((name) => {
110 |     if (typeof name === 'function') return name
111 |     if (typeof middleware[name] !== 'function') {
112 |       app.context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
113 |     }
114 |     return middleware[name]
115 |   })
116 |   await middlewareSeries(midd, app.context)
117 |   // ...If there is a redirect or an error, stop the process
118 |   if (ssrContext.redirected) return noopApp()
119 |   if (ssrContext.nuxt.error) return renderErrorPage()
120 | 
121 |   /*
122 |   ** Set layout
123 |   */
124 |   let layout = Components.length ? Components[0].options.layout : NuxtError.layout
125 |   if (typeof layout === 'function') layout = layout(app.context)
126 |   await _app.loadLayout(layout)
127 |   if (ssrContext.nuxt.error) return renderErrorPage()
128 |   layout = _app.setLayout(layout)
129 |   ssrContext.nuxt.layout = _app.layoutName
130 | 
131 |   /*
132 |   ** Call middleware (layout + pages)
133 |   */
134 |   midd = []
135 |   layout = sanitizeComponent(layout)
136 |   if (layout.options.middleware) midd = midd.concat(layout.options.middleware)
137 |   Components.forEach((Component) => {
138 |     if (Component.options.middleware) {
139 |       midd = midd.concat(Component.options.middleware)
140 |     }
141 |   })
142 |   midd = midd.map((name) => {
143 |     if (typeof name === 'function') return name
144 |     if (typeof middleware[name] !== 'function') {
145 |       app.context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
146 |     }
147 |     return middleware[name]
148 |   })
149 |   await middlewareSeries(midd, app.context)
150 |   // ...If there is a redirect or an error, stop the process
151 |   if (ssrContext.redirected) return noopApp()
152 |   if (ssrContext.nuxt.error) return renderErrorPage()
153 | 
154 |   /*
155 |   ** Call .validate()
156 |   */
157 |   let isValid = true
158 |   try {
159 |     for (const Component of Components) {
160 |       if (typeof Component.options.validate !== 'function') {
161 |         continue
162 |       }
163 | 
164 |       isValid = await Component.options.validate(app.context)
165 | 
166 |       if (!isValid) {
167 |         break
168 |       }
169 |     }
170 |   } catch (validationError) {
171 |     // ...If .validate() threw an error
172 |     app.context.error({
173 |       statusCode: validationError.statusCode || '500',
174 |       message: validationError.message
175 |     })
176 |     return renderErrorPage()
177 |   }
178 | 
179 |   // ...If .validate() returned false
180 |   if (!isValid) {
181 |     // Don't server-render the page in generate mode
182 |     if (ssrContext._generate) ssrContext.nuxt.serverRendered = false
183 |     // Render a 404 error page
184 |     return render404Page()
185 |   }
186 | 
187 |   // If no Components found, returns 404
188 |   if (!Components.length) return render404Page()
189 | 
190 |   // Call asyncData & fetch hooks on components matched by the route.
191 |   const asyncDatas = await Promise.all(Components.map((Component) => {
192 |     const promises = []
193 | 
194 |     // Call asyncData(context)
195 |     if (Component.options.asyncData && typeof Component.options.asyncData === 'function') {
196 |       const promise = promisify(Component.options.asyncData, app.context)
197 |       promise.then((asyncDataResult) => {
198 |         ssrContext.asyncData[Component.cid] = asyncDataResult
199 |         applyAsyncData(Component)
200 |         return asyncDataResult
201 |       })
202 |       promises.push(promise)
203 |     } else {
204 |       promises.push(null)
205 |     }
206 | 
207 |     // Call fetch(context)
208 |     if (Component.options.fetch) {
209 |       promises.push(Component.options.fetch(app.context))
210 |     } else {
211 |       promises.push(null)
212 |     }
213 | 
214 |     return Promise.all(promises)
215 |   }))
216 | 
217 |   if (process.env.DEBUG && asyncDatas.length)console.debug('Data fetching ' + ssrContext.url + ': ' + (Date.now() - s) + 'ms')
218 | 
219 |   // datas are the first row of each
220 |   ssrContext.nuxt.data = asyncDatas.map(r => r[0] || {})
221 | 
222 |   // ...If there is a redirect or an error, stop the process
223 |   if (ssrContext.redirected) return noopApp()
224 |   if (ssrContext.nuxt.error) return renderErrorPage()
225 | 
226 |   // Call beforeNuxtRender methods & add store state
227 |   await beforeRender()
228 | 
229 |   return _app
230 | }
231 | 


--------------------------------------------------------------------------------
/assets/css/init.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-size: 14px;
  3 |   word-spacing: 1px;
  4 |   -ms-text-size-adjust: 100%;
  5 |   -webkit-text-size-adjust: 100%;
  6 |   -moz-osx-font-smoothing: grayscale;
  7 |   box-sizing: border-box;
  8 |   margin: 0;
  9 |   color: #555;
 10 |   letter-spacing: .5px;
 11 |   font-family: Futura, -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
 12 |   -webkit-font-smoothing: antialiased;
 13 | }
 14 | 
 15 | *,
 16 | *:before,
 17 | *:after {
 18 |   box-sizing: border-box;
 19 |   margin: 0;
 20 |   padding: 0;
 21 | }
 22 | 
 23 | 
 24 | /** 清除内外边距 **/
 25 | 
 26 | body,
 27 | h1,
 28 | h2,
 29 | h3,
 30 | h4,
 31 | h5,
 32 | h6,
 33 | hr,
 34 | p,
 35 | blockquote,
 36 | 
 37 | /* structural elements 结构元素 */
 38 | 
 39 | dl,
 40 | dt,
 41 | dd,
 42 | ul,
 43 | ol,
 44 | li,
 45 | 
 46 | /* list elements 列表元素 */
 47 | 
 48 | pre,
 49 | 
 50 | /* text formatting elements 文本格式元素 */
 51 | 
 52 | form,
 53 | fieldset,
 54 | legend,
 55 | button,
 56 | input,
 57 | textarea,
 58 | 
 59 | /* form elements 表单元素 */
 60 | 
 61 | th,
 62 | td
 63 | /* table elements 表格元素 */
 64 | 
 65 | {
 66 |   margin: 0;
 67 |   padding: 0;
 68 | }
 69 | 
 70 | 
 71 | /** 设置默认字体 **/
 72 | 
 73 | button,
 74 | input,
 75 | select,
 76 | textarea
 77 | /* for ie */
 78 | 
 79 | {
 80 |   font: 14px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
 81 | }
 82 | 
 83 | h1,
 84 | h2,
 85 | h3,
 86 | h4,
 87 | h5,
 88 | h6 {
 89 |   font-size: 100%;
 90 | }
 91 | 
 92 | address,
 93 | cite,
 94 | dfn,
 95 | em,
 96 | var {
 97 |   font-style: normal;
 98 | }
 99 | 
100 | 
101 | /* 将斜体扶正 */
102 | 
103 | code,
104 | kbd,
105 | pre,
106 | samp {
107 |   font-family: courier new, courier, monospace;
108 | }
109 | 
110 | 
111 | /* 统一等宽字体 */
112 | 
113 | small {
114 |   font-size: 12px;
115 | }
116 | 
117 | 
118 | /* 小于 12px 的中文很难阅读，让 small 正常化 */
119 | 
120 | 
121 | /** 重置列表元素 **/
122 | 
123 | ul,
124 | ol {
125 |   list-style: none;
126 | }
127 | 
128 | 
129 | /** 重置文本格式元素 **/
130 | 
131 | a {
132 |   text-decoration: none;
133 | }
134 | 
135 | a:hover {
136 |   text-decoration: underline;
137 | }
138 | 
139 | a {
140 |   color: #555;
141 |   text-decoration: none;
142 | }
143 | 
144 | strong {
145 |   font-weight: normal;
146 | }
147 | 
148 | 
149 | /** 重置表单元素 **/
150 | 
151 | legend {
152 |   color: #000;
153 | }
154 | 
155 | 
156 | /* for ie6 */
157 | 
158 | fieldset,
159 | img {
160 |   border: 0;
161 | }
162 | 
163 | 
164 | /* img 搭车：让链接里的 img 无边框 */
165 | 
166 | button,
167 | input,
168 | select,
169 | textarea {
170 |   font-size: 100%;
171 | }
172 | 
173 | 
174 | /* 使得表单元素在 ie 下能继承字体大小 */
175 | 
176 | 
177 | /* 注：optgroup 无法扶正 */
178 | 
179 | 
180 | /** 重置表格元素 **/
181 | 
182 | table {
183 |   border-collapse: collapse;
184 |   border-spacing: 0;
185 | }
186 | 
187 | i {
188 |   font-style: normal
189 | }
190 | 
191 | @font-face {
192 |   font-family: 'iconfont';  /* project id 358841 */
193 |   src: url('//at.alicdn.com/t/font_358841_9aw2a59f7pp.eot');
194 |   src: url('//at.alicdn.com/t/font_358841_9aw2a59f7pp.eot?#iefix') format('embedded-opentype'),
195 |   url('//at.alicdn.com/t/font_358841_9aw2a59f7pp.woff2') format('woff2'),
196 |   url('//at.alicdn.com/t/font_358841_9aw2a59f7pp.woff') format('woff'),
197 |   url('//at.alicdn.com/t/font_358841_9aw2a59f7pp.ttf') format('truetype'),
198 |   url('//at.alicdn.com/t/font_358841_9aw2a59f7pp.svg#iconfont') format('svg');
199 | }
200 | 
201 | .iconfont {
202 |   font-family: "iconfont" !important;
203 |   font-size: 16px;
204 |   font-style: normal;
205 |   -webkit-font-smoothing: antialiased;
206 |   -moz-osx-font-smoothing: grayscale;
207 | }
208 | 
209 | ::selection {
210 |   background: #3fb76c;
211 |   color: #fff;
212 | }
213 | 
214 | ::-moz-selection {
215 |   background: #3fb76c;
216 |   color: #fff;
217 | }
218 | 
219 | ::-webkit-selection {
220 |   background: #3fb76c;
221 |   color: #fff;
222 | }
223 | 
224 | .fade-enter-active,
225 | .fade-leave-active {
226 |   transition: opacity .5s;
227 | }
228 | 
229 | .fade-enter,
230 | .fade-leave-to {
231 |   opacity: 0;
232 | }
233 | 
234 | .icon-T:before {
235 |   content:"\e607";
236 | }
237 | .icon-yingdaicon04:before {
238 |   content:"\e643";
239 | }
240 | .icon-icon8:before {
241 |   content:"\e608";
242 | }
243 | .icon-qqkongjian1:before {
244 |   content:"\e7dc";
245 | }
246 | .icon-weibiaoti1:before {
247 |   content:"\e637";
248 | }
249 | .icon-lianjie2:before {
250 |   content:"\e665";
251 | }
252 | .icon-4:before {
253 |   content:"\e601";
254 | }
255 | .icon-shu:before {
256 |   content:"\e604";
257 | }
258 | .icon-home:before {
259 |   content:"\e73a";
260 | }
261 | .icon-douban:before {
262 |   content:"\e663";
263 | }
264 | .icon-xihuan:before {
265 |   content:"\e63b";
266 | }
267 | .icon-windows:before {
268 |   content:"\ec83";
269 | }
270 | .icon-twitter:before {
271 |   content:"\ec9c";
272 | }
273 | .icon-douban1:before {
274 |   content:"\e649";
275 | }
276 | .icon-02:before {
277 |   content:"\e64a";
278 | }
279 | .icon-daima:before {
280 |   content:"\e605";
281 | }
282 | .icon-tupian:before {
283 |   content:"\e626";
284 | }
285 | .icon-code:before {
286 |   content:"\e725";
287 | }
288 | .icon-iconsf-copy:before {
289 |   content:"\e610";
290 | }
291 | .icon-shang:before {
292 |   content:"\e614";
293 | }
294 | .icon-iconfont21:before {
295 |   content:"\e613";
296 | }
297 | .icon-fenxiang:before {
298 |   content:"\e6a5";
299 | }
300 | .icon-bianji1:before {
301 |   content:"\e654";
302 | }
303 | .icon-nodejs:before {
304 |   content:"\e989";
305 | }
306 | .icon-dingwei1:before {
307 |   content:"\e615";
308 | }
309 | .icon-lianjie:before {
310 |   content:"\e609";
311 | }
312 | .icon-jiacu:before {
313 |   content:"\e61e";
314 | }
315 | .icon-mac:before {
316 |   content:"\e61b";
317 | }
318 | .icon-icon:before {
319 |   content:"\e65b";
320 | }
321 | .icon-dingwei:before {
322 |   content:"\e662";
323 | }
324 | .icon-qq:before {
325 |   content:"\e602";
326 | }
327 | .icon-sanjiaotop:before {
328 |   content:"\e6b4";
329 | }
330 | .icon-jingyin:before {
331 |   content:"\e65e";
332 | }
333 | .icon-bofang:before {
334 |   content:"\e60d";
335 | }
336 | .icon-youxiang:before {
337 |   content:"\e64d";
338 | }
339 | .icon-like:before {
340 |   content:"\e65c";
341 | }
342 | .icon-code1:before {
343 |   content:"\e69f";
344 | }
345 | .icon-facebookf:before {
346 |   content:"\e6e2";
347 | }
348 | .icon-duigou:before {
349 |   content:"\e640";
350 | }
351 | .icon-bianji:before {
352 |   content:"\e636";
353 | }
354 | .icon-weibo:before {
355 |   content:"\e63d";
356 | }
357 | .icon-iconstop:before {
358 |   content:"\e69d";
359 | }
360 | .icon-ai09:before {
361 |   content:"\e67d";
362 | }
363 | .icon-ai10:before {
364 |   content:"\e67f";
365 | }
366 | .icon-google:before {
367 |   content:"\e6b2";
368 | }
369 | .icon-iconfontyouxihudong:before {
370 |   content:"\e639";
371 | }
372 | .icon-bushu:before {
373 |   content:"\e77f";
374 | }
375 | .icon-yulanguanbi:before {
376 |   content:"\e650";
377 | }
378 | .icon-704bianjiqi_Ixieti:before {
379 |   content:"\e65a";
380 | }
381 | .icon-434-npm:before {
382 |   content:"\e6d9";
383 | }
384 | .icon-shezhi:before {
385 |   content:"\e60e";
386 | }
387 | .icon-quotation_marks:before {
388 |   content:"\e715";
389 | }
390 | .icon-sousuo:before {
391 |   content:"\e603";
392 | }
393 | .icon-qqkongjian:before {
394 |   content:"\e624";
395 | }
396 | .icon-danjiantoushang:before {
397 |   content:"\e635";
398 | }
399 | .icon-danjiantouxia:before {
400 |   content:"\e638";
401 | }
402 | .icon-wuxuliebiao:before {
403 |   content:"\e645";
404 | }
405 | .icon-youxuliebiao:before {
406 |   content:"\e67e";
407 | }
408 | .icon-ic_code_px:before {
409 |   content:"\e8b6";
410 | }
411 | .icon-yulan:before {
412 |   content:"\e7b9";
413 | }
414 | .icon-zhixiangzuo:before {
415 |   content:"\e8f4";
416 | }
417 | .icon-zhixiangyou:before {
418 |   content:"\e8f5";
419 | }
420 | .icon-lianjie1:before {
421 |   content:"\e60b";
422 | }
423 | .icon-biaoqing:before {
424 |   content:"\e60c";
425 | }
426 | .icon-fabu:before {
427 |   content:"\e62a";
428 | }
429 | .icon-youjian:before {
430 |   content:"\e60a";
431 | }
432 | .icon-xiangmu:before {
433 |   content:"\e671";
434 | }
435 | .icon-xiaoxi:before {
436 |   content:"\e65d";
437 | }
438 | .icon-xinlang:before {
439 |   content:"\e832";
440 | }
441 | .icon-weixin:before {
442 |   content:"\e62e";
443 | }
444 | .icon-ios:before {
445 |   content:"\e64b";
446 | }
447 | .icon-yinxiangbiji:before {
448 |   content:"\e764";
449 | }
450 | .icon-github:before {
451 |   content:"\e621";
452 | }
453 | .icon-hebingfenping:before {
454 |   content:"\e612";
455 | }
456 | .icon-yonghu-tianchong:before {
457 |   content:"\e670";
458 | }
459 | .icon-linkedin:before {
460 |   content:"\e627";
461 | }
462 | .icon-biaoqian:before {
463 |   content:"\e8cb";
464 | }
465 | .icon-dian1:before {
466 |   content:"\e600";
467 | }
468 | .icon-icon-test:before {
469 |   content:"\e617";
470 | }
471 | .icon-gengduo:before {
472 |   content:"\e606";
473 | }
474 | .icon-liulanqi:before {
475 |   content:"\e68f";
476 | }
477 | .icon-icon-:before {
478 |   content:"\e611";
479 | }
480 | .icon-mingxingxianchang:before {
481 |   content:"\e6c3";
482 | }
483 | .icon-benzihebi:before {
484 |   content:"\e60f";
485 | }
486 | .icon-angular:before {
487 |   content:"\e616";
488 | }
489 | .icon-nginx:before {
490 |   content:"\e63c";
491 | }
492 | .icon-vuejs:before {
493 |   content:"\e641";
494 | }
495 | .icon-react:before {
496 |   content:"\e64c";
497 | }
498 | .icon-zanting:before {
499 |   content:"\e618";
500 | }
501 | .icon-prev:before {
502 |   content:"\e619";
503 | }
504 | .icon--liebiao:before {
505 |   content:"\e628";
506 | }
507 | .icon-xiayiqu101:before {
508 |   content:"\e61a";
509 | }
510 | .icon-jilugeci:before {
511 |   content:"\e70f";
512 | }


--------------------------------------------------------------------------------
/pages/article/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="articleBox">
  3 |         <main class="box main">
  4 |             <section class="article">
  5 |                 <div class="item" v-for="(item, index) in article" :key="index">
  6 |                     <a href="javascript:void(0)" class="article-title" @click="goDetail(item._id, article)">
  7 |                         <h2>{{item.title}}</h2>
  8 |                     </a>
  9 |                     <p class="article-desc">{{item.descript}}</p>
 10 |                     <div class="article-info">
 11 |                         <span class="time">{{toTime(item.update_at, '.')}}</span>
 12 |                             <i class="iconfont">&#xe600;</i>
 13 |                         <span class="time"><strong v-if="item.meta">{{item.meta.views}}</strong>次阅读</span>
 14 |                             <i class="iconfont">&#xe600;</i>
 15 |                         <span class="time"><strong v-if="item.meta">{{item.meta.comments}}</strong>条评论</span>
 16 |                             <i class="iconfont">&#xe600;</i>
 17 |                         <span class="time"><strong v-if="item.meta">{{item.meta.likes}}</strong>人喜欢</span>
 18 |                     </div>
 19 |                 </div>
 20 |                 <div class="loadmore" v-if="!hasMore">没有更多数据了</div>
 21 |                 <div class="loadmore" v-else>
 22 |                     <span v-if="isLoadingData">数据加载中...</span>
 23 |                 </div>
 24 |             </section>
 25 |             <section class="side">
 26 |                 <div class="hot" id = "sideHot">
 27 |                     <div class="hot-title">热门文章</div>
 28 |                     <div class="hot-article">
 29 |                         <h3 v-for="(item, index) in hotArticle" :key="index" @click="goDetail(item._id, hotArticle)">
 30 |                             <a href="javascript:void(0)">{{item.title}}</a>
 31 |                         </h3>
 32 |                     </div>
 33 |                 </div>
 34 |                 <div :class="showFixedTag ? 'fixedTag' : ''">
 35 |                   <div class="tags" id = "tags">
 36 |                       <div class="hot-title">标签</div>
 37 |                       <div class="tag-list">
 38 |                           <nuxt-link
 39 |                               v-for="(item, index) in tags.result.list"
 40 |                               :key="index"
 41 |                               :to="`/article?tag=${item._id}`">{{item.name}}<span>({{item.count}})</span></nuxt-link>
 42 |                       </div>
 43 |                   </div>
 44 |                   <div class="smallNav">
 45 |                       <div class="flag"></div>
 46 |                       <div>
 47 |                           <nuxt-link to="/about">我</nuxt-link>
 48 |                           <i>•</i>
 49 |                           <nuxt-link to="/hero">留言墙</nuxt-link>
 50 |                           <i>•</i>
 51 |                           <nuxt-link to="/allarticle">归档</nuxt-link>
 52 |                       </div>
 53 |                   </div>
 54 |                 </div>
 55 |             </section>
 56 |         </main>
 57 |         <to-top></to-top>
 58 |     </div>
 59 | </template>
 60 | 
 61 | <script>
 62 | import {getArticle, getTag} from '../../api'
 63 | import ToTop from '../../components/toTop.vue'
 64 | import FooterMixin from '../../utils/footer-mixin'
 65 | import TimeMixin from '../../utils/time-mixin'
 66 | 
 67 | let page = 1
 68 | let fetchTags = getTag()
 69 | let fetchHotArticle = getArticle({hot: true})
 70 | let fetchArticle = getArticle({current_page: page})
 71 | 
 72 | export default {
 73 |   head () {
 74 |     return {
 75 |       title: 'naice | 文章'
 76 |     }
 77 |   },
 78 |   layout: 'layout',
 79 |   mixins: [FooterMixin, TimeMixin],
 80 |   components: {
 81 |     ToTop
 82 |   },
 83 |   async asyncData ({ params }) {
 84 |     const tags = await fetchTags
 85 |     const articles = await fetchArticle
 86 |     const hotArticle = await fetchHotArticle
 87 |     return {
 88 |       tags,
 89 |       article: articles.result.list,
 90 |       hotArticle: hotArticle.result.list
 91 |     }
 92 |   },
 93 |   data () {
 94 |     return {
 95 |       showFixedTag: false,
 96 |       sideHot: null,
 97 |       isLoadingData: false,
 98 |       hasMore: true,
 99 |       page: page
100 |     }
101 |   },
102 |   computed: {
103 |     scrollTop () {
104 |       return this.$store.state.scrollTop
105 |     }
106 |   },
107 |   methods: {
108 |     loadMore(opts = {}) {
109 |       this.isLoadingData = true
110 |       this.page += 1
111 |       let params = {current_page: this.page, ...opts}
112 |       getArticle(params).then(res => {
113 |         this.isLoadingData = false
114 |         const {result} = res
115 |         if (this.page >= result.pagination.total_page) {
116 |           this.hasMore = false
117 |         }
118 |         let arr = []
119 |         if (opts.tag || opts.keyword || opts.isNew) {
120 |           arr = result.list
121 |         } else {
122 |           arr = this.article.concat(result.list)
123 |         }
124 |         // this.$store.commit('getArticle', arr)
125 |         this.article = arr
126 |         this.$nextTick(() => {
127 |           this.footer()
128 |         })
129 |       }).catch(err => {
130 |         this.isLoadingData = false
131 |       })
132 |     },
133 |     goDetail(id, data) {
134 |       const arr = data.filter(item => item._id == id)
135 |       this.$store.commit('selectArticle', arr[0])
136 |       this.$router.push('/article/' + id)
137 |     }
138 |   },
139 |   mounted () {
140 |     this.$nextTick(() => {
141 |       this.sideHot = document.querySelector('#sideHot')
142 |       this.mailContentDom = document.querySelector('#mailContent')
143 |       this.windowHeight = document.documentElement.clientHeight
144 |       this.footer()
145 |       window.addEventListener('scroll', (e) => {
146 |         const top = $(document).scrollTop()
147 |         const mailContentDomHeight = this.mailContentDom.offsetHeight
148 |         this.showFixedTag = (top >= (this.sideHot.offsetHeight + 80))
149 |         if ((this.windowHeight + top) > (mailContentDomHeight - 50) && !this.isLoadingData && this.hasMore) {
150 |           this.loadMore()
151 |         }
152 |       })
153 |     })
154 |   },
155 |   beforeRouteEnter (to, from, next) {
156 |     next(vm => {
157 |       if (to.query.tag || to.query.keyword) {
158 |         vm.loadMore(to.query)
159 |       }
160 |     })
161 |   },
162 |   beforeRouteUpdate (to, from, next) {
163 |     this.page = 0
164 |     this.hasMore = true
165 |     if (to.query.tag || to.query.keyword) {
166 |       this.loadMore(to.query)
167 |     } else {
168 |       this.loadMore({isNew: true})
169 |     }
170 |     next()
171 |   }
172 | }
173 | </script>
174 | 
175 | <style scoped>
176 |     .main {
177 |       clear: both;
178 |       overflow: hidden;
179 |     }
180 | 
181 |     .article {
182 |       width: 620px;
183 |       float: left;
184 |       box-sizing: border-box;
185 |       background: transparent;
186 |     }
187 | 
188 |     .item {
189 |       padding: 24px 18px;
190 |       overflow: hidden;
191 |       position: relative;
192 |       /* border-bottom: 1px solid #f1f1f1; */
193 |     }
194 | 
195 |     .item:last-child::after {
196 |       width: 0px;
197 |     }
198 | 
199 |     .item::after {
200 |       content: "";
201 |       display: block;
202 |       position: absolute;
203 |       height: 1px;
204 |       background-color: #f1f1f1;
205 |       bottom: 0;
206 |       left: 0;
207 |       width: 150px;
208 |     }
209 | 
210 |     .item .article-title {
211 |       margin-bottom: 15px;
212 |       font-size: 16px;
213 |       display: block;
214 |     }
215 | 
216 |     .item .article-title h2 {
217 |       font-weight: normal;
218 |       font-size: 20px;
219 |       display: inline-block;
220 |       position: relative;
221 |     }
222 | 
223 |     .item .article-title h2::after {
224 |       content: "";
225 |       display: block;
226 |       position: absolute;
227 |       height: 1px;
228 |       background-color: #555;
229 |       bottom: 0;
230 |       left: 0;
231 |       width: 100%;
232 |       transform-origin: center center;
233 |       transform: scaleX(0);
234 |       transition: 0.3s;
235 |     }
236 | 
237 |     .item .article-title:hover h2::after {
238 |       transform: scaleX(1);
239 |     }
240 | 
241 |     .item .article-desc {
242 |       line-height: 24px;
243 |       /* text-indent: 24px; */
244 |       color: #777;
245 |     }
246 | 
247 |     .item .article-info {
248 |       margin-top: 20px;
249 |       color: #8c8c8c;
250 |       font-size: 12px;
251 |     }
252 | 
253 |     .item .article-info i,
254 |     .item .article-info strong {
255 |       font-size: 12px;
256 |     }
257 | 
258 |     .side {
259 |       width: 250px;
260 |       float: right;
261 |       box-sizing: border-box;
262 |       padding-top: 24px;
263 |     }
264 |     .tagSide {
265 |         width: 250px;
266 |         box-sizing: border-box;
267 |         padding-top: 24px;
268 |         position: fixed;
269 |         left: 50%;
270 |         margin-left: 200px;
271 |         top: 24px;
272 |     }
273 |     .hot-title{
274 |         font-size: 16px;
275 |     }
276 |     .hot-article, .tag-list{
277 |         margin-top: 10px;
278 |         width: 100%;
279 |         box-sizing: border-box;
280 |         padding-left: 6px;
281 |     }
282 |     .hot-article h3{
283 |         font-weight: normal;
284 |         line-height: 40px;
285 |         width: 100%;
286 |         overflow: hidden;
287 |         white-space: nowrap;
288 |         text-overflow: ellipsis;
289 |     }
290 |     .tags{
291 |         margin-top: 24px;
292 |     }
293 |     .tag-list a{
294 |         display: inline-block;
295 |         padding: 10px;
296 |     }
297 |     .loadmore{
298 |         text-align: center;
299 |         padding: 12px 0;
300 |         cursor: pointer;
301 |         color: #cccccc
302 |     }
303 |     .smallNav{
304 |         margin-top: 20px;
305 |         width: 100%;
306 |         position: relative;
307 |         color: #797979;
308 |     }
309 |     .flag{
310 |         width: 35%;
311 |         height: 1px;
312 |         background: #f1f1f1;
313 |         margin-bottom: 20px;
314 |     }
315 |     .smallNav a{
316 |         padding: 0 5px;
317 |         color: #797979;
318 |     }
319 |     .fixedTag{
320 |       position: fixed;
321 |       width: 250px;
322 |       top: 60px;
323 |     }
324 | </style>
325 | 


--------------------------------------------------------------------------------
/layouts/layout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="layoutBox" id="layoutBox">
  3 | 		<canvas id="canvas" width="1011" height="803"></canvas>
  4 | 		<header class="header" :class="isNavHidden ? 'navUp' : 'navDown'">
  5 | 			<section class="box header-content">
  6 | 			<nav>
  7 | 				<nuxt-link
  8 | 					v-for="(item, index) in nav"
  9 | 					:key="index"
 10 | 					:to="item.path"
 11 | 					:class="navIndex == index ? 'active' : ''"
 12 | 					>{{item.text}}</nuxt-link>
 13 | 			</nav>
 14 | 			<div class="searchBox">
 15 | 				<div class="search"
 16 | 					:style="showSearch ? {paddingLeft: '5px'} : {paddingLeft: '0'}">
 17 | 					<div class="text" :class="showSearch ? 'showText' : 'hiddenText'">
 18 | 						<input type="text"
 19 | 							v-model="searchStr"
 20 | 							placeholder="你心所想...">
 21 | 					</div>
 22 | 					<div class="searchIcon">
 23 | 						<i class="iconfont"
 24 | 							@click="toShowSearch"
 25 | 							v-if="!showSearch">&#xe603;</i>
 26 | 						<i class="iconfont rightIcon"
 27 | 							@click="tohiddenSearch"
 28 | 							v-else>&#xe640;</i>
 29 | 					</div>
 30 | 				</div>
 31 | 			</div>
 32 | 			</section>
 33 | 		</header>
 34 | 		<div class="mailContent" id="mailContent">
 35 | 			<nuxt/>
 36 | 		</div>
 37 | 		<footer class="layoutFooter" :class="footerFixed ? 'footerFixed' : ''">
 38 | 			© 2018 - <nuxt-link to="/">Naice的博客</nuxt-link>
 39 | 			 - Powered by Nuxt.js & Koa
 40 | 		</footer>
 41 | 	</div>
 42 | </template>
 43 | <script>
 44 | 
 45 | export default {
 46 |   	data () {
 47 | 		return {
 48 | 			searchStr: '',
 49 | 			showSearch: false,
 50 | 			canvasDom: null,
 51 | 			isNavHidden: false,
 52 | 			layoutBox: null,
 53 | 			navIndex: 0,
 54 | 			nav: [
 55 | 				{
 56 | 					path: '/',
 57 | 					text: '首页'
 58 | 				},
 59 | 				{
 60 | 					path: '/article',
 61 | 					text: '文章'
 62 | 				},
 63 | 				{
 64 | 					path: '/project',
 65 | 					text: '项目'
 66 | 				},
 67 | 				{
 68 | 					path: '/about',
 69 | 					text: '关于'
 70 | 				},
 71 | 				{
 72 | 					path: '/music',
 73 | 					text: '音乐'
 74 | 				}
 75 | 			]
 76 | 		}
 77 | 	},
 78 | 	computed: {
 79 | 		footerFixed() {
 80 | 			return this.$store.state.footerFixed
 81 | 		}
 82 | 	},
 83 | 	methods: {
 84 | 		toShowSearch () {
 85 | 			this.showSearch = true
 86 | 		},
 87 | 		tohiddenSearch () {
 88 | 			this.$router.push(`/article?keyword=${this.searchStr}`)
 89 | 			this.searchStr = ''
 90 | 			this.showSearch = false
 91 | 		},
 92 | 		bgCanvas () {
 93 | 			let canvas = null
 94 | 			if (!this.canvasDom) {
 95 | 				this.canvasDom = document.querySelector('#canvas')
 96 | 				canvas = this.canvasDom
 97 | 			} else {
 98 | 				canvas = this.canvasDom
 99 | 			}
100 | 			let ctx = canvas.getContext("2d")
101 | 			let cw = canvas.width = window.innerWidth
102 | 			let cx = cw / 2
103 | 			let ch = canvas.height = window.innerHeight
104 | 			let	cy = ch / 2
105 | 
106 | 			ctx.fillStyle = "#ccc";
107 | 			const linesNum = 16;
108 | 			let linesRy = [];
109 | 			let requestId = null;
110 | 
111 | 			function Line(flag) {
112 | 				this.flag = flag;
113 | 				this.a = {};
114 | 				this.b = {};
115 | 				if (flag == "v") {
116 | 					this.a.y = 0;
117 | 					this.b.y = ch;
118 | 					this.a.x = randomIntFromInterval(0, ch);
119 | 					this.b.x = randomIntFromInterval(0, ch);
120 | 				} else if (flag == "h") {
121 | 					this.a.x = 0;
122 | 					this.b.x = cw;
123 | 					this.a.y = randomIntFromInterval(0, cw);
124 | 					this.b.y = randomIntFromInterval(0, cw);
125 | 				}
126 | 				this.va = randomIntFromInterval(25, 100) / 100;
127 | 				this.vb = randomIntFromInterval(25, 100) / 100;
128 | 
129 | 				this.draw = function() {
130 | 					ctx.strokeStyle = "#f4f4f4";
131 | 					ctx.beginPath();
132 | 					ctx.moveTo(this.a.x, this.a.y);
133 | 					ctx.lineTo(this.b.x, this.b.y);
134 | 					ctx.stroke();
135 | 				}
136 | 
137 | 				this.update = function() {
138 | 					if (this.flag == "v") {
139 | 						this.a.x += this.va;
140 | 						this.b.x += this.vb;
141 | 					} else if (flag == "h") {
142 | 						this.a.y += this.va;
143 | 						this.b.y += this.vb;
144 | 					}
145 | 
146 | 					this.edges();
147 | 				}
148 | 
149 | 				this.edges = function() {
150 | 					if (this.flag == "v") {
151 | 						if (this.a.x < 0 || this.a.x > cw) {
152 | 							this.va *= -1;
153 | 						}
154 | 						if (this.b.x < 0 || this.b.x > cw) {
155 | 							this.vb *= -1;
156 | 						}
157 | 					} else if (flag == "h") {
158 | 						if (this.a.y < 0 || this.a.y > ch) {
159 | 							this.va *= -1;
160 | 						}
161 | 						if (this.b.y < 0 || this.b.y > ch) {
162 | 							this.vb *= -1;
163 | 						}
164 | 					}
165 | 				}
166 | 
167 | 			}
168 | 
169 | 			for (var i = 0; i < linesNum; i++) {
170 | 				var flag = i % 2 == 0 ? "h" : "v";
171 | 				var l = new Line(flag);
172 | 				linesRy.push(l);
173 | 			}
174 | 
175 | 			function Draw() {
176 | 				requestId = window.requestAnimationFrame(Draw);
177 | 				ctx.clearRect(0, 0, cw, ch);
178 | 
179 | 				for (var i = 0; i < linesRy.length; i++) {
180 | 					var l = linesRy[i];
181 | 					l.draw();
182 | 					l.update();
183 | 				}
184 | 				for (var i = 0; i < linesRy.length; i++) {
185 | 					var l = linesRy[i];
186 | 					for (var j = i + 1; j < linesRy.length; j++) {
187 | 						var l1 = linesRy[j]
188 | 						Intersect2lines(l, l1);
189 | 					}
190 | 				}
191 | 			}
192 | 
193 | 			function Init() {
194 | 				linesRy.length = 0;
195 | 				for (var i = 0; i < linesNum; i++) {
196 | 					var flag = i % 2 == 0 ? "h" : "v";
197 | 					var l = new Line(flag);
198 | 					linesRy.push(l);
199 | 				}
200 | 
201 | 				if (requestId) {
202 | 					window.cancelAnimationFrame(requestId);
203 | 					requestId = null;
204 | 				}
205 | 
206 | 				cw = canvas.width = window.innerWidth;
207 | 				cx = cw / 2;
208 | 				ch = canvas.height = window.innerHeight;
209 | 				cy = ch / 2;
210 | 
211 | 				Draw();
212 | 			};
213 | 
214 | 			setTimeout(function() {
215 | 				Init();
216 | 				addEventListener('resize', Init, false);
217 | 			}, 15);
218 | 
219 | 			function Intersect2lines(l1, l2) {
220 | 				var p1 = l1.a,
221 | 					p2 = l1.b,
222 | 					p3 = l2.a,
223 | 					p4 = l2.b;
224 | 				var denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
225 | 				var ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator;
226 | 				var ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator;
227 | 				var x = p1.x + ua * (p2.x - p1.x);
228 | 				var y = p1.y + ua * (p2.y - p1.y);
229 | 				if (ua > 0 && ub > 0) {
230 | 					markPoint({
231 | 						x: x,
232 | 						y: y
233 | 					})
234 | 				}
235 | 			}
236 | 
237 | 			function markPoint(p) {
238 | 				ctx.beginPath();
239 | 				ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
240 | 				ctx.fillStyle = "#eeeeee";
241 | 				ctx.fill();
242 | 			}
243 | 
244 | 			function randomIntFromInterval(mn, mx) {
245 | 				return ~~(Math.random() * (mx - mn + 1) + mn);
246 | 			}
247 | 		},
248 | 		scroll() {
249 | 			window.addEventListener('scroll', (e) => {
250 |         const top = $(document).scrollTop()
251 | 				if (top >= 100) {
252 | 					this.isNavHidden = true
253 | 				} else {
254 | 					this.isNavHidden = false
255 | 				}
256 | 			})
257 | 		},
258 | 		chanrouter(router) {
259 | 			let index = 9
260 | 			this.nav.forEach((item, i) => {
261 | 				if (item.path == router.path) {
262 | 					index = i
263 | 				}
264 | 			})
265 | 			this.navIndex = index
266 | 		}
267 | 	},
268 | 	mounted() {
269 | 		this.$nextTick(function () {
270 | 			window.scrollTop = 0
271 | 			this.bgCanvas()
272 | 			this.scroll()
273 | 		})
274 | 		this.chanrouter(this.$route)
275 | 		const userinfo = localStorage.getItem('userInfo')
276 | 		if (!userinfo) {
277 | 			this.$store.commit('changeAverter', Math.floor(Math.random() * 20))
278 | 		} else {
279 | 			let info = JSON.parse(userinfo)
280 | 			this.$store.commit('changeAverter', info.gravatar)
281 | 		}
282 | 	},
283 | 	watch: {
284 | 		$route (router) {
285 | 			this.chanrouter(router)
286 | 		}
287 | 	}
288 | }
289 | </script>
290 | <style>
291 | 	#canvas{
292 | 		position: fixed;
293 | 		left: 0;
294 | 		top: 0;
295 | 		z-index: -1;
296 | 	}
297 | 	.layoutBox{
298 | 		/* position: absolute;
299 | 		top: 0;
300 | 		bottom: 0;
301 | 		width: 100%;
302 | 		left: 0; */
303 | 		overflow-x: hidden;
304 | 		overflow-y: scroll;
305 | 	}
306 | 	.navUp {
307 | 		transform: translate3d(0, -60px, 0)
308 | 	}
309 | 	.navDown {
310 | 		transform: translate3d(0, 0, 0)
311 | 	}
312 | 	.header {
313 | 		background: #fff;
314 | 		border-bottom: 1px solid #f1f1f1;
315 | 		color: #909090;
316 | 		height: 60px;
317 | 		overflow: hidden;
318 | 		width: 100%;
319 | 		position: fixed;
320 | 		z-index: 2;
321 | 		transition: 0.3s
322 | 	}
323 | 	.box {
324 | 		width: 900px;
325 | 		margin: 0 auto;
326 | 	}
327 | 
328 | 	.header-content {
329 | 		display: flex;
330 | 		height: 59px;
331 | 		justify-content: space-between;
332 | 	}
333 | 
334 |   	.header-content nav {
335 | 		height: 59px;
336 | 		line-height: 59px;
337 | 		font-size: 20px;
338 |   	}
339 | 
340 |   	.header-content nav a {
341 | 		display: inline-block;
342 | 		height: 59px;
343 | 		transition: 0.3s;
344 | 		padding: 0 20px;
345 | 		position: relative;
346 | 		color: #8c8c8c;
347 | 		text-decoration: none;
348 |   	}
349 | 
350 | 	.header-content nav a:hover {
351 | 		color: #3fb76c
352 | 	}
353 | 
354 | 	.header-content nav a.active {
355 | 		color: #3fb76c
356 | 	}
357 | 
358 | 	.searchBox{
359 | 		display: flex;
360 | 		align-items: center;
361 | 	}
362 | 	.search{
363 | 		height: 30px;
364 | 		border-bottom: 1px solid #dddddd;
365 | 		display: flex;
366 | 		overflow: hidden;
367 | 		padding-left: 5px;
368 | 
369 | 	}
370 | 	.search input{
371 | 		width: 100%;
372 | 		height: 100%;
373 | 		border: none;
374 | 		outline: none;
375 | 		background: transparent;
376 | 	}
377 | 	.search .text{
378 | 		width: 158px;
379 | 		transform-origin: right center;
380 | 		transition: 0.3s;
381 | 	}
382 | 	.search .showText{
383 | 		width: 158px;
384 | 	}
385 | 	.search .hiddenText{
386 | 		width: 0px;
387 | 		padding-left: 0px;
388 | 	}
389 | 	.search .searchIcon{
390 | 		width: 30px;
391 | 		height: 30px;
392 | 		line-height: 30px;
393 | 		text-align: center;
394 | 		cursor: pointer;
395 | 	}
396 | 	.rightIcon{
397 | 		color: #3fb76c
398 | 	}
399 | 	.mailContent{
400 | 		padding-top: 70px;
401 | 		padding-bottom: 20px;
402 | 	}
403 | 	.layoutFooter{
404 | 		height: 50px;
405 | 		background: rgba(255, 255, 255, 1);
406 | 		border-top: 1px solid #f1f1f1;
407 | 		text-align: center;
408 | 		line-height: 50px;
409 | 		font-size: 12px;
410 | 		color: #666;
411 | 		width: 100%;
412 | 	}
413 | 	.footerFixed {
414 | 		position: fixed;
415 | 		bottom: 0;
416 | 		left: 0;
417 | 	}
418 | </style>
419 | 


--------------------------------------------------------------------------------
/utils/draw.js:
--------------------------------------------------------------------------------
  1 | var fftSize = 1024,
  2 | background_gradient_color_1 = '#000011',
  3 | background_gradient_color_2 = '#060D1F',
  4 | background_gradient_color_3 = '#02243F',
  5 | 
  6 | stars_color = '#465677',
  7 | stars_color_2 = '#B5BFD4',
  8 | stars_color_special = '#F451BA',
  9 | TOTAL_STARS = 1500,
 10 | STARS_BREAK_POINT = 140,
 11 | 
 12 | waveform_color = 'rgba(29, 36, 57, 0.05)',
 13 | waveform_color_2 = 'rgba(0,0,0,0)',
 14 | waveform_line_color = 'rgba(157, 242, 157, 0.11)',
 15 | waveform_line_color_2 = 'rgba(157, 242, 157, 0.8)',
 16 | waveform_tick = 0.05,
 17 | TOTAL_POINTS = fftSize / 2,
 18 | 
 19 | bubble_avg_color = 'rgba(29, 36, 57, 0.1)',
 20 | bubble_avg_color_2 = 'rgba(29, 36, 57, 0.05)',
 21 | bubble_avg_line_color = 'rgba(77, 218, 248, 1)',
 22 | bubble_avg_line_color_2 = 'rgba(77, 218, 248, 1)',
 23 | bubble_avg_tick = 0.001,
 24 | TOTAL_AVG_POINTS = 64,
 25 | AVG_BREAK_POINT = 100,
 26 | 
 27 | floor = Math.floor,
 28 | round = Math.round,
 29 | random = Math.random,
 30 | sin = Math.sin,
 31 | cos = Math.cos,
 32 | PI = Math.PI,
 33 | PI_TWO = PI * 2,
 34 | PI_HALF = PI / 180,
 35 | cx = 0,
 36 | cy = 0,
 37 | rotation = 0;
 38 | 
 39 | class Star {
 40 |   constructor (avg, w, h) {
 41 |     let xc, yc;
 42 |     this.x = Math.random() * w - cx
 43 |     this.y = Math.random() * h - cy
 44 |     this.z = this.max_depth = Math.max(w / h)
 45 |     this.radius = 0.2
 46 |     xc = this.x > 0 ? 1 : -1
 47 |     yc = this.y > 0 ? 1 : -1
 48 | 
 49 |     if (Math.abs(this.x) > Math.abs(this.y)) {
 50 |       this.dx = 1.0
 51 |       this.dy = Math.abs(this.y / this.x)
 52 |     } else {
 53 |       this.dx = Math.abs(this.x / this.y)
 54 |       this.dy = 1.0
 55 |     }
 56 | 
 57 |     this.dx *= xc
 58 |     this.dy *= yc
 59 |     this.dz = -0.1
 60 | 
 61 |     this.ddx = .001 * this.dx
 62 |     this.ddy = .001 * this.dy
 63 | 
 64 |     if (this.y > (cy / 2)) {
 65 |       this.color = stars_color_2
 66 |     } else {
 67 |       if (avg > AVG_BREAK_POINT + 10) {
 68 |         this.color = stars_color_2
 69 |       } else if (avg > STARS_BREAK_POINT) {
 70 |         this.color = stars_color_special
 71 |       } else {
 72 |         this.color = stars_color
 73 |       }
 74 |     }
 75 |     xc = yc = null
 76 |   }
 77 | }
 78 | 
 79 | class Point {
 80 |   constructor (config) {
 81 |     this.index = config.index
 82 |     this.angle = (this.index * 360) / TOTAL_POINTS
 83 |     this.updateDynamics(config.w, config.h)
 84 |     this.value = Math.random() * 256
 85 |     this.dx = this.x + this.value * sin(PI_HALF * this.angle)
 86 |     this.dy = this.y + this.value * cos(PI_HALF * this.angle)
 87 |   }
 88 |   updateDynamics (w, h) {
 89 |     this.radius = Math.abs(w, h) / 10
 90 |     this.x = cx + this.radius * sin(PI_HALF * this.angle)
 91 |     this.y = cy + this.radius * cos(PI_HALF * this.angle)
 92 |   }
 93 | }
 94 | 
 95 | class AvgPoint {
 96 |   constructor (config) {
 97 |     this.index = config.index
 98 |     this.angle = (this.index * 360) / TOTAL_AVG_POINTS
 99 |     this.updateDynamics(config.w, config.h)
100 |     this.value = Math.random() * 256
101 |     this.dx = this.x + this.value * sin(PI_HALF * this.angle)
102 |     this.dy = this.y + this.value * cos(PI_HALF * this.angle)
103 |   }
104 |   updateDynamics (w, h) {
105 |     this.radius = Math.abs(w, h) / 10
106 |     this.x = cx + this.radius * sin(PI_HALF * this.angle)
107 |     this.y = cy + this.radius * cos(PI_HALF * this.angle)
108 |   }
109 | }
110 | 
111 | class MusicDraw {
112 |   constructor (ctx, analyser, w, h, cb) {
113 |     this.analyser = analyser
114 |     this.ctx = ctx
115 |     this.stars = []
116 |     this.points = []
117 |     this.avg_points = []
118 |     this.w = w
119 |     this.h = h
120 |     this.playing = false
121 |     this.frequencyDataLength = analyser.frequencyBinCount;
122 |     this.frequencyData = new Uint8Array(this.frequencyDataLength);
123 |     this.timeData = new Uint8Array(this.frequencyDataLength);
124 |     this.cb = cb
125 |     this.init()
126 |   }
127 |   init () {
128 |     this.resizeHandler()
129 |     this.createStarField()
130 |     this.createPoints()
131 |     this.clearCanvas()
132 |     this.drawStarField()
133 |     this.drawAverageCircle()
134 |     this.drawWaveform()
135 |   }
136 |   updatePlaying (b) {
137 |     this.playing = b
138 |   }
139 |   createStarField () {
140 |     let i = -1;
141 |     while (++i < TOTAL_STARS) {
142 |       this.stars.push(new Star(this.avg, this.w, this.h))
143 |     }
144 |     this.catchOriginStart = JSON.parse(JSON.stringify(this.stars))
145 |     i = null
146 |   }
147 |   createPoints() {
148 |     const { w, h } = this
149 |     let i = -1;
150 |     while (++i < TOTAL_POINTS) {
151 |       this.points.push(new Point({
152 |         index: i + 1,
153 |         w, h
154 |       }))
155 |     }
156 |     i = -1
157 |     while (++i < TOTAL_AVG_POINTS) {
158 |       this.avg_points.push(new AvgPoint({
159 |         index: i + 1,
160 |         w, h
161 |       }))
162 |     }
163 |     i = null
164 |   }
165 |   getAvg(values) {
166 |     let value = 0
167 |     values.forEach(v => {
168 |       value += v
169 |     })
170 |     return value / values.length
171 |   }
172 |   animate () {
173 |     if (!this.playing) return
174 |     const { analyser, getAvg, frequencyData, timeData } = this
175 |     requestAnimationFrame(this.animate.bind(this))
176 |     
177 |     analyser.getByteFrequencyData(frequencyData)
178 |     analyser.getByteTimeDomainData(timeData)
179 |     this.avg = getAvg([].slice.call(frequencyData))
180 |     this.clearCanvas()
181 |     this.drawStarField()
182 |     this.drawAverageCircle()
183 |     this.drawWaveform()
184 |     this.cb && this.cb()
185 |   }
186 |   clearCanvas () {
187 |     const { ctx, w, h } = this
188 |     let gradient = ctx.createLinearGradient(0, 0, 0, h)
189 |     gradient.addColorStop(0, background_gradient_color_1)
190 |     gradient.addColorStop(0.96, background_gradient_color_2)
191 |     gradient.addColorStop(1, background_gradient_color_3)
192 | 
193 |     ctx.beginPath()
194 |     ctx.globalCompositeOperation = 'source-over'
195 |     ctx.fillStyle = gradient
196 |     ctx.fillRect(0, 0, w, h)
197 |     ctx.fill()
198 |     ctx.closePath()
199 |     gradient = null
200 |   }
201 |   drawStarField() {
202 |     let { stars, avg, ctx, catchOriginStart } = this
203 |     let w = this.w
204 |     let h = this.h
205 |     let i, len, p, tick
206 |     for (i = 0, len = stars.length; i < len; i++) {
207 |       p = stars[i]
208 |       p.x = p.x || catchOriginStart[i].x
209 |       p.y = p.y || catchOriginStart[i].y
210 |       tick = (avg > AVG_BREAK_POINT) ? (avg / 20) : (avg / 50)
211 |       p.x += p.dx * tick
212 |       p.y += p.dy * tick
213 |       p.z += p.dz
214 |       p.dx += p.ddx
215 |       p.dy += p.ddy
216 |       p.radius = 0.2 + ((p.max_depth - p.z) * .1)
217 |       if (p.x < -cx || p.x > cx || p.y < -cy || p.y > cy) {
218 |         stars[i] = new Star(avg, w, h)
219 |         continue
220 |       }
221 |       ctx.beginPath()
222 |       ctx.globalCompositeOperation = 'lighter'
223 |       ctx.fillStyle = p.color
224 |       ctx.arc(p.x + cx, p.y + cy, p.radius, PI_TWO, false)
225 |       ctx.fill()
226 |       ctx.closePath()
227 |     }
228 |     i = len = p = tick = null
229 |   }
230 |   drawAverageCircle() {
231 |     let { avg, ctx, avg_points } = this
232 |     let i, len, p, value, xc, yc;
233 |     if (avg > AVG_BREAK_POINT) {
234 |       rotation += -bubble_avg_tick
235 |       value = avg + random() * 10
236 |       ctx.strokeStyle = bubble_avg_line_color_2
237 |       ctx.fillStyle = bubble_avg_color_2
238 |     } else {
239 |       rotation += bubble_avg_tick
240 |       value = avg
241 |       ctx.strokeStyle = bubble_avg_line_color
242 |       ctx.fillStyle = bubble_avg_color
243 |     }
244 |     ctx.beginPath()
245 |     ctx.lineWidth = 1
246 |     ctx.lineCap = "round"
247 | 
248 |     ctx.save()
249 |     ctx.translate(cx, cy)
250 |     ctx.rotate(rotation)
251 |     ctx.translate(-cx, -cy)
252 | 
253 |     ctx.moveTo(avg_points[0].dx, avg_points[0].dy)
254 | 
255 |     for (i = 0, len = TOTAL_AVG_POINTS; i < len - 1; i++) {
256 |       p = avg_points[i]
257 |       p.dx = p.x + value * sin(PI_HALF * p.angle)
258 |       p.dy = p.y + value * cos(PI_HALF * p.angle)
259 |       xc = (p.dx + avg_points[i + 1].dx) / 2
260 |       yc = (p.dy + avg_points[i + 1].dy) / 2
261 |       ctx.quadraticCurveTo(p.dx, p.dy, xc, yc)
262 |     }
263 | 
264 |     p = avg_points[i]
265 |     p.dx = p.x + value * sin(PI_HALF * p.angle)
266 |     p.dy = p.y + value * cos(PI_HALF * p.angle)
267 |     xc = (p.dx + avg_points[0].dx) / 2
268 |     yc = (p.dy + avg_points[0].dy) / 2
269 | 
270 |     ctx.quadraticCurveTo(p.dx, p.dy, xc, yc)
271 |     ctx.quadraticCurveTo(xc, yc, avg_points[0].dx, avg_points[0].dy)
272 | 
273 |     ctx.stroke()
274 |     ctx.fill()
275 |     ctx.restore()
276 |     ctx.closePath()
277 |     i = len = p = value = xc = yc = null
278 |   }
279 |   drawWaveform() {
280 |     let { avg, ctx, points, timeData } = this
281 |     let i, len, p, value, xc, yc;
282 | 
283 |     if (avg > AVG_BREAK_POINT) {
284 |       rotation += waveform_tick
285 |       ctx.strokeStyle = waveform_line_color_2
286 |       ctx.fillStyle = waveform_color_2
287 |     } else {
288 |       rotation += -waveform_tick
289 |       ctx.strokeStyle = waveform_line_color
290 |       ctx.fillStyle = waveform_color
291 |     }
292 | 
293 |     ctx.beginPath()
294 |     ctx.lineWidth = 1
295 |     ctx.lineCap = "round"
296 | 
297 |     ctx.save()
298 |     ctx.translate(cx, cy)
299 |     ctx.rotate(rotation)
300 |     ctx.translate(-cx, -cy)
301 | 
302 |     ctx.moveTo(points[0].dx, points[0].dy)
303 | 
304 |     for (i = 0, len = TOTAL_POINTS; i < len - 1; i++) {
305 |       p = points[i]
306 |       value = timeData[i]
307 |       p.dx = p.x + value * sin(PI_HALF * p.angle)
308 |       p.dy = p.y + value * cos(PI_HALF * p.angle)
309 |       xc = (p.dx + points[i + 1].dx) / 2
310 |       yc = (p.dy + points[i + 1].dy) / 2
311 | 
312 |       ctx.quadraticCurveTo(p.dx, p.dy, xc, yc)
313 |     }
314 | 
315 |     value = timeData[i]
316 |     p = points[i]
317 |     p.dx = p.x + value * sin(PI_HALF * p.angle)
318 |     p.dy = p.y + value * cos(PI_HALF * p.angle)
319 |     xc = (p.dx + points[0].dx) / 2
320 |     yc = (p.dy + points[0].dy) / 2
321 | 
322 |     ctx.quadraticCurveTo(p.dx, p.dy, xc, yc)
323 |     ctx.quadraticCurveTo(xc, yc, points[0].dx, points[0].dy)
324 | 
325 |     ctx.stroke()
326 |     ctx.fill()
327 |     ctx.restore()
328 |     ctx.closePath()
329 | 
330 |     i = len = p = value = xc = yc = null
331 |   }
332 |   resizeHandler() {
333 |     let { ctx, w, h, avg_points, points }  = this
334 |     cx = w / 2
335 |     cy = h / 2
336 |     ctx.canvas.width = w
337 |     ctx.canvas.height = h
338 |     points.forEach(p => {
339 |       p.updateDynamics()
340 |     })
341 |     avg_points.forEach(p => {
342 |       p.updateDynamics()
343 |     })
344 |   }
345 | }
346 | 
347 | export default MusicDraw


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="aboutBox">
  3 | 		<div class="userInfo">
  4 | 			<div class="info">
  5 | 				<p>
  6 | 					<i class="iconfont icon">&#xe670;</i>
  7 | 					<span>我是Naice, 一个前端开发程序员</span>
  8 | 				</p>
  9 | 				<p>
 10 | 					<i class="iconfont icon">&#xe65b;</i>
 11 | 					<span>计算机科学与技术专业</span>
 12 | 				</p>
 13 | 				<p>
 14 | 					<i class="iconfont icon">&#xe63b;</i>
 15 | 					<span>喜欢coding、看书、电影、王者农药</span>
 16 | 				</p>
 17 | 				<p>
 18 | 					<i class="iconfont icon">&#xe6c3;</i>
 19 | 					<span>胡歌、周星驰、周杰伦</span>
 20 | 				</p>
 21 | 				<p>
 22 | 					<i class="iconfont icon">&#xe64a;</i>
 23 | 					<span>
 24 | 						<a href="https://github.com/naihe138" target="_blank"><i class="iconfont like">&#xe621;</i></a>
 25 | 						<a href="https://segmentfault.com/u/naice" target="_blank"><i class="iconfont like">&#xe610;</i></a>
 26 | 						<a href="https://juejin.im/user/5768b5f8a341310064ef444e" target="_blank"><i class="iconfont like">&#xe606;</i></a>
 27 | 						<a href="https://juejin.im/user/5768b5f8a341310064ef444e" target="_blank"></a>
 28 | 						<a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=CTo_OTs4PDs6OUl4eCdqZmQ" target="_blank"><i class="iconfont like">&#xe60a;</i></a>
 29 | 						<a href="https://user.qzone.qq.com/370215230/infocenter" target="_blank"><i class="iconfont like">&#xe7dc;</i></a>
 30 | 						<a href="https://weibo.com/5091678932/profile?topnav=1&wvr=6" target="_blank"><i class="iconfont like">&#xe63d;</i></a>
 31 | 						<a href="https://www.facebook.com/he.wenlin.501" target="_blank"><i class="iconfont like">&#xe6e2;</i></a>
 32 | 						<a href="https://twitter.com/naice_heheda" target="_blank"><i class="iconfont like">&#xec9c;</i></a>
 33 | 					</span>
 34 | 				</p>
 35 | 				<p>
 36 | 					<i class="iconfont icon">&#xe725;</i>
 37 | 					<span>很多事情不是因为有希望才去坚持，而是坚持了才有希望。</span>
 38 | 				</p>
 39 | 			</div>
 40 | 			<div class="user">
 41 | 				<div class="bg" v-if="isDay">
 42 | 					<div class="cloud">
 43 | 						<img class="bg1" src="../assets/img/cloude-1.jpg" alt="">
 44 | 					</div>
 45 | 					<div class="cloud">
 46 | 						<img class="bg2" src="../assets/img/cloud-2.jpg" alt="">
 47 | 					</div>
 48 | 					<div class="start">
 49 | 						<img src="../assets/img/star-1.png" alt="">
 50 | 						<img src="../assets/img/star-2.png" alt="">
 51 | 					</div>
 52 | 				</div>
 53 | 				<div class="bg night" v-else>
 54 | 					<canvas width="250"
 55 |                             height="110"
 56 |                             style="width: 250px; height: 110px"
 57 | 							ref="bCanvas"></canvas>
 58 | 				</div>
 59 | 				<div class="name">
 60 | 					<h2 class="title">Naice</h2>
 61 | 					<p class="disc">JS stack developer</p>
 62 | 					<p class="friend">Friend me</p>
 63 | 				</div>
 64 | 				<img class="averter" src="../assets/img/averter.jpg" alt="头像">
 65 | 				<img class="weixin" src="../assets/img/weixin.png" alt="">
 66 | 			</div>
 67 | 		</div>
 68 | 		<div class="map">
 69 | 			<div id="allmap"></div>
 70 | 		</div>
 71 | 		<div class="project">
 72 | 			<nuxt-link to="/project">
 73 | 				<p>Get More Project</p>
 74 | 				<p>了解更多关于我的开源项目的进展</p>
 75 | 			</nuxt-link>
 76 | 		</div>
 77 | 	</div>
 78 | </template>
 79 | 
 80 | <script>
 81 | import FooterMixin from '../utils/footer-mixin'
 82 | export default {
 83 | 	head: {
 84 | 		title: 'naice | 关于',
 85 | 		meta: [
 86 |       { hid: 'description', name: 'description', content: 'Home page description' }
 87 |     ]
 88 | 	},
 89 | 	layout: 'layout',
 90 | 	data () {
 91 | 		const isDay = ((new Date()).getHours() < 17)
 92 | 		return {
 93 | 			isDay
 94 | 		}
 95 | 	},
 96 | 	mixins: [FooterMixin],
 97 | 	methods: {
 98 | 		createMap () {
 99 |       window.initialize = function () {
100 |         const map = new BMap.Map('allmap')
101 | 				var myGeo = new BMap.Geocoder();
102 | 				// 将地址解析结果显示在地图上,并调整地图视野
103 | 				myGeo.getPoint('软件产业基地', (point) => {
104 | 					if (point) {
105 | 						map.centerAndZoom(point, 16)
106 | 						const marker = new BMap.Marker(point)
107 | 						map.addOverlay(marker)
108 | 						map.centerAndZoom(point,15)
109 | 						map.enableScrollWheelZoom()
110 | 						marker.setAnimation(BMAP_ANIMATION_BOUNCE)
111 | 					} else{
112 | 						console.info('您选择地址没有解析到结果!')
113 | 					}
114 | 				}, '深圳市');
115 |       }
116 | 			const script = document.createElement('script')
117 |       script.type = 'text/javascript';
118 | 			script.src = `https://api.map.baidu.com/api?v=2.0&ak=BGfk56dKPEOpvSLiLNuXqqbUVNrPSAKF&s=1&callback=initialize`
119 | 			document.body.appendChild(script);
120 | 		},
121 | 		canvasAnimation(ctx, w, h, ratio) {
122 | 			const circleNuber = 10
123 | 			let deltaTime = null
124 | 			let lastTime = null
125 | 			const positionArr = createPosition()
126 | 			step();
127 | 
128 | 			function createPosition() {
129 | 				const arr = []
130 | 				for (let i = 0; i < circleNuber; i++) {
131 | 					const pos = {}
132 | 					const x = Math.random() * (w - (10 * ratio))
133 | 					const y = Math.random() * (h - (50 * ratio))
134 | 					pos.x = x < 20 ? 20 : x
135 | 					pos.y = y < 20 ? 20 : y
136 | 					pos.xspeed = 0
137 | 					pos.time = 0
138 | 					pos.dis = Math.floor((Math.random() * 30)) + 30
139 | 					pos.p = (Math.random() * 1 + 2) * 16.66667
140 | 					pos.size = 1 * ratio
141 | 					arr.push(pos)
142 | 				}
143 | 				return arr
144 | 			}
145 | 
146 | 			function drawStar(obj) {
147 | 				obj.time += deltaTime
148 | 				if (obj.time > obj.dis) {
149 | 					obj.xspeed += obj.p;
150 | 					obj.time = 0;
151 | 				}
152 | 
153 | 				let index = obj.xspeed / 1000
154 | 
155 | 				if (Math.floor(index) % 2 === 1) {
156 | 					index = Math.ceil(index) - index
157 | 				} else {
158 | 					index %= 2
159 | 				}
160 | 
161 | 				index = index > 0.8 ? 0.8 : index
162 | 
163 | 				ctx.beginPath();
164 | 				ctx.arc(obj.x, obj.y, obj.size, 0, 2 * Math.PI, false);
165 | 				ctx.fillStyle = `rgba(255,255,255, ${index})`;
166 | 				ctx.fill();
167 | 				ctx.closePath();
168 | 			}
169 | 
170 | 			function step() {
171 | 				const now = Date.now();
172 | 				deltaTime = now - lastTime;
173 | 				lastTime = now;
174 | 				ctx.clearRect(0, 0, w, h);
175 | 				for (let i = 0; i < positionArr.length; i++) {
176 | 					drawStar(positionArr[i])
177 | 				}
178 | 				window.requestAnimFrame(step);
179 | 			}
180 | 		},
181 | 		hdCanvas() {
182 | 			const ctx = this.$refs.bCanvas.getContext('2d')
183 | 			const canvas = this.$refs.bCanvas
184 | 			const devicePixelRatio = window.devicePixelRatio || 1;
185 | 			const backingStoreRatio =
186 | 				ctx.webkitBackingStorePixelRatio ||
187 | 				ctx.mozBackingStorePixelRatio ||
188 | 				ctx.msBackingStorePixelRatio ||
189 | 				ctx.oBackingStorePixelRatio ||
190 | 				ctx.backingStorePixelRatio || 1;
191 | 			const ratio = devicePixelRatio / backingStoreRatio;
192 | 
193 | 			canvas.width *= ratio;
194 | 			canvas.height *= ratio;
195 | 			this.canvasAnimation(ctx, canvas.width, canvas.height, ratio)
196 | 		}
197 | 	},
198 | 	mounted () {
199 | 		this.$nextTick(function () {
200 | 			window.requestAnimFrame = window.requestAnimationFrame ||
201 | 			window.webkitRequestAnimationFrame ||
202 | 			window.mozRequestAnimationFrame ||
203 | 			window.oRequestAnimationFrame ||
204 | 			window.msRequestAnimationFrame ||
205 |       (callback => window.setTimeout(callback, 1000 / 60));
206 | 			this.createMap()
207 | 			!this.isDay && this.hdCanvas()
208 | 			this.footer()
209 | 		})
210 | 	}
211 | }
212 | </script>
213 | 
214 | <style scoped>
215 |     .aboutBox {
216 | 		width: 900px;
217 | 		margin: 0 auto;
218 | 		color: #555555;
219 |     overflow: hidden;
220 | 	}
221 | 	.userInfo{
222 | 		clear: both;
223 | 		overflow: hidden;
224 |     height: 382px;
225 |     display: flex;
226 |     justify-content: space-between;
227 | 	}
228 | 	.info {
229 | 		width: 630px;
230 | 		border: 1px solid #f1f1f1;
231 | 		box-sizing: border-box;
232 | 		padding: 20px;
233 | 		height: 380px;
234 | 	}
235 | 	.info p {
236 | 		line-height: 54px;
237 | 		color: #555555;
238 | 		transition: color 0.3s
239 | 	}
240 | 	.info p:hover{
241 | 		color: #7f7f7f;
242 | 	}
243 | 	.info .icon {
244 | 		padding-right: 15px;
245 | 		color: #cccccc;
246 | 	}
247 | 	.user {
248 | 		width: 250px;
249 | 		height: 380px;
250 | 		position: relative;
251 | 		cursor: pointer;
252 | 	}
253 | 	.user:hover .weixin{
254 | 		opacity: 1;
255 | 	}
256 | 	.user:hover .averter{
257 | 		transform: rotate(180deg)
258 | 	}
259 | 	.user .bg{
260 | 		width: 100%;
261 | 		height: 110px;
262 | 		overflow: hidden;
263 | 		position: relative;
264 | 	}
265 | 
266 | 	.user .bg .cloud{
267 | 		width: 100%;
268 | 		height: 100%;
269 | 		overflow: hidden;
270 | 		position: absolute;
271 | 		left: 0;
272 | 		top: 0;
273 | 	}
274 | 	.user .bg .cloud:nth-of-type(2){
275 | 		opacity: .66;
276 | 	}
277 | 	.bg1{
278 | 		width: auto;
279 | 		height: 200%;
280 | 		-webkit-animation: aboutbg-be-1 88s linear infinite;
281 | 		animation: aboutbg-be-1 88s linear infinite;
282 | 	}
283 | 	.bg2 {
284 | 		width: auto;
285 | 		height: 200%;
286 | 		-webkit-animation: aboutbg-be-2 66s linear infinite;
287 | 		animation: aboutbg-be-2 66s linear infinite;
288 | 	}
289 | 	.start {
290 | 		width: 80px;
291 | 		position: absolute;
292 | 		right: 0;
293 | 		top: 0;
294 | 		animation: aboutbg-star 6s linear infinite
295 | 	}
296 | 	.start img{
297 | 		position: absolute;
298 | 		width: 60px;
299 | 		left: 0;
300 | 		top: 0;
301 | 	}
302 | 	@keyframes aboutbg-be-1 {
303 | 		0% {
304 | 			-webkit-transform: translateZ(0);
305 | 			transform: translateZ(0)
306 | 		}
307 | 
308 | 		25% {
309 | 			-webkit-transform: translate3d(-50%,-50%,0);
310 | 			transform: translate3d(-50%,-50%,0)
311 | 		}
312 | 
313 | 		50% {
314 | 			-webkit-transform: translate3d(-50%,0,0);
315 | 			transform: translate3d(-50%,0,0)
316 | 		}
317 | 
318 | 		75% {
319 | 			-webkit-transform: translate3d(0,-50%,0);
320 | 			transform: translate3d(0,-50%,0)
321 | 		}
322 | 
323 | 		to {
324 | 			-webkit-transform: translateZ(0);
325 | 			transform: translateZ(0)
326 | 		}
327 | 	}
328 | 
329 | 	@keyframes aboutbg-be-2 {
330 | 		0% {
331 | 			-webkit-transform: translateZ(0);
332 | 			transform: translateZ(0)
333 | 		}
334 | 
335 | 		25% {
336 | 			-webkit-transform: translate3d(0,-50%,0);
337 | 			transform: translate3d(0,-50%,0)
338 | 		}
339 | 
340 | 		50% {
341 | 			-webkit-transform: translate3d(-10%,0,0);
342 | 			transform: translate3d(-10%,0,0)
343 | 		}
344 | 
345 | 		75% {
346 | 			-webkit-transform: translate3d(-10%,-50%,0);
347 | 			transform: translate3d(-10%,-50%,0)
348 | 		}
349 | 
350 | 		to {
351 | 			-webkit-transform: translateZ(0);
352 | 			transform: translateZ(0)
353 | 		}
354 | 	}
355 | 
356 | 	@keyframes aboutbg-star {
357 | 		0% {
358 | 			opacity: 1
359 | 		}
360 | 
361 | 		25% {
362 | 			opacity: .5
363 | 		}
364 | 
365 | 		50% {
366 | 			opacity: .8
367 | 		}
368 | 
369 | 		75% {
370 | 			opacity: .2
371 | 		}
372 | 
373 | 		to {
374 | 			opacity: 1
375 | 		}
376 | 	}
377 | 
378 | 	.user .averter {
379 | 		position: absolute;
380 | 		width: 80px;
381 | 		height: 80px;
382 | 		border-radius: 50px;
383 | 		z-index: 1;
384 | 		left: 85px;
385 | 		top: 70px;
386 | 		border: 4px solid rgba(255,255,255, 0.5);
387 | 		transition: 0.3s;
388 | 	}
389 | 	.user .name {
390 | 		text-align: center;
391 | 		border-left: 1px solid #f1f1f1;
392 | 		border-bottom: 1px solid #f1f1f1;
393 | 		border-right: 1px solid #f1f1f1;
394 | 		overflow: hidden;
395 | 		position: relative;
396 | 		box-sizing: border-box;
397 | 		height: 270px;
398 | 	}
399 | 	.user .title {
400 | 		font-weight: normal;
401 | 		margin-top: 80px;
402 | 	}
403 | 	.user .disc {
404 | 		margin-top: 10px;
405 | 	}
406 | 	.user .friend {
407 | 		display: inline-block;
408 | 		padding: 5px 20px;
409 | 		border: 1px dashed #3fb76c;;
410 | 		margin-top: 20px;
411 | 	}
412 | 	.weixin{
413 | 		width: 248px;
414 | 		position: absolute;
415 | 		left: 1px;
416 | 		top: 110px;
417 | 		opacity: 0;
418 | 		transition: opacity 0.3s;
419 | 		z-index: 1;
420 | 	}
421 | 	.like{
422 | 		color: #555555;
423 | 		display: inline-block;
424 | 		padding-right: 15px;
425 | 	}
426 | 	.map {
427 | 		width: 900px;
428 | 		border: 1px solid #f1f1f1;
429 | 		height: 200px;
430 | 		margin-top: 20px;
431 | 		padding: 10px;
432 | 	}
433 | 	#allmap{
434 | 		width: 100%;
435 | 		height: 100%;
436 | 	}
437 | 	.project{
438 | 		width: 900px;
439 | 		height: 200px;
440 | 		border: 1px solid #f1f1f1;
441 | 		box-sizing: border-box;
442 | 		margin-top: 20px;
443 | 		padding: 10px;
444 | 	}
445 | 	.project a {
446 | 		display: block;
447 | 		width: 100%;
448 | 		height: 100%;
449 | 		transition: background 0.5s;
450 | 		overflow: hidden;
451 | 		cursor: pointer;
452 | 	}
453 | 	.project a:hover{
454 | 		background: #efefef;
455 | 		text-decoration: none;
456 | 	}
457 | 	.project p {
458 | 		text-align: center;
459 | 	}
460 | 	.project p:first-child {
461 | 		font-size: 36px;
462 | 		margin-top: 60px
463 | 	}
464 | 	.project p:last-child {
465 | 		margin-top: 10px
466 | 	}
467 | 	.night{
468 | 		background: url(../assets/img/night.png)  no-repeat center center;
469 | 		background-size: 100% 100%;
470 | 	}
471 | </style>
472 | 


--------------------------------------------------------------------------------
/pages/music.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="musicBox" ref="musicBox">
  3 | 		<div class="oparations">
  4 | 			<div class="lyricBox abs"  v-show="showLyric">
  5 | 				<div class="topMask" @click="hideLyric"></div>
  6 | 				<div class="bottomMask"  @click="hideLyric"></div>
  7 | 				<div class="lyriList">
  8 | 					<ul ref="lyriList">
  9 | 						<li v-for="(item, index) in lyricArr" :key="index">{{item.text}}</li>
 10 | 						<li v-if="lyricArr.length === 0">大侠，请点击播放加载歌词吧...</li>
 11 | 					</ul>
 12 | 				</div>
 13 | 			</div>
 14 | 			<div class="musicBtnBox abs" v-show="showBtns" @mouseenter="btnMousrenter" @mouseleave="btnMouseleave">
 15 | 				<transition name="slide-fade">
 16 | 					<div class="musicBtns" v-show="showAllBtn">
 17 | 						<span class="btnList pbtn" @click="toList"><i class="iconfont">&#xe628;</i></span>
 18 | 						<span class="btnLyric pbtn" @click="toLyric"><i class="iconfont">&#xe70f;</i></span>
 19 | 						<span class="btnPlay pbtn" ref="play" @click="toPlay"><i class="iconfont">{{playing ? '&#xe618;' : '&#xe617;'}}</i></span>
 20 | 						<span class="btnPrev pbtn" ref="prev" @click="toPrev"><i class="iconfont">&#xe619;</i></span>
 21 | 						<span class="btnNext pbtn" ref="next" @click="toNext"><i class="iconfont">&#xe61a;</i></span>
 22 | 					</div>
 23 | 				</transition>
 24 | 				<transition name="poster-fade">
 25 | 					<img v-show="!showAllBtn" v-if="poster" :src="poster" />
 26 | 				</transition>
 27 | 			</div>
 28 | 		</div>
 29 | 		<canvas class="musicCanvas" ref="canvas" width="1000" height="800">您的浏览器不支持canvas标签</canvas>
 30 | 		<audio ref="audio" :src="musicLink" crossOrigin="anonymous" style="display: none">您的浏览器不支持audio标签</audio>
 31 | 		<transition name="list-fade">
 32 | 			<div class="musicList" ref="musicListBox" v-show="showList">
 33 | 				<ul ref="musicList">
 34 | 					<li v-for="(item, index) in music" :key="item._id" @click="selectMusic(index)">{{item.title}}({{item.name}})</li>
 35 | 				</ul>
 36 | 				<div class="lyricScroll" v-show="showlyricScroll">
 37 | 					<div class="lyricScrollBar" :class="isScrolling ? 'active' : ''" ref="lyricScrollBar"></div>
 38 | 				</div>
 39 | 			</div>
 40 | 		</transition>
 41 | 	</div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import FooterMixin from '../utils/footer-mixin'
 46 | import { getMusic } from '../api'
 47 | import { formatLyric, findLine } from '../utils/music'
 48 | import MusicDraw from '../utils/draw'
 49 | export default {
 50 | 	head: {
 51 | 		title: 'naice | 音乐',
 52 | 		meta: [
 53 |       { hid: 'description', name: 'description', content: 'naice | 音乐' }
 54 |     ]
 55 | 	},
 56 | 	layout: 'music-layout',
 57 | 	data () {
 58 | 		return {
 59 | 			music: [],
 60 | 			lyricArr: [],
 61 | 			playing: false,
 62 | 			musicLink: '',
 63 | 			text1: '',
 64 | 			text2: '',
 65 | 			playIndex: 0,
 66 | 			showLyric: false,
 67 | 			poster: '',
 68 | 			showAllBtn: false,
 69 | 			showlyricScroll: false,
 70 | 			lyricScrollY: 0,
 71 | 			isScrolling: false,
 72 | 			showList: false
 73 | 		}
 74 | 	},
 75 | 	mixins: [FooterMixin],
 76 | 	computed: {
 77 | 		showBtns () {
 78 | 			return !this.showLyric
 79 | 		}
 80 | 	},
 81 | 	methods: {
 82 | 		initDom () {
 83 | 			const refs = this.$refs
 84 | 			this.play = refs.play
 85 | 			this.pause = refs.pause
 86 | 			this.next = refs.next
 87 | 			this.prev = refs.prev
 88 | 			this.canvas = refs.canvas
 89 | 			this.audio = refs.audio
 90 | 			this.musicBox = refs.musicBox
 91 | 			this.lyriList = refs.lyriList
 92 | 			this.lyricScrollBar = refs.lyricScrollBar
 93 | 			this.musicList = refs.musicList
 94 | 			this.musicListBox = refs.musicListBox
 95 | 			this.init()
 96 | 			this.initCanvas()
 97 | 			this.initLyricScroll()
 98 | 		},
 99 | 		init () {
100 | 			this.ctx = this.canvas.getContext('2d')
101 | 			this.audioCtx = new (window.AudioContext || window.webkitAudioContext)() // 创建音频上下文
102 | 			this.source = this.audioCtx.createMediaElementSource(this.audio) // 在音频上下文里创建源来关联myAudio
103 | 			this.analyser = this.audioCtx.createAnalyser() // 创建一个分析器，它可以用来显示音频时间和频率的数据。
104 | 			this.analyser.fftSize = 1024
105 | 			this.analyser.minDecibels = -100
106 | 			this.analyser.maxDecibels = -30
107 | 			this.analyser.smoothingTimeConstant = 0.8
108 | 			this.analyser.connect(this.audioCtx.destination) // 需要将分析器连接到audioContext.destination
109 | 			this.source.connect(this.analyser) // audioBufferSouceNode连接到analyser,analyser连接destination。此刻所有音频数据都会经过analyser，我们再从analyser中获取频谱的能量信息
110 | 		},
111 | 		initCanvas () {
112 | 			const {ctx, analyser, musicBox, canvas } = this
113 | 			let width = musicBox.offsetWidth
114 | 			let height = musicBox.offsetHeight
115 | 			canvas.width = width
116 | 			canvas.height = height
117 | 			canvas.style.width = width + 'px'
118 | 			canvas.style.height = height + 'px'
119 | 			this.musicDraw = new MusicDraw(ctx, analyser, width, height, this.getLineLyric)
120 | 			this.audio.onended = () => {
121 | 				this.toNext()
122 | 			};
123 | 			this.poster = this.music[0] ? this.music[0].poster : ''
124 | 		},
125 | 		toPlay () {
126 | 			if (this.playing) {
127 | 				this.toPause()
128 | 			} else if (!this.musicLink) {
129 | 				this.loadMusic()
130 | 			} else {
131 | 				this.audioCtx.resume().then(() => {
132 | 					this.audio.play()
133 | 					this.playing = true
134 | 					this.musicDraw.updatePlaying(this.playing)
135 | 					this.musicDraw.animate()
136 | 				})
137 | 			}
138 | 		},
139 | 		toPause () {
140 | 			this.audio.pause()
141 | 			this.playing = false
142 | 			this.musicDraw.updatePlaying(this.playing)
143 | 		},
144 | 		toNext () {
145 | 			this.playIndex += 1
146 | 			if (this.playIndex === this.music.length) {
147 | 				this.playIndex = 0
148 | 			}
149 | 			this.loadMusic()
150 | 		},
151 | 		toPrev () {
152 | 			this.playIndex -= 1
153 | 			if (this.playIndex <= 0) {
154 | 				this.playIndex = 0
155 | 			}
156 | 			this.loadMusic()
157 | 		},
158 | 		selectMusic (index) {
159 | 			this.playIndex = index
160 | 			this.loadMusic()
161 | 			this.showList = false
162 | 		},
163 | 		btnMousrenter () {
164 | 			this.showAllBtn = true
165 | 		},
166 | 		btnMouseleave () {
167 | 			this.showAllBtn = false
168 | 		},
169 | 		loadMusic () {
170 | 			let music = this.music[this.playIndex]
171 | 			if (this.musicLink === music.url) return
172 | 			this.toPause()
173 | 			this.musicLink = music.url
174 | 			this.poster = music.poster
175 | 			this.lyricArr = formatLyric(music.lyrics)
176 | 			this.audio.onloadedmetadata = () => {
177 | 				this.toPlay()
178 | 			}
179 | 		},
180 | 		toList () {
181 | 			this.showList = !this.showList
182 | 		},
183 | 		toLyric () {
184 | 			this.showLyric = true
185 | 		},
186 | 		hideLyric () {
187 | 			this.showLyric = false
188 | 		},
189 | 		getLineLyric () {
190 | 			const { audio, lyricArr, lyriList } = this
191 | 			let index = findLine(audio.currentTime, lyricArr)
192 | 			if (index > 0) {
193 | 				index -= 1
194 | 			}
195 | 			this.text2 = lyricArr[index].text
196 | 			if (this.text1 !== this.text2) {
197 | 				lyriList.style.transform = `translate3d(0, ${-index * 32}px,0)`
198 | 			}
199 | 			this.text1 = this.text2
200 | 		},
201 | 		initLyricScroll () {
202 | 			const { music, lyricScrollBar } = this
203 | 			this.ah = music.length * 41
204 | 			if (this.ah === 0) {
205 | 				this.showlyricScroll = false
206 | 			} else if ( this.ah > 400) {
207 | 				this.lyricScrollBarHeight = (400 * 400) / this.ah
208 | 				lyricScrollBar.style.height = this.lyricScrollBarHeight + 'px'
209 | 				this.showlyricScroll = true
210 | 				this.initLyricScrollEvernt()
211 | 			}
212 | 		},
213 | 		initLyricScrollEvernt () {
214 | 			const { lyricScrollBar, musicListBox } = this
215 | 			let starty = 0
216 | 			let disScroll = 400 - this.lyricScrollBarHeight
217 | 			let count = 0
218 | 			let y = 0
219 | 			const toScroll = () => {
220 | 				if (y <= 0) {
221 | 					y = 0
222 | 					count++
223 | 				} else if (y > disScroll) {
224 | 					y = disScroll
225 | 					count++
226 | 				} else {
227 | 					count = 0
228 | 				}
229 | 				if (count <= 2) {
230 | 					this.lyricScrollBar.style.transform = `translateY(${y}px)`
231 | 					this.musicList.style.transform = `translateY(${-(y / 400) * this.ah}px)`
232 | 				}
233 | 			}
234 | 			const mousemove = e => {
235 | 				let disy = e.clientY - starty
236 | 				y = this.lyricScrollY + disy
237 | 				this.isScrolling = true
238 | 				toScroll()
239 | 			}
240 | 			const mosueup = e => {
241 | 				this.lyricScrollY = y
242 | 				this.isScrolling = false
243 | 				document.removeEventListener('mousemove', mousemove)
244 | 				document.removeEventListener('mouseup', mosueup)
245 | 			}
246 | 			lyricScrollBar.addEventListener('mousedown', e => {
247 | 				starty = e.clientY
248 | 				this.isScrolling = false
249 | 				document.addEventListener('mousemove', mousemove)
250 | 				document.addEventListener('mouseup', mosueup)
251 | 			})
252 | 			musicListBox.addEventListener('mousewheel', e => {
253 | 				e.preventDefault()
254 | 				e.stopPropagation()
255 | 				y = this.lyricScrollY + e.deltaY
256 | 				toScroll()
257 | 				this.lyricScrollY = y
258 | 			})
259 | 		}
260 | 	},
261 | 	async mounted () {
262 | 		let list = await getMusic()
263 | 		this.music = list.result || []
264 | 		this.$nextTick(() => {
265 | 			this.initDom()
266 | 			this.footer()
267 | 		})
268 | 	},
269 | 	beforeDestroy () {
270 | 		this.ctx = null
271 | 		this.audioCtx = null
272 | 		this.source = null
273 | 		this.analyser = null
274 | 	}
275 | }
276 | </script>
277 | 
278 | <style scoped>
279 | 	.slide-fade-enter-active, .slide-fade-leave-active {
280 | 		transition: all .3s ease;
281 | 	}
282 | 	.slide-fade-enter {
283 | 		transform: translateX(-20px);
284 | 		opacity: 0;
285 | 	}
286 | 	.slide-fade-leave-to {
287 | 		transform: translateX(20px);
288 | 		opacity: 0;
289 | 	}
290 | 	.poster-fade-enter-active, .poster-fade-leave-active {
291 | 		transition: opacity .5s;
292 | 	}
293 | 	.poster-fade-enter, .poster-fade-leave-to {
294 | 		opacity: 0;
295 | 	}
296 | 	.list-fade-enter-active, .list-fade-leave-active {
297 | 		transition: all .3s ease;
298 | 	}
299 | 	.list-fade-enter, .list-fade-leave-to {
300 | 		transform: translateX(-400px);
301 | 		opacity: 0;
302 | 	}
303 | 	
304 | 	@keyframes myrotate {
305 | 		from {
306 | 			transform: rotate(0deg);
307 | 		}
308 | 		to {
309 | 			transform: rotate(360deg);
310 | 		}
311 | 	}
312 |   .musicBox {
313 | 		width: 100%;
314 | 		height: 100%;
315 | 		position: relative;
316 | 		background: #000;
317 | 	}
318 | 	.oparations {
319 | 		width: 20vw;
320 | 		height: 20vw;
321 | 		background: transparent;
322 | 		left: 50%;
323 | 		top: 50%;
324 | 		position: absolute;
325 | 		transform: translate(-10vw, -10vw);
326 | 		z-index: 10;
327 | 		border-radius: 50%;
328 | 		overflow: hidden;
329 | 		box-shadow: 0 0 50px rgba(255, 255, 255, 0.3)
330 | 	}
331 | 	.oparations .abs{
332 | 		position: absolute;
333 | 		width: 100%;
334 | 		height: 100%;
335 | 		left: 0;
336 | 		top: 0;
337 | 	}
338 | 	.musicBtns {
339 | 		position: absolute;
340 | 		left: 50%;
341 | 		top: 50%;
342 | 		width: 160px;
343 | 		height: 160px;
344 | 		margin: -80px 0 0 -80px;
345 | 		z-index: 1;
346 | 	}
347 | 	.musicBtnBox img {
348 | 		width: 100%;
349 | 		height: 100%;
350 | 		position: absolute;
351 | 		left: 0;
352 | 		top: 0;
353 | 		animation: myrotate 30s linear infinite;
354 | 	}
355 | 	.musicBtnBox .pbtn {
356 | 		position: absolute;
357 | 		width: 60px;
358 | 		height: 60px;
359 | 		border-radius: 50%;
360 | 		border: 1px solid #326b9f;
361 | 		text-align: center;
362 | 		line-height: 60px;
363 | 		cursor: pointer;
364 | 		z-index: 1;
365 | 	}
366 | 	.musicBtnBox .pbtn i {
367 | 		font-size: 20px;
368 | 		color: #326b9f;
369 | 	}
370 | 	.musicBtnBox .pbtn:hover {
371 | 		border-color: #2b9aff;
372 | 		box-shadow: 0px 0px 16px #2b9aff inset;
373 | 	}
374 | 	.musicBtnBox .pbtn:hover i {
375 | 		color: #2b9aff;
376 | 	}
377 | 	.musicBtnBox .btnList {
378 | 		left: 10px;
379 | 		top: 2px;
380 | 	}
381 | 	.musicBtnBox .btnLyric {
382 | 		right: 10px;
383 | 		top: 2px;
384 | 	}
385 | 	.musicBtnBox .btnPlay {
386 | 		left: 50%;
387 | 		top: 50%;
388 | 		margin-top: -30px;
389 | 		margin-left: -30px;
390 | 	}
391 | 	.musicBtnBox .btnNext {
392 | 		right: 10px;
393 | 		bottom: 2px;
394 | 	}
395 | 	.musicBtnBox .btnPrev {
396 | 		left: 10px;
397 | 		bottom: 2px;
398 | 	}
399 | 	.lyricBox {
400 | 		overflow: hidden;
401 | 		z-index: 1;
402 | 	}
403 | 	.lyricBox .topMask {
404 | 		width: 100%;
405 | 		height: 10vw;
406 | 		position: absolute;
407 | 		left: 0;
408 | 		top: 0;
409 | 		background: linear-gradient(0deg, rgba(3,6,24,0.1), rgba(3,6,24,1));
410 | 		z-index: 1;
411 | 	}
412 | 	.lyricBox .bottomMask {
413 | 		width: 100%;
414 | 		height: 10vw;
415 | 		position: absolute;
416 | 		left: 0;
417 | 		bottom: 0;
418 | 		background: linear-gradient(180deg, rgba(3,6,24, 0.1), rgba(3,6,24,1));
419 | 		z-index: 1;
420 | 	}
421 | 	.lyricBox .lyriList {
422 | 		text-align: center;
423 | 		position: absolute;
424 | 		left: 0;
425 | 		top: 50%;
426 | 		width: 100%;
427 | 		margin-top: -16px;
428 | 	}
429 | 	.lyricBox .lyriList ul{
430 | 		transition: 0.3s;
431 | 	}
432 | 	.lyricBox .lyriList li {
433 | 		color: #ffffff;
434 | 		width: 100%;
435 | 		overflow: hidden;
436 | 		white-space: nowrap;
437 | 		text-overflow: ellipsis;
438 | 		line-height: 32px;
439 | 		height: 32px;
440 | 		font-size: 14px;
441 | 	}
442 | 	.musicList {
443 | 		position: fixed;
444 | 		width: 200px;
445 | 		height: 400px;
446 | 		border: 1px solid #326b9f;
447 | 		border-left: 0;
448 | 		left: 0;
449 | 		top: 50%;
450 | 		margin-top: -250px;
451 | 		box-sizing: border-box;
452 | 		overflow: hidden;
453 | 		border-radius: 4px;
454 | 	}
455 | 	.musicList li:hover {
456 | 		background: #ffffff;
457 | 	}
458 | 	.musicList li {
459 | 		line-height: 40px;
460 | 		color: #2b9aff;
461 | 		width: 100%;
462 | 		box-sizing: border-box;
463 | 		border-bottom: 1px dashed #1c6fbb;
464 | 		font-size: 12px;
465 | 		cursor: pointer;
466 | 		text-align: center;
467 | 		transition: 0.3s;
468 | 		padding: 0 8px;
469 | 		overflow: hidden;
470 | 		white-space: nowrap;
471 | 		text-overflow: ellipsis;
472 | 		user-select: none;
473 | 	}
474 | 	.lyricScroll {
475 | 		width: 10px;
476 | 		height: 100%;
477 | 		position: absolute;
478 | 		right: 0;
479 | 		top: 0;
480 | 		z-index: 1;
481 | 	}
482 | 	.lyricScroll .lyricScrollBar {
483 | 		width: 8px;
484 | 		height: 20px;
485 | 		position: absolute;
486 | 		left: 1px;
487 | 		top: 0;
488 | 		background: #006bcc;
489 | 		border-radius: 8px;
490 | 		cursor: pointer;
491 | 		opacity: 0.7;
492 | 	}
493 | 	.lyricScroll .lyricScrollBar:hover {
494 | 		opacity: 1;
495 | 	}
496 | 	.lyricScroll .lyricScrollBar.active {
497 | 		opacity: 1;
498 | 	}
499 | </style>
500 | 


--------------------------------------------------------------------------------
/.nuxt/utils.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | 
  3 | // window.{{globals.loadedCallback}} hook
  4 | // Useful for jsdom testing or plugins (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
  5 | if (process.client) {
  6 |   window.onNuxtReadyCbs = []
  7 |   window.onNuxtReady = (cb) => {
  8 |     window.onNuxtReadyCbs.push(cb)
  9 |   }
 10 | }
 11 | 
 12 | export function empty() {}
 13 | 
 14 | export function globalHandleError(error) {
 15 |   if (Vue.config.errorHandler) {
 16 |     Vue.config.errorHandler(error)
 17 |   }
 18 | }
 19 | 
 20 | export function interopDefault(promise) {
 21 |   return promise.then(m => m.default || m)
 22 | }
 23 | 
 24 | export function applyAsyncData(Component, asyncData) {
 25 |   if (
 26 |     // For SSR, we once all this function without second param to just apply asyncData
 27 |     // Prevent doing this for each SSR request
 28 |     !asyncData && Component.options.__hasNuxtData
 29 |   ) {
 30 |     return
 31 |   }
 32 | 
 33 |   const ComponentData = Component.options._originDataFn || Component.options.data || function () { return {} }
 34 |   Component.options._originDataFn = ComponentData
 35 | 
 36 |   Component.options.data = function () {
 37 |     const data = ComponentData.call(this)
 38 |     if (this.$ssrContext) {
 39 |       asyncData = this.$ssrContext.asyncData[Component.cid]
 40 |     }
 41 |     return { ...data, ...asyncData }
 42 |   }
 43 | 
 44 |   Component.options.__hasNuxtData = true
 45 | 
 46 |   if (Component._Ctor && Component._Ctor.options) {
 47 |     Component._Ctor.options.data = Component.options.data
 48 |   }
 49 | }
 50 | 
 51 | export function sanitizeComponent(Component) {
 52 |   // If Component already sanitized
 53 |   if (Component.options && Component._Ctor === Component) {
 54 |     return Component
 55 |   }
 56 |   if (!Component.options) {
 57 |     Component = Vue.extend(Component) // fix issue #6
 58 |     Component._Ctor = Component
 59 |   } else {
 60 |     Component._Ctor = Component
 61 |     Component.extendOptions = Component.options
 62 |   }
 63 |   // For debugging purpose
 64 |   if (!Component.options.name && Component.options.__file) {
 65 |     Component.options.name = Component.options.__file
 66 |   }
 67 |   return Component
 68 | }
 69 | 
 70 | export function getMatchedComponents(route, matches = false) {
 71 |   return Array.prototype.concat.apply([], route.matched.map((m, index) => {
 72 |     return Object.keys(m.components).map((key) => {
 73 |       matches && matches.push(index)
 74 |       return m.components[key]
 75 |     })
 76 |   }))
 77 | }
 78 | 
 79 | export function getMatchedComponentsInstances(route, matches = false) {
 80 |   return Array.prototype.concat.apply([], route.matched.map((m, index) => {
 81 |     return Object.keys(m.instances).map((key) => {
 82 |       matches && matches.push(index)
 83 |       return m.instances[key]
 84 |     })
 85 |   }))
 86 | }
 87 | 
 88 | export function flatMapComponents(route, fn) {
 89 |   return Array.prototype.concat.apply([], route.matched.map((m, index) => {
 90 |     return Object.keys(m.components).reduce((promises, key) => {
 91 |       if (m.components[key]) {
 92 |         promises.push(fn(m.components[key], m.instances[key], m, key, index))
 93 |       } else {
 94 |         delete m.components[key]
 95 |       }
 96 |       return promises
 97 |     }, [])
 98 |   }))
 99 | }
100 | 
101 | export function resolveRouteComponents(route, fn) {
102 |   return Promise.all(
103 |     flatMapComponents(route, async (Component, instance, match, key) => {
104 |       // If component is a function, resolve it
105 |       if (typeof Component === 'function' && !Component.options) {
106 |         Component = await Component()
107 |       }
108 |       match.components[key] = Component = sanitizeComponent(Component)
109 |       return typeof fn === 'function' ? fn(Component, instance, match, key) : Component
110 |     })
111 |   )
112 | }
113 | 
114 | export async function getRouteData(route) {
115 |   if (!route) {
116 |     return
117 |   }
118 |   // Make sure the components are resolved (code-splitting)
119 |   await resolveRouteComponents(route)
120 |   // Send back a copy of route with meta based on Component definition
121 |   return {
122 |     ...route,
123 |     meta: getMatchedComponents(route).map((Component, index) => {
124 |       return { ...Component.options.meta, ...(route.matched[index] || {}).meta }
125 |     })
126 |   }
127 | }
128 | 
129 | export async function setContext(app, context) {
130 |   // If context not defined, create it
131 |   if (!app.context) {
132 |     app.context = {
133 |       isStatic: process.static,
134 |       isDev: true,
135 |       isHMR: false,
136 |       app,
137 |       store: app.store,
138 |       payload: context.payload,
139 |       error: context.error,
140 |       base: '/',
141 |       env: {}
142 |     }
143 |     // Only set once
144 |     if (context.req) {
145 |       app.context.req = context.req
146 |     }
147 |     if (context.res) {
148 |       app.context.res = context.res
149 |     }
150 |     if (context.ssrContext) {
151 |       app.context.ssrContext = context.ssrContext
152 |     }
153 |     app.context.redirect = (status, path, query) => {
154 |       if (!status) {
155 |         return
156 |       }
157 |       app.context._redirected = true
158 |       // if only 1 or 2 arguments: redirect('/') or redirect('/', { foo: 'bar' })
159 |       let pathType = typeof path
160 |       if (typeof status !== 'number' && (pathType === 'undefined' || pathType === 'object')) {
161 |         query = path || {}
162 |         path = status
163 |         pathType = typeof path
164 |         status = 302
165 |       }
166 |       if (pathType === 'object') {
167 |         path = app.router.resolve(path).route.fullPath
168 |       }
169 |       // "/absolute/route", "./relative/route" or "../relative/route"
170 |       if (/(^[.]{1,2}\/)|(^\/(?!\/))/.test(path)) {
171 |         app.context.next({
172 |           path,
173 |           query,
174 |           status
175 |         })
176 |       } else {
177 |         path = formatUrl(path, query)
178 |         if (process.server) {
179 |           app.context.next({
180 |             path,
181 |             status
182 |           })
183 |         }
184 |         if (process.client) {
185 |           // https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
186 |           window.location.replace(path)
187 | 
188 |           // Throw a redirect error
189 |           throw new Error('ERR_REDIRECT')
190 |         }
191 |       }
192 |     }
193 |     if (process.server) {
194 |       app.context.beforeNuxtRender = fn => context.beforeRenderFns.push(fn)
195 |     }
196 |     if (process.client) {
197 |       app.context.nuxtState = window.__NUXT__
198 |     }
199 |   }
200 | 
201 |   // Dynamic keys
202 |   const [currentRouteData, fromRouteData] = await Promise.all([
203 |     getRouteData(context.route),
204 |     getRouteData(context.from)
205 |   ])
206 | 
207 |   if (context.route) {
208 |     app.context.route = currentRouteData
209 |   }
210 | 
211 |   if (context.from) {
212 |     app.context.from = fromRouteData
213 |   }
214 | 
215 |   app.context.next = context.next
216 |   app.context._redirected = false
217 |   app.context._errored = false
218 |   app.context.isHMR = Boolean(context.isHMR)
219 |   app.context.params = app.context.route.params || {}
220 |   app.context.query = app.context.route.query || {}
221 | }
222 | 
223 | export function middlewareSeries(promises, appContext) {
224 |   if (!promises.length || appContext._redirected || appContext._errored) {
225 |     return Promise.resolve()
226 |   }
227 |   return promisify(promises[0], appContext)
228 |     .then(() => {
229 |       return middlewareSeries(promises.slice(1), appContext)
230 |     })
231 | }
232 | 
233 | export function promisify(fn, context) {
234 |   let promise
235 |   if (fn.length === 2) {
236 |       console.warn('Callback-based asyncData, fetch or middleware calls are deprecated. ' +
237 |         'Please switch to promises or async/await syntax')
238 | 
239 |     // fn(context, callback)
240 |     promise = new Promise((resolve) => {
241 |       fn(context, function (err, data) {
242 |         if (err) {
243 |           context.error(err)
244 |         }
245 |         data = data || {}
246 |         resolve(data)
247 |       })
248 |     })
249 |   } else {
250 |     promise = fn(context)
251 |   }
252 |   if (!promise || (!(promise instanceof Promise) && (typeof promise.then !== 'function'))) {
253 |     promise = Promise.resolve(promise)
254 |   }
255 |   return promise
256 | }
257 | 
258 | // Imported from vue-router
259 | export function getLocation(base, mode) {
260 |   let path = decodeURI(window.location.pathname)
261 |   if (mode === 'hash') {
262 |     return window.location.hash.replace(/^#\//, '')
263 |   }
264 |   if (base && path.indexOf(base) === 0) {
265 |     path = path.slice(base.length)
266 |   }
267 |   return (path || '/') + window.location.search + window.location.hash
268 | }
269 | 
270 | export function urlJoin() {
271 |   return Array.prototype.slice.call(arguments).join('/').replace(/\/+/g, '/')
272 | }
273 | 
274 | // Imported from path-to-regexp
275 | 
276 | /**
277 |  * Compile a string to a template function for the path.
278 |  *
279 |  * @param  {string}             str
280 |  * @param  {Object=}            options
281 |  * @return {!function(Object=, Object=)}
282 |  */
283 | export function compile(str, options) {
284 |   return tokensToFunction(parse(str, options))
285 | }
286 | 
287 | export function getQueryDiff(toQuery, fromQuery) {
288 |   const diff = {}
289 |   const queries = { ...toQuery, ...fromQuery }
290 |   for (const k in queries) {
291 |     if (String(toQuery[k]) !== String(fromQuery[k])) {
292 |       diff[k] = true
293 |     }
294 |   }
295 |   return diff
296 | }
297 | 
298 | export function normalizeError(err) {
299 |   let message
300 |   if (!(err.message || typeof err === 'string')) {
301 |     try {
302 |       message = JSON.stringify(err, null, 2)
303 |     } catch (e) {
304 |       message = `[${err.constructor.name}]`
305 |     }
306 |   } else {
307 |     message = err.message || err
308 |   }
309 |   return {
310 |     ...err,
311 |     message,
312 |     statusCode: (err.statusCode || err.status || (err.response && err.response.status) || 500)
313 |   }
314 | }
315 | 
316 | /**
317 |  * The main path matching regexp utility.
318 |  *
319 |  * @type {RegExp}
320 |  */
321 | const PATH_REGEXP = new RegExp([
322 |   // Match escaped characters that would otherwise appear in future matches.
323 |   // This allows the user to escape special characters that won't transform.
324 |   '(\\\\.)',
325 |   // Match Express-style parameters and un-named parameters with a prefix
326 |   // and optional suffixes. Matches appear as:
327 |   //
328 |   // "/:test(\\d+)?" => ["/", "test", "\d+", undefined, "?", undefined]
329 |   // "/route(\\d+)"  => [undefined, undefined, undefined, "\d+", undefined, undefined]
330 |   // "/*"            => ["/", undefined, undefined, undefined, undefined, "*"]
331 |   '([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))'
332 | ].join('|'), 'g')
333 | 
334 | /**
335 |  * Parse a string for the raw tokens.
336 |  *
337 |  * @param  {string}  str
338 |  * @param  {Object=} options
339 |  * @return {!Array}
340 |  */
341 | function parse(str, options) {
342 |   const tokens = []
343 |   let key = 0
344 |   let index = 0
345 |   let path = ''
346 |   const defaultDelimiter = (options && options.delimiter) || '/'
347 |   let res
348 | 
349 |   while ((res = PATH_REGEXP.exec(str)) != null) {
350 |     const m = res[0]
351 |     const escaped = res[1]
352 |     const offset = res.index
353 |     path += str.slice(index, offset)
354 |     index = offset + m.length
355 | 
356 |     // Ignore already escaped sequences.
357 |     if (escaped) {
358 |       path += escaped[1]
359 |       continue
360 |     }
361 | 
362 |     const next = str[index]
363 |     const prefix = res[2]
364 |     const name = res[3]
365 |     const capture = res[4]
366 |     const group = res[5]
367 |     const modifier = res[6]
368 |     const asterisk = res[7]
369 | 
370 |     // Push the current path onto the tokens.
371 |     if (path) {
372 |       tokens.push(path)
373 |       path = ''
374 |     }
375 | 
376 |     const partial = prefix != null && next != null && next !== prefix
377 |     const repeat = modifier === '+' || modifier === '*'
378 |     const optional = modifier === '?' || modifier === '*'
379 |     const delimiter = res[2] || defaultDelimiter
380 |     const pattern = capture || group
381 | 
382 |     tokens.push({
383 |       name: name || key++,
384 |       prefix: prefix || '',
385 |       delimiter,
386 |       optional,
387 |       repeat,
388 |       partial,
389 |       asterisk: Boolean(asterisk),
390 |       pattern: pattern ? escapeGroup(pattern) : (asterisk ? '.*' : '[^' + escapeString(delimiter) + ']+?')
391 |     })
392 |   }
393 | 
394 |   // Match any characters still remaining.
395 |   if (index < str.length) {
396 |     path += str.substr(index)
397 |   }
398 | 
399 |   // If the path exists, push it onto the end.
400 |   if (path) {
401 |     tokens.push(path)
402 |   }
403 | 
404 |   return tokens
405 | }
406 | 
407 | /**
408 |  * Prettier encoding of URI path segments.
409 |  *
410 |  * @param  {string}
411 |  * @return {string}
412 |  */
413 | function encodeURIComponentPretty(str) {
414 |   return encodeURI(str).replace(/[/?#]/g, (c) => {
415 |     return '%' + c.charCodeAt(0).toString(16).toUpperCase()
416 |   })
417 | }
418 | 
419 | /**
420 |  * Encode the asterisk parameter. Similar to `pretty`, but allows slashes.
421 |  *
422 |  * @param  {string}
423 |  * @return {string}
424 |  */
425 | function encodeAsterisk(str) {
426 |   return encodeURI(str).replace(/[?#]/g, (c) => {
427 |     return '%' + c.charCodeAt(0).toString(16).toUpperCase()
428 |   })
429 | }
430 | 
431 | /**
432 |  * Expose a method for transforming tokens into the path function.
433 |  */
434 | function tokensToFunction(tokens) {
435 |   // Compile all the tokens into regexps.
436 |   const matches = new Array(tokens.length)
437 | 
438 |   // Compile all the patterns before compilation.
439 |   for (let i = 0; i < tokens.length; i++) {
440 |     if (typeof tokens[i] === 'object') {
441 |       matches[i] = new RegExp('^(?:' + tokens[i].pattern + ')$')
442 |     }
443 |   }
444 | 
445 |   return function (obj, opts) {
446 |     let path = ''
447 |     const data = obj || {}
448 |     const options = opts || {}
449 |     const encode = options.pretty ? encodeURIComponentPretty : encodeURIComponent
450 | 
451 |     for (let i = 0; i < tokens.length; i++) {
452 |       const token = tokens[i]
453 | 
454 |       if (typeof token === 'string') {
455 |         path += token
456 | 
457 |         continue
458 |       }
459 | 
460 |       const value = data[token.name || 'pathMatch']
461 |       let segment
462 | 
463 |       if (value == null) {
464 |         if (token.optional) {
465 |           // Prepend partial segment prefixes.
466 |           if (token.partial) {
467 |             path += token.prefix
468 |           }
469 | 
470 |           continue
471 |         } else {
472 |           throw new TypeError('Expected "' + token.name + '" to be defined')
473 |         }
474 |       }
475 | 
476 |       if (Array.isArray(value)) {
477 |         if (!token.repeat) {
478 |           throw new TypeError('Expected "' + token.name + '" to not repeat, but received `' + JSON.stringify(value) + '`')
479 |         }
480 | 
481 |         if (value.length === 0) {
482 |           if (token.optional) {
483 |             continue
484 |           } else {
485 |             throw new TypeError('Expected "' + token.name + '" to not be empty')
486 |           }
487 |         }
488 | 
489 |         for (let j = 0; j < value.length; j++) {
490 |           segment = encode(value[j])
491 | 
492 |           if (!matches[i].test(segment)) {
493 |             throw new TypeError('Expected all "' + token.name + '" to match "' + token.pattern + '", but received `' + JSON.stringify(segment) + '`')
494 |           }
495 | 
496 |           path += (j === 0 ? token.prefix : token.delimiter) + segment
497 |         }
498 | 
499 |         continue
500 |       }
501 | 
502 |       segment = token.asterisk ? encodeAsterisk(value) : encode(value)
503 | 
504 |       if (!matches[i].test(segment)) {
505 |         throw new TypeError('Expected "' + token.name + '" to match "' + token.pattern + '", but received "' + segment + '"')
506 |       }
507 | 
508 |       path += token.prefix + segment
509 |     }
510 | 
511 |     return path
512 |   }
513 | }
514 | 
515 | /**
516 |  * Escape a regular expression string.
517 |  *
518 |  * @param  {string} str
519 |  * @return {string}
520 |  */
521 | function escapeString(str) {
522 |   return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, '\\$1')
523 | }
524 | 
525 | /**
526 |  * Escape the capturing group by escaping special characters and meaning.
527 |  *
528 |  * @param  {string} group
529 |  * @return {string}
530 |  */
531 | function escapeGroup(group) {
532 |   return group.replace(/([=!:$/()])/g, '\\$1')
533 | }
534 | 
535 | /**
536 |  * Format given url, append query to url query string
537 |  *
538 |  * @param  {string} url
539 |  * @param  {string} query
540 |  * @return {string}
541 |  */
542 | function formatUrl(url, query) {
543 |   let protocol
544 |   const index = url.indexOf('://')
545 |   if (index !== -1) {
546 |     protocol = url.substring(0, index)
547 |     url = url.substring(index + 3)
548 |   } else if (url.startsWith('//')) {
549 |     url = url.substring(2)
550 |   }
551 | 
552 |   let parts = url.split('/')
553 |   let result = (protocol ? protocol + '://' : '//') + parts.shift()
554 | 
555 |   let path = parts.filter(Boolean).join('/')
556 |   let hash
557 |   parts = path.split('#')
558 |   if (parts.length === 2) {
559 |     [path, hash] = parts
560 |   }
561 | 
562 |   result += path ? '/' + path : ''
563 | 
564 |   if (query && JSON.stringify(query) !== '{}') {
565 |     result += (url.split('?').length === 2 ? '&' : '?') + formatQuery(query)
566 |   }
567 |   result += hash ? '#' + hash : ''
568 | 
569 |   return result
570 | }
571 | 
572 | /**
573 |  * Transform data object to query string
574 |  *
575 |  * @param  {object} query
576 |  * @return {string}
577 |  */
578 | function formatQuery(query) {
579 |   return Object.keys(query).sort().map((key) => {
580 |     const val = query[key]
581 |     if (val == null) {
582 |       return ''
583 |     }
584 |     if (Array.isArray(val)) {
585 |       return val.slice().map(val2 => [key, '=', val2].join('')).join('&')
586 |     }
587 |     return key + '=' + val
588 |   }).filter(Boolean).join('&')
589 | }
590 | 


--------------------------------------------------------------------------------
/pages/article/_id.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <section>
  3 |         <div class="markdown articleDetailBox">
  4 |             <div class="title">
  5 |                 <h1>{{article.title}}</h1>
  6 |             </div>
  7 |             <div v-html="article.editContent"></div>
  8 |         </div>
  9 |         <div class="info articleDetailBox">
 10 |             <p>本文于 {{toTime(article.update_at, '/')}} 下午 发布在，当前已被围观 {{article.meta.views}} 次</p>
 11 |             <p>标签：<nuxt-link
 12 |                 v-for="(tag, index) in article.tag"
 13 |                 :key="index"
 14 |                 to="/article"
 15 |                 class="tagLink"
 16 |                 >{{tag.name}}</nuxt-link></p>
 17 |             <p>作者：Naice</p>
 18 |             <p>链接：https://naice.me/article/{{article._id}}</p>
 19 |             <p>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
 20 |         </div>
 21 |         <transition name="fade">
 22 |             <div class="shearBox articleDetailBox" v-show="isShowShear" style="background: transparent">
 23 |                 <shear :title="article.title" :url="`https://blog.naice.me/article/${article._id}`"></shear>
 24 |             </div>
 25 |         </transition>
 26 |         <div class="arcMata articleDetailBox" style="background: transparent">
 27 |             <div class="arcMataInfo">
 28 |                 <div class="like" @click="toLike">
 29 |                     <i class="iconfont" v-if="isLike"  style="color: #51ce23">&#xe63b;</i>
 30 |                     <i class="iconfont"  v-else>&#xe65c;</i>
 31 |                     <span>{{article.meta.likes}}</span>人喜欢
 32 |                 </div>
 33 |                 <div class="view"><span>{{article.meta.comments}}</span>条评论</div>
 34 |             </div>
 35 |             <div class="arcMataShear">
 36 |                 <span class="pay iconfont">&#xe614;</span>
 37 |                 <span class="shear iconfont" @click="showShear">&#xe6a5;</span>
 38 |             </div>
 39 |         </div>
 40 |         <!-- 评论组件 -->
 41 |         <div class="comment articleDetailBox">
 42 |             <comment v-on:pushComment="putComment"></comment>
 43 |             <div class="arcCommentList">
 44 |                 <div class="arcCommentItem" v-for="(comment, index) in comments" :key="index">
 45 |                     <div class="userAverter">
 46 |                         <img :src="comment.author.gravatar ? avarterArr[comment.author.gravatar] : avarterArr[0]" alt="">
 47 |                     </div>
 48 |                     <div class="userComment">
 49 |                         <div class="userInfo">
 50 |                             <div class="userInfoMata">
 51 |                                 <a class="name" :href="comment.author.site" target="_blank">{{comment.author.name}}</a>
 52 |                                 <span>
 53 |                                     <i class="iconfont">
 54 |                                     {{currentSystem(comment.agent) === 'Mac' ? '&#xe64b;' : '&#xec83;'}}
 55 |                                     </i> {{currentSystem(comment.agent)}}
 56 |                                 </span>
 57 |                                 <span><i class="iconfont">&#xe68f;</i>{{getBrowser(comment.agent)}}</span>
 58 |                                 <span><i class="iconfont">&#xe662;</i>{{comment.country}} - {{comment.city}}</span>
 59 |                             </div>
 60 |                         </div>
 61 |                         <div class="itemContent">{{comment.content}}</div>
 62 |                         <div class="replyBox">
 63 |                             <div class="replyTitle">
 64 |                                 <div class="toTop"
 65 |                                   :class="comment.isLike ? 'active' : ''"
 66 |                                   @click="toLikeComment(comment.isLike, comment._id,index)">
 67 |                                   <i class="iconfont">&#xe6b4;</i>{{comment.likes}}
 68 |                                 </div>
 69 |                                 <div class="showReply" @click="toShowReply(index, comment.reply)">
 70 |                                     <i class="iconfont">&#xe65d;</i>
 71 |                                     <span>评论 ({{comment.reply}})</span>
 72 |                                 </div>
 73 |                                 <div class="time">{{getDateDiff(comment.update_at)}}</div>
 74 |                             </div>
 75 |                             <div class="replyConten"  v-if="comment.isShow">
 76 |                                 <div class="replayItem" v-for="(replys, j) in comment.replyList" :key="j">
 77 |                                     <div class="replyAverter">
 78 |                                         <img src="../../assets/img/averter.jpg" alt="">
 79 |                                     </div>
 80 |                                     <div class="replayItemContet">
 81 |                                         <div class="userInfoMata">
 82 |                                             <a class="name" :href="replys.from.site" target="_blank">{{replys.from.name}}</a>
 83 |                                             <span>
 84 |                                                 <i class="iconfont">
 85 |                                                 {{currentSystem(replys.agent) === 'Mac' ? '&#xe64b;' : '&#xec83;'}}
 86 |                                                 </i> {{currentSystem(replys.agent)}}
 87 |                                             </span>
 88 |                                             <span><i class="iconfont">&#xe68f;</i>{{getBrowser(comment.agent)}}</span>
 89 |                                             <span><i class="iconfont">&#xe662;</i>{{replys.country}} - {{replys.city}}</span>
 90 |                                         </div>
 91 |                                         <div class="replyPepole"
 92 |                                              v-if="replys.to.name">回复 <a :href="replys.to.site" target="_blank">{{replys.to.name}}：</a></div>
 93 |                                         <div class="rContent">{{replys.content}}</div>
 94 |                                         <div class="rTime">
 95 |                                             <span>{{getDateDiff(comment.update_at)}}</span>
 96 |                                             <span class="toShowReply" @click="toReplyComment(replys.from, index)">回复</span>
 97 |                                         </div>
 98 |                                     </div>
 99 |                                 </div>
100 |                                 <div class="rInput">
101 |                                     <comment
102 |                                         reply="true"
103 |                                         :cid="comment._id"
104 |                                         :at="comment.at"
105 |                                         v-on:pushComment="putReply"
106 |                                         @concleReply="toConcleReply(index)"></comment>
107 |                                 </div>
108 |                             </div>
109 |                         </div>
110 |                     </div>
111 |                 </div>
112 |             </div>
113 |         </div>
114 |     </section>
115 | </template>
116 | 
117 | <script>
118 | import { mapMutations } from 'vuex'
119 | import Shear from '../../components/shear'
120 | import Comment from '../../components/comment'
121 | import FooterMixin from '../../utils/footer-mixin'
122 | import TimeMixin from '../../utils/time-mixin'
123 | import {getArticleId, getComment, addReply, getReply, addComment, articleLike, commentLike} from '../../api'
124 | import {avarterArr} from '../../utils/blowser'
125 | 
126 | export default {
127 |     layout: 'layout',
128 |     head () {
129 |       return {
130 |         title: this.article.title || `naice | blog`
131 |       }
132 |     },
133 |     validate({ params }) {
134 |         return params.id
135 |     },
136 |     mixins: [FooterMixin, TimeMixin],
137 |     components: {
138 |         Shear,
139 |         Comment
140 |     },
141 |     async asyncData ({ params }) {
142 |         const res = await getArticleId(params.id)
143 |         return {article: res.result}
144 |     },
145 |     data () {
146 |       return {
147 |         isShowShear: true,
148 |         isLike: false,
149 |         comments: [],
150 |         conmentsPage: 0,
151 |         avarterArr,
152 |         isCommentLike: true
153 |       }
154 |     },
155 |     methods: {
156 |         showShear() {
157 |             this.isShowShear = !this.isShowShear
158 |         },
159 |         codehl() {
160 |           this.$nextTick(() => {
161 |             $('pre code').each((i, block) => {
162 |               hljs.highlightBlock(block)
163 |             })
164 |             this.footer()
165 |           })
166 |         },
167 |         getComment() {
168 |           const post_id = this.$route.params.id
169 |           const likeComment = JSON.parse(localStorage.getItem('likeComment') || '[]')
170 |           getComment({post_id}).then(res => {
171 |             let comments = res.result.data || []
172 |             if (comments.length > 0) {
173 |               comments.forEach(item => {
174 |                 item.isShow = false
175 |                 item.replyList = [],
176 |                 item.at = {}
177 |                 if (likeComment.indexOf(item._id) >= 0) {
178 |                   item.isLike = true
179 |                 } else {
180 |                   item.isLike = false
181 |                 }
182 |               });
183 |             }
184 |             this.comments = comments
185 |             this.$nextTick(() => this.footer())
186 |           })
187 |         },
188 |         getBrowser(agent) {
189 |             let Browser = '';
190 |             //IE
191 |             if (agent.indexOf('msie') > 0) {
192 |                 let regStr_ie = /msie [\d.]+;/gi
193 |                 Browser = 'Ie'
194 |             }
195 |             //firefox
196 |             else if (agent.indexOf('firefox') > 0) {
197 |                 let regStr_ff = /firefox\/[\d.]+/gi;
198 |                 Browser = 'Firefox';
199 |             }
200 |             //Chrome
201 |             else if (agent.indexOf('chrome') > 0) {
202 |                 let regStr_chrome = /chrome\/[\d.]+/gi;
203 |                 Browser = "Chrome";
204 |             }
205 |             // Safari
206 |             else if (agent.indexOf('safari') > 0 && agent.indexOf('chrome') < 0) {
207 |                 let regStr_saf = /version\/[\d.]+/gi;
208 |                 Browser = 'Safari'
209 |             } else {
210 |                 Browser = 'Chrome'
211 |             }
212 |             return Browser;
213 |         },
214 |         currentSystem (str) {
215 |             const reg = /mac/ig
216 |             return reg.test(str) ? 'Mac' : 'Window'
217 |         },
218 |         getDateTimeStamp(dateStr){
219 |             return Date.parse(dateStr.replace(/-/gi,"/"));
220 |         },
221 |         getDateDiff(str){
222 |             let minute = 1000 * 60;
223 |             let hour = minute * 60;
224 |             let day = hour * 24;
225 |             let halfamonth = day * 15;
226 |             let month = day * 30;
227 |             let now = new Date().getTime();
228 |             let diffValue = now - (new Date(str).getTime());
229 |             if(diffValue < 0){return;}
230 |             let monthC =diffValue / month;
231 |             let weekC =diffValue / (7*day);
232 |             let dayC =diffValue / day;
233 |             let hourC =diffValue / hour;
234 |             let minC =diffValue / minute;
235 |             let result = '';
236 |             if(monthC>=1){
237 |                 result=`${parseInt(monthC)}月前`;
238 |             }
239 |             else if(weekC>=1){
240 |                 result=`${parseInt(weekC)}周前`;
241 |             }
242 |             else if(dayC>=1){
243 |                 result=`${parseInt(dayC)}天前`;
244 |             }
245 |             else if(hourC>=1){
246 |                 result=`${parseInt(hourC)}小时前`;
247 |             }
248 |             else if(minC>=1){
249 |                 result=`${parseInt(minC)}分钟前`;
250 |             }else
251 |             result = '刚刚';
252 |             return result;
253 |         },
254 |         async toShowReply(index, replyNum) {
255 |             const {_id} = this.comments[index]
256 |             if (!this.comments[index].isShow && replyNum > 0) {
257 |               const res = await getReply(_id)
258 |               this.comments[index].replyList = res.result.data
259 |             }
260 |             this.comments[index].isShow = !this.comments[index].isShow
261 |         },
262 |         async putComment(user) {
263 |             let params = {
264 |                 post_id: this.$route.params.id,
265 |                 ...user
266 |             }
267 |             const res = await addComment(params)
268 |             if (res.code === 1) {
269 |               this.getComment()
270 |               this.article.meta.comments += 1
271 |             }
272 |         },
273 |         toConcleReply(index) {
274 |           this.comments[index].at = {}
275 |         },
276 |         toReplyComment(from, index) {
277 |           this.comments[index].at = from
278 |         },
279 |         async putReply(user) {
280 |           const {cid} = user
281 |           let params = {
282 |             post_id: this.$route.params.id,
283 |             ...user
284 |           }
285 |           const res = await addReply(params)
286 |           if (res.code == 1) {
287 |             const reply = await getReply(cid)
288 |             for (let i = 0, len = this.comments.length; i < len; i++) {
289 |               if (this.comments[i]._id == cid) {
290 |                 this.comments[i].replyList = reply.result.data
291 |                 this.comments[i].reply += 1
292 |                 break
293 |               }
294 |             }
295 |           }
296 |         },
297 |         async toLike () {
298 |           if (this.isLike) {
299 |             return false
300 |           }
301 |           const res = await articleLike(this.$route.params.id)
302 |           if (res.code === 1) {
303 |             const likeArr = JSON.parse(localStorage.getItem('linkArr') || '[]')
304 |             likeArr.push(this.$route.params.id)
305 |             localStorage.setItem('linkArr', JSON.stringify(likeArr))
306 |             this.isLike = true
307 |             this.article.meta.likes += 1
308 |           }
309 |         },
310 |         async toLikeComment (isLike, id, index) {
311 |           if (isLike) {
312 |             return false
313 |           }
314 |           const res = await commentLike(id)
315 |           if (res.code === 1) {
316 |             const commentLikeArr = JSON.parse(localStorage.getItem('likeComment') || '[]')
317 |             commentLikeArr.push(id)
318 |             this.comments[index].isLike = true
319 |             this.comments[index].likes += 1
320 |             localStorage.setItem('likeComment', JSON.stringify(commentLikeArr))
321 |           }
322 |         },
323 |         linkInit() {
324 |           const likeArr = JSON.parse(localStorage.getItem('linkArr') || '[]')
325 |           const id = this.$route.params.id
326 |           if (likeArr.length) {
327 |             const arr = likeArr.filter(item => item === id)
328 |             this.isLike = arr[0] ? true : false
329 |           }
330 |         },
331 |         ...mapMutations({
332 |           changeScroll: 'changeScroll'
333 |         }),
334 |     },
335 |     created() {
336 |       this.changeScroll(0)
337 |     },
338 |     mounted () {
339 |       this.linkInit()
340 |       this.getComment()
341 |       this.codehl()
342 |     }
343 | }
344 | </script>
345 | 
346 | <style>
347 | .articleDetailBox {
348 |     width: 900px;
349 |     margin: 10px auto 0 auto;
350 |     box-sizing: border-box;
351 |     background: #ffffff;
352 |     color: #333333;
353 |     border: 1px solid #f6f6f6;
354 | }
355 | .tagLink{
356 |     padding: 0 5px;
357 | }
358 | .markdown{
359 |     margin: 0 auto;
360 |     padding: 20px;
361 |     font-size: 16px;
362 |     line-height: 32px;
363 | }
364 | 
365 | .markdown p {
366 |     font-size: 16px;
367 |     line-height: 32px;
368 |     margin: 16px 0;
369 | }
370 | 
371 | .markdown li {
372 |     margin-left: 24px;
373 | }
374 | 
375 | .markdown ol li{
376 |     list-style: decimal;
377 | }
378 | 
379 | .markdown ul li {
380 |     list-style: disc;
381 | }
382 | 
383 | .markdown h1,
384 | .markdown h2,
385 | .markdown h3,
386 | .markdown h4,
387 | .markdown h5,
388 | .markdown h6 {
389 |     margin: 20px 0;
390 |     padding-top: 24px;
391 |     border-top: 1px dotted #d5d5d5;
392 | }
393 | 
394 | .markdown .title h1{
395 |     border-top: 0;
396 | }
397 | 
398 | .markdown h1{
399 |     margin-top: 0;
400 |     padding-bottom: 24px;
401 |     border-bottom: 1px dotted #cccccc;
402 |     text-align: center;
403 |     font-size: 26px;
404 |     color: #333333;
405 | }
406 | 
407 | .markdown h2 {
408 |     font-size: 24px;
409 | }
410 | 
411 | .markdown h3{
412 |     font-size: 20px;
413 | }
414 | 
415 | .markdown h4{
416 |     font-size: 18px;
417 | }
418 | 
419 | .markdown a {
420 |     color: #4682b4;
421 |     text-decoration: none;
422 | }
423 | 
424 | .markdown a:hover {
425 |     color: #0081ff;
426 | }
427 | 
428 | .markdown p pre {
429 |     background-color: rgba(0, 0, 0, 0.05);
430 |     color: #555;
431 |     border-radius: 3px;
432 |     padding: 10px;
433 |     overflow: auto;
434 |     border: none;
435 |     font-size: 0.9em;
436 |     line-height: 1.33;
437 | }
438 | .markdown li{
439 |     margin-left: 24px;
440 | }
441 | .markdown li:hover{
442 |     background: #f1f1f1
443 | }
444 | .markdown li p {
445 |     text-indent: 0;
446 | }
447 | 
448 | .markdown p pre code {
449 |     font-size: inherit;
450 |     color: inherit;
451 |     padding: 0;
452 |     background-color: transparent;
453 |     font-style: normal;
454 | }
455 | 
456 | .markdown p code {
457 |     color: #d82451;
458 |     background-color: #f6f6f6;
459 |     font-size: 0.9em;
460 |     padding: 2px 4px;
461 |     margin: 0 2px;
462 | }
463 | 
464 | .markdown blockquote {
465 |     margin: 0;
466 |     border-left: 5px solid #4682b4;
467 |     background-color: #f5f5f5;
468 |     margin: 10px 0;
469 | }
470 | .markdown blockquote p {
471 |     padding: 5px 0 5px 10px;
472 |     text-indent: 0;
473 | }
474 | .markdown table {
475 |     border: 1px solid #cccccc;
476 | }
477 | 
478 | .markdown table thead tr {
479 |     background-color: #eee;
480 | }
481 | 
482 | .markdown table tbody tr {
483 |     border-top: 1px solid #cccccc;
484 |     background-color: #fff;
485 | }
486 | 
487 | .markdown table th,
488 | .markdown table td {
489 |     padding: 8px;
490 |     border-left: 1px solid #cccccc;
491 | }
492 | 
493 | .markdown hr {
494 |     border-style: solid;
495 |     border-color: #ccc;
496 | }
497 | 
498 | .markdown img {
499 |     max-width: 100%;
500 |     margin: 20px auto;
501 |     display: block;
502 | }
503 | .arcMata{
504 |     font-size: 16px;
505 |     display: flex;
506 |     justify-content: space-between;
507 |     align-items: center;
508 |     padding: 10px 20px;
509 | }
510 | .arcMataInfo{
511 |     display: flex;
512 | }
513 | .arcMataInfo .view{
514 |     background: #eeeeee;
515 |     padding: 0px 10px;
516 |     height: 30px;
517 |     line-height: 30px;
518 |     color: #666666
519 | }
520 | .arcMataInfo .like{
521 |     background: #eeeeee;
522 |     padding: 0px 10px;
523 |     margin-right: 20px;
524 |     cursor: pointer;
525 |     height: 30px;
526 |     line-height: 30px;
527 |     color: #666666
528 | }
529 | .arcMataShear span{
530 |     display: inline-block;
531 |     width: 30px;
532 |     height: 30px;
533 |     font-size: 20px;
534 |     background: #eeeeee;
535 |     line-height: 30px;
536 |     text-align: center;
537 |     margin-left: 20px;
538 |     cursor: pointer;
539 | }
540 | .arcMataShear span:nth-of-type(2):hover{
541 |     background: #8ed53c;
542 |     color: #ffffff;
543 | }
544 | .comment{
545 |     padding: 20px;
546 |     margin-bottom: 20px;
547 | }
548 | .arcMataShear span:nth-of-type(1){
549 |     color: #ffffff;
550 |     animation:colorAnimation 2s infinite alternate;
551 | }
552 | .info{
553 |     padding: 10px 20px;
554 |     font-size: 14px;
555 | }
556 | .info p{
557 |     line-height: 32px;
558 | }
559 | @keyframes colorAnimation{
560 |     from {
561 |         background: #00bcd4;
562 |     }
563 |     to {
564 |         background: #ff5722;
565 |     }
566 | }
567 | .arcCommentList{
568 |     box-sizing: border-box;
569 |     margin-top: 30px;
570 | }
571 | .arcCommentItem {
572 |     display: flex;
573 |     margin-bottom: 20px;
574 |     padding-bottom: 20px;
575 |     position: relative;
576 |     border-bottom: 1px dashed #f1f1f1;
577 | }
578 | .userInfo{
579 |     display: flex;
580 |     height: 40px;
581 |     align-items: center;
582 | }
583 | .userAverter{
584 |     width: 50px;
585 | }
586 | .userComment{
587 |     flex: 1;
588 | }
589 | .userAverter img {
590 |     width: 40px;
591 |     height: 40px;
592 |     border-radius: 30px;
593 | }
594 | .userInfoMata{
595 |     font-size: 14px;
596 |     color: rgba(0, 0, 0, 0.4);
597 |     line-height: 30px;
598 | }
599 | .userInfoMata .name{
600 |     font-weight: bold;
601 |     color: #333333;
602 | }
603 | .userInfoMata span{
604 |     padding-right: 10px;
605 | }
606 | .userInfoMata span i {
607 |     font-size: 14px;
608 | }
609 | .itemContent{
610 |     font-size: 14px;
611 |     color: #333333;
612 |     box-sizing: border-box;
613 |     padding: 5px 0;
614 |     line-height: 26px;
615 | }
616 | .replyTitle{
617 |     display: flex;
618 |     height: 30px;
619 |     align-items: center;
620 |     color: #666666
621 | }
622 | .replyTitle .toTop{
623 |     background: hsla(0,0%,95%,.8);
624 |     color: #909090;
625 |     padding: 0 5px;
626 |     margin-right: 10px;
627 |     cursor: pointer;
628 | }
629 | .replyTitle .toTop.active {
630 |     background: rgba(81, 206, 35, 0.4);
631 |     color: #028679;
632 | }
633 | .replyTitle .showReply{
634 |     margin-right: 10px;
635 |     line-height: 30px;
636 |     cursor: pointer;
637 | }
638 | .replyTitle .showReply i{
639 |     font-size: 14px;
640 | }
641 | .replyTitle .time{
642 |     height: 30px;
643 |     font-size: 12px;
644 |     line-height: 30px;
645 | }
646 | .replyConten{
647 |     box-sizing:  border-box;
648 |     border: 1px solid #f1f1f1;
649 |     padding: 20px;
650 |     margin-top: 10px;
651 |     position: relative;
652 | }
653 | .replyConten::after{
654 |     content: "";
655 |     position: absolute;
656 |     top: -8px;
657 |     left: 46px;
658 |     border-width: 0 8px 8px;
659 |     border-style: solid;
660 |     border-color: transparent transparent #fff;
661 | }
662 | .replyConten::before{
663 |     content: "";
664 |     position: absolute;
665 |     left: 45px;
666 |     border-width: 0 9px 10px;
667 |     border-style: solid;
668 |     border-color: transparent transparent #f1f1f1;
669 |     top: -10px;
670 | }
671 | .replayItem{
672 |     display: flex;
673 |     margin-bottom: 10px;
674 | }
675 | .replyAverter{
676 |     width: 40px;
677 | }
678 | .replyAverter img {
679 |     width: 30px;
680 |     height: 30px;
681 |     border-radius: 6px;
682 | }
683 | .replayItemContet{
684 |     flex: 1;
685 |     border-bottom: 1px solid #f1f1f1;
686 |     padding-bottom: 20px;
687 | }
688 | .rContent{
689 |     font-size: 14px;
690 |     padding: 5px 0;
691 |     line-height: 26px;
692 | }
693 | .rTime{
694 |     font-size: 12px;
695 |     color: #666666;
696 |     padding-top: 10px;
697 | }
698 | .rTime span:nth-of-type(1) {
699 |     padding-right: 20px;
700 | }
701 | .rTime span:nth-of-type(2) {
702 |     cursor: pointer;
703 | }
704 | .rInput{
705 |     margin-top: 10px;
706 | }
707 | .replyPepole a{
708 |     color: rgb(3, 144, 226)
709 | }
710 | .toShowReply{
711 |     display: none
712 | }
713 | .replayItem:hover .toShowReply{
714 |     display: inline-block
715 | }
716 | </style>
717 | 


--------------------------------------------------------------------------------