├── static ├── .gitkeep ├── skull.ico ├── skull.png ├── img │ └── loading.png └── json │ └── api.json ├── server ├── routes │ ├── api.js │ ├── users.js │ ├── upload.js │ └── index.js ├── views │ ├── index.jade │ ├── error.jade │ ├── layout.jade │ └── index.html ├── models │ ├── user.js │ ├── massage.js │ ├── content.js │ ├── visitor.js │ └── category.js ├── schemas │ ├── visitors.js │ ├── users.js │ ├── massage.js │ ├── categories.js │ └── contents.js ├── public │ └── stylesheets │ │ └── style.css ├── package.json ├── bin │ └── www └── app.js ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── assets │ ├── logo.png │ ├── images │ │ ├── profil.jpg │ │ ├── space.jpg │ │ ├── face_logo.png │ │ ├── emoji_sprite.png │ │ ├── pic_loading.jpg │ │ ├── profil.edit.jpg │ │ ├── work001-01.jpg │ │ └── banner_bullshit.jpg │ └── apple-icon-180x180.png ├── styles │ ├── lib │ │ ├── bootstrap │ │ │ ├── mixins │ │ │ │ ├── _center-block.scss │ │ │ │ ├── _opacity.scss │ │ │ │ ├── _size.scss │ │ │ │ ├── _text-overflow.scss │ │ │ │ ├── _labels.scss │ │ │ │ ├── _resize.scss │ │ │ │ ├── _progress-bar.scss │ │ │ │ ├── _text-emphasis.scss │ │ │ │ ├── _reset-filter.scss │ │ │ │ ├── _nav-divider.scss │ │ │ │ ├── _background-variant.scss │ │ │ │ ├── _alerts.scss │ │ │ │ ├── _tab-focus.scss │ │ │ │ ├── _nav-vertical-align.scss │ │ │ │ ├── _reset-text.scss │ │ │ │ ├── _border-radius.scss │ │ │ │ ├── _pagination.scss │ │ │ │ ├── _responsive-visibility.scss │ │ │ │ ├── _panels.scss │ │ │ │ ├── _hide-text.scss │ │ │ │ ├── _clearfix.scss │ │ │ │ ├── _list-group.scss │ │ │ │ ├── _table-row.scss │ │ │ │ ├── _image.scss │ │ │ │ ├── _buttons.scss │ │ │ │ ├── _grid-framework.scss │ │ │ │ ├── _forms.scss │ │ │ │ ├── _grid.scss │ │ │ │ └── _gradients.scss │ │ │ ├── _wells.scss │ │ │ ├── _responsive-embed.scss │ │ │ ├── _breadcrumbs.scss │ │ │ ├── _close.scss │ │ │ ├── _component-animations.scss │ │ │ ├── _utilities.scss │ │ │ ├── _thumbnails.scss │ │ │ ├── _pager.scss │ │ │ ├── _mixins.scss │ │ │ ├── _media.scss │ │ │ ├── _jumbotron.scss │ │ │ ├── _labels.scss │ │ │ ├── _badges.scss │ │ │ ├── _code.scss │ │ │ ├── _grid.scss │ │ │ ├── _alerts.scss │ │ │ ├── _progress-bars.scss │ │ │ ├── _pagination.scss │ │ │ ├── _print.scss │ │ │ ├── _tooltip.scss │ │ │ ├── _list-group.scss │ │ │ ├── _scaffolding.scss │ │ │ ├── _popovers.scss │ │ │ ├── _modals.scss │ │ │ ├── _buttons.scss │ │ │ ├── _input-groups.scss │ │ │ └── _responsive-utilities.scss │ │ ├── template │ │ │ ├── icons.scss │ │ │ ├── form.scss │ │ │ ├── carousel.scss │ │ │ ├── type.scss │ │ │ ├── buttons.scss │ │ │ ├── project.scss │ │ │ ├── scaffolding.scss │ │ │ └── navbar.scss │ │ ├── _template.scss │ │ └── _bootstrap.scss │ ├── main.scss │ ├── plus.css │ ├── normalize.min.css │ ├── editor.css │ └── mashup-example.scss ├── components │ ├── admin │ │ ├── public │ │ │ ├── Footer.vue │ │ │ └── NavMenu.vue │ │ ├── index.vue │ │ ├── user │ │ │ └── UserManage.vue │ │ ├── home │ │ │ ├── Clock2.vue │ │ │ └── PieChart.vue │ │ └── article │ │ │ └── CommentManage.vue │ ├── HelloWorld.vue │ ├── client │ │ ├── public │ │ │ ├── Footer.vue │ │ │ ├── LazyImg.vue │ │ │ └── TranslateBar.vue │ │ ├── ContactComponent │ │ │ └── emoji │ │ │ │ ├── emoji.vue │ │ │ │ └── EmojiPanel.vue │ │ ├── ContentComponent │ │ │ ├── comment │ │ │ │ └── children │ │ │ │ │ ├── emoji.vue │ │ │ │ │ └── EmojiPanel.vue │ │ │ └── Video.vue │ │ ├── Home.vue │ │ └── AboutMeComponent │ │ │ └── About.vue │ └── other │ │ ├── Upload1.vue │ │ └── Upload.vue ├── filter │ └── index.js ├── router │ ├── routerGuard.js │ └── index.js ├── locales │ ├── index.js │ ├── zh.json │ └── en.json ├── main.js └── App.vue ├── screenshot ├── snipaste_20200501_172623.jpg ├── snipaste_20200501_172650.jpg ├── snipaste_20200501_172731.jpg ├── snipaste_20200501_172836.jpg ├── snipaste_20200501_173753.jpg └── snipaste_20200501_181017.jpg ├── .editorconfig ├── .babelrc ├── .gitignore ├── .postcssrc.js ├── README.md ├── package.json └── index.html /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /server/routes/api.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/skull.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/static/skull.ico -------------------------------------------------------------------------------- /static/skull.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/static/skull.png -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /static/img/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/static/img/loading.png -------------------------------------------------------------------------------- /src/assets/images/profil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/src/assets/images/profil.jpg -------------------------------------------------------------------------------- /src/assets/images/space.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/src/assets/images/space.jpg -------------------------------------------------------------------------------- /server/views/index.jade: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | h1= title 5 | p Welcome to #{title} 6 | //- div.hi -------------------------------------------------------------------------------- /src/assets/images/face_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/src/assets/images/face_logo.png -------------------------------------------------------------------------------- /src/assets/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/src/assets/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/assets/images/emoji_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/src/assets/images/emoji_sprite.png -------------------------------------------------------------------------------- /src/assets/images/pic_loading.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/src/assets/images/pic_loading.jpg -------------------------------------------------------------------------------- /src/assets/images/profil.edit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/src/assets/images/profil.edit.jpg -------------------------------------------------------------------------------- /src/assets/images/work001-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/src/assets/images/work001-01.jpg -------------------------------------------------------------------------------- /server/views/error.jade: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | h1= message 5 | h2= error.status 6 | pre #{error.stack} 7 | -------------------------------------------------------------------------------- /screenshot/snipaste_20200501_172623.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/screenshot/snipaste_20200501_172623.jpg -------------------------------------------------------------------------------- /screenshot/snipaste_20200501_172650.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/screenshot/snipaste_20200501_172650.jpg -------------------------------------------------------------------------------- /screenshot/snipaste_20200501_172731.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/screenshot/snipaste_20200501_172731.jpg -------------------------------------------------------------------------------- /screenshot/snipaste_20200501_172836.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/screenshot/snipaste_20200501_172836.jpg -------------------------------------------------------------------------------- /screenshot/snipaste_20200501_173753.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/screenshot/snipaste_20200501_173753.jpg -------------------------------------------------------------------------------- /screenshot/snipaste_20200501_181017.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/screenshot/snipaste_20200501_181017.jpg -------------------------------------------------------------------------------- /src/assets/images/banner_bullshit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KKslide/express-miniblog/HEAD/src/assets/images/banner_bullshit.jpg -------------------------------------------------------------------------------- /server/models/user.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | 3 | var userschama = require("../schemas/users"); 4 | 5 | module.exports = mongoose.model("User",userschama); 6 | -------------------------------------------------------------------------------- /server/views/layout.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title= title 5 | link(rel='stylesheet', href='/stylesheets/style.css') 6 | body 7 | block content 8 | -------------------------------------------------------------------------------- /server/models/massage.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | 3 | var msgschama = require("../schemas/massage"); 4 | 5 | module.exports = mongoose.model("Massage", msgschama); -------------------------------------------------------------------------------- /server/models/content.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | 3 | var contentschama = require("../schemas/contents"); 4 | 5 | module.exports = mongoose.model("Content",contentschama); -------------------------------------------------------------------------------- /server/models/visitor.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | 3 | var visitorschema = require('../schemas/visitors'); 4 | 5 | module.exports = mongoose.model("Visitor",visitorschema) -------------------------------------------------------------------------------- /server/models/category.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | 3 | var categoryschama = require("../schemas/categories"); 4 | 5 | module.exports = mongoose.model("Category",categoryschama); -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_center-block.scss: -------------------------------------------------------------------------------- 1 | // Center-align a block level element 2 | 3 | @mixin center-block() { 4 | display: block; 5 | margin-left: auto; 6 | margin-right: auto; 7 | } 8 | -------------------------------------------------------------------------------- /server/schemas/visitors.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | 3 | module.exports = new mongoose.Schema({ 4 | ip: String, 5 | time: { 6 | type: Date, 7 | default: new Date() 8 | } 9 | }) -------------------------------------------------------------------------------- /src/components/admin/public/Footer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_opacity.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: alpha(opacity=$opacity-ie); 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/lib/template/icons.scss: -------------------------------------------------------------------------------- 1 | 2 | .fa-icon{ 3 | color: $gray-base; 4 | width: 32px; 5 | height: 32px; 6 | display: inline-block; 7 | line-height: 32px; 8 | font-size: 15px; 9 | text-align: center; 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height) { 4 | width: $width; 5 | height: $height; 6 | } 7 | 8 | @mixin square($size) { 9 | @include size($size, $size); 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_text-overflow.scss: -------------------------------------------------------------------------------- 1 | // Text overflow 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-overflow() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /server/schemas/users.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | 3 | module.exports = new mongoose.Schema({ 4 | username: String, 5 | password: String, 6 | isadmin:{ 7 | type:Boolean, 8 | default:false 9 | } 10 | }); 11 | 12 | -------------------------------------------------------------------------------- /server/routes/users.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET users listing. */ 5 | router.get('/', function(req, res, next) { 6 | res.send('respond with a resource'); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | // Labels 2 | 3 | @mixin label-variant($color) { 4 | background-color: $color; 5 | 6 | &[href] { 7 | &:hover, 8 | &:focus { 9 | background-color: darken($color, 10%); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | resize: $direction; // Options: horizontal, vertical, both 5 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 6 | } 7 | -------------------------------------------------------------------------------- /server/schemas/massage.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | 3 | module.exports = new mongoose.Schema({ 4 | viewer: String, 5 | subject: String, 6 | massage: String, 7 | addtime: { 8 | type: String, 9 | default: new Date() 10 | } 11 | }); 12 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_progress-bar.scss: -------------------------------------------------------------------------------- 1 | // Progress bars 2 | 3 | @mixin progress-bar-variant($color) { 4 | background-color: $color; 5 | 6 | // Deprecated parent class requirement as of v3.2.0 7 | .progress-striped & { 8 | @include gradient-striped; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /server/node_modules 4 | /server/upload/* 5 | /server/dist 6 | a.txt 7 | /dist/ 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | 12 | # Editor directories and files 13 | .idea 14 | .vscode 15 | *.suo 16 | *.ntvs* 17 | *.njsproj 18 | *.sln 19 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | 3 | // [converter] $parent hack 4 | @mixin text-emphasis-variant($parent, $color) { 5 | #{$parent} { 6 | color: $color; 7 | } 8 | a#{$parent}:hover, 9 | a#{$parent}:focus { 10 | color: darken($color, 10%); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /server/public/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 50px; 3 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 4 | } 5 | 6 | a { 7 | color: #00B7FF; 8 | } 9 | 10 | .hi{ 11 | width:100px; 12 | height: 100px; 13 | background: url('../../upload/upload_3a914860be95f6cc3a8594cef79a29b2'); 14 | } -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_reset-filter.scss: -------------------------------------------------------------------------------- 1 | // Reset filters for IE 2 | // 3 | // When you need to remove a gradient background, do not forget to use this to reset 4 | // the IE filter for IE9 and below. 5 | 6 | @mixin reset-filter() { 7 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_nav-divider.scss: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | @mixin nav-divider($color: #e5e5e5) { 6 | height: 1px; 7 | margin: (($line-height-computed / 2) - 1) 0; 8 | overflow: hidden; 9 | background-color: $color; 10 | } 11 | -------------------------------------------------------------------------------- /server/views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | Hi 11 | 12 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | 3 | // [converter] $parent hack 4 | @mixin bg-variant($parent, $color) { 5 | #{$parent} { 6 | background-color: $color; 7 | } 8 | a#{$parent}:hover, 9 | a#{$parent}:focus { 10 | background-color: darken($color, 10%); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_alerts.scss: -------------------------------------------------------------------------------- 1 | // Alerts 2 | 3 | @mixin alert-variant($background, $border, $text-color) { 4 | background-color: $background; 5 | border-color: $border; 6 | color: $text-color; 7 | 8 | hr { 9 | border-top-color: darken($border, 5%); 10 | } 11 | .alert-link { 12 | color: darken($text-color, 10%); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/styles/lib/template/form.scss: -------------------------------------------------------------------------------- 1 | 2 | .form-control{ 3 | box-shadow: none; 4 | &:focus { 5 | border-color: $gray-base; 6 | outline: 0; 7 | box-shadow: none; 8 | } 9 | } 10 | label{ 11 | font-weight: normal; 12 | } 13 | 14 | textarea{ 15 | max-width: 100%; 16 | } 17 | .address-container{ 18 | @media (max-width: $screen-md) { 19 | margin-top: 20px; 20 | } 21 | } -------------------------------------------------------------------------------- /server/schemas/categories.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | 3 | module.exports = new mongoose.Schema({ 4 | name: String, 5 | addtime: { 6 | type: Date, 7 | default: new Date() 8 | }, 9 | edittime: { 10 | type: Date, 11 | default: new Date() 12 | }, 13 | banner: { 14 | type: String, 15 | default: "" 16 | } 17 | }); -------------------------------------------------------------------------------- /src/styles/lib/_template.scss: -------------------------------------------------------------------------------- 1 | @import "template/_variables.scss"; 2 | 3 | @import "template/scaffolding.scss"; 4 | 5 | @import "template/buttons.scss"; 6 | @import "template/type.scss"; 7 | @import "template/icons.scss"; 8 | 9 | 10 | 11 | @import "template/form.scss"; 12 | @import "template/project.scss"; 13 | @import "template/carousel.scss"; 14 | 15 | 16 | @import "template/navbar.scss"; 17 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_tab-focus.scss: -------------------------------------------------------------------------------- 1 | // WebKit-style focus 2 | 3 | @mixin tab-focus() { 4 | // WebKit-specific. Other browsers will keep their default outline style. 5 | // (Initially tried to also force default via `outline: initial`, 6 | // but that seems to erroneously remove the outline in Firefox altogether.) 7 | outline: 5px auto -webkit-focus-ring-color; 8 | outline-offset: -2px; 9 | } 10 | -------------------------------------------------------------------------------- /src/filter/index.js: -------------------------------------------------------------------------------- 1 | export default function (Vue) { 2 | Vue.filter('date', tplDate => { 3 | let date = new Date(tplDate + ''); 4 | return ` ${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()}:${date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()} `; 5 | }); 6 | }; -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_nav-vertical-align.scss: -------------------------------------------------------------------------------- 1 | // Navbar vertical align 2 | // 3 | // Vertically center elements in the navbar. 4 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. 5 | 6 | @mixin navbar-vertical-align($element-height) { 7 | margin-top: (($navbar-height - $element-height) / 2); 8 | margin-bottom: (($navbar-height - $element-height) / 2); 9 | } 10 | -------------------------------------------------------------------------------- /server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "node ./bin/www" 7 | }, 8 | "dependencies": { 9 | "body-parser": "^1.19.0", 10 | "cookie-parser": "~1.4.4", 11 | "debug": "~2.6.9", 12 | "express": "~4.16.1", 13 | "http-errors": "~1.6.3", 14 | "jade": "~1.11.0", 15 | "mongoose": "^5.6.12", 16 | "morgan": "~1.9.1", 17 | "promise": "^8.0.3", 18 | "qiniu": "^7.2.2" 19 | }, 20 | "devDependencies": { 21 | "formidable": "^1.2.1", 22 | "md5": "^2.2.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text() { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size. 4 | font-style: normal; 5 | font-weight: normal; 6 | letter-spacing: normal; 7 | line-break: auto; 8 | line-height: $line-height-base; 9 | text-align: left; // Fallback for where `start` is not supported 10 | text-align: start; 11 | text-decoration: none; 12 | text-shadow: none; 13 | text-transform: none; 14 | white-space: normal; 15 | word-break: normal; 16 | word-spacing: normal; 17 | word-wrap: normal; 18 | } 19 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Single side border-radius 2 | 3 | @mixin border-top-radius($radius) { 4 | border-top-right-radius: $radius; 5 | border-top-left-radius: $radius; 6 | } 7 | @mixin border-right-radius($radius) { 8 | border-bottom-right-radius: $radius; 9 | border-top-right-radius: $radius; 10 | } 11 | @mixin border-bottom-radius($radius) { 12 | border-bottom-right-radius: $radius; 13 | border-bottom-left-radius: $radius; 14 | } 15 | @mixin border-left-radius($radius) { 16 | border-bottom-left-radius: $radius; 17 | border-top-left-radius: $radius; 18 | } 19 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 19 | 36 | -------------------------------------------------------------------------------- /src/styles/main.scss: -------------------------------------------------------------------------------- 1 | // Imports fonts that you will used in the application or in the template 2 | @import url('https://fonts.googleapis.com/css?family=Roboto:900|Roboto+Mono:300,400,700'); 3 | // @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 4 | @import url("https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); 5 | 6 | // Import all your dependencies 7 | @import "lib/_bootstrap"; 8 | 9 | // Import the base template 10 | @import "lib/_template"; 11 | 12 | // Import your custom SCSS 13 | @import "mashup-example"; 14 | 15 | @import url("./editor.css"); -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 4 | > li { 5 | > a, 6 | > span { 7 | padding: $padding-vertical $padding-horizontal; 8 | font-size: $font-size; 9 | line-height: $line-height; 10 | } 11 | &:first-child { 12 | > a, 13 | > span { 14 | @include border-left-radius($border-radius); 15 | } 16 | } 17 | &:last-child { 18 | > a, 19 | > span { 20 | @include border-right-radius($border-radius); 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_responsive-visibility.scss: -------------------------------------------------------------------------------- 1 | // Responsive utilities 2 | 3 | // 4 | // More easily include all the states for responsive-utilities.less. 5 | // [converter] $parent hack 6 | @mixin responsive-visibility($parent) { 7 | #{$parent} { 8 | display: block !important; 9 | } 10 | table#{$parent} { display: table !important; } 11 | tr#{$parent} { display: table-row !important; } 12 | th#{$parent}, 13 | td#{$parent} { display: table-cell !important; } 14 | } 15 | 16 | // [converter] $parent hack 17 | @mixin responsive-invisibility($parent) { 18 | #{$parent} { 19 | display: none !important; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/client/public/Footer.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_panels.scss: -------------------------------------------------------------------------------- 1 | // Panels 2 | 3 | @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) { 4 | border-color: $border; 5 | 6 | & > .panel-heading { 7 | color: $heading-text-color; 8 | background-color: $heading-bg-color; 9 | border-color: $heading-border; 10 | 11 | + .panel-collapse > .panel-body { 12 | border-top-color: $border; 13 | } 14 | .badge { 15 | color: $heading-bg-color; 16 | background-color: $heading-text-color; 17 | } 18 | } 19 | & > .panel-footer { 20 | + .panel-collapse > .panel-body { 21 | border-bottom-color: $border; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_wells.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Wells 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .well { 8 | min-height: 20px; 9 | padding: 19px; 10 | margin-bottom: 20px; 11 | background-color: $well-bg; 12 | border: 1px solid $well-border; 13 | border-radius: $border-radius-base; 14 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 15 | blockquote { 16 | border-color: #ddd; 17 | border-color: rgba(0,0,0,.15); 18 | } 19 | } 20 | 21 | // Sizes 22 | .well-lg { 23 | padding: 24px; 24 | border-radius: $border-radius-large; 25 | } 26 | .well-sm { 27 | padding: 9px; 28 | border-radius: $border-radius-small; 29 | } 30 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_hide-text.scss: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | // 3 | // Heads up! v3 launched with only `.hide-text()`, but per our pattern for 4 | // mixins being reused as classes with the same name, this doesn't hold up. As 5 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. 6 | // 7 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 8 | 9 | // Deprecated as of v3.0.1 (has been removed in v4) 10 | @mixin hide-text() { 11 | font: 0/0 a; 12 | color: transparent; 13 | text-shadow: none; 14 | background-color: transparent; 15 | border: 0; 16 | } 17 | 18 | // New mixin to use as of v3.0.1 19 | @mixin text-hide() { 20 | @include hide-text; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/client/ContactComponent/emoji/emoji.vue: -------------------------------------------------------------------------------- 1 | 8 | 22 | -------------------------------------------------------------------------------- /src/components/client/ContentComponent/comment/children/emoji.vue: -------------------------------------------------------------------------------- 1 | 8 | 22 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Clearfix 2 | // 3 | // For modern browsers 4 | // 1. The space content is one way to avoid an Opera bug when the 5 | // contenteditable attribute is included anywhere else in the document. 6 | // Otherwise it causes space to appear at the top and bottom of elements 7 | // that are clearfixed. 8 | // 2. The use of `table` rather than `block` is only necessary if using 9 | // `:before` to contain the top-margins of child elements. 10 | // 11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 12 | 13 | @mixin clearfix() { 14 | &:before, 15 | &:after { 16 | content: " "; // 1 17 | display: table; // 2 18 | } 19 | &:after { 20 | clear: both; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_responsive-embed.scss: -------------------------------------------------------------------------------- 1 | // Embeds responsive 2 | // 3 | // Credit: Nicolas Gallagher and SUIT CSS. 4 | 5 | .embed-responsive { 6 | position: relative; 7 | display: block; 8 | height: 0; 9 | padding: 0; 10 | overflow: hidden; 11 | 12 | .embed-responsive-item, 13 | iframe, 14 | embed, 15 | object, 16 | video { 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | bottom: 0; 21 | height: 100%; 22 | width: 100%; 23 | border: 0; 24 | } 25 | } 26 | 27 | // Modifier class for 16:9 aspect ratio 28 | .embed-responsive-16by9 { 29 | padding-bottom: 56.25%; 30 | } 31 | 32 | // Modifier class for 4:3 aspect ratio 33 | .embed-responsive-4by3 { 34 | padding-bottom: 75%; 35 | } 36 | -------------------------------------------------------------------------------- /src/styles/lib/template/carousel.scss: -------------------------------------------------------------------------------- 1 | .carousel-control { 2 | top: 50%; 3 | bottom: initial; 4 | width: 50px; 5 | height: 50px; 6 | margin-top: -25px; 7 | border: 1px solid $gray-base; 8 | background-color:$gray-base; 9 | font-size: 30px; 10 | color: white; 11 | line-height: 44px; 12 | text-shadow: none; 13 | opacity: 1; 14 | 15 | &:hover{ 16 | color: white; 17 | background-color: $gray-base; 18 | opacity: 0.8; 19 | } 20 | &.right, &.left{ 21 | background-image: none; 22 | } 23 | &.right{ 24 | right: -25px; 25 | } 26 | &.left{ 27 | left: -25px; 28 | } 29 | 30 | @media (max-width: $screen-md) { 31 | &.right{ 32 | right: -12px; 33 | } 34 | &.left{ 35 | left: -12px; 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /src/components/admin/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 26 | 27 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | 5 | 6 | .breadcrumb { 7 | padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; 8 | margin-bottom: $line-height-computed; 9 | list-style: none; 10 | background-color: $breadcrumb-bg; 11 | border-radius: $border-radius-base; 12 | 13 | > li { 14 | display: inline-block; 15 | 16 | + li:before { 17 | // [converter] Workaround for https://github.com/sass/libsass/issues/1115 18 | $nbsp: "\00a0"; 19 | content: "#{$breadcrumb-separator}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space 20 | padding: 0 5px; 21 | color: $breadcrumb-color; 22 | } 23 | } 24 | 25 | > .active { 26 | color: $breadcrumb-active-color; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | @mixin list-group-item-variant($state, $background, $color) { 4 | .list-group-item-#{$state} { 5 | color: $color; 6 | background-color: $background; 7 | 8 | // [converter] extracted a&, button& to a.list-group-item-#{$state}, button.list-group-item-#{$state} 9 | } 10 | 11 | a.list-group-item-#{$state}, 12 | button.list-group-item-#{$state} { 13 | color: $color; 14 | 15 | .list-group-item-heading { 16 | color: inherit; 17 | } 18 | 19 | &:hover, 20 | &:focus { 21 | color: $color; 22 | background-color: darken($background, 5%); 23 | } 24 | &.active, 25 | &.active:hover, 26 | &.active:focus { 27 | color: #fff; 28 | background-color: $color; 29 | border-color: $color; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/client/public/LazyImg.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 26 | 27 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_table-row.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | @mixin table-row-variant($state, $background) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table > thead > tr, 7 | .table > tbody > tr, 8 | .table > tfoot > tr { 9 | > td.#{$state}, 10 | > th.#{$state}, 11 | &.#{$state} > td, 12 | &.#{$state} > th { 13 | background-color: $background; 14 | } 15 | } 16 | 17 | // Hover states for `.table-hover` 18 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 19 | .table-hover > tbody > tr { 20 | > td.#{$state}:hover, 21 | > th.#{$state}:hover, 22 | &.#{$state}:hover > td, 23 | &:hover > .#{$state}, 24 | &.#{$state}:hover > th { 25 | background-color: darken($background, 5%); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/router/routerGuard.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export default function (to, from, next) { 4 | if (to.path.indexOf('login') != -1 || to.path.indexOf('admin') != -1) { 5 | axios.get('/admin/isadmin') 6 | .then(res => { 7 | let islogin = res.data.islogin == 'logined'; 8 | if (to.name == 'login') { // 如果是登陆页 那就上 9 | if (islogin) { 10 | next('/admin') 11 | } else { 12 | next(); 13 | } 14 | } 15 | if (to.name != 'login') { 16 | if (islogin) { 17 | next() 18 | } else { 19 | next('/login') 20 | } 21 | } 22 | }) 23 | } else { 24 | next() 25 | } 26 | } -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Close icons 3 | // -------------------------------------------------- 4 | 5 | 6 | .close { 7 | float: right; 8 | font-size: ($font-size-base * 1.5); 9 | font-weight: $close-font-weight; 10 | line-height: 1; 11 | color: $close-color; 12 | text-shadow: $close-text-shadow; 13 | @include opacity(.2); 14 | 15 | &:hover, 16 | &:focus { 17 | color: $close-color; 18 | text-decoration: none; 19 | cursor: pointer; 20 | @include opacity(.5); 21 | } 22 | 23 | // [converter] extracted button& to button.close 24 | } 25 | 26 | // Additional properties for button version 27 | // iOS requires the button element instead of an anchor tag. 28 | // If you want the anchor version, it requires `href="#"`. 29 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 30 | button.close { 31 | padding: 0; 32 | cursor: pointer; 33 | background: transparent; 34 | border: 0; 35 | -webkit-appearance: none; 36 | } 37 | -------------------------------------------------------------------------------- /server/schemas/contents.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | 3 | module.exports = new mongoose.Schema({ 4 | title: String, 5 | category: { 6 | type: mongoose.Schema.Types.ObjectId, 7 | ref: "Category" 8 | }, 9 | composition: { 10 | type: String, 11 | default: "" 12 | }, 13 | description: { 14 | type: String, 15 | default: "" 16 | }, 17 | video_src: { 18 | type: String, 19 | default: "" 20 | }, 21 | minpic_url: { 22 | type: String, 23 | default: "" 24 | }, 25 | user: { 26 | type: mongoose.Schema.Types.ObjectId, 27 | ref: "User" 28 | }, 29 | num: { 30 | type: Number, 31 | dafault: 0 32 | }, 33 | addtime: { 34 | type: Date, 35 | default: new Date() 36 | }, 37 | comment: { 38 | type: Array, 39 | default: [] 40 | }, 41 | isShow: { // 是否显示 42 | type: Number, 43 | default: 1 44 | } 45 | }); -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_component-animations.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component animations 3 | // -------------------------------------------------- 4 | 5 | // Heads up! 6 | // 7 | // We don't use the `.opacity()` mixin here since it causes a bug with text 8 | // fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. 9 | 10 | .fade { 11 | opacity: 0; 12 | @include transition(opacity .15s linear); 13 | &.in { 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .collapse { 19 | display: none; 20 | 21 | &.in { display: block; } 22 | // [converter] extracted tr&.in to tr.collapse.in 23 | // [converter] extracted tbody&.in to tbody.collapse.in 24 | } 25 | 26 | tr.collapse.in { display: table-row; } 27 | 28 | tbody.collapse.in { display: table-row-group; } 29 | 30 | .collapsing { 31 | position: relative; 32 | height: 0; 33 | overflow: hidden; 34 | @include transition-property(height, visibility); 35 | @include transition-duration(.35s); 36 | @include transition-timing-function(ease); 37 | } 38 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_utilities.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Floats 7 | // ------------------------- 8 | 9 | .clearfix { 10 | @include clearfix; 11 | } 12 | .center-block { 13 | @include center-block; 14 | } 15 | .pull-right { 16 | float: right !important; 17 | } 18 | .pull-left { 19 | float: left !important; 20 | } 21 | 22 | 23 | // Toggling content 24 | // ------------------------- 25 | 26 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 27 | .hide { 28 | display: none !important; 29 | } 30 | .show { 31 | display: block !important; 32 | } 33 | .invisible { 34 | visibility: hidden; 35 | } 36 | .text-hide { 37 | @include text-hide; 38 | } 39 | 40 | 41 | // Hide from screenreaders and browsers 42 | // 43 | // Credit: HTML5 Boilerplate 44 | 45 | .hidden { 46 | display: none !important; 47 | } 48 | 49 | 50 | // For Affix plugin 51 | // ------------------------- 52 | 53 | .affix { 54 | position: fixed; 55 | } 56 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_thumbnails.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Thumbnails 3 | // -------------------------------------------------- 4 | 5 | 6 | // Mixin and adjust the regular image class 7 | .thumbnail { 8 | display: block; 9 | padding: $thumbnail-padding; 10 | margin-bottom: $line-height-computed; 11 | line-height: $line-height-base; 12 | background-color: $thumbnail-bg; 13 | border: 1px solid $thumbnail-border; 14 | border-radius: $thumbnail-border-radius; 15 | @include transition(border .2s ease-in-out); 16 | 17 | > img, 18 | a > img { 19 | @include img-responsive; 20 | margin-left: auto; 21 | margin-right: auto; 22 | } 23 | 24 | // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active 25 | 26 | // Image captions 27 | .caption { 28 | padding: $thumbnail-caption-padding; 29 | color: $thumbnail-caption-color; 30 | } 31 | } 32 | 33 | // Add a hover state for linked versions only 34 | a.thumbnail:hover, 35 | a.thumbnail:focus, 36 | a.thumbnail.active { 37 | border-color: $link-color; 38 | } 39 | -------------------------------------------------------------------------------- /src/locales/index.js: -------------------------------------------------------------------------------- 1 | // import Vue from 'vue' 2 | // import VueI18n from 'vue-i18n' 3 | 4 | Vue.use(VueI18n) 5 | 6 | const DEFAULT_LANG = 'en' // 默认语言为英文 7 | const LOCALE_KEY = 'localeLanguage' 8 | 9 | const locales = { 10 | 'zh': require('./zh.json'), 11 | 'en': require('./en.json'), 12 | } 13 | 14 | const i18n = new VueI18n({ 15 | locale: DEFAULT_LANG, 16 | messages: locales, 17 | }) 18 | 19 | export const setup = lang => { // 中英切换函数 20 | if (lang === undefined) { 21 | lang = window.localStorage.getItem(LOCALE_KEY) 22 | if (locales[lang] === undefined) { 23 | lang = DEFAULT_LANG 24 | } 25 | } 26 | window.localStorage.setItem(LOCALE_KEY, lang) 27 | 28 | Object.keys(locales).forEach(lang => { 29 | document.body.classList.remove(`lang-${lang}`) 30 | }) 31 | document.body.classList.add(`lang-${lang}`) 32 | document.body.setAttribute('lang', lang) 33 | 34 | Vue.config.lang = lang 35 | i18n.locale = lang 36 | } 37 | 38 | setup() 39 | window.i18n = i18n // 将插件挂载在window对象下以便全局引用 40 | window.setup = setup 41 | export default i18n -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_pager.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pager pagination 3 | // -------------------------------------------------- 4 | 5 | 6 | .pager { 7 | padding-left: 0; 8 | margin: $line-height-computed 0; 9 | list-style: none; 10 | text-align: center; 11 | @include clearfix; 12 | li { 13 | display: inline; 14 | > a, 15 | > span { 16 | display: inline-block; 17 | padding: 5px 14px; 18 | background-color: $pager-bg; 19 | border: 1px solid $pager-border; 20 | border-radius: $pager-border-radius; 21 | } 22 | 23 | > a:hover, 24 | > a:focus { 25 | text-decoration: none; 26 | background-color: $pager-hover-bg; 27 | } 28 | } 29 | 30 | .next { 31 | > a, 32 | > span { 33 | float: right; 34 | } 35 | } 36 | 37 | .previous { 38 | > a, 39 | > span { 40 | float: left; 41 | } 42 | } 43 | 44 | .disabled { 45 | > a, 46 | > a:hover, 47 | > a:focus, 48 | > span { 49 | color: $pager-disabled-color; 50 | background-color: $pager-bg; 51 | cursor: $cursor-disabled; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/styles/lib/template/type.scss: -------------------------------------------------------------------------------- 1 | body, p{ 2 | font-weight: 300; 3 | letter-spacing: 0.8px; 4 | line-height: 25px; 5 | } 6 | p{ 7 | margin: 0 0 15px; 8 | } 9 | h2, .h2{ 10 | position: relative; 11 | 12 | display: inline-block; 13 | &:after,&:before{ 14 | content: ""; 15 | position: absolute; 16 | height: 100%; 17 | background-color: $gray-base; 18 | width: 1px; 19 | } 20 | &:before{ 21 | left: 0; 22 | } 23 | &:after{ 24 | right: 0; 25 | } 26 | 27 | 28 | @media (min-width: $screen-md) { 29 | padding: 0 30px; 30 | } 31 | 32 | @media (max-width: $screen-md) { 33 | &:after,&:before{ 34 | display: none; 35 | } 36 | 37 | } 38 | 39 | } 40 | h1, .h1, h2, .h2, h3, .h3 { 41 | margin-bottom: 20px; 42 | } 43 | 44 | blockquote{ 45 | font-family: $headings-font-family; 46 | border:none; 47 | font-weight: 700; 48 | padding-left: 0; 49 | padding-right: 0; 50 | font-size: 2.81em; 51 | line-height: 40px; 52 | p{ 53 | font-weight: 700; 54 | line-height: 40px; 55 | } 56 | small, .small{ 57 | color: black; 58 | font-weight: normal; 59 | font-size: 50%; 60 | 61 | } 62 | } -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------------------------------- 3 | 4 | // Utilities 5 | @import "mixins/hide-text"; 6 | @import "mixins/opacity"; 7 | @import "mixins/image"; 8 | @import "mixins/labels"; 9 | @import "mixins/reset-filter"; 10 | @import "mixins/resize"; 11 | @import "mixins/responsive-visibility"; 12 | @import "mixins/size"; 13 | @import "mixins/tab-focus"; 14 | @import "mixins/reset-text"; 15 | @import "mixins/text-emphasis"; 16 | @import "mixins/text-overflow"; 17 | @import "mixins/vendor-prefixes"; 18 | 19 | // Components 20 | @import "mixins/alerts"; 21 | @import "mixins/buttons"; 22 | @import "mixins/panels"; 23 | @import "mixins/pagination"; 24 | @import "mixins/list-group"; 25 | @import "mixins/nav-divider"; 26 | @import "mixins/forms"; 27 | @import "mixins/progress-bar"; 28 | @import "mixins/table-row"; 29 | 30 | // Skins 31 | @import "mixins/background-variant"; 32 | @import "mixins/border-radius"; 33 | @import "mixins/gradients"; 34 | 35 | // Layout 36 | @import "mixins/clearfix"; 37 | @import "mixins/center-block"; 38 | @import "mixins/nav-vertical-align"; 39 | @import "mixins/grid-framework"; 40 | @import "mixins/grid"; 41 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_media.scss: -------------------------------------------------------------------------------- 1 | .media { 2 | // Proper spacing between instances of .media 3 | margin-top: 15px; 4 | 5 | &:first-child { 6 | margin-top: 0; 7 | } 8 | } 9 | 10 | .media, 11 | .media-body { 12 | zoom: 1; 13 | overflow: hidden; 14 | } 15 | 16 | .media-body { 17 | width: 10000px; 18 | } 19 | 20 | .media-object { 21 | display: block; 22 | 23 | // Fix collapse in webkit from max-width: 100% and display: table-cell. 24 | &.img-thumbnail { 25 | max-width: none; 26 | } 27 | } 28 | 29 | .media-right, 30 | .media > .pull-right { 31 | padding-left: 10px; 32 | } 33 | 34 | .media-left, 35 | .media > .pull-left { 36 | padding-right: 10px; 37 | } 38 | 39 | .media-left, 40 | .media-right, 41 | .media-body { 42 | display: table-cell; 43 | vertical-align: top; 44 | } 45 | 46 | .media-middle { 47 | vertical-align: middle; 48 | } 49 | 50 | .media-bottom { 51 | vertical-align: bottom; 52 | } 53 | 54 | // Reset margins on headings for tighter default spacing 55 | .media-heading { 56 | margin-top: 0; 57 | margin-bottom: 5px; 58 | } 59 | 60 | // Media list variation 61 | // 62 | // Undo default ul/ol styles 63 | .media-list { 64 | padding-left: 0; 65 | list-style: none; 66 | } 67 | -------------------------------------------------------------------------------- /src/components/admin/user/UserManage.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 42 | 43 | -------------------------------------------------------------------------------- /src/styles/lib/template/buttons.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .btn{ 4 | @include transition(all .2s linear); 5 | } 6 | 7 | .btn-default{ 8 | &:hover,&:focus{ 9 | color: #FFF; 10 | background-color: $gray-base; 11 | border-color: $gray-base;; 12 | } 13 | } 14 | .btn-primary{ 15 | &:hover,&:focus{ 16 | color: #FFF; 17 | border-color: $btn-primary-color; 18 | background-color: $btn-primary-color; 19 | } 20 | } 21 | 22 | .btn-info{ 23 | &:hover,&:focus{ 24 | color: #FFF; 25 | border-color: $btn-info-color; 26 | background-color: $btn-info-color; 27 | } 28 | } 29 | 30 | .btn-success{ 31 | &:hover,&:focus{ 32 | color: #FFF; 33 | border-color: $btn-success-color; 34 | background-color: $btn-success-color; 35 | } 36 | } 37 | 38 | .btn-danger{ 39 | &:hover,&:focus{ 40 | color: #FFF; 41 | border-color: $btn-danger-color; 42 | background-color: $btn-danger-color; 43 | } 44 | } 45 | 46 | .btn-warning{ 47 | &:hover,&:focus{ 48 | color: #FFF; 49 | border-color: $btn-warning-color; 50 | background-color: $btn-warning-color; 51 | 52 | } 53 | } 54 | 55 | // .btn-default{ 56 | // background-color: transparent; 57 | // &:hover{ 58 | // background-color: $brand-primary; 59 | // color: white; 60 | // border-color: $brand-primary; 61 | // } 62 | // } 63 | 64 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | @mixin img-responsive($display: block) { 10 | display: $display; 11 | max-width: 100%; // Part 1: Set a maximum relative to the parent 12 | height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 13 | } 14 | 15 | 16 | // Retina image 17 | // 18 | // Short retina mixin for setting background-image and -size. Note that the 19 | // spelling of `min--moz-device-pixel-ratio` is intentional. 20 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { 21 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}")); 22 | 23 | @media 24 | only screen and (-webkit-min-device-pixel-ratio: 2), 25 | only screen and ( min--moz-device-pixel-ratio: 2), 26 | only screen and ( -o-min-device-pixel-ratio: 2/1), 27 | only screen and ( min-device-pixel-ratio: 2), 28 | only screen and ( min-resolution: 192dpi), 29 | only screen and ( min-resolution: 2dppx) { 30 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}")); 31 | background-size: $width-1x $height-1x; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Jumbotron 3 | // -------------------------------------------------- 4 | 5 | 6 | .jumbotron { 7 | padding-top: $jumbotron-padding; 8 | padding-bottom: $jumbotron-padding; 9 | margin-bottom: $jumbotron-padding; 10 | color: $jumbotron-color; 11 | background-color: $jumbotron-bg; 12 | 13 | h1, 14 | .h1 { 15 | color: $jumbotron-heading-color; 16 | } 17 | 18 | p { 19 | margin-bottom: ($jumbotron-padding / 2); 20 | font-size: $jumbotron-font-size; 21 | font-weight: 200; 22 | } 23 | 24 | > hr { 25 | border-top-color: darken($jumbotron-bg, 10%); 26 | } 27 | 28 | .container &, 29 | .container-fluid & { 30 | border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container 31 | padding-left: ($grid-gutter-width / 2); 32 | padding-right: ($grid-gutter-width / 2); 33 | } 34 | 35 | .container { 36 | max-width: 100%; 37 | } 38 | 39 | @media screen and (min-width: $screen-sm-min) { 40 | padding-top: ($jumbotron-padding * 1.6); 41 | padding-bottom: ($jumbotron-padding * 1.6); 42 | 43 | .container &, 44 | .container-fluid & { 45 | padding-left: ($jumbotron-padding * 2); 46 | padding-right: ($jumbotron-padding * 2); 47 | } 48 | 49 | h1, 50 | .h1 { 51 | font-size: $jumbotron-heading-font-size; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // -------------------------------------------------- 4 | 5 | .label { 6 | display: inline; 7 | padding: .2em .6em .3em; 8 | font-size: 75%; 9 | font-weight: bold; 10 | line-height: 1; 11 | color: $label-color; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | border-radius: .25em; 16 | 17 | // [converter] extracted a& to a.label 18 | 19 | // Empty labels collapse automatically (not available in IE8) 20 | &:empty { 21 | display: none; 22 | } 23 | 24 | // Quick fix for labels in buttons 25 | .btn & { 26 | position: relative; 27 | top: -1px; 28 | } 29 | } 30 | 31 | // Add hover effects, but only for links 32 | a.label { 33 | &:hover, 34 | &:focus { 35 | color: $label-link-hover-color; 36 | text-decoration: none; 37 | cursor: pointer; 38 | } 39 | } 40 | 41 | // Colors 42 | // Contextual variations (linked labels get darker on :hover) 43 | 44 | .label-default { 45 | @include label-variant($label-default-bg); 46 | } 47 | 48 | .label-primary { 49 | @include label-variant($label-primary-bg); 50 | } 51 | 52 | .label-success { 53 | @include label-variant($label-success-bg); 54 | } 55 | 56 | .label-info { 57 | @include label-variant($label-info-bg); 58 | } 59 | 60 | .label-warning { 61 | @include label-variant($label-warning-bg); 62 | } 63 | 64 | .label-danger { 65 | @include label-variant($label-danger-bg); 66 | } 67 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_badges.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .badge { 8 | display: inline-block; 9 | min-width: 10px; 10 | padding: 3px 7px; 11 | font-size: $font-size-small; 12 | font-weight: $badge-font-weight; 13 | color: $badge-color; 14 | line-height: $badge-line-height; 15 | vertical-align: middle; 16 | white-space: nowrap; 17 | text-align: center; 18 | background-color: $badge-bg; 19 | border-radius: $badge-border-radius; 20 | 21 | // Empty badges collapse automatically (not available in IE8) 22 | &:empty { 23 | display: none; 24 | } 25 | 26 | // Quick fix for badges in buttons 27 | .btn & { 28 | position: relative; 29 | top: -1px; 30 | } 31 | 32 | .btn-xs &, 33 | .btn-group-xs > .btn & { 34 | top: 0; 35 | padding: 1px 5px; 36 | } 37 | 38 | // [converter] extracted a& to a.badge 39 | 40 | // Account for badges in navs 41 | .list-group-item.active > &, 42 | .nav-pills > .active > a > & { 43 | color: $badge-active-color; 44 | background-color: $badge-active-bg; 45 | } 46 | 47 | .list-group-item > & { 48 | float: right; 49 | } 50 | 51 | .list-group-item > & + & { 52 | margin-right: 5px; 53 | } 54 | 55 | .nav-pills > li > a > & { 56 | margin-left: 3px; 57 | } 58 | } 59 | 60 | // Hover state, but only for links 61 | a.badge { 62 | &:hover, 63 | &:focus { 64 | color: $badge-link-hover-color; 65 | text-decoration: none; 66 | cursor: pointer; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/components/client/public/TranslateBar.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 38 | 39 | -------------------------------------------------------------------------------- /src/styles/plus.css: -------------------------------------------------------------------------------- 1 | /* 重新elementUI的部分样式 */ 2 | 3 | /* nav去掉底部白色边框 */ 4 | .el-menu.el-menu--horizontal{ 5 | border-bottom: none; 6 | } 7 | .el-drawer__body { 8 | overflow-y: scroll !important; 9 | } 10 | 11 | .el-upload__input { 12 | display: none !important; 13 | } 14 | 15 | .avatar-uploader .el-upload.el-upload--picture-card { 16 | width: 148px; 17 | height: 96px; 18 | line-height: 96px; 19 | } 20 | 21 | .el-upload-list--picture-card .el-upload-list__item { 22 | width: 148px; 23 | height: 96px; 24 | /* line-height: 96px; */ 25 | } 26 | 27 | .noshow .el-upload--picture-card { 28 | display: none; 29 | } 30 | 31 | /* element上传组件 */ 32 | .avatar-uploader .el-upload { 33 | /* border: 1px dashed #d9d9d9; 34 | border-radius: 6px; 35 | cursor: pointer; */ 36 | position: relative; 37 | /* overflow: hidden; */ 38 | } 39 | 40 | /* table 单元格样式重写 - 超出设置省略号 */ 41 | .cell_nowrap>div.cell { 42 | white-space: nowrap; 43 | } 44 | .cell_content>div.cell{ 45 | display: -webkit-box; 46 | -webkit-line-clamp: 3; 47 | -webkit-box-orient: vertical; 48 | overflow: hidden; 49 | } 50 | 51 | /* tabel 单元格 - 按钮控件不换行 */ 52 | .btn_flex>div.cell { 53 | display: flex; 54 | justify-content: space-around; 55 | } 56 | 57 | div.cell>p { 58 | margin-bottom: 0; 59 | } 60 | 61 | /* 留言管理面板 - disabled样式修改 */ 62 | #massage_list .disabled input { 63 | color: #333; 64 | cursor: default; 65 | } 66 | 67 | /* 评论详情的input去掉margin */ 68 | #comment_detail .el-form-item__content{ 69 | margin: 0 !important; 70 | } 71 | 72 | #comment_detail .content_detail input{ 73 | color:#333 !important; 74 | cursor: default !important; 75 | } -------------------------------------------------------------------------------- /src/styles/lib/template/project.scss: -------------------------------------------------------------------------------- 1 | .card-container{ 2 | background-color: white; 3 | padding: 2rem 5rem; 4 | position: relative; 5 | // width: 80%; 6 | width: 100%; 7 | // margin: -10em auto 20px; 8 | margin: 0 auto; 9 | 10 | @media (max-width: $screen-md) { 11 | padding: 2rem 0; 12 | margin: 0 auto; // 改为不向上顶 13 | // margin-top: -5em; 14 | width: 100%; 15 | } 16 | // 手机端的设置 17 | @media (max-width: $screen-xs) { 18 | padding: 2rem 0; 19 | margin-top: 0; 20 | width: 100%; 21 | p.blog_info{ 22 | text-align: left !important; 23 | } 24 | } 25 | &.card-container-lg{ 26 | transition: opacity .3s,bottom .3s; 27 | @media (max-width: $screen-md) { 28 | width: 95%; 29 | padding: 2rem 3em; 30 | margin-top: -4em; 31 | } 32 | @media (min-width: $screen-md) { 33 | // width: 80%; 34 | padding: 2rem 3em; 35 | margin-top: -10em; 36 | } 37 | } 38 | } 39 | 40 | .black-image-project-hover{ 41 | display: block; 42 | i:hover ~img{ 43 | filter: none; 44 | } 45 | img{ 46 | -webkit-filter: contrast(200%) grayscale(100%); /* Safari */ 47 | filter: contrast(200%) grayscale(100%); 48 | @include transition(all .1s linear); 49 | &:hover{ 50 | filter: none; 51 | } 52 | @media (max-width: $screen-md) { 53 | filter: none; 54 | } 55 | } 56 | } 57 | .black-image-project-hover:hover ~.card-container-lg{ 58 | bottom: 0; 59 | opacity: 0; 60 | } 61 | 62 | .projects-carousel{ 63 | @media (max-width: $screen-sm) { 64 | .carousel-control{ 65 | display: none; 66 | } 67 | .carousel-inner > .item{ 68 | display: block; 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_code.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and block) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | kbd, 9 | pre, 10 | samp { 11 | font-family: $font-family-monospace; 12 | } 13 | 14 | // Inline code 15 | code { 16 | padding: 2px 4px; 17 | font-size: 90%; 18 | color: $code-color; 19 | background-color: $code-bg; 20 | border-radius: $border-radius-base; 21 | } 22 | 23 | // User input typically entered via keyboard 24 | kbd { 25 | padding: 2px 4px; 26 | font-size: 90%; 27 | color: $kbd-color; 28 | background-color: $kbd-bg; 29 | border-radius: $border-radius-small; 30 | box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); 31 | 32 | kbd { 33 | padding: 0; 34 | font-size: 100%; 35 | font-weight: bold; 36 | box-shadow: none; 37 | } 38 | } 39 | 40 | // Blocks of code 41 | pre { 42 | display: block; 43 | padding: (($line-height-computed - 1) / 2); 44 | margin: 0 0 ($line-height-computed / 2); 45 | font-size: ($font-size-base - 1); // 14px to 13px 46 | line-height: $line-height-base; 47 | word-break: break-all; 48 | word-wrap: break-word; 49 | color: $pre-color; 50 | background-color: $pre-bg; 51 | border: 1px solid $pre-border-color; 52 | border-radius: $border-radius-base; 53 | 54 | // Account for some code outputs that place code tags in pre tags 55 | code { 56 | padding: 0; 57 | font-size: inherit; 58 | color: inherit; 59 | white-space: pre-wrap; 60 | background-color: transparent; 61 | border-radius: 0; 62 | } 63 | } 64 | 65 | // Enable scrollable blocks of code 66 | .pre-scrollable { 67 | max-height: $pre-scrollable-max-height; 68 | overflow-y: scroll; 69 | } 70 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Button variants 2 | // 3 | // Easily pump out default styles, as well as :hover, :focus, :active, 4 | // and disabled options for all buttons 5 | 6 | @mixin button-variant($color, $background, $border) { 7 | color: $color; 8 | background-color: $background; 9 | border-color: $border; 10 | 11 | &:focus, 12 | &.focus { 13 | color: $color; 14 | background-color: darken($background, 10%); 15 | border-color: darken($border, 25%); 16 | } 17 | &:hover { 18 | color: $color; 19 | background-color: darken($background, 10%); 20 | border-color: darken($border, 12%); 21 | } 22 | &:active, 23 | &.active, 24 | .open > &.dropdown-toggle { 25 | color: $color; 26 | background-color: darken($background, 10%); 27 | border-color: darken($border, 12%); 28 | 29 | &:hover, 30 | &:focus, 31 | &.focus { 32 | color: $color; 33 | background-color: darken($background, 17%); 34 | border-color: darken($border, 25%); 35 | } 36 | } 37 | &:active, 38 | &.active, 39 | .open > &.dropdown-toggle { 40 | background-image: none; 41 | } 42 | &.disabled, 43 | &[disabled], 44 | fieldset[disabled] & { 45 | &:hover, 46 | &:focus, 47 | &.focus { 48 | background-color: $background; 49 | border-color: $border; 50 | } 51 | } 52 | 53 | .badge { 54 | color: $background; 55 | background-color: $color; 56 | } 57 | } 58 | 59 | // Button sizes 60 | @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 61 | padding: $padding-vertical $padding-horizontal; 62 | font-size: $font-size; 63 | line-height: $line-height; 64 | border-radius: $border-radius; 65 | } 66 | -------------------------------------------------------------------------------- /src/styles/lib/_bootstrap.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.3.7 (http://getbootstrap.com) 3 | * Copyright 2011-2016 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | 7 | // Core variables and mixins 8 | // @import "bootstrap/variables"; 9 | @import "template/_variables"; 10 | @import "bootstrap/mixins"; 11 | 12 | // Reset and dependencies 13 | @import "bootstrap/normalize"; 14 | @import "bootstrap/print"; 15 | // @import "bootstrap/glyphicons"; 16 | 17 | // Core CSS 18 | @import "bootstrap/scaffolding"; 19 | @import "bootstrap/type"; 20 | @import "bootstrap/code"; 21 | @import "bootstrap/grid"; 22 | @import "bootstrap/tables"; 23 | @import "bootstrap/forms"; 24 | @import "bootstrap/buttons"; 25 | 26 | // Components 27 | @import "bootstrap/component-animations"; 28 | @import "bootstrap/dropdowns"; 29 | @import "bootstrap/button-groups"; 30 | @import "bootstrap/input-groups"; 31 | @import "bootstrap/navs"; 32 | @import "bootstrap/navbar"; 33 | // @import "bootstrap/breadcrumbs"; 34 | // @import "bootstrap/pagination"; 35 | // @import "bootstrap/pager"; 36 | @import "bootstrap/labels"; 37 | @import "bootstrap/badges"; 38 | // @import "bootstrap/jumbotron"; 39 | // @import "bootstrap/thumbnails"; 40 | @import "bootstrap/alerts"; 41 | // @import "bootstrap/progress-bars"; 42 | // @import "bootstrap/media"; 43 | // @import "bootstrap/list-group"; 44 | // @import "bootstrap/panels"; 45 | @import "bootstrap/responsive-embed"; 46 | // @import "bootstrap/wells"; 47 | @import "bootstrap/close"; 48 | 49 | // Components w/ JavaScript 50 | // @import "bootstrap/modals"; 51 | // @import "bootstrap/tooltip"; 52 | // @import "bootstrap/popovers"; 53 | @import "bootstrap/carousel"; 54 | 55 | // Utility classes 56 | @import "bootstrap/utilities"; 57 | @import "bootstrap/responsive-utilities"; 58 | -------------------------------------------------------------------------------- /src/styles/normalize.min.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} 2 | /*# sourceMappingURL=normalize.min.css.map */ -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | 6 | // Container widths 7 | // 8 | // Set the container width, and override it for fixed navbars in media queries. 9 | 10 | .container { 11 | @include container-fixed; 12 | 13 | @media (min-width: $screen-sm-min) { 14 | width: $container-sm; 15 | } 16 | @media (min-width: $screen-md-min) { 17 | width: $container-md; 18 | } 19 | @media (min-width: $screen-lg-min) { 20 | width: $container-lg; 21 | } 22 | } 23 | 24 | 25 | // Fluid container 26 | // 27 | // Utilizes the mixin meant for fixed width containers, but without any defined 28 | // width for fluid, full width layouts. 29 | 30 | .container-fluid { 31 | @include container-fixed; 32 | } 33 | 34 | 35 | // Row 36 | // 37 | // Rows contain and clear the floats of your columns. 38 | 39 | .row { 40 | @include make-row; 41 | } 42 | 43 | 44 | // Columns 45 | // 46 | // Common styles for small and large grid columns 47 | 48 | @include make-grid-columns; 49 | 50 | 51 | // Extra small grid 52 | // 53 | // Columns, offsets, pushes, and pulls for extra small devices like 54 | // smartphones. 55 | 56 | @include make-grid(xs); 57 | 58 | 59 | // Small grid 60 | // 61 | // Columns, offsets, pushes, and pulls for the small device range, from phones 62 | // to tablets. 63 | 64 | @media (min-width: $screen-sm-min) { 65 | @include make-grid(sm); 66 | } 67 | 68 | 69 | // Medium grid 70 | // 71 | // Columns, offsets, pushes, and pulls for the desktop device range. 72 | 73 | @media (min-width: $screen-md-min) { 74 | @include make-grid(md); 75 | } 76 | 77 | 78 | // Large grid 79 | // 80 | // Columns, offsets, pushes, and pulls for the large desktop device range. 81 | 82 | @media (min-width: $screen-lg-min) { 83 | @include make-grid(lg); 84 | } 85 | -------------------------------------------------------------------------------- /src/styles/lib/template/scaffolding.scss: -------------------------------------------------------------------------------- 1 | #site-border-top, #site-border-bottom, #site-border-left, #site-border-right { 2 | background: $gray-base; 3 | position: fixed; 4 | z-index: 1; 5 | } 6 | #site-border-left, #site-border-right { 7 | top: 0; bottom: 0; 8 | width: 10px; 9 | } 10 | #site-border-left { left: 0; } 11 | #site-border-right { right: 0; } 12 | 13 | #site-border-top, #site-border-bottom { 14 | left: 0; right: 0; 15 | height: 10px; 16 | } 17 | #site-border-top { top: 0; } 18 | #site-border-bottom { bottom: 0; } 19 | 20 | 21 | body{ 22 | padding: 0 10px; 23 | min-height: 100vh; 24 | &.minimal{ 25 | border:none; 26 | padding: 0; 27 | } 28 | } 29 | 30 | .hero-full-container{ 31 | height: 100vh; 32 | 33 | h1{ 34 | font-family: "Roboto", Helvetica, Arial, sans-serif; 35 | font-weight: 900; 36 | } 37 | .hero-full-wrapper{ 38 | display: table; 39 | width: 100%; 40 | height: 100vh; 41 | min-height: 100vh; 42 | .text-content{ 43 | vertical-align: middle; 44 | display: table-cell; 45 | 46 | } 47 | } 48 | } 49 | 50 | .white-text-container{ 51 | h1,h2,h3,h4,h5, p{ 52 | text-shadow: 0 1px 3px $gray-base; 53 | color: white; 54 | } 55 | a{ 56 | color: white; 57 | } 58 | } 59 | 60 | .section-container-spacer{ 61 | margin-bottom: 30px; 62 | @media (min-width: $screen-lg) { 63 | margin-bottom: 40px; 64 | } 65 | } 66 | 67 | .section-container{ 68 | padding: 80px 0; 69 | @media (min-width: $screen-lg) { 70 | padding: 80px 0; 71 | } 72 | &.only-container{ 73 | min-height: 84vh; 74 | } 75 | @media (max-width: $screen-sm) { 76 | &:nth-of-type(1) { 77 | padding-top: 30px; 78 | } 79 | } 80 | } 81 | .background-image-container{ 82 | background-size: cover; 83 | background-repeat: no-repeat; 84 | background-position: top center; 85 | } 86 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_alerts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // ------------------------- 8 | 9 | .alert { 10 | padding: $alert-padding; 11 | margin-bottom: $line-height-computed; 12 | border: 1px solid transparent; 13 | border-radius: $alert-border-radius; 14 | 15 | // Headings for larger alerts 16 | h4 { 17 | margin-top: 0; 18 | // Specified for the h4 to prevent conflicts of changing $headings-color 19 | color: inherit; 20 | } 21 | 22 | // Provide class for links that match alerts 23 | .alert-link { 24 | font-weight: $alert-link-font-weight; 25 | } 26 | 27 | // Improve alignment and spacing of inner content 28 | > p, 29 | > ul { 30 | margin-bottom: 0; 31 | } 32 | 33 | > p + p { 34 | margin-top: 5px; 35 | } 36 | } 37 | 38 | // Dismissible alerts 39 | // 40 | // Expand the right padding and account for the close button's positioning. 41 | 42 | .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. 43 | .alert-dismissible { 44 | padding-right: ($alert-padding + 20); 45 | 46 | // Adjust close link position 47 | .close { 48 | position: relative; 49 | top: -2px; 50 | right: -21px; 51 | color: inherit; 52 | } 53 | } 54 | 55 | // Alternate styles 56 | // 57 | // Generate contextual modifier classes for colorizing the alert. 58 | 59 | .alert-success { 60 | @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); 61 | } 62 | 63 | .alert-info { 64 | @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); 65 | } 66 | 67 | .alert-warning { 68 | @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); 69 | } 70 | 71 | .alert-danger { 72 | @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); 73 | } 74 | -------------------------------------------------------------------------------- /server/bin/www: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Module dependencies. 5 | */ 6 | 7 | var app = require('../app'); 8 | var debug = require('debug')('server:server'); 9 | var http = require('http'); 10 | 11 | /** 12 | * Get port from environment and store in Express. 13 | */ 14 | 15 | var port = normalizePort(process.env.PORT || '80'); 16 | app.set('port', port); 17 | 18 | /** 19 | * Create HTTP server. 20 | */ 21 | 22 | var server = http.createServer(app); 23 | 24 | /** 25 | * Listen on provided port, on all network interfaces. 26 | */ 27 | 28 | server.listen(port); 29 | server.on('error', onError); 30 | server.on('listening', onListening); 31 | 32 | /** 33 | * Normalize a port into a number, string, or false. 34 | */ 35 | 36 | function normalizePort(val) { 37 | var port = parseInt(val, 10); 38 | 39 | if (isNaN(port)) { 40 | // named pipe 41 | return val; 42 | } 43 | 44 | if (port >= 0) { 45 | // port number 46 | return port; 47 | } 48 | 49 | return false; 50 | } 51 | 52 | /** 53 | * Event listener for HTTP server "error" event. 54 | */ 55 | 56 | function onError(error) { 57 | if (error.syscall !== 'listen') { 58 | throw error; 59 | } 60 | 61 | var bind = typeof port === 'string' 62 | ? 'Pipe ' + port 63 | : 'Port ' + port; 64 | 65 | // handle specific listen errors with friendly messages 66 | switch (error.code) { 67 | case 'EACCES': 68 | console.error(bind + ' requires elevated privileges'); 69 | process.exit(1); 70 | break; 71 | case 'EADDRINUSE': 72 | console.error(bind + ' is already in use'); 73 | process.exit(1); 74 | break; 75 | default: 76 | throw error; 77 | } 78 | } 79 | 80 | /** 81 | * Event listener for HTTP server "listening" event. 82 | */ 83 | 84 | function onListening() { 85 | var addr = server.address(); 86 | var bind = typeof addr === 'string' 87 | ? 'pipe ' + addr 88 | : 'port ' + addr.port; 89 | debug('Listening on ' + bind); 90 | } 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ExpressBlog 2 | 3 | 5 | 6 | *👉 link online: [http://www.kkslide.fun](http://www.kkslide.fun) (oh no.. 域名到期了, 接下来准备换个别的)* 7 | 8 | *** 9 | 10 | 基于`Vue2.0`、`express`和`MongoDB`的个人网站。 11 | 12 | ## 主要功能： 13 | - 前端首页，文章列表，详情页面，视频播放，视频弹幕和评论，留言功能 14 | - 前端页面是响应式可以适配移动端，并且支持中英切换 15 | - 前端文章页面暂未支持回复功能，努力ing... 😥 16 | - 管理后台支持访页面问量统计，留言、分类和文章添加，删除，编辑等，支持图片裁切上传。 17 | - 更多后续功能慢慢研究😁 18 | 19 | ## 截图： 20 |
21 | 22 | 23 |
24 | 25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 | 35 | *** 36 | 37 | ### 说明 38 | #### 环境： 39 | - Nodejs v10.0+ 40 | - MongoDB v3.4.0+ 41 | 42 | #### 前端： 43 | 刚打开项目，乍一看会是个前端的文件夹 44 | 45 | 但其实服务端也包括在里面，服务端在`/server`目录下 46 | 47 | - 在根目录下执行 `npm install` 安装前端依赖。 48 | - 进入到`/server`目录执行 `npm install` 安装服务端依赖 49 | 50 | 51 | - 去官网下载MongoDB [👉下载地址](http://mongodb.github.io/node-mongodb-native/) 52 | 53 | 54 | ## 运行 --> 55 | - 启动mongoDB数据库 56 |
57 | 58 |
59 | 60 | - 修改`app.js` 修改数据库配置，如下所示： 61 | ```javascript 62 | // 连接数据库 63 | // mongoose.connect("mongodb://username:password@host:port/database"); 64 | mongoose.connect("mongodb://root:root@localhost:27017/myBlog"); 65 | ``` 66 | 67 | - 在`/`根目录下 `npm run dev` 运行开发环境 68 | - 在`/server`目录下 `npm start` 运行服务端 69 | - 打开👉[http://localhost:8080](http://localhost:8080)即可 70 | 71 | *** 72 | ## 总结： 73 | 虽然博客和个人网站这种类型的项目已经一搜一大把了 74 | 75 | 纸上得来终觉浅 绝知此事要躬行 🤐 76 | 77 | 从写静态页面到用Vue框架改造 78 | 79 | 再自己用express写服务端 80 | 81 | 买服务器, 备案域名, 实现七牛云对象存储, 搭建CentOS环境, 再部署项目 82 | 83 | 表面上内容和功能虽然简单,但也感觉获益颇丰了 84 | 85 | 下一步打算尝试用别的后台语言技术实现服务端😁 86 | 87 | 🙏🙏🙏 88 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | // import Vue from 'vue' 4 | import App from './App' 5 | // import qs from 'qs' 6 | // import $ from 'jquery' 7 | 8 | // import 'normalize.css' // 引入重置样式 9 | 10 | // import ElementUI from 'element-ui' // 引入Element-UI 11 | // import 'element-ui/lib/theme-chalk/index.css' // 引入Element-UI样式 12 | // Vue.use(ElementUI) // 使用饿了么UI 13 | 14 | // import 'bootstrap/dist/css/bootstrap.min.css' // 引入bootstrap样式 15 | // import 'bootstrap/dist/js/bootstrap.min.js' // 引入bootstrap 16 | 17 | import 'quill/dist/quill.core.css' // 引入编辑器样式 18 | import 'quill/dist/quill.snow.css' // 引入编辑器样式 19 | import 'quill/dist/quill.bubble.css' // 引入编辑器样式 20 | // import './styles/main.css' // 引入自己的样式 21 | import './styles/main.scss' // 引入自己的样式 22 | 23 | import Filter from "./filter/index" 24 | Vue.use(Filter) // 使用路由守卫 25 | 26 | // Vue.use(VueI18n) // 使用语言切换插件 27 | import i18n from './locales/index' // 使用自定义语言切换插件 28 | 29 | import router from './router' 30 | // import axios from 'axios' 31 | // axios.defaults.baseURL = 'http://localhost:8080' 32 | const service = axios.create({ 33 | // baseURL: 'http://localhost:8080', // 本地开发的时候.. 34 | baseURL: 'http://134.175.129.219', // 线上发布的时候- 腾讯云 35 | timeout: 5000 36 | }) 37 | axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UFT-8' 38 | service.interceptors.request.use( // 把默认的object类型请求转化为post 39 | config => { // onFullfilled: 40 | if (config === 'post') { 41 | config.data = qs.stringify(config.data) 42 | } 43 | }, 44 | error => { // onRejected 45 | console.log(error); 46 | Promise.reject(error) 47 | } 48 | ) 49 | Vue.prototype.$axios = axios 50 | 51 | Vue.config.productionTip = false 52 | 53 | import routerGuard from './router/routerGuard' 54 | router.beforeEach(routerGuard) 55 | 56 | /* eslint-disable no-new */ 57 | new Vue({ 58 | // el: '#app', 59 | i18n, 60 | router, 61 | components: { App }, 62 | template: '' 63 | }).$mount("#app") 64 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 65 | 66 | -------------------------------------------------------------------------------- /src/components/admin/home/Clock2.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 42 | 43 | -------------------------------------------------------------------------------- /src/components/client/ContentComponent/Video.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 76 | 77 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_progress-bars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Progress bars 3 | // -------------------------------------------------- 4 | 5 | 6 | // Bar animations 7 | // ------------------------- 8 | 9 | // WebKit 10 | @-webkit-keyframes progress-bar-stripes { 11 | from { background-position: 40px 0; } 12 | to { background-position: 0 0; } 13 | } 14 | 15 | // Spec and IE10+ 16 | @keyframes progress-bar-stripes { 17 | from { background-position: 40px 0; } 18 | to { background-position: 0 0; } 19 | } 20 | 21 | 22 | // Bar itself 23 | // ------------------------- 24 | 25 | // Outer container 26 | .progress { 27 | overflow: hidden; 28 | height: $line-height-computed; 29 | margin-bottom: $line-height-computed; 30 | background-color: $progress-bg; 31 | border-radius: $progress-border-radius; 32 | @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 33 | } 34 | 35 | // Bar of progress 36 | .progress-bar { 37 | float: left; 38 | width: 0%; 39 | height: 100%; 40 | font-size: $font-size-small; 41 | line-height: $line-height-computed; 42 | color: $progress-bar-color; 43 | text-align: center; 44 | background-color: $progress-bar-bg; 45 | @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 46 | @include transition(width .6s ease); 47 | } 48 | 49 | // Striped bars 50 | // 51 | // `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the 52 | // `.progress-bar-striped` class, which you just add to an existing 53 | // `.progress-bar`. 54 | .progress-striped .progress-bar, 55 | .progress-bar-striped { 56 | @include gradient-striped; 57 | background-size: 40px 40px; 58 | } 59 | 60 | // Call animation for the active one 61 | // 62 | // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the 63 | // `.progress-bar.active` approach. 64 | .progress.active .progress-bar, 65 | .progress-bar.active { 66 | @include animation(progress-bar-stripes 2s linear infinite); 67 | } 68 | 69 | 70 | // Variations 71 | // ------------------------- 72 | 73 | .progress-bar-success { 74 | @include progress-bar-variant($progress-bar-success-bg); 75 | } 76 | 77 | .progress-bar-info { 78 | @include progress-bar-variant($progress-bar-info-bg); 79 | } 80 | 81 | .progress-bar-warning { 82 | @include progress-bar-variant($progress-bar-warning-bg); 83 | } 84 | 85 | .progress-bar-danger { 86 | @include progress-bar-variant($progress-bar-danger-bg); 87 | } 88 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_pagination.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pagination (multiple pages) 3 | // -------------------------------------------------- 4 | .pagination { 5 | display: inline-block; 6 | padding-left: 0; 7 | margin: $line-height-computed 0; 8 | border-radius: $border-radius-base; 9 | 10 | > li { 11 | display: inline; // Remove list-style and block-level defaults 12 | > a, 13 | > span { 14 | position: relative; 15 | float: left; // Collapse white-space 16 | padding: $padding-base-vertical $padding-base-horizontal; 17 | line-height: $line-height-base; 18 | text-decoration: none; 19 | color: $pagination-color; 20 | background-color: $pagination-bg; 21 | border: 1px solid $pagination-border; 22 | margin-left: -1px; 23 | } 24 | &:first-child { 25 | > a, 26 | > span { 27 | margin-left: 0; 28 | @include border-left-radius($border-radius-base); 29 | } 30 | } 31 | &:last-child { 32 | > a, 33 | > span { 34 | @include border-right-radius($border-radius-base); 35 | } 36 | } 37 | } 38 | 39 | > li > a, 40 | > li > span { 41 | &:hover, 42 | &:focus { 43 | z-index: 2; 44 | color: $pagination-hover-color; 45 | background-color: $pagination-hover-bg; 46 | border-color: $pagination-hover-border; 47 | } 48 | } 49 | 50 | > .active > a, 51 | > .active > span { 52 | &, 53 | &:hover, 54 | &:focus { 55 | z-index: 3; 56 | color: $pagination-active-color; 57 | background-color: $pagination-active-bg; 58 | border-color: $pagination-active-border; 59 | cursor: default; 60 | } 61 | } 62 | 63 | > .disabled { 64 | > span, 65 | > span:hover, 66 | > span:focus, 67 | > a, 68 | > a:hover, 69 | > a:focus { 70 | color: $pagination-disabled-color; 71 | background-color: $pagination-disabled-bg; 72 | border-color: $pagination-disabled-border; 73 | cursor: $cursor-disabled; 74 | } 75 | } 76 | } 77 | 78 | // Sizing 79 | // -------------------------------------------------- 80 | 81 | // Large 82 | .pagination-lg { 83 | @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); 84 | } 85 | 86 | // Small 87 | .pagination-sm { 88 | @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); 89 | } 90 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/_print.scss: -------------------------------------------------------------------------------- 1 | /*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ 2 | 3 | // ========================================================================== 4 | // Print styles. 5 | // Inlined to avoid the additional HTTP request: h5bp.com/r 6 | // ========================================================================== 7 | 8 | @media print { 9 | *, 10 | *:before, 11 | *:after { 12 | background: transparent !important; 13 | color: #000 !important; // Black prints faster: h5bp.com/s 14 | box-shadow: none !important; 15 | text-shadow: none !important; 16 | } 17 | 18 | a, 19 | a:visited { 20 | text-decoration: underline; 21 | } 22 | 23 | a[href]:after { 24 | content: " (" attr(href) ")"; 25 | } 26 | 27 | abbr[title]:after { 28 | content: " (" attr(title) ")"; 29 | } 30 | 31 | // Don't show links that are fragment identifiers, 32 | // or use the `javascript:` pseudo protocol 33 | a[href^="#"]:after, 34 | a[href^="javascript:"]:after { 35 | content: ""; 36 | } 37 | 38 | pre, 39 | blockquote { 40 | border: 1px solid #999; 41 | page-break-inside: avoid; 42 | } 43 | 44 | thead { 45 | display: table-header-group; // h5bp.com/t 46 | } 47 | 48 | tr, 49 | img { 50 | page-break-inside: avoid; 51 | } 52 | 53 | img { 54 | max-width: 100% !important; 55 | } 56 | 57 | p, 58 | h2, 59 | h3 { 60 | orphans: 3; 61 | widows: 3; 62 | } 63 | 64 | h2, 65 | h3 { 66 | page-break-after: avoid; 67 | } 68 | 69 | // Bootstrap specific changes start 70 | 71 | // Bootstrap components 72 | .navbar { 73 | display: none; 74 | } 75 | .btn, 76 | .dropup > .btn { 77 | > .caret { 78 | border-top-color: #000 !important; 79 | } 80 | } 81 | .label { 82 | border: 1px solid #000; 83 | } 84 | 85 | .table { 86 | border-collapse: collapse !important; 87 | 88 | td, 89 | th { 90 | background-color: #fff !important; 91 | } 92 | } 93 | .table-bordered { 94 | th, 95 | td { 96 | border: 1px solid #ddd !important; 97 | } 98 | } 99 | 100 | // Bootstrap specific changes end 101 | } 102 | -------------------------------------------------------------------------------- /src/styles/lib/template/navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | border:none; 3 | min-height: inherit; 4 | 5 | @media (min-width: $screen-sm) { 6 | margin: 10px; 7 | } 8 | } 9 | .navbar-inverse, .navbar-default{ 10 | .navbar-collapse{ 11 | margin: 10px -5px; 12 | box-shadow:none; 13 | .navbar-nav{ 14 | padding: 20px; 15 | } 16 | } 17 | @media (min-width: $screen-sm) { 18 | .navbar-collapse{ 19 | margin: 0; 20 | padding: 30px 0; 21 | .navbar-nav{ 22 | padding: 0; 23 | } 24 | } 25 | } 26 | 27 | 28 | .navbar-toggle{ 29 | padding: 20px; 30 | margin: 0; 31 | border:none; 32 | position: absolute; 33 | right: 10px; 34 | top: 10px; 35 | z-index: 10; 36 | background-color:white; 37 | &:hover, &:focus{ 38 | background-color: white; 39 | } 40 | } 41 | } 42 | 43 | .navbar-inverse { 44 | .navbar-nav > li > a { 45 | @media (min-width: $screen-sm) { 46 | border-right: 1px solid white; 47 | } 48 | } 49 | .navbar-nav > li:last-of-type a{ 50 | border-right:none; 51 | } 52 | .navbar-toggle{ 53 | background-color: $gray-base; 54 | &:hover, &:focus{ 55 | background-color: $gray-base; 56 | } 57 | } 58 | } 59 | 60 | .navbar-default { 61 | .navbar-nav{ 62 | border-bottom: 1px solid #eee; 63 | @media (min-width: $screen-sm) { 64 | border:none; 65 | } 66 | } 67 | 68 | .navbar-nav > li > a { 69 | @media (min-width: $screen-sm) { 70 | border-right: 1px solid $gray-base; 71 | } 72 | } 73 | .navbar-nav > li:last-of-type a{ 74 | border-right:none; 75 | } 76 | .navbar-toggle{ 77 | background-color:white; 78 | &:hover, &:focus{ 79 | background-color: white; 80 | } 81 | } 82 | } 83 | 84 | 85 | 86 | @media (max-width: $screen-sm) { 87 | .navbar-inverse{ 88 | background-color: transparent; 89 | .navbar-collapse{ 90 | background-color:black; 91 | } 92 | } 93 | 94 | .navbar-default{ 95 | background-color: transparent; 96 | .navbar-collapse{ 97 | background-color:white; 98 | } 99 | 100 | } 101 | } 102 | 103 | 104 | .nav > li > a{ 105 | font-size: 14px; 106 | font-weight: 300; 107 | @include transition(all .1s linear); 108 | 109 | &:hover, &.active{ 110 | font-weight: 700; 111 | } 112 | } 113 | 114 | .nav.navbar-small > li > a{ 115 | font-size: 11px; 116 | 117 | } 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "version": "1.0.0", 4 | "description": "just a test blog", 5 | "author": "KKslide ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "bootstrap": "^3.3.7", 14 | "jquery": "^3.2.1", 15 | "js-md5": "^0.7.3", 16 | "normalize.css": "^8.0.1", 17 | "style-loader": "^1.0.0", 18 | "typed.js": "^2.0.4", 19 | "video.js": "^7.6.5", 20 | "videojs-contrib-hls": "^5.15.0", 21 | "vue": "^2.5.2", 22 | "vue-router": "^3.0.1" 23 | }, 24 | "devDependencies": { 25 | "autoprefixer": "^7.1.2", 26 | "axios": "^0.19.0", 27 | "babel-core": "^6.22.1", 28 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 29 | "babel-loader": "^7.1.1", 30 | "babel-plugin-syntax-jsx": "^6.18.0", 31 | "babel-plugin-transform-runtime": "^6.22.0", 32 | "babel-plugin-transform-vue-jsx": "^3.5.0", 33 | "babel-preset-env": "^1.3.2", 34 | "babel-preset-stage-2": "^6.22.0", 35 | "chalk": "^2.0.1", 36 | "copy-webpack-plugin": "^4.0.1", 37 | "css-loader": "^0.28.0", 38 | "element-ui": "^2.12.0", 39 | "extract-text-webpack-plugin": "^3.0.0", 40 | "file-loader": "^1.1.4", 41 | "friendly-errors-webpack-plugin": "^1.6.1", 42 | "html-webpack-plugin": "^2.30.1", 43 | "less": "^3.10.3", 44 | "less-loader": "^5.0.0", 45 | "node-notifier": "^5.1.2", 46 | "node-sass": "^4.12.0", 47 | "optimize-css-assets-webpack-plugin": "^3.2.0", 48 | "ora": "^1.2.0", 49 | "portfinder": "^1.0.13", 50 | "postcss-import": "^11.0.0", 51 | "postcss-loader": "^2.0.8", 52 | "postcss-url": "^7.2.1", 53 | "qs": "^6.8.0", 54 | "rimraf": "^2.6.0", 55 | "sass-loader": "^7.3.1", 56 | "sass-resources-loader": "^2.0.1", 57 | "semver": "^5.3.0", 58 | "shelljs": "^0.7.6", 59 | "style-loader": "^1.0.0", 60 | "uglifyjs-webpack-plugin": "^1.1.1", 61 | "url-loader": "^0.5.8", 62 | "vue-cropper": "^0.3.6", 63 | "vue-i18n": "^8.15.0", 64 | "vue-loader": "^13.3.0", 65 | "vue-quill-editor": "^3.0.6", 66 | "vue-style-loader": "^3.0.1", 67 | "vue-template-compiler": "^2.5.2", 68 | "webpack": "^3.6.0", 69 | "webpack-bundle-analyzer": "^2.9.0", 70 | "webpack-dev-server": "^2.9.1", 71 | "webpack-merge": "^4.1.0" 72 | }, 73 | "engines": { 74 | "node": ">= 6.0.0", 75 | "npm": ">= 3.0.0" 76 | }, 77 | "browserslist": [ 78 | "> 1%", 79 | "last 2 versions", 80 | "not ie <= 8" 81 | ] 82 | } 83 | -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_grid-framework.scss: -------------------------------------------------------------------------------- 1 | // Framework grid generation 2 | // 3 | // Used only by Bootstrap to generate the correct number of grid classes given 4 | // any value of `$grid-columns`. 5 | 6 | // [converter] This is defined recursively in LESS, but Sass supports real loops 7 | @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { 8 | @for $i from (1 + 1) through $grid-columns { 9 | $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; 10 | } 11 | #{$list} { 12 | position: relative; 13 | // Prevent columns from collapsing when empty 14 | min-height: 1px; 15 | // Inner gutter via padding 16 | padding-left: ceil(($grid-gutter-width / 2)); 17 | padding-right: floor(($grid-gutter-width / 2)); 18 | } 19 | } 20 | 21 | 22 | // [converter] This is defined recursively in LESS, but Sass supports real loops 23 | @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { 24 | @for $i from (1 + 1) through $grid-columns { 25 | $list: "#{$list}, .col-#{$class}-#{$i}"; 26 | } 27 | #{$list} { 28 | float: left; 29 | } 30 | } 31 | 32 | 33 | @mixin calc-grid-column($index, $class, $type) { 34 | @if ($type == width) and ($index > 0) { 35 | .col-#{$class}-#{$index} { 36 | width: percentage(($index / $grid-columns)); 37 | } 38 | } 39 | @if ($type == push) and ($index > 0) { 40 | .col-#{$class}-push-#{$index} { 41 | left: percentage(($index / $grid-columns)); 42 | } 43 | } 44 | @if ($type == push) and ($index == 0) { 45 | .col-#{$class}-push-0 { 46 | left: auto; 47 | } 48 | } 49 | @if ($type == pull) and ($index > 0) { 50 | .col-#{$class}-pull-#{$index} { 51 | right: percentage(($index / $grid-columns)); 52 | } 53 | } 54 | @if ($type == pull) and ($index == 0) { 55 | .col-#{$class}-pull-0 { 56 | right: auto; 57 | } 58 | } 59 | @if ($type == offset) { 60 | .col-#{$class}-offset-#{$index} { 61 | margin-left: percentage(($index / $grid-columns)); 62 | } 63 | } 64 | } 65 | 66 | // [converter] This is defined recursively in LESS, but Sass supports real loops 67 | @mixin loop-grid-columns($columns, $class, $type) { 68 | @for $i from 0 through $columns { 69 | @include calc-grid-column($i, $class, $type); 70 | } 71 | } 72 | 73 | 74 | // Create grid for specific class 75 | @mixin make-grid($class) { 76 | @include float-grid-columns($class); 77 | @include loop-grid-columns($grid-columns, $class, width); 78 | @include loop-grid-columns($grid-columns, $class, pull); 79 | @include loop-grid-columns($grid-columns, $class, push); 80 | @include loop-grid-columns($grid-columns, $class, offset); 81 | } 82 | -------------------------------------------------------------------------------- /src/components/client/ContactComponent/emoji/EmojiPanel.vue: -------------------------------------------------------------------------------- 1 | 11 | 82 | -------------------------------------------------------------------------------- /src/locales/zh.json: -------------------------------------------------------------------------------- 1 | { 2 | "homepage": { 3 | "part1": "哈喽", 4 | "part2": "我叫刘永康", 5 | "part3": "前端小菜鸟", 6 | "part4": "现在广州上班" 7 | }, 8 | "navbar": { 9 | "Home": "首页", 10 | "Blogs": "博文", 11 | "Vlogs": "Vlog", 12 | "About": "关于我", 13 | "Works": "交互设计", 14 | "Contact": "联系我" 15 | }, 16 | "logContent":{ 17 | "author":"作者", 18 | "view":"浏览", 19 | "comments":"评论", 20 | "time":"时间", 21 | "commentPlaceHolder":"说些什么吧", 22 | "name":"昵称", 23 | "namePlaceHolder":"留个昵称或者姓名吧", 24 | "sendButton":"发送", 25 | "emptyCommentTip":"留言板空的呃T_T.., 说些啥呗~", 26 | "emptyVisitor":"大侠请留名T_T..", 27 | "prev":"上一篇", 28 | "next":"下一篇" 29 | }, 30 | "message": { 31 | "hello": "你好世界", 32 | "slogan": "用自己的方式记录生活😎", 33 | "blogIntro":"

有些视频并不是全在这里发布

但是以上的所有视频内容和源文件

都可以在其他媒体平台上看到和下载

我所活跃的媒体平台有以下几个：

👉Bilibili

👉YouKu

👉YouTube

" 34 | }, 35 | "about": { 36 | "part1": { 37 | "title": "关于前端", 38 | "content": "作为一个两年工作经验的前端开发工程师, 约莫在2013年开始接触这个新鲜事物, 当时大学里开设了一门《HTML+CSS网页设计》课程让我印象颇深. 令人不得不惊叹这些网页特效居然都是用代码写出来的, 特么我以后真的要搞这些东西?? - - ||... 那不得眼瞎而且寡佬好久好久 还会肾不好..结果emmmm 真香" 39 | }, 40 | "part2": { 41 | "title": "关于兴趣爱好", 42 | "‘content": "除了写代码. 还有打篮球啦, 玩轮滑啦,Photoshop啦, 影视剪辑啦, 摇shuai子啦, 喝啤酒啦. 女孩子啦🙊. 其实好多年前是想好好打篮球的, 可后来一直没长高, 太难了🙄. 然后有人骗我玩轮滑可以长高, 于是我就开始玩轮滑了去, 接着就越玩越爱玩, 越玩越🤙 也认识了好多好多好多朋友. 生活渐渐地被这些个爱好塞得满满的💪" 43 | }, 44 | "part3": { 45 | "title": "下一步", 46 | "content": "继续学习新的东西尝试新的事物
挑战自己, 挑战极限." 47 | } 48 | }, 49 | "work": { 50 | "click": "👇 点击这里 👇", 51 | "tit1": "css丝滑滚动", 52 | "tit2": "css在线调色", 53 | "tit3": "灭霸响指特效", 54 | "tit4": "霓虹灯效果", 55 | "tit5": "闪屏故障特效", 56 | "tit6": "瀑布流布局", 57 | "tit7": "echarts地图下钻" 58 | }, 59 | "contact":{ 60 | "placeholder":{ 61 | "one":"留个昵称或者邮箱噜🤡", 62 | "two":"主题🎥", 63 | "three":"请输入留言内容📃", 64 | "four":"发送" 65 | }, 66 | "mail":"rollercompanion@163.com", 67 | "addr":"广州市天河区 科韵路 天河软件园", 68 | "social":"我的社交媒体👇", 69 | "warning":"表格没填完整啦T_T||", 70 | "first":"沙发是你了🤪", 71 | "loadmore":"查看更多留言🕵️‍♂️", 72 | "nomore":"你已经看完所有留言了🤷‍♂️", 73 | "responsemsg":"哔~ 留言完毕~ 感谢支持" 74 | }, 75 | "lang": "中/英" 76 | } -------------------------------------------------------------------------------- /src/components/client/ContentComponent/comment/children/EmojiPanel.vue: -------------------------------------------------------------------------------- 1 | 11 | 82 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | // const proUrl = 'http://localhost:80' // 本地 7 | const proUrl = 'http://134.175.129.219' // 线上- 腾讯云 8 | 9 | module.exports = { 10 | dev: { 11 | 12 | // Paths 13 | assetsSubDirectory: 'static', 14 | assetsPublicPath: '/', 15 | proxyTable: { 16 | '/index': { 17 | changeOrigin: true, 18 | target: proUrl 19 | }, 20 | '/index/*': { 21 | changeOrigin: true, 22 | target: proUrl 23 | }, 24 | '/admin/*': { 25 | changeOrigin: true, 26 | target: proUrl 27 | }, 28 | '/pic/**':{ 29 | changeOrigin:true, 30 | target:proUrl 31 | } 32 | }, 33 | 34 | // Various Dev Server settings 35 | host: 'localhost', // can be overwritten by process.env.HOST 36 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 37 | autoOpenBrowser: false, 38 | errorOverlay: true, 39 | notifyOnErrors: true, 40 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 41 | 42 | 43 | /** 44 | * Source Maps 45 | */ 46 | 47 | // https://webpack.js.org/configuration/devtool/#development 48 | devtool: 'cheap-module-eval-source-map', 49 | 50 | // If you have problems debugging vue-files in devtools, 51 | // set this to false - it *may* help 52 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 53 | cacheBusting: true, 54 | 55 | cssSourceMap: true 56 | }, 57 | 58 | build: { 59 | // Template for index.html 60 | index: path.resolve(__dirname, '../dist/index.html'), 61 | 62 | // Paths 63 | assetsRoot: path.resolve(__dirname, '../dist'), 64 | assetsSubDirectory: 'static', 65 | assetsPublicPath: './', // 如果想要打包后 本地跑起来的话 一定一定要加点！！！ 66 | 67 | /** 68 | * Source Maps 69 | */ 70 | 71 | productionSourceMap: true, 72 | // https://webpack.js.org/configuration/devtool/#production 73 | devtool: '#source-map', 74 | 75 | // Gzip off by default as many popular static hosts such as 76 | // Surge or Netlify already gzip all static assets for you. 77 | // Before setting to `true`, make sure to: 78 | // npm install --save-dev compression-webpack-plugin 79 | productionGzip: false, 80 | productionGzipExtensions: ['js', 'css'], 81 | 82 | // Run the build command with an extra argument to 83 | // View the bundle analyzer report after build finishes: 84 | // `npm run build --report` 85 | // Set to `true` or `false` to always turn it on or off 86 | bundleAnalyzerReport: process.env.npm_config_report 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/components/admin/public/NavMenu.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 71 | 72 | -------------------------------------------------------------------------------- /src/components/admin/home/PieChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 81 | 82 | -------------------------------------------------------------------------------- /static/json/api.json: -------------------------------------------------------------------------------- 1 | { 2 | "tag_list": [ 3 | { 4 | "tag": "总访问量", 5 | "value": 8888 6 | }, 7 | { 8 | "tag": "今日访问量", 9 | "value": 6666 10 | }, 11 | { 12 | "tag": "用户", 13 | "value": 9999 14 | }, 15 | { 16 | "tag": "文章数", 17 | "value": 9999 18 | } 19 | ], 20 | "line_chart_data": [ 21 | { 22 | "time": "0", 23 | "value": 9 24 | }, 25 | { 26 | "time": "1", 27 | "value": 2 28 | }, 29 | { 30 | "time": "2", 31 | "value": 4 32 | }, 33 | { 34 | "time": "3", 35 | "value": 1 36 | }, 37 | { 38 | "time": "4", 39 | "value": 3 40 | }, 41 | { 42 | "time": "5", 43 | "value": 6 44 | }, 45 | { 46 | "time": "6", 47 | "value": 5 48 | }, 49 | { 50 | "time": "7", 51 | "value": 14 52 | }, 53 | { 54 | "time": "8", 55 | "value": 20 56 | }, 57 | { 58 | "time": "9", 59 | "value": 8 60 | }, 61 | { 62 | "time": "10", 63 | "value": 1 64 | }, 65 | { 66 | "time": "11", 67 | "value": 0 68 | }, 69 | { 70 | "time": "12", 71 | "value": 1 72 | }, 73 | { 74 | "time": "13", 75 | "value": 5 76 | }, 77 | { 78 | "time": "14", 79 | "value": 6 80 | }, 81 | { 82 | "time": "15", 83 | "value": 18 84 | }, 85 | { 86 | "time": "16", 87 | "value": 12 88 | }, 89 | { 90 | "time": "17", 91 | "value": 4 92 | }, 93 | { 94 | "time": "18", 95 | "value": 8 96 | }, 97 | { 98 | "time": "19", 99 | "value": 16 100 | }, 101 | { 102 | "time": "20", 103 | "value": 11 104 | }, 105 | { 106 | "time": "21", 107 | "value": 19 108 | }, 109 | { 110 | "time": "22", 111 | "value": 2 112 | }, 113 | { 114 | "time": "23", 115 | "value": 12 116 | } 117 | ], 118 | "pie_chart_data": [ 119 | { 120 | "value": 10, 121 | "name": "Fun" 122 | }, 123 | { 124 | "value": 5, 125 | "name": "Video" 126 | }, 127 | { 128 | "value": 15, 129 | "name": "Pic" 130 | } 131 | ] 132 | } -------------------------------------------------------------------------------- /src/styles/lib/bootstrap/mixins/_forms.scss: -------------------------------------------------------------------------------- 1 | // Form validation states 2 | // 3 | // Used in forms.less to generate the form validation CSS for warnings, errors, 4 | // and successes. 5 | 6 | @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { 7 | // Color the label and help text 8 | .help-block, 9 | .control-label, 10 | .radio, 11 | .checkbox, 12 | .radio-inline, 13 | .checkbox-inline, 14 | &.radio label, 15 | &.checkbox label, 16 | &.radio-inline label, 17 | &.checkbox-inline label { 18 | color: $text-color; 19 | } 20 | // Set the border and box shadow on specific inputs to match 21 | .form-control { 22 | border-color: $border-color; 23 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 24 | &:focus { 25 | border-color: darken($border-color, 10%); 26 | $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); 27 | @include box-shadow($shadow); 28 | } 29 | } 30 | // Set validation states also for addons 31 | .input-group-addon { 32 | color: $text-color; 33 | border-color: $border-color; 34 | background-color: $background-color; 35 | } 36 | // Optional feedback icon 37 | .form-control-feedback { 38 | color: $text-color; 39 | } 40 | } 41 | 42 | 43 | // Form control focus state 44 | // 45 | // Generate a customized focus state and for any input with the specified color, 46 | // which defaults to the `$input-border-focus` variable. 47 | // 48 | // We highly encourage you to not customize the default value, but instead use 49 | // this to tweak colors on an as-needed basis. This aesthetic change is based on 50 | // WebKit's default styles, but applicable to a wider range of browsers. Its 51 | // usability and accessibility should be taken into account with any change. 52 | // 53 | // Example usage: change the default blue border and shadow to white for better 54 | // contrast against a dark gray background. 55 | @mixin form-control-focus($color: $input-border-focus) { 56 | $color-rgba: rgba(red($color), green($color), blue($color), .6); 57 | &:focus { 58 | border-color: $color; 59 | outline: 0; 60 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba); 61 | } 62 | } 63 | 64 | // Form control sizing 65 | // 66 | // Relative text size, padding, and border-radii changes for form controls. For 67 | // horizontal sizing, wrap controls in the predefined grid classes. `