parent
94c978706d
commit
38a6b99685
@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "peteralbus_blog",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@kangc/v-md-editor": "^2.3.6",
|
||||
"axios": "^0.21.1",
|
||||
"element-plus": "^1.0.2-beta.55",
|
||||
"font-awesome": "^4.7.0",
|
||||
"highlight.js": "^11.1.0",
|
||||
"mavon-editor": "^2.9.1",
|
||||
"prismjs": "^1.24.1",
|
||||
"qs": "^6.5.2",
|
||||
"vue": "^3.0.0",
|
||||
"vue-axios": "^3.2.4",
|
||||
"vue-router": "^4.0.0-0",
|
||||
"vuex": "^4.0.0-0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>PeterAlbus的博客</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<top-nav-bar></top-nav-bar>
|
||||
<router-view/>
|
||||
<Footer></Footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopNavBar from "@/components/TopNavBar";
|
||||
import Footer from "@/components/Footer";
|
||||
export default {
|
||||
name:'App',
|
||||
components: {Footer, TopNavBar}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/***************** CSS重置 *******************/
|
||||
html,body,div,span,h1,h2,h3,h4,h5,h6,ul,ol,li,p{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-container{
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
margin: 0;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.main-container a{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.main-container a:hover{
|
||||
color: #4B6186;
|
||||
}
|
||||
|
||||
.module{
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
@ -0,0 +1,539 @@
|
||||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2701288 */
|
||||
src: url('iconfont.woff2?t=1627292686407') format('woff2'),
|
||||
url('iconfont.woff?t=1627292686407') format('woff'),
|
||||
url('iconfont.ttf?t=1627292686407') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-bilibili-line:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
@ -0,0 +1 @@
|
||||
!function(e){var t,n,o,i,a,d,c='<svg><symbol id="icon-bilibili-line" viewBox="0 0 1024 1024"><path d="M306.005333 117.632L444.330667 256h135.296l138.368-138.325333a42.666667 42.666667 0 0 1 60.373333 60.373333L700.330667 256H789.333333A149.333333 149.333333 0 0 1 938.666667 405.333333v341.333334a149.333333 149.333333 0 0 1-149.333334 149.333333h-554.666666A149.333333 149.333333 0 0 1 85.333333 746.666667v-341.333334A149.333333 149.333333 0 0 1 234.666667 256h88.96L245.632 177.962667a42.666667 42.666667 0 0 1 60.373333-60.373334zM789.333333 341.333333h-554.666666a64 64 0 0 0-63.701334 57.856L170.666667 405.333333v341.333334a64 64 0 0 0 57.856 63.701333L234.666667 810.666667h554.666666a64 64 0 0 0 63.701334-57.856L853.333333 746.666667v-341.333334A64 64 0 0 0 789.333333 341.333333zM341.333333 469.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333a42.666667 42.666667 0 0 1-85.333333 0v-85.333333a42.666667 42.666667 0 0 1 42.666666-42.666667z m341.333334 0a42.666667 42.666667 0 0 1 42.666666 42.666667v85.333333a42.666667 42.666667 0 0 1-85.333333 0v-85.333333a42.666667 42.666667 0 0 1 42.666667-42.666667z" ></path></symbol></svg>',l=(l=document.getElementsByTagName("script"))[l.length-1].getAttribute("data-injectcss");if(l&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}function s(){a||(a=!0,o())}t=function(){var e,t,n;(n=document.createElement("div")).innerHTML=c,c=null,(t=n.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",e=t,(n=document.body).firstChild?(t=n.firstChild).parentNode.insertBefore(e,t):n.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(o=t,i=e.document,a=!1,(d=function(){try{i.documentElement.doScroll("left")}catch(e){return void setTimeout(d,50)}s()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,s())})}(window);
|
||||
@ -0,0 +1,16 @@
|
||||
{
|
||||
"id": "2701288",
|
||||
"name": "PeterAlbus-icon",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "16034362",
|
||||
"name": "bilibili-line",
|
||||
"font_class": "bilibili-line",
|
||||
"unicode": "e627",
|
||||
"unicode_decimal": 58919
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-text">Copyright © 2021 - {{ new Date().getFullYear() }} PeterAlbus All Rights Reserved.</div>
|
||||
<div class="footer-text">
|
||||
<a href="http://beian.miit.gov.cn/" target="_blank">
|
||||
沪ICP备2021020777号
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Footer"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: #373D41;
|
||||
border-top: 10px solid #4B6186;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-text{
|
||||
color: #73777a;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer-text a:hover{
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
.footer-text a{
|
||||
color: #73777a;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
padding: 30px 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<el-menu active-text-color="#4B6186" text-color="#FFFFFF" id="navid" class="nav" mode="horizontal" :router="true">
|
||||
<div class="title">PeterAlbus的博客</div>
|
||||
<!--大屏幕导航栏-->
|
||||
<el-menu-item
|
||||
v-if="screenWidth>=600"
|
||||
class="nav-item"
|
||||
style="float: right"
|
||||
route="/photo"
|
||||
index="5"
|
||||
><i class="el-icon-picture-outline"></i>照片墙</el-menu-item>
|
||||
<el-menu-item
|
||||
v-if="screenWidth>=600"
|
||||
class="nav-item"
|
||||
style="float: right"
|
||||
route="/about"
|
||||
index="4"
|
||||
><i class="el-icon-user"></i>关于我</el-menu-item>
|
||||
<el-menu-item
|
||||
v-if="screenWidth>=600"
|
||||
class="nav-item"
|
||||
style="float: right"
|
||||
route="/types"
|
||||
index="2"
|
||||
><i class="el-icon-menu"></i>分类</el-menu-item>
|
||||
<el-menu-item
|
||||
v-if="screenWidth>=600"
|
||||
class="nav-item"
|
||||
style="float: right"
|
||||
route="/"
|
||||
index="1"
|
||||
><i class="el-icon-s-home"></i>主页</el-menu-item>
|
||||
<!--小屏幕导航栏-->
|
||||
<el-submenu
|
||||
class="nav-item"
|
||||
v-if="screenWidth<600"
|
||||
index="10"
|
||||
style="float: right"
|
||||
popper-class="submenu"
|
||||
>
|
||||
<template #title>
|
||||
<i class="el-icon-s-fold" style="font-size:28px;color:#ffffff;"></i>
|
||||
</template>
|
||||
<el-menu-item
|
||||
class="nav-menu"
|
||||
route="/photo"
|
||||
index="5"
|
||||
><i class="el-icon-picture-outline"></i>照片墙</el-menu-item>
|
||||
<el-menu-item
|
||||
class="nav-menu"
|
||||
route="/about"
|
||||
index="4"
|
||||
><i class="el-icon-user"></i>关于我</el-menu-item>
|
||||
<el-menu-item
|
||||
class="nav-menu"
|
||||
route="/types"
|
||||
index="2"
|
||||
><i class="el-icon-menu"></i>分类</el-menu-item>
|
||||
<el-menu-item
|
||||
class="nav-menu"
|
||||
route="/"
|
||||
index="1"
|
||||
><i class="el-icon-s-home"></i>主页</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TopNavBar",
|
||||
created () {
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener('scroll', this.scroll)
|
||||
window.onresize = () => {this.screenWidth = document.body.clientWidth}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
screenWidth: document.body.clientWidth,
|
||||
navItems: [
|
||||
{ name: "关于", indexPath: "/more", index: "4" },
|
||||
{ name: "归档", indexPath: "/about", index: "3" },
|
||||
{ name: "分类", indexPath: "/subscribe", index: "2"},
|
||||
{ name: "主页", indexPath: "/", index: "1" }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scroll () {
|
||||
const that = this
|
||||
// const scrollTop =
|
||||
// window.pageYOffset ||
|
||||
// document.documentElement.scrollTop ||
|
||||
// document.body.scrollTop
|
||||
that.scrollTop = window.pageYOffset ||
|
||||
document.documentElement.scrollTop ||
|
||||
document.body.scrollTop
|
||||
if (that.scrollTop > 60) {
|
||||
that.navClass = 'nav-fixed'
|
||||
} else {
|
||||
that.navClass = 'nav'
|
||||
}
|
||||
},
|
||||
},
|
||||
computed:{
|
||||
leftNavItems: function() {
|
||||
return this.screenWidth >= 600 ? this.navItems : {};
|
||||
},
|
||||
rightNavItems: function() {
|
||||
return this.screenWidth < 600 ? this.navItems : {};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navbar{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height:10px; /* 高度 */
|
||||
z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
|
||||
}
|
||||
.nav{
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.nav-item{
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
margin-right: 20px;
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.nav-menu{
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.submenu{
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.title{
|
||||
float: left;
|
||||
height: 100%;
|
||||
left: 30px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
color:white;
|
||||
line-height: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.el-submenu__title:focus, .el-submenu__title:hover{
|
||||
outline: 0 !important;
|
||||
color: #ffffff !important;
|
||||
background: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import axios from 'axios'
|
||||
import VueAxios from 'vue-axios'
|
||||
import 'font-awesome/css/font-awesome.min.css'
|
||||
import './assets/iconfont/iconfont.css'
|
||||
import qs from 'qs'
|
||||
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/lib/theme-chalk/index.css';
|
||||
|
||||
import VMdEditor from '@kangc/v-md-editor';
|
||||
import '@kangc/v-md-editor/lib/style/base-editor.css';
|
||||
// 引入你所使用的主题 此处以 github 主题为例
|
||||
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress';
|
||||
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
|
||||
import Prism from 'prismjs';
|
||||
|
||||
axios.defaults.withCredentials=false;
|
||||
axios.defaults.baseURL='https://www.peteralbus.com:8089/'
|
||||
VMdEditor.use(vuepressTheme, {
|
||||
Prism
|
||||
});
|
||||
const app=createApp(App)
|
||||
app.config.globalProperties.$axios=axios;
|
||||
app.config.globalProperties.$qs=qs;
|
||||
app.use(VueAxios,axios).use(store).use(router).use(ElementPlus).use(VMdEditor).mount('#app')
|
||||
app.config.devtools=true
|
||||
@ -0,0 +1,59 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
const Home=()=>import('../views/Home')
|
||||
const Blog=()=>import('../views/Blog')
|
||||
const Photo=()=>import('../views/Photo')
|
||||
const Types=()=>import('../views/Types')
|
||||
const About=()=>import('../views/About')
|
||||
const Document=()=>import('../views/Document')
|
||||
const NewBlog=()=>import('../views/NewBlog')
|
||||
const UploadPhoto=()=>import('../views/UploadPhoto')
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/blog',
|
||||
name: 'Blog',
|
||||
component: Blog
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
component: About
|
||||
},
|
||||
{
|
||||
path: '/document',
|
||||
name: 'Document',
|
||||
component: Document
|
||||
},
|
||||
{
|
||||
path: '/photo',
|
||||
name: 'Photo',
|
||||
component: Photo
|
||||
},
|
||||
{
|
||||
path: '/types',
|
||||
name: 'Types',
|
||||
component: Types
|
||||
},
|
||||
{
|
||||
path: '/newblog',
|
||||
name: 'NewBlog',
|
||||
component: NewBlog
|
||||
},
|
||||
{
|
||||
path: '/upPhoto',
|
||||
name: 'UploadPhoto',
|
||||
component: UploadPhoto
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
@ -0,0 +1,12 @@
|
||||
import { createStore } from 'vuex'
|
||||
|
||||
export default createStore({
|
||||
state: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="banner">
|
||||
<div class="banner-container">
|
||||
<div>
|
||||
<h1>博客详情</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-container">
|
||||
<el-row>
|
||||
<el-col :lg="{span:11,offset:3}" :sm="15">
|
||||
<div class="blog-header">
|
||||
<h1>{{blog.blogTitle}}</h1>
|
||||
<p><i class="fa fa-user"></i> {{blog.blogAuthor}} <i class="fa fa-calendar"></i> 发布于{{blog.blogTime}} <i class="fa fa-eye"></i> {{blog.blogViews}}次访问</p>
|
||||
</div>
|
||||
<div class="blog-content">
|
||||
<v-md-editor v-model="blog.blogContent" mode="preview"></v-md-editor>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="{span:6}" :sm="9">
|
||||
<div class="module">
|
||||
<div class="content">
|
||||
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
|
||||
<h4>PeterAlbus</h4>
|
||||
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
|
||||
<a href="mailto:wuhongdb@163.com">
|
||||
<i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="github" placement="top">
|
||||
<a href="https://github.com/PeterAlbus" target="_blank">
|
||||
<i class="fa fa-fw fa-github" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="bilibili" placement="top">
|
||||
<a href="https://space.bilibili.com/2003822" target="_blank">
|
||||
<i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Blog",
|
||||
data() {
|
||||
return {
|
||||
blog:{
|
||||
blogId:this.$route.query.id,
|
||||
blogTitle:'本站介绍',
|
||||
blogImg:'https://www.peteralbus.com:8440/assets/blog/imgs/cover/cover1.jpg',
|
||||
blogType:1,
|
||||
blogDescription:'本站是如何建立的？',
|
||||
blogAuthor:'PeterAlbus',
|
||||
blogContent:'# 入站须知\n' +
|
||||
'sss',
|
||||
blogTime:'2021-7-19',
|
||||
blogLike:18,
|
||||
blogViews:200,
|
||||
isTop:1
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getBlog();
|
||||
},
|
||||
methods:{
|
||||
getBlog:function (){
|
||||
let that=this;
|
||||
if(that.blog.blogId!==undefined)
|
||||
{
|
||||
that.$axios.get('queryById?id='+that.blog.blogId)
|
||||
.then(res=>{
|
||||
that.blog=res.data;
|
||||
that.blog.blogViews+=1;
|
||||
that.$axios.post('/update',that.$qs.stringify(that.blog));
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.banner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30vh;
|
||||
background: url("../assets/background.jpg") no-repeat fixed center center;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 13vh;
|
||||
line-height: 1.5;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.blog-content{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.blog-header{
|
||||
margin-bottom: 1px;
|
||||
padding: 8px 20px 12px;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.blog-header p{
|
||||
font-size: 14px;
|
||||
color: #4B6186;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
margin-bottom: 1px;
|
||||
padding: 6px 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="banner">
|
||||
<div class="banner-container">
|
||||
<div>
|
||||
<h1>归档</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Document"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.banner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30vh;
|
||||
background: url("../assets/background.jpg") no-repeat fixed center center;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 13vh;
|
||||
line-height: 1.5;
|
||||
color: #eee;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="home-banner">
|
||||
<div class="banner-container">
|
||||
<div>
|
||||
<el-avatar :size="150" :src="require('../assets/2.png')"></el-avatar>
|
||||
<h2>欢迎来到PeterAlbus的个人博客</h2>
|
||||
<br>
|
||||
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
|
||||
<a href="mailto:wuhongdb@163.com">
|
||||
<i class="fa fa-fw fa-envelope" style="font-size:37px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="github" placement="top">
|
||||
<a href="https://github.com/PeterAlbus" target="_blank">
|
||||
<i class="fa fa-fw fa-github" style="font-size:40px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="bilibili" placement="top">
|
||||
<a href="https://space.bilibili.com/2003822" target="_blank">
|
||||
<i class="iconfont icon-bilibili-line" style="font-size:40px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row class="main-container">
|
||||
<el-col :lg="{span:11,offset:3}" :sm="15">
|
||||
<br/>
|
||||
<div class="module">
|
||||
<h2 class="title">置顶博文</h2>
|
||||
<div class="content" v-for="(item,index) in topBlogs">
|
||||
<el-row style="height: 150px">
|
||||
<el-col :span="8">
|
||||
<el-image :src="item.blogImg" fit="cover" style="height: 140px;max-width: 150px;padding: 5px"></el-image>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="blog-description">
|
||||
<router-link :to="{ path: '/blog',query:{id:item.blogId}}">
|
||||
<h4>{{item.blogTitle}} <el-tag size="mini">{{getType(item.blogType)}}</el-tag></h4>
|
||||
</router-link>
|
||||
<p style="height: 110px">{{item.blogDescription}}</p>
|
||||
<p class="info">
|
||||
<span type="info"><i class="el-icon-user-solid"></i>{{item.blogAuthor}}</span>
|
||||
<span type="info"><i class="el-icon-alarm-clock"></i>{{item.blogTime}}</span>
|
||||
<span type="info"><i class="el-icon-star-on"></i>{{item.blogLike}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="module">
|
||||
<h2 class="title">最新发布</h2>
|
||||
<div class="content" v-for="(item,index) in recentBlogs">
|
||||
<el-row style="height: 150px">
|
||||
<el-col :span="8">
|
||||
<el-image :src="item.blogImg" fit="cover" style="height: 140px;max-width: 150px;padding: 5px"></el-image>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="blog-description">
|
||||
<router-link :to="{ path: '/blog',query:{id:item.blogId}}">
|
||||
<h4>{{item.blogTitle}} <el-tag size="mini">{{getType(item.blogType)}}</el-tag></h4>
|
||||
</router-link>
|
||||
<p style="height: 110px">{{item.blogDescription}}</p>
|
||||
<p class="info">
|
||||
<span type="info"><i class="el-icon-user-solid"></i>{{item.blogAuthor}}</span>
|
||||
<span type="info"><i class="el-icon-alarm-clock"></i>{{item.blogTime}}</span>
|
||||
<span type="info"><i class="el-icon-star-on"></i>{{item.blogLike}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="{span:6}" :sm="9">
|
||||
<br/>
|
||||
<div class="module">
|
||||
<div class="content">
|
||||
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
|
||||
<h4>PeterAlbus</h4>
|
||||
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
|
||||
<a href="mailto:wuhongdb@163.com">
|
||||
<i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="github" placement="top">
|
||||
<a href="https://github.com/PeterAlbus" target="_blank">
|
||||
<i class="fa fa-fw fa-github" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="bilibili" placement="top">
|
||||
<a href="https://space.bilibili.com/2003822" target="_blank">
|
||||
<i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="module">
|
||||
<h2 class="title">友情链接</h2>
|
||||
<div class="content">
|
||||
<a href="http://www.peteralbus.com:8088/" target="_blank">疫迹</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Home',
|
||||
data(){
|
||||
return {
|
||||
blogList:[
|
||||
{
|
||||
blogId:1,
|
||||
blogTitle:'本站介绍',
|
||||
blogImg:'https://www.peteralbus.com:8440/assets/blog/imgs/cover/cover1.jpg',
|
||||
blogType:1,
|
||||
blogDescription:'本站是如何建立的？',
|
||||
blogAuthor:'PeterAlbus',
|
||||
blogContent:'',
|
||||
blogTime:'2021-7-19',
|
||||
blogLike:18,
|
||||
blogViews:200,
|
||||
isTop:1
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getBlogList();
|
||||
},
|
||||
methods:{
|
||||
getBlogList: function (){
|
||||
let that=this;
|
||||
that.$axios.get('queryAll')
|
||||
.then(res=>{
|
||||
console.log(res);
|
||||
that.blogList=res.data;
|
||||
})
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
topBlogs: function (){
|
||||
let topBlogs=[];
|
||||
for(let i of this.blogList)
|
||||
{
|
||||
if(i.isTop==1)
|
||||
{
|
||||
topBlogs.push(i);
|
||||
}
|
||||
}
|
||||
return topBlogs.reverse();
|
||||
},
|
||||
recentBlogs: function (){
|
||||
let recentBlogs=this.blogList.reverse();
|
||||
return recentBlogs.slice(0, 10);
|
||||
},
|
||||
getType: function (){
|
||||
return function (type){
|
||||
let types=['学习笔记','生活','ACG','科技','随笔']
|
||||
return types[type-1];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-banner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
background: url("../assets/background.jpg") no-repeat fixed center center;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
animation: header-effect 1s !important;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
margin-top: 35vh;
|
||||
line-height: 1.5;
|
||||
color: #eee;
|
||||
background: rgba(34, 44, 63, 0.5) !important;
|
||||
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.banner-container a{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.banner-container a:hover{
|
||||
color: black;
|
||||
}
|
||||
|
||||
@keyframes header-effect{
|
||||
0% {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 6px 20px;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-radius: 5px 5px 0 0;
|
||||
background-color: #f7f7f7;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
margin-bottom: 1px;
|
||||
padding: 6px 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.module{
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.blog-description{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info{
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.info span{
|
||||
font-size: smaller;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="banner">
|
||||
<div class="banner-container">
|
||||
<div>
|
||||
<h1>撰写博客</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-container">
|
||||
<el-row>
|
||||
<el-col :lg="{span:16,offset:4}">
|
||||
<div class="blog-content">
|
||||
<el-form ref="blogForm" :model="blog" :rules="rules">
|
||||
<el-form-item label="标题：" prop="blogTitle">
|
||||
<el-input v-model="blog.blogTitle" placeholder="标题" prefix-icon='el-icon-notebook-2'></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="封面图片(点击上传):" prop="goodPath">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
list-type="picture-card"
|
||||
action="https://www.peteralbus.com:8089/upload"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img style="width: 100px; height: 100px" v-if="blog.blogImg" :src="blog.blogImg" class="avatar" alt="">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者：" prop="blogAuthor">
|
||||
<el-input v-model="blog.blogAuthor" placeholder="作者" prefix-icon='el-icon-notebook-2'></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述：" prop="blogDescription">
|
||||
<el-input v-model="blog.blogDescription" placeholder="描述" prefix-icon='el-icon-notebook-2'></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类：" prop="blogType">
|
||||
<el-radio-group v-model="blog.blogType">
|
||||
<el-radio-button :label="1">学习笔记</el-radio-button>
|
||||
<el-radio-button :label="2">生活</el-radio-button>
|
||||
<el-radio-button :label="3">ACG</el-radio-button>
|
||||
<el-radio-button :label="4">科技</el-radio-button>
|
||||
<el-radio-button :label="5">随笔</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否置顶：" prop="blogTop">
|
||||
<el-radio-group v-model="blog.isTop">
|
||||
<el-radio-button :label="0">不置顶</el-radio-button>
|
||||
<el-radio-button :label="1">置顶</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容：" prop="blogContent">
|
||||
<v-md-editor v-model="blog.blogContent"></v-md-editor>
|
||||
</el-form-item>
|
||||
<el-form-item style="text-align: center;">
|
||||
<el-button type="success" v-on:click="onSubmit('blogForm')">提交</el-button>
|
||||
<el-button type="info" v-on:click="getBlog">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NewBlog",
|
||||
data() {
|
||||
return {
|
||||
blog:{
|
||||
blogId:this.$route.query.id,
|
||||
blogTitle:'',
|
||||
blogImg:'',
|
||||
blogType:1,
|
||||
blogDescription:'',
|
||||
blogAuthor:'PeterAlbus',
|
||||
blogContent:'',
|
||||
blogTime:'2021-07-22',
|
||||
blogLike:0,
|
||||
blogViews:0,
|
||||
isTop:0
|
||||
},
|
||||
rules: {
|
||||
blogTitle: [
|
||||
{required: true, message: '标题不可为空', trigger: 'blur'}
|
||||
],
|
||||
blogAuthor: [
|
||||
{required: true, message: '作者不可为空', trigger: 'blur'}
|
||||
],
|
||||
blogDescription: [
|
||||
{required: true, message: '描述不可为空', trigger: 'blur'}
|
||||
],
|
||||
blogType: [
|
||||
{required: true, message: '必须选择类型', trigger: 'blur'}
|
||||
],
|
||||
blogContent: [
|
||||
{required: true, message: '内容不可为空', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getBlog();
|
||||
},
|
||||
methods:{
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log(res);
|
||||
if (res !== 'error') {
|
||||
this.blog.blogImg = res;
|
||||
this.$message.success("上传成功");
|
||||
} else this.$message.error("上传失败!");
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
console.log(file.type);
|
||||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error('上传图片只能是 JPG/PNG 格式!');
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!');
|
||||
}
|
||||
return isJPG && isLt2M;
|
||||
},
|
||||
getBlog:function (){
|
||||
let that=this;
|
||||
if(that.blog.blogId!==undefined)
|
||||
{
|
||||
that.$axios.get('queryById?id='+that.blog.blogId)
|
||||
.then(res=>{
|
||||
that.blog=res.data;
|
||||
})
|
||||
}
|
||||
},
|
||||
onSubmit(formName) {
|
||||
// 为表单绑定验证功能
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let that = this;
|
||||
if(that.blog.blogId!==undefined)
|
||||
{
|
||||
console.log('update:',that.blog);
|
||||
that.$axios.post('/update',that.$qs.stringify(that.blog))
|
||||
.then(res=>{
|
||||
if(res.data!='fail')
|
||||
{
|
||||
that.$message.success('更新成功');
|
||||
that.$router.push('/blog?id='+that.blog.blogId)
|
||||
}
|
||||
else
|
||||
{
|
||||
that.$message.error('更新失败');
|
||||
}
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log('new:',that.blog);
|
||||
that.$axios.post('/add',that.$qs.stringify(that.blog))
|
||||
.then(res=>{
|
||||
if(res.data!='fail')
|
||||
{
|
||||
that.$message.success('发布成功');
|
||||
that.$router.push('/blog?id='+that.blog.blogId)
|
||||
}
|
||||
else
|
||||
{
|
||||
that.$message.error('发布失败');
|
||||
}
|
||||
})
|
||||
}
|
||||
//that.$axios.post('/business/update',that.$qs.stringify(dat))
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.banner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30vh;
|
||||
background: url("../assets/background.jpg") no-repeat fixed center center;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 13vh;
|
||||
line-height: 1.5;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.blog-content{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="banner">
|
||||
<div class="banner-container">
|
||||
<div>
|
||||
<h1>分类查看</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row class="main-container">
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :lg="{span:16,offset:4}">
|
||||
<el-radio-group v-model="selectType">
|
||||
<el-radio-button :label="1">学习笔记</el-radio-button>
|
||||
<el-radio-button :label="2">生活</el-radio-button>
|
||||
<el-radio-button :label="3">ACG</el-radio-button>
|
||||
<el-radio-button :label="4">科技</el-radio-button>
|
||||
<el-radio-button :label="5">随笔</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :lg="{span:11,offset:3}" :sm="15">
|
||||
<br/>
|
||||
<div class="module">
|
||||
<h2 class="title">博文列表</h2>
|
||||
<div class="content" v-for="(item,index) in selectedBlogs">
|
||||
<el-row style="height: 150px">
|
||||
<el-col :span="8">
|
||||
<el-image :src="item.blogImg" fit="cover" style="height: 140px;max-width: 150px;padding: 5px"></el-image>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="blog-description">
|
||||
<router-link :to="{ path: '/blog',query:{id:item.blogId}}">
|
||||
<h4>{{item.blogTitle}} <el-tag size="mini">{{getType(item.blogType)}}</el-tag></h4>
|
||||
</router-link>
|
||||
<p style="height: 110px">{{item.blogDescription}}</p>
|
||||
<p class="info">
|
||||
<span type="info"><i class="el-icon-user-solid"></i>{{item.blogAuthor}}</span>
|
||||
<span type="info"><i class="el-icon-alarm-clock"></i>{{item.blogTime}}</span>
|
||||
<span type="info"><i class="el-icon-star-on"></i>{{item.blogLike}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="background-color: white">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:total="blogList.length">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="{span:6}" :sm="9">
|
||||
<br/>
|
||||
<div class="module">
|
||||
<div class="content">
|
||||
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
|
||||
<h4>PeterAlbus</h4>
|
||||
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
|
||||
<a href="mailto:wuhongdb@163.com">
|
||||
<i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="github" placement="top">
|
||||
<a href="https://github.com/PeterAlbus" target="_blank">
|
||||
<i class="fa fa-fw fa-github" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="bilibili" placement="top">
|
||||
<a href="https://space.bilibili.com/2003822" target="_blank">
|
||||
<i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
|
||||
</a>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="module">
|
||||
<h2 class="title">友情链接</h2>
|
||||
<div class="content">
|
||||
<a href="http://www.peteralbus.com:8088/" target="_blank">疫迹</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Types",
|
||||
data(){
|
||||
return {
|
||||
selectType:1,
|
||||
currentPage:1,
|
||||
pageSize:10,
|
||||
blogList:[
|
||||
{
|
||||
blogId:1,
|
||||
blogTitle:'本站介绍',
|
||||
blogImg:'https://www.peteralbus.com:8440/assets/blog/imgs/cover/cover1.jpg',
|
||||
blogType:1,
|
||||
blogDescription:'本站是如何建立的？',
|
||||
blogAuthor:'PeterAlbus',
|
||||
blogContent:'',
|
||||
blogTime:'2021-7-19',
|
||||
blogLike:18,
|
||||
blogViews:200,
|
||||
isTop:1
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getBlogList();
|
||||
},
|
||||
methods:{
|
||||
getBlogList: function (){
|
||||
let that=this;
|
||||
that.$axios.get('queryAll')
|
||||
.then(res=>{
|
||||
console.log(res);
|
||||
that.blogList=res.data;
|
||||
})
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
selectedBlogs: function (){
|
||||
let slectedBlogs=[];
|
||||
for(let i of this.blogList)
|
||||
{
|
||||
if(i.blogType==this.selectType)
|
||||
{
|
||||
slectedBlogs.push(i);
|
||||
}
|
||||
}
|
||||
slectedBlogs=slectedBlogs.reverse();
|
||||
return slectedBlogs.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
|
||||
},
|
||||
getType: function (){
|
||||
return function (type){
|
||||
let types=['学习笔记','生活','ACG','科技','随笔']
|
||||
return types[type-1];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.banner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30vh;
|
||||
background: url("../assets/background.jpg") no-repeat fixed center center;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 13vh;
|
||||
line-height: 1.5;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 6px 20px;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-radius: 5px 5px 0 0;
|
||||
background-color: #f7f7f7;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
margin-bottom: 1px;
|
||||
padding: 6px 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.module{
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.blog-description{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info{
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.info span{
|
||||
font-size: smaller;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="banner">
|
||||
<div class="banner-container">
|
||||
<div>
|
||||
<h1>分类查看</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="16" :offset="4">
|
||||
<el-form>
|
||||
<el-form-item label="图片名称">
|
||||
<el-input v-model="imgName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传图片">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="https://www.peteralbus.com:8089/photo/upload/"
|
||||
ref="upload"
|
||||
list-type="picture-card"
|
||||
:data="upData"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:auto-upload="false">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-button v-on:click="submitUpload">上传</el-button>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UploadPhoto",
|
||||
data() {
|
||||
return {
|
||||
imgName:'',
|
||||
imageUrl: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
// const isJPG = file.type === 'image/jpeg';
|
||||
// const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
//
|
||||
// if (!isJPG) {
|
||||
// this.$message.error('上传头像图片只能是 JPG 格式!');
|
||||
// }
|
||||
// if (!isLt2M) {
|
||||
// this.$message.error('上传头像图片大小不能超过 2MB!');
|
||||
// }
|
||||
return true;
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
upData:function () {
|
||||
let data={imgName:this.imgName}
|
||||
return data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.banner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30vh;
|
||||
background: url("../assets/background.jpg") no-repeat fixed center center;
|
||||
text-align: center;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 13vh;
|
||||
line-height: 1.5;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
devServer: {
|
||||
port: 80 //修改服务端口号
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue