Skip to content

Commit 176ae69

Browse files
mytharchermytharcher
committed
Add issue list view as index.
1 parent d02c7d6 commit 176ae69

3 files changed

Lines changed: 137 additions & 146 deletions

File tree

‎_layouts/page.html‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,21 @@
1313
</head>
1414
<body class="page-{{ page.type }}">
1515

16-
{% include nav.html %}
16+
<nav class="container">
17+
<a href="/" class="logo"><img src="/assets/img/logo-160.png" /><strong>Yncoder</strong></a>
18+
<ul>
19+
<li><a href="/about">关于</a></li>
20+
<li><a href="/bloggers">Bloggers</a></li>
21+
<li><iframe src="https://ghbtns.com/github-btn.html?user=yncoder&amp;repo=yncoder.github.io&amp;type=watch&amp;count=true&amp;v=2" frameborder="0" scrolling="0" width="100" height="20"></iframe></li>
22+
</ul>
23+
</nav>
1724

1825
{{ content }}
1926

27+
<footer class="container">
28+
<p>分享 · 交流 · 共创</p>
29+
<p class="copyright">&copy; Since 2014. 官方 QQ 群：39615502</p>
30+
</footer>
31+
2032
</body>
2133
</html>

‎assets/css/common.css‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ a:hover{
4040
.container{
4141
position: relative;
4242
width: 80%;
43-
max-width: 1280px;
43+
max-width: 980px;
4444
margin: auto;
4545
}
4646
.container:after{
@@ -82,6 +82,16 @@ nav li{
8282
margin-left: 20px;
8383
}
8484

85+
footer{
86+
padding: 20px 0;
87+
}
88+
footer .copyright{
89+
line-height: 20px;
90+
text-align: center;
91+
color: #999;
92+
font-size: 80%;
93+
}
94+
8595

8696
article h1,
8797
article h2,
@@ -140,6 +150,37 @@ article blockquote{line-height:1.6em; margin:1em 0 1em 1.5em; border-left:2px so
140150
font-size: 90%;
141151
}
142152

153+
.page-list #issue-list li{
154+
list-style: none;
155+
position: relative;
156+
padding: 10px 10px 10px 70px;
157+
}
158+
.page-list #issue-list figure{
159+
position: absolute;
160+
left: 10px;
161+
top: 10px;
162+
width: 48px;
163+
height: 48px;
164+
}
165+
.page-list #issue-list figure img{
166+
max-width: 100%;
167+
}
168+
.page-list #issue-list h4,
169+
.page-list #issue-list p{
170+
margin: 0;
171+
line-height: 24px;
172+
font-size: 100%;
173+
}
174+
.page-list #issue-list li>i{
175+
position: absolute;
176+
right: 10px;
177+
top: 10px;
178+
background: #d7d7d7;
179+
padding: 5px;
180+
border-radius: 5px;
181+
color: #fff;
182+
}
183+
143184
@media (max-width: 640px) {
144185
nav .logo *:not(img){
145186
display: none;

‎index.html‎

Lines changed: 82 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,158 +1,96 @@
11
---
2+
layout: page
3+
type: list
24
---
3-
<!DOCTYPE html>
4-
<html>
5-
<head>
6-
<meta charset="UTF-8" />
7-
<title>Yncoder</title>
8-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
9-
<link rel="icon" href="/favicon.png" type="image/x-icon" />
10-
<link rel="shortcut icon" href="/favicon.png" type="image/x-icon" />
11-
<link rel="stylesheet" href="/assets/css/common.css" />
12-
<style type="text/css">
13-
.holder{
14-
min-height: 100%;
15-
margin-bottom: -60px;
16-
}
17-
.holder:after{
18-
content: "";
19-
display: block;
20-
height: 60px;
21-
}
22-
23-
nav .logo{
24-
display: none;
25-
}
26-
27-
header{
28-
text-align: center;
29-
}
30-
header h1{
31-
margin: 10px 0;
32-
font: normal 250%/1 Consolas, Arial;
33-
}
34-
header hgroup{
35-
margin: 50px 0;
36-
}
37-
header h2{
38-
margin: 0;
39-
font-size: 2em;
40-
font-weight: normal;
41-
}
42-
header blockquote{
43-
margin: 1.5em 0;
44-
font-size: 110%;
45-
line-height: 1.5em;
46-
}
47-
48-
main{
49-
text-align: center;
50-
}
51-
main ul{
52-
margin: 1em 0;
53-
}
54-
main li{
55-
list-style: none;
56-
display: inline-block;
57-
margin-right: 20px;
58-
line-height: 1.5em;
59-
}
60-
main li.upcoming span{
61-
margin-left: .5em;
62-
color: #999;
63-
}
64-
65-
footer{
66-
height: 60px;
67-
padding: 20px 0;
68-
}
69-
footer .copyright{
70-
line-height: 20px;
71-
text-align: center;
72-
color: #999;
73-
font-size: 80%;
74-
}
75-
76-
@media (min-width: 1024px) {
77-
header.container{
78-
margin-top: 50px;
79-
}
80-
}
815

82-
@media (max-width: 640px) {
83-
header h1{
84-
font-size: 2em;
6+
<div class="container">
7+
<main>
8+
<ul id="label-list"></ul>
9+
<ul id="issue-list"></ul>
10+
</main>
11+
<aside>
12+
13+
</aside>
14+
</div>
15+
16+
<script>
17+
(function () {
18+
function ajax (url, options, callback) {
19+
options = options || {};
20+
21+
var query = Object.keys(options.query || {}).map(function (key) {
22+
return key + '=' + encodeURIComponent(options.query[key]);
23+
}).join('&');
24+
25+
var request = new XMLHttpRequest();
26+
request.responseType = options.responseType || 'json';
27+
request.open(options.method || 'GET', url + (query ? '?' + query : ''), true);
28+
29+
request.onreadystatechange = function () {
30+
if (this.readyState != 4) {
31+
return;
32+
}
33+
34+
if (this.status >= 200 && this.status < 300) {
35+
callback(this.response);
36+
}
37+
};
38+
39+
request.send(options.data || null);
8540
}
86-
header h2{
87-
font-size: 1.2em;
41+
42+
function escapeHTML (str) {
43+
return str.replace(/([&<>'"])/g, function (matcher, symbol) {
44+
return '&#' + symbol.charCodeAt(0) + ';';
45+
});
8846
}
8947

90-
footer p{
91-
width: 100%;
48+
function format (template, data) {
49+
return template.replace(/\{(\s*\w+\s*)\}/g, function (matcher, name) {
50+
var value = data[name.trim()];
51+
return typeof value != 'undefined' ? value : '';
52+
});
9253
}
93-
}
94-
</style>
95-
</head>
96-
97-
<body>
98-
99-
<div class="holder">
100-
101-
{% include nav.html %}
102-
103-
<header class="container">
104-
<figure>
105-
<img src="assets/img/logo-160.png" width="160" height="160" alt="&lt;yn/&gt;" />
106-
<h1>Yncoder</h1>
107-
</figure>
108-
<hgroup>
109-
<h2>分享 · 交流 · 共创</h2>
110-
<blockquote>我们相信，每个开发者都是富有创造力的个体，即使在这块IT欠发达的土地上，我们也并不孤独。</blockquote>
111-
</hgroup>
112-
</header>
113-
114-
<main class="container">
115-
<h3>社区活动</h3>
116-
<ul>
117-
{% assign list = site.posts | sort:"date" %}
118-
{% for item in list %}
119-
{% if item.public %}
120-
<li class="status-{{ item.status }}"><a href="{{ item.url }}">{{ item.title }}</a></li>
121-
{% endif %}
122-
{% endfor %}
123-
</ul>
124-
</main>
12554

126-
</div>
55+
ajax('//api.github.com/repos/yncoder/yncoder.github.io/issues', {
56+
query: {
57+
state: 'open'
58+
}
59+
}, function (data) {
60+
var template = '<li class="{labelClasses} {statusClass}">' +
61+
'<figure><img src="{authorAvatarUrl}" /></figure>' +
62+
'<h4><a href="{link}">{title}</h4>' +
63+
'<p>{labelElements} <a href="{authorLink}" target="_blank">{authorName}</a></p>' +
64+
'<i>{comments}</i>';
12765

128-
<footer class="container">
129-
<p class="copyright">&copy; Since 2014. 官方 QQ 群：39615502</p>
130-
</footer>
66+
var labelTemplate = '<a href="{url}" class="label" style="backbround-color: #{color}">{name}</a>';
13167

132-
<script>
133-
(function () {
134-
var url = '//api.github.com/repos/yncoder/yncoder.github.io/issues';
135-
var param = {
136-
state: 'open'
137-
};
138-
139-
var query = Object.keys(param).map(function (key) {
140-
return key + '=' + encodeURIComponent(param[key]);
141-
}).join('&');
142-
143-
var request = new XMLHttpRequest();
144-
request.open('GET', url + (query ? '?' + query : ''), true);
145-
146-
request.onreadystatechange = function () {
147-
if (this.readyState == 4 &&
148-
this.status >= 200 && this.status < 300) {
149-
console.log(this.responseText);
68+
function renderLabelItem (label) {
69+
return format(labelTemplate, label);
70+
}
71+
72+
function renderLabelClass (label) {
73+
return 'label-' + label.name;
15074
}
151-
};
15275

153-
request.send(null);
76+
var html = data.map(function (item) {
77+
return format(template, {
78+
labelClasses: item.labels.map(renderLabelClass).join(''),
79+
labelElements: item.labels.map(renderLabelItem).join(''),
80+
title: escapeHTML(item.title),
81+
link: item.html_url,
82+
authorAvatarUrl: item.user.avatar_url,
83+
authorName: item.user.login,
84+
authorLink: item.user.html_url,
85+
comments: item.comments
86+
});
87+
}).join('');
88+
89+
document.getElementById('issue-list').innerHTML = html;
90+
});
91+
92+
ajax('//api.github.com/repos/yncoder/yncoder.github.io/labels', null, function (data) {
93+
94+
});
15495
})();
15596
</script>
156-
157-
</body>
158-
</html>

0 commit comments

Comments
 (0)