X Tutup
Skip to content

Commit 3eea7b7

Browse files
MarkusMarkus
Markus
authored and
Markus
committed
Website improvements
- use FontAwesome instead of Glyphicons - made page content smaller for faster load times and less trafic - misc refactoring of liquid and js source - Use Roboto Font instead of Microsoft YaHei
1 parent f158df3 commit 3eea7b7

File tree

6 files changed

+45
-121
lines changed

6 files changed

+45
-121
lines changed

‎_includes/head.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
99
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
1010

11+
<!-- Fonts -->
12+
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700" rel="stylesheet">
13+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
14+
1115
<!-- JQuery 2.1.4 -->
1216
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
1317

‎_includes/header.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,17 @@
3131
{% else %}
3232
<li>
3333
{% endif %}
34-
<a href="{{ site.baseurl }}/"><span class="glyphicon glyphicon-home"></span> Home</a></li>
34+
<a href="{{ site.baseurl }}/"><span class="fa fa-lg fa-home"></span> Home</a></li>
3535

36-
{% for p in site.pages %}
36+
{% assign allPages = site.pages | sort: 'page-index' %}
37+
{% for p in allPages %}
3738
{% if p.title and p.layout != "pattern" %}
3839
{% if p.url == page.url %}
3940
<li class="active">
4041
{% else %}
4142
<li>
4243
{% endif %}
43-
<a href="{{ p.url | prepend: site.baseurl }}"><span class="glyphicon {{ p.icon }}"></span> {{ p.title }}</a></li>
44+
<a href="{{ p.url | prepend: site.baseurl }}"><span class="fa fa-lg {{ p.icon }}"></span> {{ p.title }}</a></li>
4445
{% endif %}
4546
{% endfor %}
4647
</ul>

‎_layouts/page.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
layout: default
33
---
44
<div class="post-area post">
5-
{% if site.github_username %}
5+
{% if page.title %}
66
<header>
77
<h1>{{ page.title }}</h1>
88
</header>
99
<hr>
10-
{% endif %}
11-
<article class="page-content">
12-
{{ content }}
13-
</article>
10+
{% endif %}
11+
<article class="page-content">
12+
{{ content }}
13+
</article>
1414
</div>

‎pages/patterns.html‎

Lines changed: 15 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
layout: default
33
title: Patterns
44
permalink: /patterns/
5-
icon: glyphicon-th-large
5+
icon: fa-th-large
66
comments: false
7+
page-index: 1
78
---
89
<div id="index" class="row">
910
<div class="col-sm-9">
@@ -17,55 +18,17 @@
1718
</div>
1819
<div class="post-list-body">
1920

20-
{% assign allPages = site.pages | where:"layout","pattern" %}
21-
<div class="all-posts" post-category="All" post-tag="All">
22-
{% for page in allPages %}
23-
<a class="post-list-item" href="{{ page.url | prepend: site.baseurl }}">
24-
<h2>
25-
{{ page.title }}
26-
</h2>
27-
<!--<span class="">{{ post.date | date: "%b %-d, %Y" }}</span>-->
28-
</a>
21+
{% assign allPatterns = site.pages | where:"layout","pattern" | sort: 'title' %}
22+
<div>
23+
{% for page in allPatterns %}
24+
<a class="post-list-item" href="{{ page.url | prepend: site.baseurl }}"
25+
cats='All;{{ page.categories | join: ';' }}'
26+
tags='All;{{ page.tags | join: ';' }}'>
27+
<h2>{{ page.title }}</h2>
28+
</a>
29+
2930
{% endfor %}
3031
</div>
31-
32-
<!-- <div class="posts-in-categories"> -->
33-
{% for category in site.category-list %}
34-
<div post-category="{{ category }}">
35-
{% for page in allPages %}
36-
{% if page.categories contains category %}
37-
{% if page.url %}
38-
<a class="post-list-item" href="{{ page.url | prepend: site.baseurl }}">
39-
<h2>
40-
{{ page.title }}
41-
</h2>
42-
<span class="">{{ page.date | date: "%b %-d, %Y" }}</span>
43-
</a>
44-
{% endif %}
45-
{% endif %}
46-
{% endfor %}
47-
</div>
48-
{% endfor %}
49-
<!-- </div> -->
50-
51-
<!-- <div class="posts-in-tags"> -->
52-
{% for tag in site.tag-list %}
53-
<div post-tag="{{ tag }}">
54-
{% for page in allPages %}
55-
{% if page.tags contains tag %}
56-
{% if page.url %}
57-
<a class="post-list-item" href="{{ page.url | prepend: site.baseurl }}">
58-
<h2>
59-
{{ page.title }}
60-
</h2>
61-
<span class="">{{ page.date | date: "%b %-d, %Y" }}</span>
62-
</a>
63-
{% endif %}
64-
{% endif %}
65-
{% endfor %}
66-
</div>
67-
{% endfor %}
68-
<!-- </div> -->
6932
</div>
7033
</div>
7134
</div>
@@ -76,13 +39,13 @@ <h2>
7639
</div>
7740

