249 lines
11 KiB
HTML
249 lines
11 KiB
HTML
---
|
|
layout: default
|
|
---
|
|
|
|
<script src="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/js/components/sticky.min.js"></script>
|
|
<style>
|
|
#x-left-box {
|
|
min-width: 336px;
|
|
}
|
|
#x-left-content {
|
|
display: none;
|
|
}
|
|
#x-right-box {
|
|
padding: 0 60px 0 2px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
#x-right-box {
|
|
padding: 0 10px 0 0;
|
|
}
|
|
}
|
|
#x-right-content {
|
|
display: none;
|
|
min-height: 400px;
|
|
}
|
|
.x-center-for-hide-left {
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAMCAYAAABIvGxUAAADHmlDQ1BJQ0MgUHJvZmlsZQAAeAGFVN9r01AU/tplnbDhizpnEQk+aJFuZFN0Q5y2a1e6zVrqNrchSJumbVyaxiTtfrAH2YtvOsV38Qc++QcM2YNve5INxhRh+KyIIkz2IrOemzRNJ1MDufe73/nuOSfn5F6g+XFa0xQvDxRVU0/FwvzE5BTf8gFeHEMr/GhNi4YWSiZHQA/Tsnnvs/MOHsZsdO5v36v+Y9WalQwR8BwgvpQ1xCLhWaBpXNR0E+DWie+dMTXCzUxzWKcECR9nOG9jgeGMjSOWZjQ1QJoJwgfFQjpLuEA4mGng8w3YzoEU5CcmqZIuizyrRVIv5WRFsgz28B9zg/JfsKiU6Zut5xCNbZoZTtF8it4fOX1wjOYA1cE/Xxi9QbidcFg246M1fkLNJK4RJr3n7nRpmO1lmpdZKRIlHCS8YlSuM2xp5gsDiZrm0+30UJKwnzS/NDNZ8+PtUJUE6zHF9fZLRvS6vdfbkZMH4zU+pynWf0D+vff1corleZLw67QejdX0W5I6Vtvb5M2mI8PEd1E/A0hCgo4cZCjgkUIMYZpjxKr4TBYZIkqk0ml0VHmyONY7KJOW7RxHeMlfDrheFvVbsrj24Pue3SXXjrwVhcW3o9hR7bWB6bqyE5obf3VhpaNu4Te55ZsbbasLCFH+iuWxSF5lyk+CUdd1NuaQU5f8dQvPMpTuJXYSWAy6rPBe+CpsCk+FF8KXv9TIzt6tEcuAcSw+q55TzcbsJdJM0utkuL+K9ULGGPmQMUNanb4kTZyKOfLaUAsnBneC6+biXC/XB567zF3h+rkIrS5yI47CF/VFfCHwvjO+Pl+3b4hhp9u+02TrozFa67vTkbqisXqUj9sn9j2OqhMZsrG+sX5WCCu0omNqSrN0TwADJW1Ol/MFk+8RhAt8iK4tiY+rYleQTysKb5kMXpcMSa9I2S6wO4/tA7ZT1l3maV9zOfMqcOkb/cPrLjdVBl4ZwNFzLhegM3XkCbB8XizrFdsfPJ63gJE722OtPW1huos+VqvbdC5bHgG7D6vVn8+q1d3n5H8LeKP8BqkjCtbCoV8yAAAACXBIWXMAAAsSAAALEgHS3X78AAABZ2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29sPkFkb2JlIEZpcmV3b3JrcyBDUzY8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CsO3s+UAAAAsSURBVAgdY7x69ep/BgaGRpZNmzYBaQYGxv//QQIMDExgEpnBcu3aNQoUAwChKRhfrNwRnQAAAABJRU5ErkJggg==");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
border-color: #eee;
|
|
border-image: none;
|
|
border-style: solid;
|
|
border-width: 0 0px 0 0;
|
|
|
|
padding: 0 5px 0 5px;
|
|
cursor: pointer;
|
|
z-index: 9999999;
|
|
}
|
|
.x-center-when-hide-left {
|
|
cursor: pointer;
|
|
background-color: #eee;
|
|
}
|
|
#markdown-toc {
|
|
display: none;
|
|
}
|
|
.uk-nav-side>li>ul>li>a {
|
|
color: #444;
|
|
padding-left: 10px;
|
|
}
|
|
.uk-nav-side>li>ul>li.uk-active>a {
|
|
background: #00a8e6;
|
|
color: #fff;
|
|
}
|
|
.uk-nav-side>li>ul>li>a:focus,.uk-nav-side>li>ul>li>a:hover {
|
|
background: rgba(0,0,0,.05);
|
|
color: #444;
|
|
outline: 0
|
|
}
|
|
article>div>h2 {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
article>div>h2, article>div>h3, article>div>h4 {
|
|
padding-left: 6px;
|
|
border-left: 3px solid #00a8e6;
|
|
}
|
|
</style>
|
|
|
|
<div class="uk-flex">
|
|
<div id="x-left-box" class="uk-visible-large uk-width-large-3-10">
|
|
<div id="x-left-content">
|
|
<ul id="related-articles" v-show="articles.length" class="uk-list" style="margin-bottom: 10px;">
|
|
<li class="uk-panel uk-panel-box">
|
|
<h3>相关文章:</h3>
|
|
<ul class="uk-nav uk-nav-side" style="margin:0;padding:0;">
|
|
<li v-for="article in articles">
|
|
{% raw %}
|
|
<a :href="article.url">{{ article.title }}</a>
|
|
{% endraw %}
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<script>
|
|
vm_related_articles = new Vue({
|
|
el: "#related-articles",
|
|
data: {
|
|
articles: [],
|
|
origin_articles: [
|
|
{% for post in site.posts %}
|
|
{% for page_categorie in page.categories %}
|
|
{% if post.categories contains page_categorie and post.url != page.url %}
|
|
{title: "{{post.title}}", url: "{{post.url}}", date: "{{post.date}}", score: 10},
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% for page_tag in page.tags %}
|
|
{% if post.tags contains page_tag and post.url != page.url %}
|
|
{title: "{{post.title}}", url: "{{post.url}}", date: "{{post.date}}", score: 11},
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
],
|
|
},
|
|
mounted: function () {
|
|
let article_map = new Map();
|
|
for (article of this.origin_articles) {
|
|
if (!article_map.has(article.url)) {
|
|
article_map.set(article.url, article)
|
|
} else {
|
|
article_map.get(article.url).score += article.score
|
|
}
|
|
}
|
|
for (article of article_map) {
|
|
this.articles.push(article[1])
|
|
}
|
|
this.articles.sort(this.compareArticles)
|
|
this.articles = this.articles.slice(0, 5)
|
|
},
|
|
methods: {
|
|
compareArticles: function (x, y) {
|
|
if (x.score < y.score) {
|
|
return 1;
|
|
} else if (x.score > y.score) {
|
|
return -1;
|
|
} else {
|
|
return 0 //todo 一系列的文章,按分类与标签比较后分数基本相同, 还需要按创建时间与本文章的距离排序
|
|
}
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
<ul data-uk-sticky="{top:10}" class="uk-list">
|
|
<li class="uk-panel uk-panel-box" style="margin-bottom: 10px;">
|
|
<h3>目录:</h3>
|
|
<ul id="x-toc" class="uk-nav uk-nav-side" style="margin:0;padding:0;"
|
|
data-uk-scrollspy-nav="{closest:'li'}"></ul>
|
|
</li>
|
|
<li class="uk-panel">
|
|
<!-- feling-pages-left -->
|
|
<ins class="adsbygoogle"
|
|
style="display:inline-block;width:336px;height:280px"
|
|
data-ad-client="ca-pub-3779740765441924"
|
|
data-ad-slot="6169161876"></ins>
|
|
<script>
|
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
</script>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="x-center-box" class="x-center-for-hide-left uk-visible-large"
|
|
v-bind:class="{'x-center-when-hide-left': !leftVisible}"
|
|
v-on:click="toggleLeft()"></div>
|
|
<script>
|
|
vm_x_center_box = new Vue({
|
|
el: "#x-center-box",
|
|
data: {
|
|
leftVisible: true,
|
|
},
|
|
methods: {
|
|
toggleLeft: function() {
|
|
$('#x-left-box').toggle();
|
|
this.leftVisible = !this.leftVisible;
|
|
},
|
|
hideLeft: function() {
|
|
$('#x-left-box').hide();
|
|
this.leftVisible = false;
|
|
},
|
|
showLeft: function() {
|
|
$('#x-left-box').show();
|
|
this.leftVisible = true;
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<div id="x-right-box" class="uk-width-1-1">
|
|
<div id="x-right-content">
|
|
<article class="x-right-content uk-article">
|
|
<h1>{{ page.title }}</h1>
|
|
<div class="uk-article-meta x-article-meta">
|
|
{% if page.date %}
|
|
<span>创建于: {{ page.date | date: "%Y-%m-%d" }}</span>
|
|
{% endif %}
|
|
|
|
{% if page.source %}
|
|
<span style="padding-left:15px;">投稿人: {{ page.source }}</span>
|
|
{% endif %}
|
|
|
|
{% if page.lastModifiedDate %}
|
|
<span style="padding-left:15px;">最近更新: {{ page.lastModifiedDate | date: "%Y-%m-%d" }}</span>
|
|
{% endif %}
|
|
|
|
{% if page.categories %}
|
|
<span style="padding-left:15px;">分类:
|
|
{% for categorie in page.categories %}
|
|
{{ categorie }}
|
|
{% endfor %}
|
|
</span>
|
|
{% endif %}
|
|
|
|
{% if page.tags.size > 0 %}
|
|
<span style="padding-left:15px;display: none;">标签:
|
|
{% for tag in page.tags %}
|
|
{{ tag }}
|
|
{% endfor %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<hr class="x-article-title-divider">
|
|
<div>
|
|
{{ content }}
|
|
</div>
|
|
</article>
|
|
<div id="gitalk-container"></div>
|
|
</div>
|
|
<script>
|
|
if ($("#markdown-toc").length > 0) {
|
|
$('#markdown-toc').children().appendTo('#x-toc');
|
|
if ($('#x-toc li').length > 8) {
|
|
$('#x-left-content ins').hide();
|
|
}
|
|
} else {
|
|
$('#x-toc').parent().hide()
|
|
}
|
|
</script>
|
|
<script>
|
|
$('#x-right-content').show();
|
|
$('#x-left-content').show();
|
|
</script>
|
|
|
|
<!-- <link rel="stylesheet" href="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/css/gitalk.css">
|
|
<script src="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/js/gitalk.min.js"></script>
|
|
<script>
|
|
var gitalk = new Gitalk({
|
|
clientID: '588f86d430e6e626e4ed',
|
|
clientSecret: '3eff3c4be33f3701fcc327d32c9e5f108134311d',
|
|
repo: 'io',
|
|
owner: 'playay',
|
|
admin: ['playay'],
|
|
id: '{{ page.url }}',
|
|
distractionFreeMode: false
|
|
})
|
|
|
|
gitalk.render('gitalk-container')
|
|
</script> -->
|
|
</div>
|
|
</div>
|