Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add menu #74

Merged
merged 3 commits into from
Mar 25, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions jvue-front/components/themes/dark/Body.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ export default {
name: "Body",
components: { Aside, PostList },
props: {
type: {
type: String,
default: "post"
},
postList: {
type: Array,
default: () => []
Expand All @@ -44,6 +48,7 @@ export default {
this.showNores = false;
this.loadText = "加载中...";
const postsResult = await this.$axios.$post("/blog/post/list", {
postType: this.type,
postStatus: "publish",
pageNum: ++this.currentPage,
pageSize: this.pageSize
Expand Down
5 changes: 5 additions & 0 deletions jvue-front/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions jvue-front/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"express": "^4.16.4",
"font-awesome": "^4.7.0",
"nuxt": "^2.4.0",
"progress-catalog": "^1.0.7",
"vue-hljs": "^1.1.2",
"vue-uweb": "^0.2.1"
},
Expand Down
1 change: 0 additions & 1 deletion jvue-front/pages/dark.css
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@
border: solid 1px #f3f3f3;
border-radius: 4px;
padding: 10px;
margin: 15px;
}
.post-dark .el-breadcrumb__inner a,
.post-dark .el-breadcrumb__inner.is-link {
Expand Down
2 changes: 1 addition & 1 deletion jvue-front/pages/note-dark.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<Header />
</el-header>
<el-main class="el-main-dark">
<Body :post-list="postListArray" />
<Body type="note" :post-list="postListArray" />
</el-main>
</el-container>
</el-main>
Expand Down
130 changes: 88 additions & 42 deletions jvue-front/pages/post-dark/_id.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,52 +15,69 @@
<Header />
</el-header>
<el-main class="el-main-dark">
<div id="post" class="post-dark">
<!-- 导航 -->
<el-breadcrumb separator="/">
<el-breadcrumb-item
v-for="item in items"
:key="item.text"
:to="item.to"
>
{{ item.text }}
</el-breadcrumb-item>
</el-breadcrumb>
<el-row>
<el-col :xs="24" :xl="18">
<div id="post" class="post-dark">
<!-- 导航 -->
<el-breadcrumb separator="/">
<el-breadcrumb-item
v-for="item in items"
:key="item.text"
:to="item.to"
>
{{ item.text }}
</el-breadcrumb-item>
</el-breadcrumb>

<!-- 文章标题 -->
<div id="postTitle">
<nuxt-link
:to="
postObj.name === ''
? '/post-dark/' + postObj.id + '.html'
: '/post-dark/' + postObj.name + '.html'
"
>
<h1>
{{ postObj.title }}
</h1>
</nuxt-link>
</div>
<!-- 文章标题 -->
<div id="postTitle">
<nuxt-link
:to="
postObj.name === ''
? '/post-dark/' + postObj.id + '.html'
: '/post-dark/' + postObj.name + '.html'
"
>
<h1>
{{ postObj.title }}
</h1>
</nuxt-link>
</div>

<!-- 文章详情 -->
<div
id="postContent"
v-highlight
v-html="postObj.content"
></div>
<!-- 文章详情 -->
<div
id="postContent"
v-highlight
v-html="postObj.content"
></div>

<h1 v-if="errorMessage !== ''" class="error-message-dark">
{{ errorMessage }}
</h1>
<h1
v-if="errorMessage !== ''"
class="error-message-dark"
>
{{ errorMessage }}
</h1>

<div class="copy">
<p>作者:Terwer</p>
<p>首发:远方的灯塔</p>
<p>
原创内容,转载请注明出处!
</p>
</div>
</div>
<div class="copy">
<p>作者:Terwer</p>
<p>首发:远方的灯塔</p>
<p>
原创内容,转载请注明出处!
</p>
</div>
</div>
</el-col>
<el-col :xs="0" :xl="6">
<div id="postMenu">
<div>
<p>文章目录</p>
</div>
<div id="postMenuWapper">
<p>目录加载中...</p>
</div>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</el-main>
Expand All @@ -86,12 +103,15 @@
/* eslint nuxt/no-globals-in-created: 0 */ // --> OFF
/* eslint vue/no-v-html: 0 */ // --> OFF
/* eslint no-useless-escape: 0 */ // --> OFF
/* eslint no-new: 0 */ // --> OFF
import Catalog from "progress-catalog";
import { getLogger } from "../../util/logger";
import HeaderTime from "../../components/themes/dark/HeaderTime";
import Header from "../../components/themes/dark/Header";
import Footer from "../../components/themes/dark/Footer";
import FriendLink from "../../components/themes/dark/FriendLink";
import { inBrowser } from "../../util/dom";
// 引入

const logger = getLogger("pages/post");

Expand Down Expand Up @@ -166,6 +186,14 @@ export default {
postId: this.postObj.id,
hits: ++this.postObj.hits
});

// 文章目录
new Catalog({
contentEl: "postContent",
catalogEl: "postMenuWapper",
selector: ["h1", "h2", "h3", "h4", "h5", "h6"],
cool: true
});
},
created() {
if (inBrowser && window.MathJax) {
Expand All @@ -189,6 +217,24 @@ export default {
@import "../common.css";
@import "../dark.css";
@import "../../plugins/lib/vue-hljs/vs2015.css";
@import "../../node_modules/progress-catalog/src/progress-catalog.css";

#postMenu {
margin-top: 20px;
position: fixed;
p {
color: #f3f3f3;
}
.cl-wrapper li > .cl-link {
max-width: 350px;
padding: 0 10px;
}
.cl-wrapper li > .cl-link:hover {
color: #ffcb6b;
background-color: #181818;
}
}

.post-dark {
margin: 20px;
a {
Expand Down
Loading