7841
<a href="javascript:;" class="sidebar-list-item category" category="All">
79-
All<span class="my-badge"> {{ allPages | size }}</span>
42+
All<span class="my-badge"> {{ allPatterns | size }}</span>
8043
</a>
8144
{% for category in site.category-list %}
8245
<a href="javascript:;" class="sidebar-list-item category" category="{{ category }}">
8346
{{ category }} <span class="my-badge">
8447
{% assign counter=0 %}
85-
{% for page in allPages %}
48+
{% for page in allPatterns %}
8649
{% if page.categories contains category %}
8750
{% assign counter=counter | plus:1 %}
8851
{% endif %}
@@ -99,13 +62,13 @@ <h2>
9962
</div>
10063

10164
<a href="javascript:;" class="sidebar-list-item tag" tag="All">
102-
All<span class="my-badge"> {{ allPages | size }}</span>
65+
All<span class="my-badge"> {{ allPatterns | size }}</span>
10366
</a>
10467
{% for tag in site.tag-list %}
10568
<a href="javascript:;" class="sidebar-list-item tag" tag="{{ tag }}">
10669
{{ tag }} <span class="my-badge">
10770
{% assign counter=0 %}
108-
{% for page in allPages %}
71+
{% for page in allPatterns %}
10972
{% if page.tags contains tag %}
11073
{% assign counter=counter | plus:1 %}
11174
{% endif %}

