From 11a63b27b2f9ed389e00381906ed697d61ab84b9 Mon Sep 17 00:00:00 2001 From: Jacks <191100479@qq.com> Date: Mon, 22 Aug 2016 01:44:47 +0800 Subject: [PATCH 1/2] add the page of study --- _config.yml | 28 +++ languages/default.yml | 1 + languages/en.yml | 1 + languages/zh-Hans.yml | 1 + layout/_layout.swig | 2 + layout/extensions/study/study.swig | 29 +++ layout/page.swig | 22 ++ source/css/_schemes/Mist/outline/outline.styl | 2 +- source/extensions/study/study.css | 215 ++++++++++++++++++ source/extensions/study/study.js | 49 ++++ 10 files changed, 349 insertions(+), 1 deletion(-) create mode 100644 layout/extensions/study/study.swig create mode 100644 source/extensions/study/study.css create mode 100644 source/extensions/study/study.js diff --git a/_config.yml b/_config.yml index f102003f4..6591af994 100755 --- a/_config.yml +++ b/_config.yml @@ -34,6 +34,7 @@ menu: archives: /archives tags: /tags #commonweal: /404.html + study: study # Enable/Disable menu icons. @@ -50,6 +51,33 @@ menu_icons: tags: tags archives: archive commonweal: heartbeat + study: graduation-cap + +# --------------------------------------------------------------- +# extensions feature Settings +# --------------------------------------------------------------- +# study 读书页面 +study: + enable: true + readed: + 我的第一本漫画炒股书: + url: https://img3.doubanio.com/lpic/s26717372.jpg + ASP.NET 4.0 动态网站开发实用教程: + url: https://img3.doubanio.com/lpic/s9078940.jpg + HTML5+CSS3精致范例辞典: + url: https://img1.doubanio.com/lpic/s24559317.jpg + 番茄工作法图解: + url: https://img3.doubanio.com/lpic/s4599081.jpg + reading: + nodejs深入浅出: + url: https://img3.doubanio.com/lpic/s27269296.jpg + JavaScript: + url: https://img3.doubanio.com/lpic/s8958650.jpg + 从你的全世界路过: + url: https://img3.doubanio.com/lpic/s27102925.jpg + want: + 四步创业法: + url: https://img3.doubanio.com/lpic/s11171520.jpg diff --git a/languages/default.yml b/languages/default.yml index 109b72cc7..91d4d4dca 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -12,6 +12,7 @@ menu: tags: Tags about: About search: Search + study: Study sidebar: overview: Overview diff --git a/languages/en.yml b/languages/en.yml index 18854ea32..45c051812 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -12,6 +12,7 @@ menu: tags: Tags about: About search: Search + study: Study sidebar: overview: Overview diff --git a/languages/zh-Hans.yml b/languages/zh-Hans.yml index 5d7e72be0..8ddf81866 100644 --- a/languages/zh-Hans.yml +++ b/languages/zh-Hans.yml @@ -13,6 +13,7 @@ menu: about: 关于 search: 搜索 commonweal: 公益404 + study: 读书 sidebar: diff --git a/layout/_layout.swig b/layout/_layout.swig index da719fcb1..a01b1fbb2 100644 --- a/layout/_layout.swig +++ b/layout/_layout.swig @@ -9,6 +9,7 @@ {% include '_partials/head.swig' %} {% block title %}{% endblock %} + {% block css_extra%}{% endblock %} @@ -62,6 +63,7 @@ {% include scheme_script %} {% block script_extra %}{% endblock %} +{% block script_extra %}{% endblock %} {% include '_scripts/boostrap.swig' %} diff --git a/layout/extensions/study/study.swig b/layout/extensions/study/study.swig new file mode 100644 index 000000000..2dd599c7a --- /dev/null +++ b/layout/extensions/study/study.swig @@ -0,0 +1,29 @@ +
欢迎来到我的读书空间！欢迎留言！
+
+

阅读

+

READING

