Skip to content

Commit bf3b562

Browse files
sasaplus1sasaplus1
committedJun 2, 2016
タグページの作成、タグのリンクを動作するようにした #3 
1 parent 85e7e6e commit bf3b562

File tree

5 files changed

+355
-3
lines changed

5 files changed

+355
-3
lines changed
 

‎_layouts/note.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h1 class="note__title">{{ page.title }}</h1>
2424
{% for tag in tags %}
2525
{% assign name = tag %}
2626
<li class="tags__tag tag">
27-
<a class="tag__link" href="javascript:void 0">
27+
<a class="tag__link" href="{{ site.baseurl }}/tag/?q={{ name }}">
2828
<span class="tag__text">#{{ name }}</span><!--
2929
--></a>
3030
</li>

‎_layouts/slide.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h1 class="slide__title">{{ page.title }}</h1>
2222
{% for tag in tags %}
2323
{% assign name = tag %}
2424
<li class="tags__tag tag">
25-
<a class="tag__link" href="javascript:void 0">
25+
<a class="tag__link" href="{{ site.baseurl }}/tag/?q={{ name }}">
2626
<span class="tag__text">#{{ name }}</span><!--
2727
--></a>
2828
</li>

‎css/tag.scss

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
---
3+
@import "common";
4+
5+
.main.tag {
6+
7+
.tag__inner {
8+
margin: 0 auto;
9+
padding: 0 1rem;
10+
width: 800px;
11+
12+
@include narrow-width {
13+
margin: 0;
14+
width: auto;
15+
}
16+
17+
.tag__title {
18+
margin: 0;
19+
}
20+
21+
.tag__tag-state.tag-state {
22+
margin: 1rem 0 0 0;
23+
24+
.tag-state__title {
25+
}
26+
.tag-state__list {
27+
margin: 0 0 1rem 0;
28+
29+
.tag-state__tags.tags {
30+
margin: 0;
31+
padding: 0;
32+
33+
.tags__tag.tag {
34+
display: inline;
35+
36+
.tag__link {
37+
&:link, &:visited {
38+
color: #999999;
39+
text-decoration: none;
40+
}
41+
&:hover, &:active {
42+
text-decoration: underline;
43+
}
44+
}
45+
.tag__text {
46+
font-family: Verdana, sans-serif;
47+
font-size: 80%;
48+
}
49+
}
50+
}
51+
}
52+
}
53+
}
54+
55+
.tag__articles.articles {
56+
list-style-type: none;
57+
margin: 0;
58+
padding: 0;
59+
60+
.articles__article.article {
61+
.article__link {
62+
border: 1px solid #cccccc;
63+
border-bottom: 0;
64+
display: block;
65+
padding: 0.5rem;
66+
text-decoration: none;
67+
68+
&:hover {
69+
background-color: #efefef;
70+
}
71+
}
72+
&:first-child .article__link {
73+
border-top-left-radius: 5px;
74+
border-top-right-radius: 5px;
75+
}
76+
&:last-child .article__link {
77+
border-bottom: 1px solid #cccccc;
78+
border-bottom-left-radius: 5px;
79+
border-bottom-right-radius: 5px;
80+
}
81+
82+
.article__title {
83+
color: #333333;
84+
margin: 0;
85+
}
86+
87+
.article__pubdate, .article__author {
88+
color: #999999;
89+
font-family: Verdana, sans-serif;
90+
font-size: 80%;
91+
}
92+
93+
.article__tags.tags {
94+
display: inline;
95+
padding: 0;
96+
97+
.tags__tag.tag {
98+
display: inline;
99+
list-style-type: none;
100+
padding: 0;
101+
102+
.tag__text {
103+
color: #999999;
104+
font-family: Verdana, sans-serif;
105+
font-size: 80%;
106+
}
107+
}
108+
}
109+
}
110+
}
111+
112+
}

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h1 class="article__title">{{ post.title }}</h1>
4343
{% assign name = tag[0] %}
4444
{% assign post = tag[1] %}
4545
<li class="tags__tag tag">
46-
<a class="tag__link" href="javascript:void 0">
46+
<a class="tag__link" href="{{ site.baseurl }}/tag/?q={{ name }}">
4747
<span class="tag__text">#{{ name }}</span><!--
4848
--></a>
4949
</li>

‎tag/index.html