‎static/css/index.css‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
/* commom */
99
body {
1010
background-image: url("{{ "/static/img/canvas_bg.jpg" | prepend: site.baseurl }} ");
11-
font-family: 'Microsoft YaHei', 'SimHei', sans-serif;
11+
font-family: 'Roboto', sans-serif;
1212
}
1313
article p{
1414
/*text-indent: 2em;*/
@@ -19,7 +19,8 @@ pre{
1919
}
2020
2121
pre code{
22-
font-size: 14px;
22+
font-family: 'Roboto Mono', monospace;
23+
font-size: 16px;
2324
}
2425
2526
table{
@@ -44,7 +45,6 @@ table td{
4445
}
4546
4647
47-
4848
#index a:link {color: #005} /* 未访问的链接 */
4949
#index a:visited {color: #669} /* 已访问的链接 */
5050
#index a:hover {color: #336;text-decoration: none;} /* 鼠标移动到链接上 */
@@ -60,7 +60,6 @@ nav{
6060
border-radius: 0;
6161
}
6262
.navbar-nav li{
63-
width: 110px;
6463
text-align: center;
6564
}
6665
@@ -87,10 +86,12 @@ nav{
8786
padding:8px 30px 10px 30px;
8887
border-bottom:1px solid #ddd;
8988
89+
/*
9090
transition:0.4s ease;
9191
-webkit-transition:0.4s ease;
9292
-moz-transition:0.4s ease;
9393
-o-transition:0.4s ease;
94+
*/
9495
}
9596
.post-list-item:last-of-type{
9697
border-bottom: none;
@@ -340,6 +341,10 @@ blockquote:last-child {
340341
text-align: right;
341342
}
342343

344+
.page-content h1:target, h2:target, h3:target, h4:target, h5:target {
345+
background-color: #ffa
346+
}
347+
343348
/**
344349
* demo
345350
* 瀑布流

‎static/js/index.js‎

Lines changed: 8 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,23 @@
1-
/**
2-
* 页面ready方法
3-
*/
41
$(document).ready(function() {
5-
62
categoryAndTagDisplay();
73
generateContent();
84
backToTop();
95
});
106

11-
/**
12-
* load方法，页面的加载完成后触发
13-
* {fixFooterInit();} 固定Footer栏
14-
*/
15-
/*$(window).load(function() {
16-
fixFooterInit();
17-
});*/
18-
19-
20-
/**
21-
* 固定底栏的初始化方法
22-
* 在一开始载入页面时，使用fixFooter()方法固定底栏。
23-
* 在浏览器窗口改变大小是，依然固定底栏
24-
* @return {[type]} [description]
25-
*/
267
function fixFooterInit() {
278
var footerHeight = $('footer').outerHeight();
28-
var footerMarginTop = getFooterMarginTop() - 0; //类型转换
29-
// var footerMarginTop = 80;
9+
var footerMarginTop = getFooterMarginTop() - 0;
3010

3111
fixFooter(footerHeight, footerMarginTop); //fix footer at the beginning
3212

3313
$(window).resize(function() { //when resize window, footer can auto get the postion
3414
fixFooter(footerHeight, footerMarginTop);
3515
});
36-
37-
/* $('body').click(function() {
38-
fixFooter(footerHeight, footerMarginTop);
39-
});*/
40-
41-
4216
}
4317

44-
/**
45-
* 固定底栏
46-
* @param {number} footerHeight 底栏高度
47-
* @param {number} footerMarginTop 底栏MarginTop
48-
* @return {[type]} [description]
49-
*/
5018
function fixFooter(footerHeight, footerMarginTop) {
5119
var windowHeight = $(window).height();
5220
var contentHeight = $('body>.container').outerHeight() + $('body>.container').offset().top + footerHeight + footerMarginTop;
53-
// console.log("window---"+windowHeight);
54-
// console.log("$('body>.container').outerHeight()---"+$('body>.container').outerHeight() );
55-
// console.log("$('body>.container').height()---"+$('body>.container').height() );
56-
// console.log("$('#main').height()--------"+$('#main').height());
57-
// console.log("$('body').height()--------"+$('body').height());
58-
//console.log("$('#main').html()--------"+$('#main').html());
59-
// console.log("$('body>.container').offset().top----"+$('body>.container').offset().top);
60-
// console.log("footerHeight---"+footerHeight);
61-
// console.log("footerMarginTop---"+footerMarginTop);
6221
console.log(contentHeight);
6322
if (contentHeight < windowHeight) {
6423
$('footer').addClass('navbar-fixed-bottom');
@@ -69,10 +28,6 @@ function fixFooter(footerHeight, footerMarginTop) {
6928
$('footer').show(400);
7029
}
7130

72-
/**
73-
* 使用正则表达式得到底栏的MarginTop
74-
* @return {string} 底栏的MarginTop
75-
*/
7631
function getFooterMarginTop() {
7732
var margintop = $('footer').css('marginTop');
7833
var patt = new RegExp("[0-9]*");
@@ -82,24 +37,22 @@ function getFooterMarginTop() {
8237
}
8338

8439
function categoryAndTagDisplay() {
85-
/*only show All*/
40+
/*
8641
$('.post-list-body>div[post-category!=All]').hide();
87-
/*only show All*/
8842
$('.post-list-body>div[post-tag!=All]').hide();
89-
43+
*/
9044
/*show category when click categories list*/
9145
$('.sidebar-list-item.category').click(function() {
9246
var category = $(this).attr('category'); //get category's name
93-
94-
$('.post-list-body>div[post-category!=\'' + category + '\']').hide(250);
95-
$('.post-list-body>div[post-category=\'' + category + '\']').show(400);
47+
$('.post-list-item').not('[cats*=\'' + category + '\']').slideUp(200)
48+
$('.post-list-item[cats*=\'' + category + '\']').slideDown()
9649
});
9750
/*show category when click tags list*/
9851
$('.sidebar-list-item.tag').click(function() {
9952
var tag = $(this).attr('tag'); //get tag's name
10053

101-
$('.post-list-body>div[post-tag!=\'' + tag + '\']').hide(250);
102-
$('.post-list-body>div[post-tag=\'' + tag + '\']').show(400);
54+
$('.post-list-item').not('[tags*=\'' + tag + '\']').slideUp(200)
55+
$('.post-list-item[tags*=\'' + tag + '\']').slideDown()
10356
});
10457
}
10558

@@ -116,9 +69,7 @@ function backToTop() {
11669
});
11770
}
11871

119-
/**
120-
* 侧边目录
121-
*/
72+
12273
function generateContent() {
12374

12475
// console.log($('#markdown-toc').html());

0 commit comments

Comments
 (0)
X Tutup