diff --git a/layout/common/article-post.ejs b/layout/common/article-post.ejs index 09657c4..6d5e0c0 100644 --- a/layout/common/article-post.ejs +++ b/layout/common/article-post.ejs @@ -49,4 +49,24 @@ <% } %> + +
+ + + + <%- paginator({ + prev_text: __('prev'), + next_text: __('next'), + escape: false + }) %> + +
+ \ No newline at end of file diff --git a/source/css/basic.styl b/source/css/basic.styl index 7192ba9..a5ce255 100644 --- a/source/css/basic.styl +++ b/source/css/basic.styl @@ -40,4 +40,63 @@ a:hover, a:active { color: #4786D6; } +// 按钮样式 +a.btn { + color: #868686; + font-weight: 400; +} + +.btn { + display: inline-block; + position: relative; + outline: 0; + color: rgba(0, 0, 0, 0.44); + background: rgba(0, 0, 0, 0); + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid rgba(0, 0, 0, 0.15); + white-space: nowrap; + font-weight: 400; + font-style: normal; + border-radius: 999em; +} + +.btn:hover { + display: inline-block; + position: relative; + outline: 0; + color: #464545; + background: rgba(0, 0, 0, 0); + font-size: 14px; + text-align: center; + text-decoration: none; + cursor: pointer; + border: 1px solid #464545; + white-space: nowrap; + font-weight: 400; + font-style: normal; + border-radius: 999em; +} + +[role="back"] { + padding: 0.5em 1.25em; + line-height: 1.666em; +} + +[role="home"] { + padding: 0.5em 1.25em; + line-height: 1.666em; +} + +[role="navigation"] { + padding: 0.5em 1.25em; + line-height: 1.666em; +} + +[role="tags"] { + padding: 6px 12px; +} + diff --git a/source/css/common/article-post.styl b/source/css/common/article-post.styl index 9696bdd..c258801 100644 --- a/source/css/common/article-post.styl +++ b/source/css/common/article-post.styl @@ -1,4 +1,5 @@ .article-post { + background: #fff padding 30px @@ -109,6 +110,25 @@ } } + + .paginator { + + padding-bottom 40px + + .page-number { + display none !important + } + + a.prev { + float left + } + + a.next { + float right + } + + } + } diff --git a/source/js/main.js b/source/js/main.js index 45d18dd..97621a0 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,2 +1,8 @@ -console.log(new Date()); console.log('this is main.js'); +(() => { + // 选择分页器元素里面的 a 标签,但不包含 .page-number,给指定元素追加类 btn 和 设置属性 role=navigation + document.querySelectorAll('.article-post .paginator a:not(.page-number)').forEach(e => { + e.classList.add('btn'); + e.setAttribute('role', 'navigation'); + }); +})(); \ No newline at end of file diff --git a/source/js/utils.js b/source/js/utils.js new file mode 100644 index 0000000..c201c97 --- /dev/null +++ b/source/js/utils.js @@ -0,0 +1,3 @@ +export const addClass = (element, className) => { + element.classList.add(className) +}; \ No newline at end of file