+240
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
---
2+
---
3+
<!DOCTYPE html>
4+
<html>
5+
<head>
6+
{% include head.html %}
7+
{% include title.html %}
8+
<link rel="stylesheet" href="{{ site.baseurl }}/css/tag.css">
9+
</head>
10+
<body class="tag">
11+
{% include header.html %}
12+
13+
<main class="tag main" role="main">
14+
<div class="tag__inner">
15+
16+
<h1 class="tag__title">タグを含むページの一覧</h1>
17+
18+
<dl class="tag__tag-state tag-state">
19+
<dt class="tag-state__title">指定されているタグ</dt>
20+
<dd class="tag-state__list">
21+
<ul id="selected-tags" class="tag-state__tags tags"></ul>
22+
</dd>
23+
</dl>
24+
25+
<dl class="tag__tag-state tag-state">
26+
<dt class="tag-state__title">選択できるタグ</dt>
27+
<dd class="tag-state__list">
28+
<ul id="unselect-tags" class="tag-state__tags tags"></ul>
29+
</dd>
30+
</dl>
31+
32+
<nav>
33+
<ul id="articles" class="tag__articles articles"></ul>
34+
</nav>
35+
36+
</div>
37+
</main>
38+
39+
{% include footer.html %}
40+
41+
<script id="html-find-tags" type="text/html">
42+
<li class="tags__tag tag">
43+
<a class="tag__link" href="<%- obj.uri %>">
44+
<span class="tag__text">#<%- obj.name %></span><!--
45+
--></a>
46+
</li>
47+
</script>
48+
49+
<script id="html-list-item" type="text/html">
50+
<li class="articles__article article">
51+
<a class="article__link" href="<%- obj.uri %>">
52+
<h1 class="article__title"><%- obj.title %></h1>
53+
<time class="article__pubdate"><%- obj.date %></time>
54+
<% if (obj.author) { %>
55+
<span class="article__author"><%- obj.author %></span>
56+
<% } %>
57+
<ul class="article__tags tags">
58+
<% _.forEach(obj.tags, function(tag) { %>
59+
<li class="tags__tag tag">
60+
<span class="tag__text">#<%- tag %></span>
61+
</li>
62+
<% }); %>
63+
</ul>
64+
</a>
65+
</li>
66+
</script>
67+
68+
<script id="json-site-tags" type="application/json">
69+
{
70+
"tags": [{% assign tags = site.tags | sort %}
71+
{% for tag in tags %}{% assign name = tag[0] %}
72+
"{{ name }}"{% unless forloop.last %},{% endunless %}
73+
{% endfor %}
74+
]
75+
}
76+
</script>
77+
78+
<script id="json-post-data" type="application/json">
79+
{
80+
"articles": [
81+
{% for post in site.posts %}
82+
{
83+
"uri": "{{ site.baseurl }}{{ post.url | remove_first:'index.html' }}",
84+
"title": "{{ post.title | escape }}",
85+
"date": "{{ post.date | split:' ' | first }}",
86+
"author": "{{ post.author }}",
87+
"tags": [{% assign tags = post.tags | sort %}
88+
{% for tag in tags %}
89+
"{{ tag }}"{% unless forloop.last %},{% endunless %}
90+
{% endfor %}
91+
]
92+
}{% unless forloop.last %},{% endunless %}
93+
{% endfor %}
94+
]
95+
}
96+
</script>
97+
98+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
99+
<script>
100+
(function(){
101+
'use strict';
102+
103+
//----------------------------------------------------------------------
104+
105+
/**
106+
* parse query string
107+
*
108+
* @param {String} text
109+
* @return {String[]}
110+
*/
111+
function parseQueryString(text) {
112+
var result = {},
113+
params;
114+
115+
if (/^\?/.test(text)) {
116+
params = text.slice(1).split('&');
117+
} else {
118+
params = text.split('&');
119+
}
120+
121+
_.forEach(params, function(string) {
122+
var key, value;
123+
124+
/=/.exec(string);
125+
126+
key = RegExp.leftContext;
127+
value = RegExp.rightContext;
128+
129+
result[key] || (result[key] = []);
130+
result[key].push(
131+
decodeURIComponent(value) || null
132+
);
133+
});
134+
135+
return result;
136+
}
137+
138+
var queries = parseQueryString(location.search),
139+
queryTags = _.map(queries.q, _.toLower);
140+
141+
//----------------------------------------------------------------------
142+
143+
(function(){
144+
var compile, data;
145+
146+
compile = _.template(
147+
document.getElementById('html-find-tags').innerHTML
148+
);
149+
data = JSON.parse(
150+
document.getElementById('json-site-tags').innerHTML
151+
);
152+
153+
var selectedTags, unselectTags;
154+
155+
selectedTags = _.pullAll(data.tags, queryTags);
156+
unselectTags = _.pullAll(queryTags, data.tags);
157+
158+
/**
159+
* return querystring
160+
*
161+
* @param {String[]}
162+
* @param {String}
163+
* @return {String}
164+
*/
165+
function removeTag(sourceTags, removeTag) {
166+
var result = _.pull(_.clone(sourceTags), removeTag);
167+
168+
return (result.length > 0) ? '?q=' + result.join('&q=') : '';
169+
}
170+
171+
/**
172+
* return querystring
173+
*
174+
* @param {String[]}
175+
* @param {String}
176+
* @return {String}
177+
*/
178+
function appendTag(sourceTags, appendTag) {
179+
var result = _.clone(sourceTags).concat([appendTag]);
180+
181+
return (result.length > 0) ? '?q=' + result.join('&q=') : '';
182+
}
183+
184+
var selectedTagsElement = document.getElementById('selected-tags'),
185+
unselectTagsElement = document.getElementById('unselect-tags');
186+
187+
selectedTagsElement.innerHTML =
188+
_(unselectTags)
189+
.map(function(tag) {
190+
return {
191+
name: tag,
192+
uri: location.pathname + removeTag(queryTags, tag)
193+
};
194+
})
195+
.map(compile)
196+
.value()
197+
.join('');
198+
199+
unselectTagsElement.innerHTML =
200+
_(selectedTags)
201+
.map(function(tag) {
202+
return {
203+
name: tag,
204+
uri: location.pathname + appendTag(queryTags, tag)
205+
};
206+
})
207+
.map(compile)
208+
.value()
209+
.join('');
210+
}());
211+
212+
//----------------------------------------------------------------------
213+
214+
(function(){
215+
var compile, data, articles;
216+
217+
compile = _.template(
218+
document.getElementById('html-list-item').innerHTML
219+
);
220+
data = JSON.parse(
221+
document.getElementById('json-post-data').innerHTML
222+
);
223+
224+
articles = _.filter(data.articles, function(post) {
225+
var iteratee = _.partial(_.includes, post.tags),
226+
includes = _.map(queryTags, iteratee);
227+
228+
return _.every(includes, function(value) {
229+
return (value === true);
230+
});
231+
});
232+
233+
var articlesElement = document.getElementById('articles');
234+
235+
articlesElement.innerHTML = _.map(articles, compile).join('');
236+
}());
237+
}());
238+
</script>
239+
</body>
240+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.