+
+ +
+
+ {% for card in theme.study.readed %} +
+ {% endfor %} +
+
+ {% for card in theme.study.reading %} +
+ {% endfor %} +
+
+ {% for card in theme.study.want %} +
+ {% endfor %} +
+
+ diff --git a/layout/page.swig b/layout/page.swig index ef766f037..ebaacffb6 100644 --- a/layout/page.swig +++ b/layout/page.swig @@ -36,6 +36,12 @@ {% else %} + {% elif page.type === 'study' %} + {% if theme.study.enable %} + {% include 'extensions/study/study.swig' %} + {% else %} +
信息：可能你需要在配置文件中设置study: enable:true
+ {% endif %} {{ page.content }} {% endif %} @@ -45,3 +51,19 @@ {% block sidebar %} {{ sidebar_template.render(false) }} {% endblock %} + + {% block css_extra %} + {% if theme.study.enable and page.type === 'study' %} + + {% endif %} + {% endblock %} + + {% block script_extra %} + {% if theme.study.enable and page.type === 'study' %} + + {% endif %} + {% endblock %} + diff --git a/source/css/_schemes/Mist/outline/outline.styl b/source/css/_schemes/Mist/outline/outline.styl index 12c0bae25..3a61171f1 100644 --- a/source/css/_schemes/Mist/outline/outline.styl +++ b/source/css/_schemes/Mist/outline/outline.styl @@ -1 +1 @@ -.main-inner { margin-top: 80px; } +.main-inner { margin-top: 50px; } diff --git a/source/extensions/study/study.css b/source/extensions/study/study.css new file mode 100644 index 000000000..e6524b48c --- /dev/null +++ b/source/extensions/study/study.css @@ -0,0 +1,215 @@ +/*region 遮罩效果*/ +.welcome { + -webkit-animation: demo-an 2.5s ease-out infinite; + border-radius: .4em; + color: #000; + font: bold 14px/normal \5FAE\8F6F\96C5\9ED1, tahoma, arial, \5b8b\4f53, sans-serif; + margin: 1em; + -webkit-mask: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 20%) -500px 0 no-repeat content; + text-align: center; + text-shadow: 1px 1px 0 #ccc; + -webkit-animation-duration: 20s; +} + +@-webkit-keyframes demo-an { + to { + -webkit-mask-position: 500px 0; + } +} + +/*endregion*/ + +/*region 霓虹灯*/ +.head { + font-size: 2rem; + text-align: center; + text-transform: uppercase; + text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed; + color: red; +} + +#error { + font-family: 'Orbitron', sans-serif; +} + +.head p { + margin: 0; +} + +#error span:hover { + text-shadow: 0 0 200px #ffffff, 0 0 80px #1e90ff, 0 0 6px #1e90ff; + opacity: 1 +} + +#code span:hover { + text-shadow: 0 0 100px red, 0 0 40px FireBrick, 0 0 8px DarkRed; + opacity: 1 +} + +#error { + color: dodgerblue; + text-shadow: 0 0 80px #ffffff, 0 0 30px #1e90ff, 0 0 6px #1e90ff; +} + +#error span { + -webkit-animation: upper 6s linear infinite; +} + +#code span:nth-of-type(3) { + -webkit-animation: lower 5s linear infinite; +} + +#code span:nth-of-type(2) { + -webkit-animation: lower 10s linear infinite; +} + +#code span:nth-of-type(1) { + text-shadow: none; + opacity: .4; +} + +@keyframes upper { + 0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { + opacity: .99; + text-shadow: 0 0 80px #ffffff, 0 0 30px #1e90ff, 0 0 6px #1e90ff; + } + 20%, 21.999%, 63%, 63.999%, 65%, 69.999% { + opacity: 0.4; + text-shadow: none; + } +} + +@keyframes lower { + 0%, 12%, 18.999%, 23%, 31.999%, 37%, 44.999%, 46%, 49.999%, 51%, 58.999%, 61%, 68.999%, 71%, 85.999%, 96%, 100% { + opacity: 0.99; + text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed; + } + 19%, 22.99%, 32%, 36.999%, 45%, 45.999%, 50%, 50.99%, 59%, 60.999%, 69%, 70.999%, 86%, 95.999% { + opacity: 0.4; + text-shadow: none; + } +} + +/*endregion*/ + +/*region Tab*/ + +#tab-head { + font-size: 0; + position: relative; + padding: 0; + width: 100%; + margin: 0 auto; + user-select: none; + text-align: center; +} + +#tab-head > .tab-block { + display: inline-block; + width: 32%; + height: 60px; + /*background: #E95546;*/ + font-size: 16px; + text-align: center; + line-height: 60px; + color: #000; + text-transform: uppercase; + position: relative; + overflow: hidden; + cursor: pointer; + z-index: 10000; +} + +.slider { + width: 32%; + display: block; + position: absolute; + bottom: 0; + left: 0; + height: 4px; + background: #4FC2E5; + transition: all 0.5s; + margin-left: 2%; +} + +.ripple { + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.4); + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + position: absolute; + opacity: 1; +} + +.rippleEffect { + -webkit-animation: rippleDrop .4s linear; + animation: rippleDrop .4s linear; + background-color: #00aced; +} + +@-webkit-keyframes rippleDrop { + 100% { + -webkit-transform: scale(2); + transform: scale(2); + opacity: 0; + } +} + +@keyframes rippleDrop { + 100% { + -webkit-transform: scale(2); + transform: scale(2); + opacity: 0; + } +} + +#tab-content-2, #tab-content-3 { + display: none; +} + +/*endregion*/ +/*region 书卡*/ +.tab-content { + text-align: center; +} + +.tab-content .card { + display: inline-block; + width: 30%; + height: 100%; + background: #fff; + margin: 15px 0; + position: relative; + overflow: hidden; + font-size: 0; + /*padding:1px;*/ + /*border:4px solid rgba(0,0,0,0.85);*/ + /*border-radius:15px;*/ + transition: all 0.5s ease-in-out; + -webkit-transition: all 0.5s ease-in-out; + -moz-transition: all 0.5s ease-in-out; + -o-transition: all 0.5s ease-in-out; +} + +.f { + transform: scale(1) rotate(0deg); + -webkit-transform: scale(1) rotate(0deg); + -moz-transform: scale(1) rotate(0deg); + -o-transform: scale(1) rotate(0deg); +} + +.f:hover { + transform: scale(1.5) rotate(-360deg); + -webkit-transform: scale(1.5) rotate(-360deg); + -moz-transform: scale(1.5) rotate(-360deg); + -o-transform: scale(1.5) rotate(-360deg); + z-index: 2; +} +.tab-content .card { + background-size: contain!important; +} + +/*endregion*/ diff --git a/source/extensions/study/study.js b/source/extensions/study/study.js new file mode 100644 index 000000000..5f6ae2394 --- /dev/null +++ b/source/extensions/study/study.js @@ -0,0 +1,49 @@ +/** + * Created by Jacks on 2016/8/20. + */ +$(function () { + $(window).load(function () { + var card = $('.card'); + card.height(card.width() * 1.414); + }); + + $('.tab-block').on('click', function (e) { + + if ($(this).hasClass('slider')) { + return; + } + var whatTab = $(this).index(); + $('#tab-content-' + (whatTab + 1)).siblings().hide().end().show(); + var howFar = 32 * whatTab; + + $(".slider").css({ + left: howFar + "%" + }); + + $(".ripple").remove(); + + var posX = $(this).offset().left, + posY = $(this).offset().top, + buttonWidth = $(this).width(), + buttonHeight = $(this).height(); + + $(this).prepend(""); + + if (buttonWidth >= buttonHeight) { + buttonHeight = buttonWidth; + } else { + buttonWidth = buttonHeight; + } + + var x = e.pageX - posX - buttonWidth / 2; + var y = e.pageY - posY - buttonHeight / 2; + + $(".ripple").css({ + width: buttonWidth, + height: buttonHeight, + top: y + 'px', + left: x + 'px' + }).addClass("rippleEffect"); + + }); +}); From 571b9aeb17162916399dd963f38a9ee21485bd84 Mon Sep 17 00:00:00 2001 From: Jacks <191100479@qq.com> Date: Fri, 2 Sep 2016 15:38:56 +0800 Subject: [PATCH 2/2] Fix the css and Compatible with mobile terminal --- layout/extensions/study/study.swig | 6 +++--- source/extensions/study/study.css | 6 +++--- source/extensions/study/study.js | 23 +++++++++++++++++++++-- 3 files changed, 27 insertions(+), 8 deletions(-) diff --git a/layout/extensions/study/study.swig b/layout/extensions/study/study.swig index 2dd599c7a..bebf2e94a 100644 --- a/layout/extensions/study/study.swig +++ b/layout/extensions/study/study.swig @@ -12,17 +12,17 @@
{% for card in theme.study.readed %} -
+
{% endfor %}
{% for card in theme.study.reading %} -
+
{% endfor %}
{% for card in theme.study.want %} -
+
{% endfor %}
diff --git a/source/extensions/study/study.css b/source/extensions/study/study.css index e6524b48c..597b0ec96 100644 --- a/source/extensions/study/study.css +++ b/source/extensions/study/study.css @@ -117,7 +117,7 @@ position: relative; overflow: hidden; cursor: pointer; - z-index: 10000; + z-index: 10; } .slider { @@ -206,10 +206,10 @@ -webkit-transform: scale(1.5) rotate(-360deg); -moz-transform: scale(1.5) rotate(-360deg); -o-transform: scale(1.5) rotate(-360deg); - z-index: 2; + z-index: 20; } .tab-content .card { - background-size: contain!important; + background-size: cover!important; } /*endregion*/ diff --git a/source/extensions/study/study.js b/source/extensions/study/study.js index 5f6ae2394..4330f0f85 100644 --- a/source/extensions/study/study.js +++ b/source/extensions/study/study.js @@ -2,9 +2,27 @@ * Created by Jacks on 2016/8/20. */ $(function () { + //region 横竖屏判断 + var card = $('.card'); + + function hengshuping() { + if (window.orientation == 180 || window.orientation == 0) { + // alert("竖屏状态！") + } + if (window.orientation == 90 || window.orientation == -90) { + // alert("横屏状态！") + } + var visible_width = $('.tab-content').children(':visible').children().width(); + card.height(visible_width * 1.414); + + } + + window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false); + //endregion + $(window).load(function () { - var card = $('.card'); - card.height(card.width() * 1.414); + var visible_width = $('.tab-content').children(':visible').children().width(); + card.height(visible_width * 1.414); }); $('.tab-block').on('click', function (e) { @@ -45,5 +63,6 @@ $(function () { left: x + 'px' }).addClass("rippleEffect"); + }); });