├── .editorconfig ├── LICENSE ├── README.md ├── _config.yml ├── languages ├── en.yml ├── ja.yml ├── nl-NL ├── zh-CN.yml └── zh-TW.yml ├── layout ├── _partial │ ├── after-footer.ejs │ ├── archive.ejs │ ├── footer.ejs │ ├── head.ejs │ ├── header.ejs │ ├── index-item.ejs │ ├── loading.ejs │ ├── menu.ejs │ ├── paginator.ejs │ ├── plugins │ │ ├── baidu.ejs │ │ ├── disqus.ejs │ │ ├── dynamic-title.ejs │ │ ├── gitalk.ejs │ │ ├── gitment.ejs │ │ ├── google-analytics.ejs │ │ ├── hyper-comments.ejs │ │ ├── mathjax.ejs │ │ ├── page-visit.ejs │ │ ├── site-visit.ejs │ │ ├── tajs.ejs │ │ ├── uyan.ejs │ │ └── valine.ejs │ ├── post.ejs │ ├── post │ │ ├── category.ejs │ │ ├── comment.ejs │ │ ├── copyright.ejs │ │ ├── date.ejs │ │ ├── head-meta.ejs │ │ ├── nav.ejs │ │ ├── reward-btn.ejs │ │ ├── reward.ejs │ │ ├── share-fab.ejs │ │ ├── share.ejs │ │ ├── tag.ejs │ │ ├── title.ejs │ │ ├── toc.ejs │ │ └── updated.ejs │ ├── script.ejs │ ├── search.ejs │ └── tags-bar.ejs ├── archive.ejs ├── categories.ejs ├── category.ejs ├── index.ejs ├── layout.ejs ├── page.ejs ├── post.ejs ├── tag.ejs └── tags.ejs ├── package.json ├── scripts └── plugins.js └── source ├── css ├── _partial │ ├── archives.less │ ├── article.less │ ├── fontawesome.less │ ├── gotop.less │ ├── header.less │ ├── highlight.less │ ├── layout.less │ ├── lightbox.less │ ├── loading.less │ ├── page.less │ ├── postlist.less │ ├── reward.less │ ├── roboto.less │ ├── search.less │ ├── share.less │ ├── tags.less │ ├── variable.less │ └── waves.less ├── _plugin │ └── valine.less ├── fonts │ ├── fontawesome │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ └── roboto │ │ ├── Roboto-Bold.eot │ │ ├── Roboto-Bold.ttf │ │ ├── Roboto-Bold.woff │ │ ├── Roboto-Bold.woff2 │ │ ├── Roboto-Light.eot │ │ ├── Roboto-Light.ttf │ │ ├── Roboto-Light.woff │ │ ├── Roboto-Light.woff2 │ │ ├── Roboto-Medium.eot │ │ ├── Roboto-Medium.ttf │ │ ├── Roboto-Medium.woff │ │ ├── Roboto-Medium.woff2 │ │ ├── Roboto-Regular.eot │ │ ├── Roboto-Regular.ttf │ │ ├── Roboto-Regular.woff │ │ ├── Roboto-Regular.woff2 │ │ ├── Roboto-Thin.eot │ │ ├── Roboto-Thin.ttf │ │ ├── Roboto-Thin.woff │ │ └── Roboto-Thin.woff2 └── style.less ├── img ├── alipay.jpg ├── avatar.jpg ├── brand.jpg ├── cc.png ├── img-err.png ├── img-loading.png └── wechat.jpg └── js ├── main.js ├── main.min.js ├── search.js └── search.min.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | 10 | [*.{yml,json}] 11 | indent_size = 2 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | hexo-theme-material-indigo 2 | ================ 3 | 4 | [![Join the chat at https://gitter.im/hexo-theme-indigo/Lobby](https://badges.gitter.im/hexo-theme-indigo/Lobby.svg)](https://gitter.im/hexo-theme-indigo/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 5 | 6 | Material Design 风格的Hexo主题，基于 Hexo 3.0+ 制作。 [Preview](http://imys.net/) 7 | 8 | > 现有两个主题分支，我的博客中使用的是 card 分支卡片风格主题，master 分支是旧版平铺式风格主题。 9 | 10 | ## Feature 11 | 12 | 1. 仅支持 IE10+ 等现代浏览器。 13 | 2. 去 jQuery，更轻。相信现代浏览器的原生兼容性。 14 | 3. 使用 Less 作为 css 预处理器，需要安装 `hexo-renderer-less`。 15 | 4. 添加了英文字体支持 Roboto。 16 | 5. 添加了一些波纹效果。By [Waves](https://github.com/fians/Waves) 17 | 6. 无前端依赖的分享实现。 18 | 7. 基于静态数据的站内搜索，无第三方侵入。 19 | 8. 支持文章打赏。 20 | 21 | ## Useage 22 | 23 | [文档 | Document](https://github.com/yscoder/hexo-theme-indigo/wiki) 24 | 25 | ## ChangeLog 26 | 27 | 升级前请仔细查看更改内容，如非必要可不升级。 28 | 29 | [ChangeLog](https://github.com/yscoder/hexo-theme-indigo/releases) 30 | 31 | ## OtherVersion 32 | 33 | * [vuepress-theme-indigo](https://github.com/yscoder/vuepress-theme-indigo) 34 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # hexo-theme-indigo 2 | # https://github.com/yscoder/hexo-theme-indigo 3 | 4 | # 添加新菜单项遵循以下规则 5 | # menu: 6 | # link: fontawesome图标，省略前缀，本主题前缀为 icon-，必须 7 | # text: About 菜单显示的文字，如果省略即默认与图标一致，首字母会转大写 8 | # url: /about 链接，绝对或相对路径，必须。 9 | # target: _blank 是否跳出，省略则在当前页面打开 10 | menu: 11 | home: 12 | text: 主页 13 | url: / 14 | archives: 15 | url: /archives 16 | tags: 17 | url: /tags 18 | th-list: 19 | text: Categories 20 | url: /categories 21 | github: 22 | url: https://github.com/yscoder 23 | target: _blank 24 | weibo: 25 | url: http://www.weibo.com/ysweb 26 | target: _blank 27 | link: 28 | text: 测试 29 | url: /custom 30 | 31 | # 你的头像url 32 | avatar: /img/avatar.jpg 33 | # avatar link 34 | avatar_link: / 35 | # 头像背景图 36 | brand: /img/brand.jpg 37 | # favicon 38 | favicon: /favicon.ico 39 | 40 | # email 41 | email: 634206017@qq.com 42 | 43 | # 设置 Android L Chrome 浏览器状态栏颜色 44 | color: '#3F51B5' 45 | 46 | # 页面标题 47 | tags_title: Tags 48 | archives_title: Archives 49 | categories_title: Categories 50 | 51 | # 文章截断 52 | excerpt_render: false 53 | excerpt_length: 200 54 | excerpt_link: 阅读全文... 55 | mathjax: false 56 | archive_yearly: true 57 | 58 | # 是否显示文章最后更新时间 59 | show_last_updated: true 60 | 61 | # 是否开启分享 62 | share: true 63 | 64 | # 是否开启打赏，关闭 reward: false 65 | reward: 66 | title: 谢谢大爷~ 67 | wechat: /img/wechat.jpg #微信，关闭设为 false 68 | alipay: /img/alipay.jpg #支付宝，关闭设为 false 69 | 70 | # 是否开启搜索 71 | search: true 72 | 73 | # 是否大屏幕下文章页隐藏导航 74 | hideMenu: true 75 | 76 | # 是否开启toc 77 | # toc: false 78 | toc: 79 | list_number: true # 是否显示数字排序 80 | 81 | # 文章页留言内容，hexo中所有变量及辅助函数等均可调用，具体请查阅 hexo.io 82 | postMessage: 这里可以写作者留言，标签和 hexo 中所有变量及辅助函数等均可调用，示例：<%- page.permalink.replace(/index\.html$/, '') %> 83 | 84 | # 站长统计，如要开启，输入CNZZ站点id，如 cnzz: 1255152447 85 | cnzz: false 86 | 87 | # 百度统计，如要开启，改为你的 key 88 | baidu_tongji: false 89 | 90 | # 腾讯分析，如要开启，输入站点id 91 | tajs: false 92 | 93 | # google 94 | google_analytics: false 95 | google_site_verification: false 96 | 97 | # sogou站长验证 http://zhanzhang.sogou.com/ 98 | sogou_site_verification: false 99 | 100 | # less 101 | less: 102 | compress: true 103 | paths: 104 | - source/css/style.less 105 | 106 | # 以下评论插件开启一个即可 107 | # 是否开启 disqus 108 | disqus_shortname: false 109 | # 是否开启友言评论, 填写友言用户id 110 | uyan_uid: false 111 | # 是否使用 gitment，https://github.com/imsun/gitment 112 | gitment: false 113 | # gitment: 114 | # owner: 115 | # repo: 116 | # client_id: 117 | # client_secret: 118 | 119 | # use gitalk://github.com/gitalk/gitalk 120 | gitalk: false 121 | # owner: 122 | # repo: 123 | # client_id: 124 | # client_secret: 125 | 126 | # Valine Comment system. https://valine.js.org 127 | valine: 128 | enable: false # 如果你想使用valine，请将值设置为 true 129 | appId: # your leancloud appId 130 | appKey: # your leancloud appKey 131 | notify: false # Mail notify 132 | verify: false # Verify code 133 | avatar: mm # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide 134 | placeholder: Just go go # Comment Box placeholder 135 | guest_info: nick,mail,link # Comment header info 136 | pageSize: 10 # comment list page size 137 | 138 | # 是否开启Hyper Comments，填写id则启用，false则禁用。http://hypercomments.com 139 | # Hyper Comments support. Write your id here, or false to disable 140 | hyper_id: false 141 | 142 | 143 | # 规范网址 144 | # 让搜索引擎重定向你的不同域名、不同子域、同域不同目录的站点到你期望的路径 145 | # https://support.google.com/webmasters/answer/139066 146 | # 假设配置为 canonical: http://imys.net，那么从搜索引擎中 www.imys.net 进入会重定向到 imys.net 147 | canonical: false 148 | 149 | # 版权起始年份 150 | since_year: 2015 151 | 152 | # 用户页面中作者相关的描述性文字，如不需要设为 false 153 | about: 用户页面中作者相关的描述性文字，如不需要设为 false 154 | 155 | # “不蒜子”访问量统计，详见 http://ibruce.info/2015/04/04/busuanzi/ 156 | visit_counter: 157 | site_uv: 站点总访客数： 158 | site_pv: 站点总访问量： 159 | 160 | # 动态定义title 161 | title_change: 162 | normal: (つェ⊂)咦!又好了! 163 | leave: 死鬼去哪里了！ 164 | 165 | # 设置为 true 发布后将使用 unpkg cdn 最新的主题样式 166 | # 如果想让你的自定义样式生效，把此项设为 false 167 | cdn: true 168 | 169 | # 设置为 true 将使用 lightbox render 图片 170 | lightbox: true 171 | 172 | # icp备案号 ICP_license: 京ICP备1234556号-1 173 | ICP_license: false 174 | -------------------------------------------------------------------------------- /languages/en.yml: -------------------------------------------------------------------------------- 1 | global: 2 | search_input_hint: "Search" 3 | 4 | post: 5 | continue_reading: "Continue reading..." 6 | last_updated: "Last updated: " 7 | 8 | footer: 9 | license: 'This blog is licensed under a Creative Commons Attribution 4.0 International License.' 10 | 11 | tag: 12 | all: "All" 13 | tags: "Tags" 14 | -------------------------------------------------------------------------------- /languages/ja.yml: -------------------------------------------------------------------------------- 1 | global: 2 | search_input_hint: "検索" 3 | 4 | post: 5 | continue_reading: "続きを読む…" 6 | last_updated: "最終更新：" 7 | 8 | footer: 9 | license: 'このブログの内容物はクリエイティブ・コモンズ 表示 - 非営利 - 継承 4.0 国際ライセンスの下に提供されています' 10 | 11 | tag: 12 | all: "全て" 13 | tags: "タグ" 14 | -------------------------------------------------------------------------------- /languages/nl-NL: -------------------------------------------------------------------------------- 1 | global: 2 | search_input_hint: "Zoeken" 3 | 4 | post: 5 | continue_reading: "Lees verder..." 6 | last_updated: "Laatste update: " 7 | 8 | footer: 9 | license: 'Deze blog valt onder de Creative Commons Attribution 4.0 International Licentie.' 10 | 11 | tag: 12 | all: "Alle" 13 | tags: "Labels" 14 | -------------------------------------------------------------------------------- /languages/zh-CN.yml: -------------------------------------------------------------------------------- 1 | global: 2 | search_input_hint: "输入感兴趣的关键字" 3 | 4 | post: 5 | continue_reading: "阅读全文…" 6 | last_updated: "最后更新时间：" 7 | 8 | footer: 9 | license: '博客内容遵循 知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议' 10 | 11 | tag: 12 | all: "全部" 13 | tags: "标签" 14 | -------------------------------------------------------------------------------- /languages/zh-TW.yml: -------------------------------------------------------------------------------- 1 | global: 2 | search_input_hint: "搜尋" 3 | 4 | post: 5 | continue_reading: "閱讀全文…" 6 | last_updated: "最後更新時間：" 7 | 8 | footer: 9 | license: '本部落格係採用創用 CC 姓名標示 4.0 國際 授權條款授權' 10 | 11 | tag: 12 | all: "全部" 13 | tags: "標籤" 14 | -------------------------------------------------------------------------------- /layout/_partial/after-footer.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 | <% if(theme.share){ %> 4 | <%- partial('post/share', {scope: 'global'}) %> 5 | <% } %> 6 | -------------------------------------------------------------------------------- /layout/_partial/archive.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | <%- partial('post/date', { post: post, date_format: date_format}) %> 5 | <%- partial('post/category', { post: post }) %> 6 |
7 | <%- partial('post/title', { 8 | hasLink: true 9 | }) %> 10 | <% if(post.tags && post.tags.length){ %> 11 |
12 | <%- partial('post/tag') %> 13 |
14 | <% } %> 15 |
16 |
-------------------------------------------------------------------------------- /layout/_partial/footer.ejs: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /layout/_partial/head.ejs: -------------------------------------------------------------------------------- 1 | 2 | <%- partial('plugins/google-analytics') %> 3 | <%- partial('plugins/tajs') %> 4 | <%- partial('plugins/baidu') %> 5 | 6 | <% if(theme.google_site_verification){ %> 7 | 8 | <% }%> 9 | <% if(theme.sogou_site_verification){ %> 10 | 11 | <% }%> 12 | <% if(theme.canonical){ %> 13 | 14 | <% }%> 15 | <% 16 | var title = page.title; 17 | 18 | if (is_archive()){ 19 | title = theme.archives_title || 'Archives'; 20 | 21 | if (is_month()){ 22 | title += ': ' + page.year + '/' + page.month; 23 | } else if (is_year()){ 24 | title += ': ' + page.year; 25 | } 26 | } else if (is_category()){ 27 | title = (theme.categories_title || 'Categories') + ': ' + page.category; 28 | } else if (is_tag()){ 29 | title = (theme.tags_title || 'Tags') + ': ' + page.tag; 30 | } 31 | %> 32 | <% if (title){ %><%= title %> | <% } %><%= config.title %><% if (config.subtitle){ %> | <%= config.subtitle %><% } %> 33 | 34 | <% if(theme.color){ %> 35 | 36 | <% } %> 37 | <% 38 | var keyWords = config.keywords; 39 | if(page.tags){ 40 | keyWords = []; 41 | 42 | _.isArray(page.tags) ? ( keyWords = page.tags ) 43 | : page.tags.each(function(k){ 44 | keyWords.push(k.name); 45 | }); 46 | } 47 | %> 48 | 49 | <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %> 50 | <% if ((config.feed) && (config.feed.path.length)) { %> 51 | 52 | <% } %> 53 | <%- favicon_tag(theme.favicon) %> 54 | 55 | 56 | 57 | 58 | <% if (site.data.head) { %> 59 | <% for (var i in site.data.head) { %> 60 | <%- site.data.head[i] %> 61 | <% } %> 62 | <% } %> 63 | 64 | 65 | -------------------------------------------------------------------------------- /layout/_partial/header.ejs: -------------------------------------------------------------------------------- 1 | 25 |
26 | 27 |
28 |

<%=title %>

29 |
30 | <% if(is_post()){ %> 31 | <%- partial('post/head-meta') %> 32 | <% } else if(is_home()){ %> 33 | <%- config.subtitle %> 34 | <% } else if (page.layout === 'page' && page.description) {%> 35 | <%- page.description %> 36 | <% } %> 37 |
38 |
39 | 40 | <%- partial('tags-bar', { 41 | type: hdClass.split('-')[0] 42 | }) %> 43 | 44 |
45 | -------------------------------------------------------------------------------- /layout/_partial/index-item.ejs: -------------------------------------------------------------------------------- 1 |
3 | 4 |
5 | <%- partial('post/date', {date_format: config.date_format}) %> 6 | <%- partial('post/category') %> 7 |
8 | 9 | <%- partial('post/title', { hasLink: true }) %> 10 | 11 |
12 | 13 | <% if(theme.excerpt_render) { %> 14 | <%- post.excerpt || post.content %> 15 | <% } else { %> 16 | <%- post.excerpt ? strip_html(post.excerpt) : truncate(strip_html(post.content), { 17 | length: theme.excerpt_length 18 | }) %> 19 | <% } %> 20 | 21 | 22 | <%= __('post.continue_reading') %> 23 | 24 |
25 | <% if(post.tags && post.tags.length){ %> 26 |
27 | <%- partial('post/tag') %> 28 |
29 | <% } %> 30 |
31 | -------------------------------------------------------------------------------- /layout/_partial/loading.ejs: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /layout/_partial/menu.ejs: -------------------------------------------------------------------------------- 1 | 38 | -------------------------------------------------------------------------------- /layout/_partial/paginator.ejs: -------------------------------------------------------------------------------- 1 | <% if (page.total > 1){ %> 2 | 10 | <% } %> -------------------------------------------------------------------------------- /layout/_partial/plugins/baidu.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.baidu_tongji){ %> 2 | 3 | 4 | 5 | 6 | <% } %> 7 | 8 | <% if(theme.baidu_push){ %> 9 | 10 | 24 | 25 | <% } %> 26 | -------------------------------------------------------------------------------- /layout/_partial/plugins/disqus.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.disqus_shortname){ %> 2 |
3 |
4 | 8 | 9 |
10 | <% } %> 11 | -------------------------------------------------------------------------------- /layout/_partial/plugins/dynamic-title.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.title_change) { %> 2 | 18 | <% } %> 19 | -------------------------------------------------------------------------------- /layout/_partial/plugins/gitalk.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.gitalk){ %> 2 |
3 |
4 | 5 | 6 | 24 |
25 | <% } %> 26 | -------------------------------------------------------------------------------- /layout/_partial/plugins/gitment.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.gitment){ %> 2 |
3 |
4 | 5 | 6 | 17 |
18 | <% } %> 19 | -------------------------------------------------------------------------------- /layout/_partial/plugins/google-analytics.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.google_analytics){ %> 2 | 3 | 8 | 9 | 10 | <% } %> 11 | -------------------------------------------------------------------------------- /layout/_partial/plugins/hyper-comments.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.hyper_id){ %> 2 |
3 |
4 | 26 | comments powered by HyperComments 27 |
28 | <% } %> 29 | -------------------------------------------------------------------------------- /layout/_partial/plugins/mathjax.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.mathjax){ %> 2 | 3 | 4 | 20 | 21 | 22 | <% } %> 23 | -------------------------------------------------------------------------------- /layout/_partial/plugins/page-visit.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.visit_counter) { %> 2 | 5 | <% } %> 6 | -------------------------------------------------------------------------------- /layout/_partial/plugins/site-visit.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.visit_counter) { %> 2 |

3 | 6 | 9 |

10 | <% } %> 11 | -------------------------------------------------------------------------------- /layout/_partial/plugins/tajs.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.tajs){ %> 2 | 3 | 4 | 5 | 6 | 7 | 8 | <% } %> 9 | -------------------------------------------------------------------------------- /layout/_partial/plugins/uyan.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.uyan_uid){ %> 2 |
3 | 4 |
5 | 6 | 7 |
8 | <% } %> 9 | -------------------------------------------------------------------------------- /layout/_partial/plugins/valine.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.valine.enable ){ %> 2 | 3 |
4 | 5 | 6 | 7 | 24 | 25 | <% } %> 26 | -------------------------------------------------------------------------------- /layout/_partial/post.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('post/toc', { post: post}) %> 2 |
4 | 5 |
6 |

<%- post.title %>

7 |
8 | <%- partial('post/date', {date_format: config.date_format}) %> 9 | <%- partial('post/category') %> 10 | <%- partial('plugins/page-visit') %> 11 |
12 |
13 | <%- post.content %> 14 |
15 | 16 | <%- partial('post/copyright') %> 17 | <%- partial('post/reward-btn') %> 18 | 19 |
20 | <%- partial('post/tag') %> 21 | 22 | <%- partial('post/share-fab') %> 23 | 24 |
25 |
26 | 27 | <%- partial('post/nav') %> 28 | 29 | <%- partial('post/comment') %> 30 |
31 | <%- partial('post/reward') %> 32 | -------------------------------------------------------------------------------- /layout/_partial/post/category.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.categories && post.categories.length){ %> 2 | <%- list_categories(post.categories, { 3 | show_count: false, 4 | class: 'article-category', 5 | style: 'list' 6 | }) %> 7 | <% } %> 8 | 9 | -------------------------------------------------------------------------------- /layout/_partial/post/comment.ejs: -------------------------------------------------------------------------------- 1 | <% if(post.comments){ %> 2 | 3 | <%- partial('../plugins/disqus') %> 4 | 5 | <%- partial('../plugins/uyan') %> 6 | 7 | <%- partial('../plugins/gitment') %> 8 | 9 | <%- partial('../plugins/valine') %> 10 | 11 | <%- partial('../plugins/hyper-comments') %> 12 | 13 | <%- partial('../plugins/gitalk') %> 14 | <%} %> 15 | -------------------------------------------------------------------------------- /layout/_partial/post/copyright.ejs: -------------------------------------------------------------------------------- 1 |
2 | <% if(theme.postMessage || theme.show_last_updated) { %> 3 |
4 | <%- partial('updated') %> 5 | <% if(theme.postMessage) {%> 6 | <%- _.template(theme.postMessage)(locals) %> 7 | <% } %> 8 |
9 | <% } %> 10 | 16 |
17 | -------------------------------------------------------------------------------- /layout/_partial/post/date.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /layout/_partial/post/head-meta.ejs: -------------------------------------------------------------------------------- 1 | 4 | 5 | <% if (page.categories && page.categories.length){ %> 6 | <%- list_categories(page.categories, { 7 | show_count: false, 8 | class: 'article-category', 9 | style: 'list' 10 | }) %> 11 | <% } %> -------------------------------------------------------------------------------- /layout/_partial/post/nav.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.prev || post.next){ %> 2 | 25 | <% } %> 26 | -------------------------------------------------------------------------------- /layout/_partial/post/reward-btn.ejs: -------------------------------------------------------------------------------- 1 | <% if(page.reward){ %> 2 |
3 | 赏 4 |
5 | <% } %> 6 | -------------------------------------------------------------------------------- /layout/_partial/post/reward.ejs: -------------------------------------------------------------------------------- 1 | <% if(page.reward){ %> 2 |
3 | 4 |

5 | 6 | <%=theme.reward.title %> 7 | 8 |

9 |
10 | <% 11 | var wechat = theme.reward.wechat; 12 | var alipay = theme.reward.alipay; 13 | %> 14 |
15 | 打赏二维码 16 |
17 | <% if(!!wechat && !!alipay) { %> 18 | 27 | <% } %> 28 |
29 |
30 | <% } %> 31 | -------------------------------------------------------------------------------- /layout/_partial/post/share-fab.ejs: -------------------------------------------------------------------------------- 1 | <% if(theme.share){ %> 2 |
3 | <%- partial('share', { scope: 'page' }) %> 4 | 5 | 6 | 7 |
8 | <% } %> 9 | -------------------------------------------------------------------------------- /layout/_partial/post/share.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | // 使用 sns 直接分享接口 3 | // 微信使用 qrcode helper 或 http://goqr.me/api/ 生成二维码 4 | var sUrl = url.replace(/index\.html$/, '') 5 | var sTitle = page.title ? '《'+ page.title +'》 — ' + config.title : config.title 6 | var sDesc = truncate(strip_html(page.excerpt || config.description), { length: 80}) 7 | var sPic = page.photos && page.photos.length ? page.photos[0] 8 | : (/^(http:|https:)?\/\//.test(theme.avatar) ? theme.avatar 9 | : config.url.replace(/\/$/, '') + theme.avatar) 10 | %> 11 | 12 |
13 | 45 |
46 | 47 | <% if(scope === 'global') { %> 48 |
49 | 50 |

扫一扫，分享到微信

51 | 微信分享二维码 52 |
53 | <% } %> 54 | -------------------------------------------------------------------------------- /layout/_partial/post/tag.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.tags && post.tags.length){ %> 2 | <%- list_tags(post.tags, { 3 | show_count: false, 4 | class: 'article-tag' 5 | }) %> 6 | <% } %> -------------------------------------------------------------------------------- /layout/_partial/post/title.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | post.title = post.title || 'No title'; 3 | %> 4 | 5 | <% if (post.link){ %> 6 |

7 | 8 |

9 | <% } else if (post.title){ %> 10 | <% if (hasLink){ %> 11 |

12 | <%= post.title %> 13 |

14 | <% } else { %> 15 |

16 | <%= post.title %> 17 |

18 | <% } %> 19 | <% } %> 20 | 21 | -------------------------------------------------------------------------------- /layout/_partial/post/toc.ejs: -------------------------------------------------------------------------------- 1 | <% if(theme.toc){ 2 | var topic = toc(post.content, { 3 | class: 'post-toc', 4 | list_number: theme.toc.list_number 5 | }) 6 | if(topic) { 7 | %> 8 | 14 | <% } 15 | } %> 16 | -------------------------------------------------------------------------------- /layout/_partial/post/updated.ejs: -------------------------------------------------------------------------------- 1 | <% if(theme.show_last_updated){ %> 2 | 3 | <%= __('post.last_updated') %> 4 |
5 | <%} %> 6 | -------------------------------------------------------------------------------- /layout/_partial/script.ejs: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 11 | <% if (theme.search){ %> 12 | <%- partial('search') %> 13 | 14 | <% } %> 15 | 16 | <%- partial('plugins/mathjax') %> 17 | 18 | <% if (theme.visit_counter) { %> 19 | 20 | <% } %> 21 | 22 | <%- partial('plugins/dynamic-title') %> 23 | -------------------------------------------------------------------------------- /layout/_partial/search.ejs: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 18 | -------------------------------------------------------------------------------- /layout/_partial/tags-bar.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | if(type === 'categories' || type === 'tags'){ %> 3 |
4 | 40 | 41 |
42 | 43 |
44 |
45 | <% } %> 46 | -------------------------------------------------------------------------------- /layout/archive.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/header', { 2 | title: theme.archives_title, 3 | hdClass: 'archives-header' 4 | }) %> 5 |
6 | <% 7 | var posts = []; 8 | 9 | page.posts.each(function(post){ 10 | posts.push(post); 11 | }); 12 | 13 | var sortPosts = _[_.orderBy ? 'orderBy' : 'sortByOrder'](posts, ['date'], ['desc']); 14 | %> 15 | 16 | <% 17 | var y = 0, m = 0; 18 | sortPosts.forEach(function(post, i){ 19 | var dt = post.date; 20 | var ny = post.date.year(); 21 | var nm = post.date.month(); 22 | 23 | if(ny !== y || nm !== m) { 24 | 25 | y = ny; 26 | m = nm; 27 | %> 28 | <% if(i > 0){%>
<% } %> 29 |

<%=dt.format('MMMM, YYYY')%>

30 |
31 | <% } %> 32 | 33 | <%- partial('_partial/archive', {post: post, date_format: 'MMM D'}) %> 34 | 35 | <%})%> 36 |
37 | 38 | <%- partial('_partial/paginator') %> 39 | 40 | -------------------------------------------------------------------------------- /layout/categories.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/header', { 2 | title: locals.title || theme.categories_title, 3 | hdClass: 'categories-header' 4 | }) %> 5 |
6 | <% 7 | if(is_category()) { %> 8 |
9 | <% page.posts.each(function(post){ %> 10 | 11 | <%- partial('_partial/archive', {post: post, date_format: config.date_format}) %> 12 | 13 | <% }) %> 14 |
15 | <% } else { 16 | site.categories.each(function(cate){ 17 | if(cate.length) { 18 | %> 19 | 20 |

<%=cate.name %>

21 | 22 |
23 | <% cate.posts.each(function(post){ %> 24 | 25 | <%- partial('_partial/archive', {post: post, date_format: config.date_format}) %> 26 | <% }) %> 27 |
28 | 29 | <% } 30 | }) 31 | } 32 | %> 33 | <%- partial('_partial/paginator') %> 34 |
35 | -------------------------------------------------------------------------------- /layout/category.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('categories', { 2 | title: theme.categories_title + ': ' + page.category 3 | }) %> 4 | -------------------------------------------------------------------------------- /layout/index.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/header', { 2 | title: config.title, 3 | hdClass: 'index-header' 4 | }) %> 5 |
6 | 7 | 17 | 18 | <%- partial('_partial/paginator') %> 19 | 20 |
21 | -------------------------------------------------------------------------------- /layout/layout.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%- partial('_partial/head') %> 4 | 5 | <%- partial('_partial/loading') %> 6 | <%- partial('_partial/menu') %> 7 |
8 | <%- body %> 9 | <%- partial('_partial/footer') %> 10 |
11 | <%- partial('_partial/after-footer') %> 12 | <%- partial('_partial/script') %> 13 | 14 | 15 | -------------------------------------------------------------------------------- /layout/page.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/header', { 2 | title: page.title, 3 | hdClass: 'page-header' 4 | }) %> 5 | <% 6 | page.reward = 'reward' in page ? (theme.reward && page.reward) : theme.reward; 7 | page.slug = 'hexo-page-' + page.path.replace(/\/index\.html$/,'').split('/').join('-'); 8 | %> 9 |
10 |
11 |
12 | <%- page.content.replace(/

}<\/p>/g, '

') 13 | .replace(/

@([\w-]+){<\/p>/g, function(match, $1){ 14 | return '

' 15 | }) %> 16 |
17 | 18 | <% if(theme.about){ %> 19 |
20 | <%- image_tag(theme.avatar) %> 21 |
22 |

<%- config.author %>

23 |

<%- config.subtitle %>

24 |

<%- theme.about %>

25 |
26 | 27 | <%- partial('_partial/post/share-fab') %> 28 | 29 |
30 | <% } %> 31 | 32 | <%- partial('_partial/post/reward-btn') %> 33 | 34 | <%- partial('_partial/post/comment', { post: page }) %> 35 |
36 | <%- partial('_partial/post/reward') %> 37 |
38 | -------------------------------------------------------------------------------- /layout/post.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/header', { 2 | title: page.title, 3 | hdClass: 'post-header' 4 | }) %> 5 | <% 6 | page.reward = 'reward' in page ? (theme.reward && page.reward) : theme.reward 7 | %> 8 |
9 | <%- partial('_partial/post', {post: page }) %> 10 |
11 | -------------------------------------------------------------------------------- /layout/tag.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('tags', { 2 | title: theme.tags_title + ': '+ page.tag 3 | }) %> 4 | -------------------------------------------------------------------------------- /layout/tags.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/header', { 2 | title: locals.title || theme.tags_title, 3 | hdClass: 'tags-header' 4 | }) %> 5 |
6 | <% 7 | if(is_tag()) { %> 8 |
9 | <% page.posts.each(function(post){ %> 10 | 11 | <%- partial('_partial/archive', {post: post, date_format: config.date_format}) %> 12 | 13 | <% }) %> 14 |
15 | <% } else { 16 | site.tags.each(function(tag){ 17 | if(tag.length){ 18 | %> 19 | 20 |

<%=tag.name %>

21 | 22 |
23 | <% tag.posts.each(function(post){ %> 24 | 25 | <%- partial('_partial/archive', {post: post, date_format: config.date_format}) %> 26 | 27 | <% }) %> 28 |
29 | <% } 30 | }) 31 | } 32 | %> 33 | <%- partial('_partial/paginator') %> 34 |
35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-theme-material-indigo", 3 | "version": "1.7.2", 4 | "description": "Material Design theme for Hexo.", 5 | "keywords": [ 6 | "hexo", 7 | "theme", 8 | "material design" 9 | ], 10 | "author": { 11 | "name": "yusen", 12 | "email": "634206017@qq.com" 13 | }, 14 | "license": "MIT", 15 | "repository": { 16 | "url": "git+https://github.com/yscoder/hexo-theme-indigo.git", 17 | "type": "git" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scripts/plugins.js: -------------------------------------------------------------------------------- 1 | const { version, name } = require('../package.json') 2 | 3 | hexo.extend.helper.register('theme_version', () => version) 4 | 5 | const source = (path, cache, ext) => { 6 | if (cache) { 7 | const minFile = `${path}${ext === '.js' ? '.min' : ''}${ext}` 8 | return hexo.theme.config.cdn ? `//unpkg.com/${name}@latest${minFile}` : `${minFile}?v=${version}` 9 | } else { 10 | return path + ext 11 | } 12 | } 13 | hexo.extend.helper.register('theme_js', (path, cache) => source(path, cache, '.js')) 14 | hexo.extend.helper.register('theme_css', (path, cache) => source(path, cache, '.css')) 15 | 16 | function renderImage(src, alt = '', title = '') { 17 | return `
18 |
19 |
20 | ${alt} 21 |
22 |
${title || alt}
23 |
` 24 | } 25 | 26 | hexo.extend.tag.register('image', ([src, alt = '', title = '']) => { 27 | return hexo.theme.config.lightbox ? renderImage(src, alt, title) : `${alt}` 28 | }) 29 | 30 | hexo.extend.filter.register('before_post_render', data => { 31 | if (hexo.theme.config.lightbox) { 32 | // 包含图片的代码块 [\s\S]*\!\[(.*)\]\((.+)\)[\s\S]*<\/escape> 33 | // 行内图片 [^`]\s*\!\[(.*)\]\((.+)\)([^`]|$) 34 | data.content = data.content.replace(/.*\!\[(.*)\]\((.+)\).*<\/escape>|([^`]\s*|^)\!\[(.*)\]\((.+)\)([^`]|$)/gm, match => { 35 | 36 | // 忽略代码块中的图片 37 | if (/[\s\S]*<\/escape>|.?\s{3,}/.test(match)) { 38 | return match 39 | } 40 | 41 | return match.replace(/\!\[(.*)\]\((.+)\)/, (img, alt, src) => { 42 | const attrs = src.split(' ') 43 | const title = (attrs[1] && attrs[1].replace(/\"|\'/g, '')) || '' 44 | return `{% image ${attrs[0]} '${alt}' '${title}' %}` 45 | }) 46 | }) 47 | } 48 | return data 49 | }) 50 | -------------------------------------------------------------------------------- /source/css/_partial/archives.less: -------------------------------------------------------------------------------- 1 | .archive-separator { 2 | margin: 35px 0 13px; 3 | color: @primaryColor; 4 | font-size: 16px; 5 | font-weight: bold; 6 | 7 | &:first-child { 8 | margin-top: 10px; 9 | } 10 | } 11 | 12 | .article-card { 13 | padding: 16px 20px 0; 14 | .card(); 15 | 16 | .post-content { 17 | word-break: break-all; 18 | 19 | .highlight, 20 | > pre { 21 | margin-left: -20px; 22 | margin-right: -20px; 23 | padding: 20px; 24 | } 25 | } 26 | 27 | .post-time { 28 | line-height: 24px; 29 | font-weight: bold; 30 | } 31 | 32 | .post-footer { 33 | margin: 0 -20px; 34 | padding: 12px 20px 8px; 35 | } 36 | 37 | } 38 | 39 | .archive-article { 40 | .post-title { 41 | font-size: 18px; 42 | margin-bottom: 0; 43 | padding-bottom: 16px; 44 | } 45 | } 46 | .waterfall { 47 | position: relative; 48 | margin: 0 -10px -20px; 49 | .fade; 50 | } 51 | .waterfall-item { 52 | position: absolute; 53 | width: 50%; 54 | padding: 0 10px 20px; 55 | } 56 | 57 | @media screen and (max-width:760px) { 58 | .archive-article { 59 | display: block; 60 | margin: 0 -16px; 61 | padding: 16px 16px 8px; 62 | border-bottom: 1px solid @borderColor; 63 | .post-footer { 64 | border-top: none; 65 | padding-top: 0; 66 | padding-bottom: 0; 67 | } 68 | } 69 | 70 | .article-card { 71 | border-radius: 0 72 | } 73 | 74 | .archive-separator { 75 | margin-top: 16px; 76 | } 77 | 78 | .waterfall { 79 | margin: 0; 80 | height: auto!important; 81 | opacity: 1; 82 | .transform(translateY(0)); 83 | } 84 | 85 | .waterfall-item { 86 | position: static; 87 | width: 100%; 88 | padding: 0; 89 | } 90 | } 91 | 92 | @media screen and (max-width:420px) { 93 | .archive-article { 94 | padding: 16px 16px 0; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /source/css/_partial/article.less: -------------------------------------------------------------------------------- 1 | .post-widget { 2 | float: right; 3 | width: 20%; 4 | padding-left: 30px; 5 | min-height: 1px; 6 | +.post-article { 7 | float: left; 8 | width: 80%; 9 | padding-right: 30px; 10 | } 11 | } 12 | 13 | .post-toc-wrap { 14 | position: fixed; 15 | overflow-x: hidden; 16 | width: 20%; 17 | &.fixed { 18 | top: @headerH + 20px; 19 | bottom: 140px; 20 | overflow-y: auto; 21 | } 22 | 23 | ol, 24 | ul { 25 | list-style: none; 26 | margin: 0; 27 | } 28 | 29 | h4 { 30 | padding: 0 0 10px 20px; 31 | font-size: 15px; 32 | font-weight: 600; 33 | color: #727272; 34 | } 35 | } 36 | .post-toc-child { 37 | padding-left: 10px; 38 | } 39 | .post-toc { 40 | display: inline-block; 41 | padding: 0; 42 | font-size: 13px; 43 | >.post-toc-item { 44 | position: relative; 45 | } 46 | } 47 | .post-toc-item { 48 | font-weight: 400; 49 | color: @secondaryTextColor; 50 | 51 | &.active { 52 | >.post-toc-link { 53 | font-weight: 600; 54 | color: @primaryColor; 55 | &:before { 56 | background: rgba(0, 0, 0, .06); 57 | } 58 | 59 | &:after { 60 | border-left: 3px solid @primaryColor; 61 | } 62 | } 63 | } 64 | } 65 | .post-toc-link { 66 | position: relative; 67 | z-index: 2; 68 | display: block; 69 | padding: 3px 20px; 70 | line-height: 1.5rem; 71 | color: inherit; 72 | word-break: break-all; 73 | 74 | &:hover { 75 | opacity: .8; 76 | } 77 | 78 | &:before, 79 | &:after { 80 | content: ""; 81 | position: absolute; 82 | z-index: 1; 83 | top: 0; 84 | right: 0; 85 | width: 100%; 86 | height: 100%; 87 | } 88 | } 89 | 90 | .post-toc-shrink { 91 | height: 0; 92 | overflow-y: hidden; 93 | } 94 | 95 | .post-toc-expand { 96 | height: auto; 97 | } 98 | 99 | .post-article { 100 | .post-content { 101 | padding-top: 20px; 102 | } 103 | } 104 | .post-card { 105 | margin-top: -150px; 106 | min-height: 100px; 107 | padding: 35px; 108 | background: #fff; 109 | border-radius: 4px; 110 | box-shadow: 0 10px 30px rgba(0, 0, 0, .2); 111 | .post-meta { 112 | margin-top: 8px; 113 | } 114 | } 115 | .post-card-title { 116 | font-size: 32px; 117 | } 118 | .post-nav { 119 | margin-top: 30px; 120 | padding: 16px 0 0; 121 | 122 | .prev, 123 | .next { 124 | width: 47%; 125 | background: @codeBg; 126 | } 127 | 128 | .next { 129 | text-align: right; 130 | } 131 | } 132 | 133 | .post-nav-link { 134 | display: block; 135 | line-height: 2em; 136 | font-size: 16px; 137 | padding: 10px 16px; 138 | 139 | .title { 140 | .hoverLine(@primaryColor); 141 | } 142 | 143 | .icon { 144 | vertical-align: -9%; 145 | } 146 | 147 | .tips { 148 | color: @secondaryTextColor; 149 | } 150 | } 151 | 152 | .post-copyright { 153 | margin-bottom: 100px; 154 | font-size: 14px; 155 | 156 | .content { 157 | margin-bottom: 1em; 158 | padding: 20px 30px; 159 | word-break: break-all; 160 | color: @secondaryTextColor; 161 | background: lighten( @lightPrimaryColor, 12%); 162 | border-radius: 30px 30px 0; 163 | } 164 | 165 | footer { 166 | float: right; 167 | 168 | a { 169 | position: relative; 170 | display: block; 171 | overflow: hidden; 172 | padding: 0 16px 0 42px; 173 | height: 28px; 174 | line-height: 28px; 175 | color: @secondaryTextColor; 176 | background: lighten( @lightPrimaryColor, 12%); 177 | border-radius: 14px; 178 | } 179 | img { 180 | position: absolute; 181 | top: 0; 182 | left: 0; 183 | width: 28px; 184 | height: 28px; 185 | border-radius: 50%; 186 | } 187 | } 188 | } 189 | 190 | .post-footer { 191 | position: relative; 192 | margin: 0 -35px; 193 | padding: 20px 35px 0; 194 | border-top: 1px solid #ddd; 195 | } 196 | 197 | .post-content { 198 | padding-bottom: 20px; 199 | line-height: 1.8; 200 | 201 | >.highlight, 202 | >.image-bubble, 203 | >pre { 204 | margin-left: -35px; 205 | margin-right: -35px; 206 | } 207 | 208 | >.highlight, 209 | >pre { 210 | padding: 20px 35px; 211 | } 212 | 213 | .image-bubble { 214 | margin-top: 20px; 215 | margin-bottom: 20px; 216 | text-align: center; 217 | } 218 | .image-caption { 219 | display: inline-block; 220 | margin-top: 10px; 221 | color: @secondaryTextColor; 222 | } 223 | 224 | .headerlink { 225 | visibility: hidden; 226 | margin-left: -1em; 227 | padding-right: 5px; 228 | color: @lightPrimaryColor; 229 | 230 | &:before { 231 | content: "#"; 232 | } 233 | } 234 | 235 | p { 236 | word-wrap: break-word; 237 | } 238 | 239 | p, 240 | li { 241 | a { 242 | color: @accentColor; 243 | border-bottom: 1px dotted lighten(@accentColor, 20%); 244 | word-break: break-all; 245 | 246 | &:hover, 247 | &:active { 248 | text-decoration: none; 249 | border-bottom-style: solid; 250 | opacity: .7; 251 | } 252 | } 253 | } 254 | 255 | strong { 256 | font-weight: 600; 257 | color: @primaryColor; 258 | a { 259 | border-color: @accentColor 260 | } 261 | } 262 | 263 | em { 264 | color: @secondaryTextColor 265 | } 266 | 267 | h1 { 268 | font-size: 24px; 269 | } 270 | 271 | h2 { 272 | font-size: 22px; 273 | } 274 | 275 | h3 { 276 | font-size: 20px; 277 | } 278 | 279 | h4 { 280 | font-size: 18px; 281 | } 282 | 283 | h5 { 284 | font-size: 16px; 285 | } 286 | 287 | h6 { 288 | font-size: 14px; 289 | } 290 | 291 | h1, 292 | h2, 293 | h3, 294 | h4, 295 | h5 { 296 | padding-top: @headerH; 297 | margin-top: @headerH * -1; 298 | } 299 | 300 | h1, 301 | h2, 302 | h3, 303 | h4, 304 | blockquote, 305 | ol, 306 | p, 307 | pre, 308 | table, 309 | ul, 310 | figure, 311 | .video-container { 312 | margin-bottom: 20px; 313 | } 314 | .video-container iframe { 315 | max-width: 100%; 316 | } 317 | 318 | h1, 319 | h2, 320 | h3, 321 | h4, 322 | h5, 323 | h6 { 324 | color: @primaryColor; 325 | &:hover { 326 | .headerlink { 327 | visibility: visible 328 | } 329 | } 330 | } 331 | 332 | blockquote p:first-child, 333 | blockquote:first-child, 334 | ol:first-child, 335 | p:first-child, 336 | pre:first-child, 337 | table:first-child, 338 | ul:first-child, 339 | figure:first-child { 340 | margin-top: 0 341 | } 342 | 343 | ol, 344 | ul { 345 | font-size: 14px; 346 | line-height: 30px; 347 | } 348 | 349 | video, 350 | audio { 351 | max-width: 100%; 352 | } 353 | 354 | 355 | blockquote { 356 | position: relative; 357 | padding: 16px 20px; 358 | border-left: 4px solid @primaryColor; 359 | color: lighten(@primaryTextColor, 30%); 360 | background: @codeBg; 361 | font-size: 14px; 362 | border-radius: 0 2px 2px 0; 363 | 364 | p { 365 | margin: 0; 366 | } 367 | 368 | footer { 369 | margin-top: 10px; 370 | text-align: right; 371 | font-size: 80%; 372 | } 373 | } 374 | 375 | table { 376 | width: 100%; 377 | border: 1px solid #dedede; 378 | margin: 15px 0; 379 | border-collapse: collapse; 380 | 381 | tr, 382 | td { 383 | height: 35px; 384 | } 385 | 386 | thead { 387 | tr { 388 | background: #f8f8f8; 389 | } 390 | } 391 | 392 | tbody { 393 | tr { 394 | &:hover { 395 | background: #efefef; 396 | } 397 | } 398 | } 399 | 400 | td, 401 | th { 402 | border: 1px solid #dedede; 403 | padding: 0 10px; 404 | } 405 | } 406 | 407 | figure { 408 | table { 409 | border: none; 410 | width: auto; 411 | margin: 0; 412 | 413 | tbody { 414 | tr { 415 | &:hover { 416 | background: none; 417 | } 418 | } 419 | 420 | td { 421 | border: none; 422 | } 423 | } 424 | } 425 | } 426 | 427 | code, 428 | kbd, 429 | pre, 430 | samp { 431 | font-family: @font-code; 432 | } 433 | 434 | code, 435 | pre { 436 | background: @codeBg 437 | } 438 | 439 | p code, 440 | li code { 441 | color: @accentColor; 442 | line-height: 1; 443 | margin: 0 4px; 444 | font-size: 80%; 445 | padding: 3px 5px; 446 | border: 1px solid #eee; 447 | border-radius: 2px; 448 | word-wrap: break-word; 449 | } 450 | 451 | pre { 452 | margin: 24px 0; 453 | code { 454 | border-radius: 0; 455 | font-size: inherit; 456 | margin: 0; 457 | padding: 0; 458 | } 459 | } 460 | } 461 | 462 | 463 | .comments { 464 | padding: 40px 0 0; 465 | } 466 | 467 | @media screen and (max-width:760px) { 468 | .post-widget { 469 | display: none 470 | } 471 | 472 | .post-article { 473 | float: none; 474 | width: 100%!important; 475 | padding-right: 0!important; 476 | } 477 | 478 | .post-card { 479 | position: relative; 480 | margin: -20px -16px 0; 481 | border-radius: 0; 482 | padding: 16px; 483 | 484 | .post-meta { 485 | margin-top: -40px; 486 | padding: 20px 12px; 487 | background: #fff; 488 | box-shadow: 0 1px 4px 0 rgba(0,0,0,.16); 489 | border-radius: 2px; 490 | } 491 | } 492 | 493 | .post-card-title { 494 | display: none 495 | } 496 | 497 | .post-nav { 498 | padding: 0; 499 | margin-left: -16px; 500 | margin-right: -16px; 501 | .prev, 502 | .next { 503 | width: 50%; 504 | background: #fff; 505 | border-bottom: 1px solid @borderColor; 506 | box-shadow: @boxShadow; 507 | } 508 | h4 { 509 | font-size: 16px; 510 | line-height: 1.5; 511 | } 512 | } 513 | 514 | .has-jax { 515 | font-size: 13px; 516 | } 517 | .MJXc-display { 518 | overflow-x: auto; 519 | overflow-y: hidden; 520 | } 521 | 522 | .comments { 523 | margin-left: -16px; 524 | margin-right: -16px 525 | } 526 | } 527 | 528 | @media screen and (max-width:480px) { 529 | .has-jax { 530 | font-size: 10px; 531 | } 532 | .post-content { 533 | .highlight, 534 | .image-bubble, 535 | >pre { 536 | margin-left: -16px; 537 | margin-right: -16px; 538 | } 539 | .highlight, 540 | >pre { 541 | padding: 16px; 542 | } 543 | } 544 | } 545 | 546 | -------------------------------------------------------------------------------- /source/css/_partial/gotop.less: -------------------------------------------------------------------------------- 1 | #gotop { 2 | position: fixed; 3 | right: 16px; 4 | bottom: 30px; 5 | z-index: 30; 6 | width: 56px; 7 | height: 56px; 8 | line-height: 56px; 9 | text-align: center; 10 | color: #fff; 11 | background: @accentColor; 12 | border-radius: 50%; 13 | opacity: 0; 14 | .boxShadow(); 15 | .transform(translateX(200%)); 16 | 17 | &.in { 18 | opacity: 1; 19 | .transform(none); 20 | } 21 | 22 | } 23 | 24 | @media screen and (max-width:760px) { 25 | #gotop { 26 | width: 40px; 27 | height: 40px; 28 | line-height: 40px; 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /source/css/_partial/header.less: -------------------------------------------------------------------------------- 1 | .top-header { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | width: 100%; 6 | color: @textPrimaryColor; 7 | height: @headerH; 8 | background: @primaryColor; 9 | -webkit-transition: padding-left .6s ease-in-out, background-color .3s cubic-bezier(.4, 0, .2, 1), box-shadow .15s linear; 10 | transition: padding-left .6s ease-in-out, background-color .3s cubic-bezier(.4, 0, .2, 1), box-shadow .15s linear; 11 | z-index: 30; 12 | 13 | &.fixed { 14 | box-shadow: @boxShadow; 15 | 16 | .header-title { 17 | visibility: visible; 18 | } 19 | 20 | } 21 | 22 | } 23 | 24 | .header-icon { 25 | width: @headerH; 26 | height: @headerH; 27 | line-height: @headerH; 28 | text-align: center; 29 | color: @textPrimaryColor; 30 | 31 | &:hover { 32 | color: @textPrimaryColor; 33 | } 34 | } 35 | 36 | .header-title { 37 | visibility: hidden; 38 | font-weight: 400; 39 | line-height: 56px; 40 | font-size: 16px; 41 | text-align: center; 42 | white-space: nowrap; 43 | } 44 | 45 | .content-header { 46 | min-height: 210px; 47 | margin-left: -240px; 48 | padding: 104px 16px 48px 256px; 49 | color: @textPrimaryColor; 50 | background: @primaryColor; 51 | text-shadow: 0 1px 1px rgba(0, 0, 0, .2); 52 | 53 | .subtitle { 54 | padding-top: 6px; 55 | font-weight: 300; 56 | color: @lightPrimaryColor; 57 | } 58 | 59 | .title { 60 | font-weight: 500; 61 | } 62 | 63 | .article-category-list-link { 64 | color: lighten(@accentColor, 10%); 65 | } 66 | 67 | } 68 | 69 | .post-header { 70 | 71 | .title, .subtitle { 72 | display: none; 73 | } 74 | } 75 | .tags-header, 76 | .categories-header { 77 | position: relative; 78 | z-index: 6; 79 | padding-bottom: 0!important 80 | } 81 | 82 | @media screen and (max-width:1240px) { 83 | 84 | .header-title { 85 | text-align: left; 86 | } 87 | 88 | } 89 | 90 | @media screen and (max-width:760px) { 91 | .content-header { 92 | margin: 0; 93 | min-height: auto; 94 | padding: 72px 16px 20px; 95 | 96 | .title { 97 | font-size: 24px; 98 | line-height: 30px; 99 | } 100 | 101 | .subtitle { 102 | font-size: 14px; 103 | line-height: 20px 104 | } 105 | 106 | } 107 | 108 | .post-header { 109 | .title { 110 | display: block; 111 | font-size: 24px; 112 | line-height: 1.5; 113 | } 114 | } 115 | 116 | } 117 | -------------------------------------------------------------------------------- /source/css/_partial/highlight.less: -------------------------------------------------------------------------------- 1 | @h-background: #f5f5f5; 2 | @h-current-line: #efefef; 3 | @h-selectioon: #d6d6d6; 4 | @h-foreground: #4d4d4c; 5 | @h-comment: #8e908c; 6 | @h-red: #c82829; 7 | @h-orange: #f5871f; 8 | @h-yellow: #eab700; 9 | @h-green: #718c00; 10 | @h-aqua: #3e999f; 11 | @h-blue: #4271ae; 12 | @h-purple: #8959a8; 13 | @h-fs: 14px; 14 | 15 | .codeBlock() { 16 | position: relative; 17 | overflow-x: auto; 18 | padding: 20px; 19 | font-size: @h-fs; 20 | line-height: @h-fs*1.6; 21 | background: @h-background; 22 | } 23 | 24 | .line-numbers() { 25 | color: @secondaryTextColor; 26 | font-size: 0.85em; 27 | } 28 | 29 | .post-content { 30 | pre { 31 | .codeBlock(); 32 | color: @h-foreground; 33 | 34 | code { 35 | background: none; 36 | color: @h-foreground; 37 | } 38 | 39 | } 40 | 41 | .highlight { 42 | .codeBlock(); 43 | 44 | pre { 45 | margin: 0; 46 | padding: 0; 47 | } 48 | 49 | .line { 50 | height: @h-fs*1.6; 51 | line-height: @h-fs*1.6; 52 | } 53 | 54 | table { 55 | margin: 0; 56 | width: auto; 57 | } 58 | 59 | td { 60 | border: none; 61 | } 62 | 63 | tr, 64 | td { 65 | border-collapse: collapse; 66 | padding: 0; 67 | margin: 0; 68 | } 69 | 70 | figcaption { 71 | font-size: 0.85em; 72 | color: @h-comment; 73 | line-height: 1em; 74 | margin-bottom: 1em; 75 | 76 | a { 77 | float: right 78 | } 79 | 80 | } 81 | 82 | .gutter pre { 83 | .line-numbers(); 84 | text-align: right; 85 | padding-right: 20px; 86 | } 87 | 88 | 89 | } 90 | 91 | .gist { 92 | background: @h-background; 93 | 94 | tr, td { 95 | height: auto; 96 | } 97 | 98 | .gist-file { 99 | border: none; 100 | font-family: @font-code; 101 | 102 | .highlight { 103 | margin: 0; 104 | padding: 0; 105 | border: none; 106 | } 107 | 108 | } 109 | .gist-data { 110 | border: none; 111 | 112 | .line-numbers { 113 | .line-numbers(); 114 | background: none; 115 | border: none; 116 | padding: 0 20px 0 0 117 | } 118 | 119 | .line-data { 120 | padding: 0 !important 121 | } 122 | 123 | } 124 | 125 | .gist-meta { 126 | background: @h-background; 127 | color: @h-comment; 128 | font: 0.85em @font-code; 129 | 130 | a { 131 | color: @accentColor; 132 | font-weight: normal; 133 | 134 | &:hover { 135 | text-decoration: underline 136 | } 137 | 138 | } 139 | 140 | } 141 | 142 | } 143 | 144 | } 145 | 146 | pre { 147 | .comment { 148 | color: @h-comment 149 | } 150 | 151 | .tag { 152 | color: @h-comment 153 | } 154 | 155 | .variable, 156 | .title, 157 | .type, 158 | .regexp, 159 | .ruby .constant, 160 | .xml .tag .title, 161 | .xml .pi, 162 | .xml .doctype, 163 | .html .doctype, 164 | .selector-pseudo, 165 | .css .id, 166 | .css .class, 167 | .css .pseudo, 168 | .tag .name { 169 | color: @h-red 170 | } 171 | 172 | .class, 173 | .number, 174 | .preprocessor, 175 | .built_in, 176 | .literal, 177 | .params, 178 | .constant { 179 | color: @h-orange 180 | } 181 | 182 | .attribute, 183 | .label, 184 | .ruby .class .title, 185 | .css .rules .attribute, 186 | .tag .attr { 187 | color: @h-green 188 | } 189 | 190 | .string, 191 | .value, 192 | .inheritance, 193 | .header, 194 | .ruby .symbol, 195 | .xml .cdata { 196 | color: @h-blue 197 | } 198 | 199 | .selector-tag, 200 | .css .hexcolor, 201 | .css .tag { 202 | color: @h-aqua 203 | } 204 | 205 | .function, 206 | .python .decorator, 207 | .python .title, 208 | .ruby .function .title, 209 | .ruby .title .keyword, 210 | .perl .sub, 211 | .javascript .title, 212 | .coffeescript .title { 213 | color: @h-blue 214 | } 215 | 216 | .selector-id, 217 | .selector-class, 218 | .keyword, 219 | .javascript .function { 220 | color: @h-purple 221 | } 222 | 223 | } 224 | @media screen and(max-width:760px) { 225 | .post-content .highlight { 226 | margin-left: -16px; 227 | margin-right: -16px; 228 | padding: 20px 16px; 229 | } 230 | } -------------------------------------------------------------------------------- /source/css/_partial/layout.less: -------------------------------------------------------------------------------- 1 | .container, 2 | #main { 3 | position: relative; 4 | } 5 | 6 | #menu-off { 7 | position: absolute; 8 | top: 0; 9 | left: 100%; 10 | .transition(.4s); 11 | } 12 | 13 | #menu { 14 | position: fixed; 15 | top: 0; 16 | left: 0; 17 | bottom: 0; 18 | z-index: 66; 19 | width: @menuWidth; 20 | min-height: 100%; 21 | background: #fff; 22 | box-shadow: @boxShadow; 23 | .transition(.4s, cubic-bezier(.18, .81, .3, .89)); 24 | will-change: transform, -webkit-transform; 25 | 26 | &.hide { 27 | .transform(translateX(-100%)); 28 | #menu-off { 29 | .transform(scale(0)); 30 | } 31 | +#main { 32 | padding-left: 0; 33 | } 34 | } 35 | 36 | .inner { 37 | position: relative; 38 | height: 100%; 39 | } 40 | 41 | .brand-wrap { 42 | background-size: 100% 100%; 43 | } 44 | 45 | .brand { 46 | padding: 40px @menuPadding 2em; 47 | background: fade(@primaryColor, 50%); 48 | } 49 | 50 | .avatar { 51 | display: block; 52 | width: 80px; 53 | height: 80px; 54 | border: 2px solid #fff; 55 | border-radius: 50%; 56 | overflow: hidden; 57 | box-shadow: @boxShadow; 58 | } 59 | 60 | .introduce { 61 | margin: 1em 0 0; 62 | color: @textPrimaryColor; 63 | } 64 | 65 | .mail { 66 | display: inline-block; 67 | padding-top: 4px; 68 | color: @lightPrimaryColor; 69 | font-size: 13px; 70 | } 71 | 72 | .scroll-wrap { 73 | position: relative; 74 | overflow-y: auto; 75 | } 76 | 77 | 78 | .nav { 79 | margin: 0; 80 | padding: 12px 0; 81 | height: 300px; 82 | min-height: ~"calc(100% - 115px)"; 83 | list-style: none; 84 | line-height: @navH; 85 | 86 | li { 87 | padding: 0 @menuPadding; 88 | 89 | .icon { 90 | position: absolute; 91 | top: 0; 92 | left: @menuPadding; 93 | line-height: inherit; 94 | } 95 | 96 | &:hover, 97 | &.active { 98 | background: rgba(0, 0, 0, .05); 99 | 100 | a, 101 | .icon { 102 | color: @primaryColor; 103 | } 104 | } 105 | } 106 | 107 | a { 108 | display: block; 109 | padding-left: @menuPadding*2.4; 110 | height: @navH; 111 | line-height: @navH; 112 | font-weight: 500; 113 | color: @secondaryTextColor; 114 | text-decoration: none; 115 | } 116 | } 117 | } 118 | 119 | #main { 120 | padding-left: @menuWidth; 121 | min-height: 100%; 122 | .transition(.4s); 123 | } 124 | 125 | .body-wrap { 126 | padding: 30px 0 40px; 127 | min-height: ~'calc(100vh - 340px)'; 128 | } 129 | 130 | .container { 131 | width: @contentWidth; 132 | margin: 0 auto; 133 | 134 | &:after { 135 | content: ""; 136 | display: table; 137 | clear: both; 138 | } 139 | } 140 | 141 | .mask { 142 | visibility: hidden; 143 | position: fixed; 144 | top: 0; 145 | left: 0; 146 | bottom: 0; 147 | z-index: 88; 148 | width: 100%; 149 | height: 100%; 150 | background: #000; 151 | opacity: 0; 152 | pointer-events: none; 153 | .transition(.3s); 154 | 155 | &.in { 156 | visibility: visible; 157 | pointer-events: auto; 158 | opacity: .3; 159 | } 160 | } 161 | 162 | .footer { 163 | color: rgba(255,255,255,.6); 164 | background: @darkPrimaryColor; 165 | p { 166 | margin: 0; 167 | line-height: 1.6; 168 | font-size: 13px; 169 | text-align: center; 170 | span { 171 | &:not(:first-child):before { 172 | content: "·"; 173 | padding: 0 .5em; 174 | } 175 | } 176 | a { 177 | border-bottom: 1px dotted rgba(255,255,255,.5); 178 | &:hover { 179 | border-bottom: 1px solid rgba(255,255,255,.7); 180 | } 181 | } 182 | } 183 | 184 | .top { 185 | padding: 16px; 186 | background: @primaryColor; 187 | } 188 | a { 189 | color: inherit; 190 | opacity: .8; 191 | 192 | &:hover { 193 | color: #fff; 194 | text-decoration: none 195 | } 196 | } 197 | .bottom { 198 | padding: 16px; 199 | } 200 | } 201 | 202 | a[title="站长统计"] { 203 | display: none; 204 | } 205 | 206 | @media screen and (max-width:1240px) { 207 | #menu-off { 208 | display: none; 209 | } 210 | 211 | #menu { 212 | z-index: 99; 213 | box-shadow: none; 214 | .transform(translateX(-100%)); 215 | 216 | &.show { 217 | .transform(translateX(0)); 218 | } 219 | } 220 | 221 | #main { 222 | padding-left: 0; 223 | } 224 | } 225 | 226 | 227 | @media screen and (max-width:1040px) { 228 | .container { 229 | width: 100%; 230 | padding: 20px 16px; 231 | } 232 | } 233 | 234 | @media screen and (max-width:760px) { 235 | #main { 236 | width: 100%; 237 | overflow-x: hidden; 238 | } 239 | 240 | #menu { 241 | .brand { 242 | padding-top: 20px; 243 | padding-bottom: 1em; 244 | } 245 | 246 | .nav { 247 | line-height: @mNavH; 248 | 249 | a { 250 | height: @mNavH; 251 | line-height: @mNavH; 252 | } 253 | } 254 | } 255 | 256 | ::-webkit-scrollbar { 257 | display: none; 258 | } 259 | } 260 | 261 | -------------------------------------------------------------------------------- /source/css/_partial/lightbox.less: -------------------------------------------------------------------------------- 1 | .img-lightbox { 2 | text-align: center; 3 | &.ready { 4 | position: relative; 5 | top: 0; 6 | left: 0; 7 | img { 8 | position: absolute; 9 | z-index: 890; 10 | &.zoom-in { 11 | .transition(.3s); 12 | } 13 | } 14 | .overlay { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | right: 0; 19 | bottom: 0; 20 | z-index: 888; 21 | background: #2f2d2d; 22 | opacity: 0; 23 | will-change: opacity; 24 | .transition(.3s); 25 | } 26 | 27 | .overlay-title { 28 | position: fixed; 29 | left: 0; 30 | right: 0; 31 | bottom: 0; 32 | z-index: 900; 33 | height: 40px; 34 | line-height: 40px; 35 | color: #fff; 36 | opacity: 0; 37 | .transform(translate3d(0, 30px, 0)); 38 | .transition(.3s); 39 | } 40 | } 41 | 42 | &.active { 43 | img { 44 | cursor: -webkit-zoom-out; 45 | cursor: zoom-out; 46 | } 47 | .overlay, 48 | .overlay-title { 49 | opacity: 1 50 | } 51 | .overlay-title { 52 | .transform(translate3d(0, 0, 0)); 53 | } 54 | } 55 | 56 | img { 57 | display: inline; 58 | margin: 0; 59 | cursor: -webkit-zoom-in; 60 | cursor: zoom-in; 61 | 62 | &:hover { 63 | will-change: left, top, width, height; 64 | } 65 | } 66 | } 67 | 68 | -------------------------------------------------------------------------------- /source/css/_partial/loading.less: -------------------------------------------------------------------------------- 1 | #loading { 2 | position: fixed; 3 | top: 0; 4 | left: -100%; 5 | z-index: 70; 6 | width: 100%; 7 | height: 3px; 8 | background: @accentColor; 9 | &.active { 10 | -webkit-animation: loading-anim 1s ease-in-out infinite; 11 | animation: loading-anim 1s ease-in-out infinite; 12 | } 13 | } 14 | 15 | @-webkit-keyframes loading-anim { 16 | from {} 17 | to { 18 | .transform(translateX(200%)) 19 | } 20 | } 21 | @keyframes loading-anim { 22 | from {} 23 | to { 24 | .transform(translateX(200%)) 25 | } 26 | } 27 | 28 | .fade, 29 | .fade-scale { 30 | opacity: 0; 31 | 32 | &.in { 33 | opacity: 1; 34 | .transform(none); 35 | } 36 | } 37 | .fade { 38 | .transition(.4s); 39 | .transform(translateY(50px)); 40 | } 41 | .fade-scale { 42 | .transition(.6s); 43 | .transform(translate(10%, 20%) scale(.6)); 44 | } 45 | 46 | @media screen and (max-width:480px) { 47 | .fade, 48 | .fade-scale { 49 | opacity: 1; 50 | .transform(none); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /source/css/_partial/page.less: -------------------------------------------------------------------------------- 1 | .page-header { 2 | text-align: center 3 | } 4 | .page-article { 5 | .card { 6 | padding: 20px; 7 | .card(3px); 8 | > *:last-child { 9 | margin-bottom: 0; 10 | } 11 | > *:first-child { 12 | padding-top: 0; 13 | margin-top: 0; 14 | } 15 | } 16 | 17 | .card, 18 | .column, 19 | .timeline { 20 | margin-bottom: 20px; 21 | } 22 | } 23 | .page-content { 24 | margin-bottom: 30px; 25 | border-bottom: 2px solid @borderColor; 26 | 27 | > blockquote, 28 | > pre, 29 | img, 30 | > figure { 31 | .card(3px); 32 | } 33 | 34 | img { 35 | width: 100%; 36 | padding: 0; 37 | margin: 0; 38 | border: none; 39 | } 40 | 41 | figure, 42 | pre { 43 | margin-left: 0!important; 44 | margin-right: 0!important; 45 | // white-space: pre-line; 46 | } 47 | 48 | figure { 49 | padding: 20px!important; 50 | } 51 | 52 | > figure, 53 | > pre { 54 | box-shadow: @boxShadow 55 | } 56 | 57 | h1, 58 | h2, 59 | h3, 60 | h4, 61 | h5 { 62 | text-align: center 63 | } 64 | 65 | .headerlink { 66 | display: none; 67 | } 68 | 69 | .column-2, 70 | .column-3 { 71 | .flex-row; 72 | .flex-row-wrap; 73 | .flex-justify-between; 74 | 75 | // > * { 76 | // .flex-col; 77 | // } 78 | } 79 | 80 | .column-2 { 81 | > * { 82 | width: 48%; 83 | } 84 | } 85 | 86 | .column-3 { 87 | > * { 88 | width: 31%; 89 | } 90 | } 91 | 92 | .timeline { 93 | position: relative; 94 | text-align: center; 95 | 96 | &:before { 97 | content: ''; 98 | position: absolute; 99 | top: 0; 100 | left: 50%; 101 | z-index: 1; 102 | width: 4px; 103 | height: 100%; 104 | margin-left: -2px; 105 | background: @borderColor; 106 | } 107 | 108 | h5 { 109 | position: relative; 110 | z-index: 2; 111 | display: inline-block; 112 | margin-bottom: 15px; 113 | padding: .5em 2em; 114 | color: #fff; 115 | background: @primaryColor; 116 | border-radius: 3px; 117 | box-shadow: @boxShadow; 118 | } 119 | 120 | .item { 121 | position: relative; 122 | z-index: 2; 123 | margin-bottom: 30px; 124 | padding: 15px 0; 125 | text-align: left; 126 | > p { 127 | display: inline-block; 128 | width: 45%; 129 | margin: 0; 130 | padding: 10px 15px; 131 | text-align: center; 132 | .card(3px) 133 | } 134 | 135 | > h6 { 136 | position: absolute; 137 | top: 50%; 138 | padding: 3px 8px; 139 | color: #fff; 140 | background: @accentColor; 141 | border-radius: 3px; 142 | .transform(translateY(-50%)) 143 | } 144 | 145 | &:nth-child(odd) { 146 | text-align: right; 147 | > h6 { 148 | right: 50%; 149 | margin-right: 30px; 150 | } 151 | } 152 | 153 | &:nth-child(even) { 154 | > h6 { 155 | left: 50%; 156 | margin-left: 30px; 157 | } 158 | } 159 | 160 | &:after { 161 | content: ''; 162 | position: absolute; 163 | top: 50%; 164 | left: 50%; 165 | border: 4px solid @accentColor; 166 | outline: 2px solid @backColor; 167 | border-radius: 50%; 168 | .transform(translate(-50%, -50%)); 169 | } 170 | 171 | } 172 | } 173 | } 174 | 175 | .page-about-me { 176 | position: relative; 177 | padding: 30px 35px!important; 178 | 179 | .avatar { 180 | margin-right: 35px; 181 | width: 100px; 182 | height: 100px; 183 | box-shadow: @boxShadow; 184 | 185 | img { 186 | border-radius: 50%; 187 | } 188 | } 189 | .content { 190 | color: #444; 191 | p { 192 | margin-top: 0; 193 | } 194 | } 195 | } 196 | 197 | @media screen and(max-width: 480px) { 198 | .page-content { 199 | margin-left: -16px; 200 | margin-right: -16px; 201 | .column { 202 | display: block; 203 | } 204 | } 205 | .page-about-me { 206 | padding: 15px 20px!important; 207 | .avatar { 208 | margin-right: 20px; 209 | width: 60px; 210 | height: 60px; 211 | } 212 | } 213 | } 214 | 215 | .page-modal { 216 | display: none; 217 | position: fixed; 218 | top: 24%; 219 | left: 50%; 220 | z-index: 120; 221 | padding: 30px; 222 | text-align: center; 223 | color: @secondaryTextColor; 224 | background: #fff; 225 | border-radius: 4px; 226 | box-shadow: @boxShadow; 227 | opacity: 0; 228 | .transform(translate(-50%, -200%)); 229 | 230 | &.ready { 231 | visibility: hidden; 232 | display: block; 233 | .transform(translate(-50%, -100%)); 234 | .transition(.3s); 235 | } 236 | 237 | &.in { 238 | visibility: visible; 239 | opacity: 1; 240 | .transform(translate(-50%, 0)); 241 | } 242 | 243 | .close { 244 | position: absolute; 245 | right: 15px; 246 | top: 15px; 247 | color: rgba(0, 0, 0, .2); 248 | font-size: 16px; 249 | line-height: 20px; 250 | &:hover, &:active { 251 | color: rgba(0, 0, 0, .4); 252 | } 253 | } 254 | } 255 | -------------------------------------------------------------------------------- /source/css/_partial/postlist.less: -------------------------------------------------------------------------------- 1 | .post-list { 2 | padding: 0; 3 | margin: 0 -12px; 4 | list-style: none; 5 | } 6 | 7 | .post-list-item { 8 | padding: 0 12px; 9 | margin-bottom: 30px; 10 | } 11 | 12 | .post-title { 13 | margin: 0 0 16px; 14 | } 15 | 16 | 17 | .post-title-link { 18 | color: @primaryColor; 19 | .hoverLine(@primaryColor); 20 | } 21 | 22 | .post-meta { 23 | margin: 0 0 10px; 24 | line-height: 14px; 25 | font-size: 13px; 26 | font-weight: bold; 27 | color: @secondaryTextColor; 28 | overflow: hidden; 29 | >*:not(:first-child) { 30 | &:before { 31 | content: "·"; 32 | padding: 0 .5em; 33 | } 34 | } 35 | } 36 | 37 | .article-category-list { 38 | position: relative; 39 | display: inline; 40 | list-style: none; 41 | padding: 0; 42 | * { 43 | display: inline; 44 | } 45 | ul { 46 | padding-left: 0 47 | } 48 | } 49 | .article-category-list-child { 50 | &:before { 51 | content: "›"; 52 | padding: 0 .3em; 53 | font-size: 120%; 54 | } 55 | } 56 | 57 | .article-category-list-link { 58 | color: @accentColor; 59 | &:hover { 60 | color: @accentColor; 61 | } 62 | } 63 | 64 | .article-tag-list { 65 | overflow: hidden; 66 | margin: 0; 67 | padding: 0; 68 | font-size: 13px; 69 | } 70 | .article-tag-list-item { 71 | display: inline-block; 72 | margin: 0 8px 8px 0; 73 | border-radius: 2px; 74 | &:nth-child(n+1) { 75 | background: @tag-color-1 76 | } 77 | &:nth-child(n+2) { 78 | background: @tag-color-2 79 | } 80 | &:nth-child(n+3) { 81 | background: @tag-color-3 82 | } 83 | &:nth-child(n+4) { 84 | background: @tag-color-4 85 | } 86 | &:nth-child(n+5) { 87 | background: @tag-color-5 88 | } 89 | &:nth-child(n+6) { 90 | background: @tag-color-6 91 | } 92 | } 93 | 94 | 95 | .article-tag-list-link { 96 | display: block; 97 | padding: 0 16px; 98 | line-height: 28px; 99 | color: rgba(255, 255, 255, .8); 100 | .transition(.2s); 101 | &:hover { 102 | color: #fff; 103 | box-shadow: 0 4px 8px rgba(0, 0, 0, .26); 104 | } 105 | } 106 | 107 | .post-more { 108 | display: inline-block; 109 | padding: 0 6px; 110 | font-weight: 500; 111 | color: @primaryColor!important; 112 | border: none!important; 113 | border-radius: 3px; 114 | 115 | &:hover, 116 | &:active { 117 | background: lighten(@lightPrimaryColor, 10%); 118 | } 119 | } 120 | 121 | #page-nav { 122 | margin: 30px 0 0; 123 | text-align: center; 124 | 125 | .inner { 126 | display: inline-block; 127 | } 128 | 129 | a, 130 | span { 131 | display: inline-block; 132 | line-height: 34px; 133 | padding: 0 1em; 134 | margin: 0 2px; 135 | font-size: 14px; 136 | color: @secondaryTextColor; 137 | border-radius: 3px; 138 | overflow: hidden; 139 | .transition(.4s); 140 | } 141 | 142 | a { 143 | &:hover, 144 | &:active { 145 | color: @primaryColor; 146 | background: @borderColor; 147 | } 148 | } 149 | 150 | .current { 151 | color: #fff; 152 | background: @primaryColor; 153 | } 154 | } 155 | 156 | @media screen and (max-width:760px) { 157 | .post-title { 158 | font-size: 20px; 159 | line-height: 24px; 160 | } 161 | .post-more { 162 | height: 28px; 163 | line-height: 28px; 164 | font-size: 13px; 165 | } 166 | .post-list { 167 | margin: 0 -16px 168 | } 169 | .post-list-item { 170 | padding: 0; 171 | margin-bottom: 16px; 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /source/css/_partial/reward.less: -------------------------------------------------------------------------------- 1 | 2 | .page-reward { 3 | margin: 60px 0; 4 | text-align: center; 5 | } 6 | .page-reward-btn { 7 | width: 56px; 8 | height: 56px; 9 | line-height: 56px; 10 | font-size: 20px; 11 | color: #fff; 12 | background: #f44336; 13 | .boxShadow(); 14 | &:hover, 15 | &:active { 16 | color: #fff; 17 | text-decoration: none; 18 | } 19 | } 20 | 21 | .reward-title { 22 | position: relative; 23 | padding: 10px 30px; 24 | 25 | .icon-quote-left, 26 | .icon-quote-right { 27 | position: absolute; 28 | font-size: 80%; 29 | color: #999; 30 | } 31 | .icon-quote-left { 32 | top: 0; 33 | left: 0; 34 | } 35 | .icon-quote-right { 36 | bottom: 0; 37 | right: 0; 38 | } 39 | } 40 | .reward-lay { 41 | max-width: 100%; 42 | width: 360px; 43 | } 44 | .reward-content { 45 | margin: 20px 0; 46 | } 47 | .reward-code { 48 | width: 200px; 49 | margin: 0 auto; 50 | } 51 | 52 | .reward-toggle { 53 | position: relative; 54 | display: block; 55 | width: 120px; 56 | overflow: hidden; 57 | margin: 40px auto 0; 58 | border-radius: 3px; 59 | cursor: pointer; 60 | .boxShadow(); 61 | 62 | &-check { 63 | position: absolute; 64 | visibility: hidden; 65 | &:checked { 66 | +.reward-toggle-ctrol { 67 | .transform(translate3d(-60px, 0, 0)) 68 | } 69 | } 70 | } 71 | 72 | &-ctrol { 73 | display: flex; 74 | width: 180px; 75 | height: 30px; 76 | line-height: 30px; 77 | background: #eee; 78 | border-radius: 3px; 79 | overflow: hidden; 80 | user-select: none; 81 | .transition(.1s) 82 | } 83 | 84 | &-item, 85 | &-label { 86 | flex: 0 0 auto; 87 | width: 60px; 88 | height: 100%; 89 | } 90 | 91 | &-item { 92 | position: relative; 93 | z-index: 2; 94 | height: 100%; 95 | text-align: center; 96 | color: #fff; 97 | font-size: 12px; 98 | box-shadow: inset 0 0 15px rgba(0, 0, 0, .3) 99 | } 100 | .alipay { 101 | background: #1e88e5; 102 | } 103 | .wechat { 104 | background: #4caf50; 105 | } 106 | } 107 | 108 | @media screen and (max-width:760px) { 109 | .reward-title { 110 | font-size: 18px; 111 | } 112 | } 113 | 114 | @media screen and (max-width: 480px) { 115 | .reward-lay { 116 | border-radius: 0 117 | } 118 | .reward-content { 119 | margin: 0; 120 | } 121 | .reward-toggle { 122 | margin: 20px auto 0 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /source/css/_partial/roboto.less: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Roboto"; 3 | src: local('Roboto Thin'), local('Roboto-Thin'), url("@{font-roboto}/Roboto-Thin.woff2") format("woff2"), 4 | url("@{font-roboto}/Roboto-Thin.woff") format("woff"), 5 | url("@{font-roboto}/Roboto-Thin.ttf") format("truetype"); 6 | 7 | font-weight: 200; 8 | } 9 | @font-face { 10 | font-family: "Roboto"; 11 | src: local('Roboto Light'), local('Roboto-Light'), url("@{font-roboto}/Roboto-Light.woff2") format("woff2"), 12 | url("@{font-roboto}/Roboto-Light.woff") format("woff"), 13 | url("@{font-roboto}/Roboto-Light.ttf") format("truetype"); 14 | font-weight: 300; 15 | } 16 | 17 | @font-face { 18 | font-family: "Roboto"; 19 | src: local('Roboto Regular'), local('Roboto-Regular'), url("@{font-roboto}/Roboto-Regular.woff2") format("woff2"), 20 | url("@{font-roboto}/Roboto-Regular.woff") format("woff"), 21 | url("@{font-roboto}/Roboto-Regular.ttf") format("truetype"); 22 | font-weight: 400; 23 | } 24 | 25 | @font-face { 26 | font-family: "Roboto"; 27 | src: local('Roboto Medium'), local('Roboto-Medium'), url("@{font-roboto}/Roboto-Medium.woff2") format("woff2"), 28 | url("@{font-roboto}/Roboto-Medium.woff") format("woff"), 29 | url("@{font-roboto}/Roboto-Medium.ttf") format("truetype"); 30 | font-weight: 500; 31 | } 32 | 33 | @font-face { 34 | font-family: "Roboto"; 35 | src: local('Roboto Bold'), local('Roboto-Bold'), url("@{font-roboto}/Roboto-Bold.woff2") format("woff2"), 36 | url("@{font-roboto}/Roboto-Bold.woff") format("woff"), 37 | url("@{font-roboto}/Roboto-Bold.ttf") format("truetype"); 38 | font-weight: 700; 39 | } 40 | -------------------------------------------------------------------------------- /source/css/_partial/search.less: -------------------------------------------------------------------------------- 1 | .search-wrap { 2 | position: relative; 3 | min-width: 56px; 4 | 5 | &.in { 6 | 7 | .search-input { 8 | width: 320px; 9 | opacity: 1; 10 | } 11 | 12 | #search { 13 | color: @lightPrimaryColor 14 | } 15 | } 16 | 17 | .search-input { 18 | position: relative; 19 | z-index: 2; 20 | width: 0; 21 | height: 36px; 22 | margin: 10px 10px 0 0; 23 | border: none; 24 | background: transparent; 25 | color: #fff; 26 | border-bottom: 2px solid #fff; 27 | border-radius: 0; // fix ios 28 | opacity: 0; 29 | .transition(.2s); 30 | 31 | &::-webkit-input-placeholder { 32 | color: @lightPrimaryColor 33 | } 34 | } 35 | 36 | .header-icon { 37 | position: absolute; 38 | top: 0; 39 | z-index: 3; 40 | } 41 | #search { 42 | right: 0; 43 | } 44 | 45 | #back { 46 | display: none; 47 | left: 0 48 | } 49 | 50 | } 51 | 52 | .search-panel { 53 | position: fixed; 54 | top: 50px; 55 | right: 65px; 56 | z-index: 36; 57 | width: 400px; 58 | max-height: 70%; 59 | overflow-y: auto; 60 | background: #fff; 61 | border-radius: 2px; 62 | box-shadow: @boxShadow; 63 | opacity: 0; 64 | visibility: hidden; 65 | .transform(translateY(-50%) scale(.5)); 66 | .transition(.3s, ease-in); 67 | 68 | &.in { 69 | opacity: 1; 70 | visibility: visible; 71 | .transform(none); 72 | } 73 | } 74 | 75 | .search-result { 76 | margin: 0; 77 | padding: 0; 78 | .item { 79 | line-height: 1.6em; 80 | border-top: 1px solid @borderColor; 81 | &:first-child { 82 | border-top: none; 83 | } 84 | a { 85 | padding: 10px 20px; 86 | } 87 | } 88 | .title { 89 | color: @primaryColor; 90 | &:hover { 91 | color: @lightPrimaryColor 92 | } 93 | } 94 | 95 | .tags span, .time { 96 | font-size: 13px; 97 | color: @secondaryTextColor; 98 | } 99 | 100 | .tags { 101 | margin-right: 1em; 102 | span { 103 | margin-right: .5em; 104 | } 105 | } 106 | 107 | .time { 108 | padding-left: 1em; 109 | } 110 | 111 | .tips { 112 | padding: 30px 0; 113 | text-align: center; 114 | color: @secondaryTextColor; 115 | } 116 | } 117 | 118 | .lock-size { 119 | position: absolute; 120 | width: 100%; 121 | height: 100%; 122 | max-height: 100%; 123 | overflow: hidden; 124 | } 125 | 126 | 127 | @media screen and (max-width:760px) { 128 | 129 | .search-wrap { 130 | 131 | &.in { 132 | position: absolute; 133 | top: 0; 134 | right: 0; 135 | z-index: 10; 136 | width: 100%; 137 | padding: 0 16px 0 56px; 138 | background: @primaryColor; 139 | 140 | .search-input { 141 | width: 100%; 142 | } 143 | 144 | #back { 145 | display: block; 146 | } 147 | 148 | } 149 | } 150 | 151 | .search-panel { 152 | z-index: 28; 153 | top: 56px; 154 | right: 0; 155 | width: 100%; 156 | height: ~'calc(100vh - 56px)'; 157 | max-height: ~'calc(100vh - 56px)'; 158 | border-radius: 0; 159 | box-shadow: none; 160 | } 161 | 162 | } 163 | -------------------------------------------------------------------------------- /source/css/_partial/share.less: -------------------------------------------------------------------------------- 1 | @color-weibo: #E6162D; 2 | @color-qq: #3D95D5; 3 | @color-weixin: #2BAD13; 4 | @color-facebook: #4862A3; 5 | @color-twitter: #55ACEE; 6 | @color-google-plus: #db4437; 7 | 8 | .share-icons { 9 | li { 10 | display: inline-block; 11 | } 12 | 13 | .icon-square:before { 14 | display: inline-block; 15 | text-align: center; 16 | color: rgba(0,0,0,0); 17 | border-radius: .2em; 18 | } 19 | 20 | a { 21 | display: inline-block; 22 | border-radius: .2em; 23 | color: #fff; 24 | text-align: center; 25 | &.weibo { 26 | background: @color-weibo 27 | } 28 | 29 | &.qq { 30 | background: @color-qq 31 | } 32 | 33 | &.weixin { 34 | background: @color-weixin 35 | } 36 | 37 | &.facebook { 38 | background: @color-facebook 39 | } 40 | 41 | &.twitter { 42 | background: @color-twitter 43 | } 44 | 45 | &.google { 46 | background: @color-google-plus 47 | } 48 | 49 | } 50 | 51 | } 52 | 53 | .global-share { 54 | position: fixed; 55 | top: 56px; 56 | right: 56px; 57 | z-index: 96; 58 | width: 260px; 59 | padding: 16px 6px; 60 | background: #fff; 61 | border-radius: 3px; 62 | visibility: hidden; 63 | .boxShadow(.3s); 64 | .transform(scale(0)); 65 | transform-origin: top right; 66 | -webkit-transform-origin: top right; 67 | 68 | &.in { 69 | visibility: visible; 70 | .transform(none); 71 | } 72 | 73 | .share-icons { 74 | margin: 0 auto; 75 | } 76 | 77 | li { 78 | width: 80px; 79 | text-align: center; 80 | } 81 | 82 | a { 83 | position: relative; 84 | width: 40px; 85 | height: 40px; 86 | line-height: 40px; 87 | margin-bottom: 20px; 88 | font-size: 1.33333333em; 89 | &:after { 90 | position: absolute; 91 | bottom: -22px; 92 | left: 50%; 93 | content: attr(data-title); 94 | white-space: nowrap; 95 | line-height: 20px; 96 | font-size: 12px; 97 | color: @primaryColor; 98 | .transform(translateX(-50%)); 99 | } 100 | 101 | } 102 | 103 | } 104 | 105 | @share-fab-size: 42px; 106 | @share-icon-size: @share-fab-size - 8px; 107 | 108 | .page-share-fab { 109 | display: block; 110 | width: @share-fab-size; 111 | height: @share-fab-size; 112 | line-height: @share-fab-size; 113 | color: @primaryColor; 114 | background: lighten( @lightPrimaryColor, 10%); 115 | .boxShadow(); 116 | } 117 | 118 | .page-share-wrap { 119 | position: absolute; 120 | right: 35px; 121 | top: @share-fab-size / -2; 122 | z-index: 2; 123 | .page-share { 124 | visibility: hidden 125 | } 126 | } 127 | 128 | .page-share { 129 | position: absolute; 130 | bottom: @share-fab-size + 6px; 131 | right: 4px; 132 | text-align: center; 133 | width: @share-icon-size; 134 | 135 | &.in { 136 | visibility: visible; 137 | .share-icons a { 138 | opacity: 1; 139 | .transform(scale(1)); 140 | } 141 | } 142 | 143 | .share-icons { 144 | a { 145 | width: @share-icon-size; 146 | height: @share-icon-size; 147 | line-height: @share-icon-size; 148 | font-size: 1.33333em; 149 | border-radius: 50%; 150 | .tip-left(); 151 | .boxShadow(.3s); 152 | opacity: 0; 153 | .transform(scale(0)); 154 | -webkit-transform-origin: center bottom; 155 | transform-origin: center bottom; 156 | 157 | &:before { 158 | content: '分享到'attr(data-title) 159 | } 160 | 161 | } 162 | 163 | li { 164 | margin-bottom: 10px; 165 | } 166 | 167 | } 168 | } 169 | 170 | .wx-share { 171 | p { 172 | margin: 0 0 15px; 173 | } 174 | 175 | img { 176 | width: 200px; 177 | } 178 | } 179 | -------------------------------------------------------------------------------- /source/css/_partial/tags.less: -------------------------------------------------------------------------------- 1 | .tabs-bar { 2 | position: relative; 3 | padding: 0; 4 | margin-top: 14px; 5 | overflow: hidden; 6 | background: @primaryColor; 7 | 8 | &.expand { 9 | overflow: visible; 10 | text-shadow: none; 11 | .tags-list { 12 | position: absolute; 13 | top: 0; 14 | left: 0; 15 | display: block; 16 | padding: 16px; 17 | white-space: normal; 18 | background: #fff; 19 | border-radius: 4px; 20 | box-shadow: @boxShadow; 21 | } 22 | 23 | .tags-list .tags-list-item { 24 | padding: 6px 1em; 25 | margin-bottom: 6px; 26 | color: @secondaryTextColor; 27 | &:hover { 28 | opacity: .7; 29 | text-decoration: underline; 30 | } 31 | &:after { 32 | display: none; 33 | } 34 | &.active { 35 | color: #fff; 36 | background: @accentColor; 37 | border-radius: .2em 38 | } 39 | } 40 | } 41 | } 42 | .tags-list { 43 | position: relative; 44 | z-index: 1; 45 | width: 100%; 46 | overflow-x: hidden; 47 | overflow-y: hidden; 48 | margin: 0 auto; 49 | list-style: none; 50 | padding: 0; 51 | white-space: nowrap; 52 | .transition(.2s); 53 | 54 | .flex-row; 55 | } 56 | 57 | .tags-list-item { 58 | position: relative; 59 | -webkit-box-flex: none; 60 | -webkit-flex: none; 61 | -ms-flex: none; 62 | flex: none; 63 | padding: 12px 1em; 64 | line-height: 20px; 65 | color: rgba(255, 255, 255, 0.8); 66 | border-radius: .2em .2em 0 0; 67 | &:after { 68 | content: ''; 69 | position: absolute; 70 | bottom: 0; 71 | left: 0; 72 | width: 100%; 73 | height: 3px; 74 | } 75 | &.active { 76 | color: #fff; 77 | &:after { 78 | background: @accentColor 79 | } 80 | } 81 | &:hover, 82 | &:active { 83 | color: #fff; 84 | text-decoration: none; 85 | } 86 | } 87 | 88 | .tags-list-more { 89 | position: absolute; 90 | right: 0; 91 | bottom: 0; 92 | z-index: 2; 93 | height: 44px; 94 | padding-left: 1em; 95 | background: @primaryColor!important; 96 | 97 | .action { 98 | width: 44px; 99 | height: 44px; 100 | line-height: 20px; 101 | border-radius: 50%; 102 | .transition(.2s); 103 | } 104 | } 105 | 106 | @media screen and (max-width:760px) { 107 | .tabs-bar { 108 | margin-left: -16px; 109 | margin-right: -16px; 110 | padding: 0 0 0 16px; 111 | width: auto; 112 | } 113 | 114 | .tags-list { 115 | overflow-x: auto; 116 | &::-webkit-scrollbar { 117 | display: none 118 | } 119 | } 120 | 121 | .tags-list-more { 122 | display: none; 123 | } 124 | } -------------------------------------------------------------------------------- /source/css/_partial/variable.less: -------------------------------------------------------------------------------- 1 | // font 2 | @font-roboto: "fonts/roboto"; 3 | @font: Roboto, "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; 4 | @font-code: Consolas, Monaco, courier, monospace; 5 | @font-en: "MV Boli", Roboto, serif; 6 | // font-size 7 | @font-size: 15px; 8 | // Palette generated by Material Palette - materialpalette.com/indigo/pink 9 | @darkPrimaryColor: #303f9f; 10 | @primaryColor: #3f51b5; 11 | @lightPrimaryColor: #c5cae9; 12 | @textPrimaryColor: #fff; 13 | @accentColor: #ff4081; 14 | @primaryTextColor: #212121; 15 | @secondaryTextColor: #727272; 16 | @dividerColor: #b6b6b6; 17 | @borderColor: #dadada; 18 | @backColor: #f6f6f6; 19 | @codeBg: #f5f5f5; 20 | // tags color 21 | @tag-color-1: #8bc34a; 22 | @tag-color-2: #673ab7; 23 | @tag-color-3: #ff9800; 24 | @tag-color-4: #f44336; 25 | @tag-color-5: #00abc0; 26 | @tag-color-6: #2196f3; 27 | //layout 28 | @contentWidth: 960px; 29 | @menuWidth: 240px; 30 | @menuPadding: 20px; 31 | @headerH: 56px; 32 | @navH: 44px; 33 | @mNavH: 36px; 34 | @boxShadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); 35 | 36 | .transition(@s, @dur: ease-in-out) { 37 | -webkit-transition: @s @dur; 38 | transition: @s @dur; 39 | } 40 | 41 | .transform(@prop) { 42 | -webkit-transform: @prop; 43 | transform: @prop; 44 | } 45 | 46 | .boxShadow(@s:.4s) { 47 | box-shadow: @boxShadow; 48 | .transition(@s); 49 | 50 | &:hover, 51 | &:active { 52 | box-shadow: 0 6px 12px rgba(0, 0, 0, .2), 0 4px 15px rgba(0, 0, 0, .2); 53 | } 54 | } 55 | 56 | .hoverLine(@color) { 57 | position: relative; 58 | display: inline-block; 59 | 60 | &::after { 61 | content: ""; 62 | position: absolute; 63 | width: 100%; 64 | height: 2px; 65 | bottom: 0; 66 | left: 0; 67 | background-color: @color; 68 | visibility: hidden; 69 | .transform(scaleX(0)); 70 | .transition(.4s); 71 | } 72 | 73 | &:hover { 74 | text-decoration: none; 75 | } 76 | 77 | &:hover::after, 78 | &:active::after { 79 | visibility: visible; 80 | .transform(scaleX(1)); 81 | } 82 | } 83 | 84 | .tip() { 85 | position: relative; 86 | 87 | &:before, 88 | &:after { 89 | position: absolute; 90 | visibility: hidden; 91 | opacity: 0; 92 | pointer-events: none; 93 | .transition(.3s); 94 | } 95 | 96 | &:before { 97 | content: attr(data-title); 98 | font-size: 12px; 99 | color: #fff; 100 | white-space: nowrap; 101 | line-height: 24px; 102 | padding: 0 5px; 103 | border-radius: 3px; 104 | background: rgba(0, 0, 0, .8); 105 | } 106 | 107 | &:after { 108 | content: ""; 109 | border: 6px solid transparent; 110 | } 111 | 112 | &:hover { 113 | &:before, 114 | &:after { 115 | visibility: visible; 116 | opacity: 1; 117 | } 118 | } 119 | } 120 | 121 | .tip-top() { 122 | .tip(); 123 | 124 | &:before, 125 | &:after { 126 | top: -10px; 127 | right: 50%; 128 | } 129 | 130 | &:before { 131 | .transform(translate(50%, -100%)); 132 | } 133 | 134 | &:after { 135 | border-top-color: rgba(0, 0, 0, .8); 136 | .transform(translateX(50%)); 137 | } 138 | } 139 | .tip-left() { 140 | .tip(); 141 | 142 | &:before, 143 | &:after { 144 | top: 50%; 145 | .transform(translate(-100%, -50%)); 146 | } 147 | 148 | &:before { 149 | left: -15px; 150 | } 151 | 152 | &:after { 153 | left: -3px; 154 | border-left-color: rgba(0, 0, 0, .8); 155 | } 156 | } 157 | 158 | .card(@radius: 3px) { 159 | background: #fff; 160 | border-radius: @radius; 161 | box-shadow: 0 1px 2px rgba(151, 151, 151, .58); 162 | } 163 | -------------------------------------------------------------------------------- /source/css/_partial/waves.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Waves v0.7.4 3 | * http://fian.my.id/Waves 4 | * 5 | * Copyright 2014 Alfiana E. Sibuea and other contributors 6 | * Released under the MIT license 7 | * https://github.com/fians/Waves/blob/master/LICENSE 8 | */ 9 | 10 | .waves-transition (@transition) { 11 | -webkit-transition: @transition; 12 | transition: @transition; 13 | } 14 | 15 | .waves-transform(@string) { 16 | -webkit-transform: @string; 17 | transform: @string; 18 | } 19 | 20 | .waves-box-shadow(@shadow) { 21 | box-shadow: @shadow; 22 | } 23 | 24 | .waves-effect { 25 | position: relative; 26 | cursor: pointer; 27 | display: inline-block; 28 | overflow: hidden; 29 | -webkit-user-select: none; 30 | -moz-user-select: none; 31 | -ms-user-select: none; 32 | user-select: none; 33 | -webkit-tap-highlight-color: transparent; 34 | 35 | .waves-ripple { 36 | position: absolute; 37 | border-radius: 50%; 38 | width: 100px; 39 | height: 100px; 40 | margin-top:-50px; 41 | margin-left:-50px; 42 | opacity: 0; 43 | background: rgba(0,0,0,0.2); 44 | @gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%; 45 | background: -webkit-radial-gradient(@gradient); 46 | background: radial-gradient(@gradient); 47 | .waves-transition(all 0.5s ease-out); 48 | -webkit-transition-property: -webkit-transform, opacity; 49 | transition-property: transform, opacity; 50 | .waves-transform(scale(0) translate(0,0)); 51 | pointer-events: none; 52 | } 53 | 54 | &.waves-light .waves-ripple { 55 | background: rgba(255,255,255,0.4); 56 | @gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%; 57 | background: -webkit-radial-gradient(@gradient); 58 | background: radial-gradient(@gradient); 59 | } 60 | 61 | &.waves-classic .waves-ripple { 62 | background: rgba(0,0,0,0.2); 63 | } 64 | 65 | &.waves-classic.waves-light .waves-ripple { 66 | background: rgba(255,255,255,0.4); 67 | } 68 | } 69 | 70 | .waves-notransition { 71 | .waves-transition(none ~'!important'); 72 | } 73 | 74 | .waves-button, 75 | .waves-circle { 76 | .waves-transform(translateZ(0)); 77 | } 78 | 79 | .waves-button, 80 | .waves-button:hover, 81 | .waves-button:visited, 82 | .waves-button-input { 83 | white-space: nowrap; 84 | vertical-align: middle; 85 | cursor: pointer; 86 | border: none; 87 | outline: none; 88 | background-color: rgba(0, 0, 0, 0); 89 | font-size: 1em; 90 | text-align: center; 91 | text-decoration: none; 92 | z-index: 1; 93 | } 94 | 95 | .waves-button { 96 | padding: 0.85em 1.1em; 97 | border-radius: 0.2em; 98 | } 99 | 100 | .waves-button-input { 101 | margin: 0; 102 | padding: 0.85em 1.1em; 103 | } 104 | 105 | .waves-input-wrapper { 106 | border-radius: 0.2em; 107 | vertical-align: bottom; 108 | 109 | &.waves-button { 110 | padding: 0; 111 | } 112 | 113 | .waves-button-input { 114 | position: relative; 115 | top: 0; 116 | left: 0; 117 | z-index: 1; 118 | } 119 | } 120 | 121 | .waves-circle { 122 | text-align: center; 123 | width: 2.5em; 124 | height: 2.5em; 125 | line-height: 2.5em; 126 | border-radius: 50%; 127 | } 128 | 129 | .waves-float { 130 | -webkit-mask-image: none; 131 | .waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12)); 132 | .waves-transition(all 300ms); 133 | 134 | &:active { 135 | .waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30)); 136 | } 137 | } 138 | 139 | .waves-block { 140 | display: block; 141 | } 142 | 143 | -------------------------------------------------------------------------------- /source/css/_plugin/valine.less: -------------------------------------------------------------------------------- 1 | #comments.vcomment { 2 | margin-top: 40px; 3 | padding: 30px; 4 | background: #fff; 5 | box-shadow: 0 0 4px rgba(0, 0, 0, .2); 6 | border-radius: 4px; 7 | 8 | .vheader { 9 | .vinput { 10 | &:focus { 11 | border-bottom: 1px solid @accentColor 12 | } 13 | } 14 | } 15 | 16 | .vsubmit { 17 | &:active, 18 | &:hover { 19 | color: #fff; 20 | background: @primaryColor; 21 | border-color: @primaryColor; 22 | box-shadow: 0 2px 8px rgba(0, 0, 0, .4) 23 | } 24 | } 25 | 26 | .vlist { 27 | .vsys { 28 | padding: .2rem .4rem; 29 | line-height: 1; 30 | color: #fff; 31 | 32 | &:nth-child(n+2) { 33 | background: @tag-color-1 34 | } 35 | &:nth-child(n+3) { 36 | background: @tag-color-3 37 | } 38 | &:nth-child(n+4) { 39 | background: @tag-color-4 40 | } 41 | &:nth-child(n+5) { 42 | background: @tag-color-5 43 | } 44 | &:nth-child(n+6) { 45 | background: @tag-color-6 46 | } 47 | } 48 | a, 49 | .vname { 50 | &:hover { 51 | color: @accentColor 52 | } 53 | } 54 | .vat { 55 | color: @accentColor 56 | } 57 | } 58 | 59 | .vcard { 60 | section { 61 | border-bottom: 1px solid @borderColor 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /source/css/fonts/fontawesome/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/fontawesome/FontAwesome.otf -------------------------------------------------------------------------------- /source/css/fonts/fontawesome/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/fontawesome/fontawesome-webfont.eot -------------------------------------------------------------------------------- /source/css/fonts/fontawesome/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/fontawesome/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /source/css/fonts/fontawesome/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/fontawesome/fontawesome-webfont.woff -------------------------------------------------------------------------------- /source/css/fonts/fontawesome/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/fontawesome/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Bold.eot -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Bold.woff -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Bold.woff2 -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Light.eot -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Light.woff -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Light.woff2 -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Medium.eot -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Medium.woff -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Medium.woff2 -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Regular.eot -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Regular.woff -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Thin.eot -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Thin.ttf -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Thin.woff -------------------------------------------------------------------------------- /source/css/fonts/roboto/Roboto-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/css/fonts/roboto/Roboto-Thin.woff2 -------------------------------------------------------------------------------- /source/css/style.less: -------------------------------------------------------------------------------- 1 | @import "_partial/variable"; 2 | @import "_partial/roboto"; 3 | @import "_partial/fontawesome"; 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | -webkit-box-sizing: border-box; 9 | box-sizing: border-box; 10 | } 11 | 12 | ::-webkit-scrollbar { 13 | -webkit-appearance: none; 14 | width: 8px; 15 | height: 8px; 16 | 17 | &-track { 18 | background-color: inherit; 19 | } 20 | &-thumb { 21 | background-color: @dividerColor; 22 | border: 1px solid #fff; 23 | border-radius: 10px; 24 | &:hover { 25 | background-color: darken(@dividerColor, 10%) 26 | } 27 | &:active { 28 | background-color: darken(@dividerColor, 20%) 29 | } 30 | } 31 | } 32 | 33 | ::selection { 34 | background: lighten(@lightPrimaryColor, 5%); 35 | } 36 | 37 | html { 38 | background-color: @backColor; 39 | color: @primaryTextColor; 40 | font-size: @font-size; 41 | line-height: 1.5; 42 | overflow-x: hidden; 43 | } 44 | 45 | body { 46 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 47 | -webkit-overflow-scrolling: touch; 48 | } 49 | 50 | html, 51 | body { 52 | position: relative; 53 | min-height: 100%; 54 | height: 100%; 55 | } 56 | 57 | .lock { 58 | overflow: hidden; 59 | max-height: 100%; 60 | } 61 | 62 | body, 63 | input, 64 | button, 65 | textarea, 66 | select, 67 | option { 68 | font: normal 1em @font; 69 | } 70 | 71 | body, 72 | h1, 73 | h2, 74 | h3, 75 | h4, 76 | h5, 77 | h6, 78 | p, 79 | figure, 80 | pre, 81 | dl, 82 | dd, 83 | blockquote, 84 | button, 85 | input { 86 | margin: 0; 87 | } 88 | 89 | input, 90 | legend, 91 | input, 92 | textarea, 93 | button { 94 | padding: 0; 95 | } 96 | 97 | form, 98 | fieldset, 99 | th, 100 | td { 101 | margin: 0; 102 | padding: 0; 103 | } 104 | 105 | ol, 106 | ul { 107 | margin: 12px 0; 108 | padding: 0 0 0 32px; 109 | 110 | &.reset { 111 | margin: 0; 112 | padding: 0; 113 | list-style: none; 114 | } 115 | } 116 | 117 | ol ol, 118 | ol ul, 119 | ul ol, 120 | ul ul { 121 | margin-top: 0; 122 | margin-bottom: 0; 123 | } 124 | 125 | p { 126 | margin: 12px 0; 127 | } 128 | 129 | small { 130 | font-size: 75%; 131 | line-height: 1; 132 | } 133 | 134 | main { 135 | display: block 136 | } 137 | template { 138 | display: none 139 | } 140 | 141 | img { 142 | max-width: 100%; 143 | border: none; 144 | } 145 | 146 | img, 147 | input, 148 | button, 149 | label { 150 | vertical-align: middle; 151 | } 152 | 153 | i { 154 | font-style: normal; 155 | } 156 | 157 | h1, 158 | h2, 159 | h3, 160 | h4, 161 | h5, 162 | h6 { 163 | font-weight: 400; 164 | } 165 | 166 | h1, 167 | .h1 { 168 | font-size: 44px; 169 | line-height: 48px; 170 | } 171 | 172 | h2, 173 | .h2 { 174 | font-size: 34px; 175 | line-height: 40px; 176 | } 177 | 178 | h3, 179 | .h3 { 180 | font-size: 24px; 181 | line-height: 32px; 182 | } 183 | 184 | h4, 185 | .h4 { 186 | font-size: 20px; 187 | line-height: 28px; 188 | } 189 | 190 | h5, 191 | .h5 { 192 | font-size: 16px; 193 | line-height: 24px; 194 | } 195 | 196 | h6, 197 | .h6 { 198 | font-size: 12px; 199 | line-height: 20px; 200 | } 201 | 202 | input[type="button"], 203 | input[type="submit"], 204 | input[type="search"], 205 | input[type="reset"] { 206 | cursor: pointer; 207 | -webkit-appearance: button; 208 | } 209 | 210 | input:focus, 211 | select:focus, 212 | button:focus, 213 | textarea:focus { 214 | outline: none; 215 | } 216 | 217 | textarea { 218 | resize: none; 219 | } 220 | 221 | a { 222 | background-color: transparent; 223 | background-image: none; 224 | color: @primaryColor; 225 | text-decoration: none; 226 | outline: 0; 227 | } 228 | 229 | a:hover { 230 | color: @darkPrimaryColor; 231 | text-decoration: underline; 232 | } 233 | 234 | hr, 235 | .hr { 236 | border: 0; 237 | border-top: 1px solid @borderColor; 238 | box-sizing: content-box; 239 | display: block; 240 | height: 0; 241 | margin-top: 24px; 242 | margin-bottom: 24px; 243 | } 244 | 245 | .fl { 246 | float: left; 247 | } 248 | 249 | .fr { 250 | float: right; 251 | } 252 | 253 | .tr { 254 | text-align: right; 255 | } 256 | 257 | .tc { 258 | text-align: center; 259 | } 260 | 261 | .clearfix:after { 262 | content: ""; 263 | display: table; 264 | clear: both; 265 | overflow: hidden; 266 | } 267 | 268 | .ellipsis { 269 | overflow: hidden; 270 | text-overflow: ellipsis; 271 | white-space: nowrap; 272 | } 273 | 274 | /* flex布局 */ 275 | .flex-row, 276 | .flex-column, 277 | .flex-row-vertical { 278 | display: -webkit-box; 279 | display: -webkit-flex; 280 | display: -ms-flexbox; 281 | display: flex; 282 | } 283 | .flex-column { 284 | -webkit-box-orient: horizontal; 285 | -webkit-box-direction: normal; 286 | -webkit-flex-direction: row; 287 | -ms-flex-direction: row; 288 | flex-direction: row; 289 | } 290 | .flex-row-vertical { 291 | -webkit-box-orient: vertical; 292 | -webkit-box-direction: normal; 293 | -webkit-flex-direction: column; 294 | -ms-flex-direction: column; 295 | flex-direction: column; 296 | } 297 | 298 | /* 多行布局 */ 299 | .flex-row-wrap, 300 | .flex-column { 301 | -webkit-flex-wrap: wrap; 302 | -ms-flex-wrap: wrap; 303 | flex-wrap: wrap; 304 | } 305 | 306 | /* 子元素反向排列 */ 307 | .flex-row-reverse { 308 | -webkit-box-orient: horizontal; 309 | -webkit-box-direction: reverse; 310 | -webkit-flex-direction: row-reverse; 311 | -ms-flex-direction: row-reverse; 312 | flex-direction: row-reverse; 313 | } 314 | 315 | /* 子元素默认平均分布 */ 316 | .flex-row >* { 317 | display: block; 318 | } 319 | 320 | .flex-col { 321 | -webkit-box-flex: 1; 322 | -webkit-flex: 1; 323 | -ms-flex: 1; 324 | flex: 1; 325 | } 326 | 327 | /* 垂直居中 */ 328 | .flex-middle { 329 | -webkit-box-align: center; 330 | -webkit-align-items: center; 331 | -ms-flex-align: center; 332 | align-items: center; 333 | } 334 | 335 | /* 底部对齐 */ 336 | .flex-bottom { 337 | -webkit-box-align: end; 338 | -webkit-align-items: flex-end; 339 | -ms-flex-align: end; 340 | align-items: flex-end; 341 | } 342 | 343 | /* 沿主轴方向排列方式 */ 344 | .flex-justify-start { 345 | -webkit-box-pack: start; 346 | -webkit-justify-content: flex-start; 347 | -ms-flex-pack: start; 348 | justify-content: flex-start; 349 | } 350 | 351 | .flex-justify-end { 352 | -webkit-box-pack: end; 353 | -webkit-justify-content: flex-end; 354 | -ms-flex-pack: end; 355 | justify-content: flex-end; 356 | } 357 | 358 | .flex-justify-between { 359 | -webkit-box-pack: justify; 360 | -webkit-justify-content: space-between; 361 | -ms-flex-pack: justify; 362 | justify-content: space-between; 363 | } 364 | 365 | /* 沿侧轴方向排列方式 */ 366 | .flex-align-start { 367 | -webkit-align-content: flex-start; 368 | -ms-flex-line-pack: start; 369 | align-content: flex-start; 370 | } 371 | 372 | .flex-align-end { 373 | -webkit-align-content: flex-end; 374 | -ms-flex-line-pack: end; 375 | align-content: flex-end; 376 | } 377 | 378 | .flex-align-around { 379 | -webkit-align-content: space-around; 380 | -ms-flex-line-pack: distribute; 381 | align-content: space-around; 382 | } 383 | 384 | .flex-align-between { 385 | -webkit-align-content: space-between; 386 | -ms-flex-line-pack: justify; 387 | align-content: space-between; 388 | } 389 | 390 | .flex-col-auto { 391 | -webkit-box-flex: 0; 392 | -webkit-flex: 0 auto; 393 | -ms-flex: 0 auto; 394 | flex: 0 auto; 395 | } 396 | 397 | @import "_partial/loading"; 398 | @import "_partial/waves"; 399 | @import "_partial/layout"; 400 | @import "_partial/header"; 401 | @import "_partial/highlight"; 402 | @import "_partial/postlist"; 403 | @import "_partial/gotop"; 404 | @import "_partial/share"; 405 | @import "_partial/article"; 406 | @import "_partial/archives"; 407 | @import "_partial/page"; 408 | @import "_partial/tags"; 409 | @import "_partial/search"; 410 | @import "_partial/reward"; 411 | @import "_partial/lightbox"; 412 | 413 | @import "_plugin/valine"; 414 | -------------------------------------------------------------------------------- /source/img/alipay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/img/alipay.jpg -------------------------------------------------------------------------------- /source/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/img/avatar.jpg -------------------------------------------------------------------------------- /source/img/brand.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/img/brand.jpg -------------------------------------------------------------------------------- /source/img/cc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/img/cc.png -------------------------------------------------------------------------------- /source/img/img-err.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/img/img-err.png -------------------------------------------------------------------------------- /source/img/img-loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/img/img-loading.png -------------------------------------------------------------------------------- /source/img/wechat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yscoder/hexo-theme-indigo/e4bc41a3b9404fa870899cb14b03062d72cb10c0/source/img/wechat.jpg -------------------------------------------------------------------------------- /source/js/main.js: -------------------------------------------------------------------------------- 1 | (function (w, d) { 2 | 3 | var body = d.body, 4 | $ = d.querySelector.bind(d), 5 | $$ = d.querySelectorAll.bind(d), 6 | root = $('html'), 7 | gotop = $('#gotop'), 8 | menu = $('#menu'), 9 | header = $('#header'), 10 | mask = $('#mask'), 11 | menuToggle = $('#menu-toggle'), 12 | menuOff = $('#menu-off'), 13 | loading = $('#loading'), 14 | animate = w.requestAnimationFrame, 15 | scrollSpeed = 200 / (1000 / 60), 16 | forEach = Array.prototype.forEach, 17 | even = ('ontouchstart' in w && /Mobile|Android|iOS|iPhone|iPad|iPod|Windows Phone|KFAPWI/i.test(navigator.userAgent)) ? 'touchstart' : 'click', 18 | isWX = /micromessenger/i.test(navigator.userAgent), 19 | noop = function () { }, 20 | offset = function (el) { 21 | var x = el.offsetLeft, 22 | y = el.offsetTop; 23 | 24 | if (el.offsetParent) { 25 | var pOfs = arguments.callee(el.offsetParent); 26 | x += pOfs.x; 27 | y += pOfs.y; 28 | } 29 | 30 | return { 31 | x: x, 32 | y: y 33 | }; 34 | }, 35 | rootScollTop = function() { 36 | return d.documentElement.scrollTop || d.body.scrollTop; 37 | }; 38 | 39 | var Blog = { 40 | goTop: function (end) { 41 | var top = rootScollTop(); 42 | var interval = arguments.length > 2 ? arguments[1] : Math.abs(top - end) / scrollSpeed; 43 | 44 | if (top && top > end) { 45 | w.scrollTo(0, Math.max(top - interval, 0)); 46 | animate(arguments.callee.bind(this, end, interval)); 47 | } else if (end && top < end) { 48 | w.scrollTo(0, Math.min(top + interval, end)); 49 | animate(arguments.callee.bind(this, end, interval)); 50 | } else { 51 | this.toc.actived(end); 52 | } 53 | }, 54 | toggleGotop: function (top) { 55 | if (top > w.innerHeight / 2) { 56 | gotop.classList.add('in'); 57 | } else { 58 | gotop.classList.remove('in'); 59 | } 60 | }, 61 | toggleMenu: function (flag) { 62 | var main = $('#main'); 63 | if (flag) { 64 | menu.classList.remove('hide'); 65 | 66 | if (w.innerWidth < 1241) { 67 | mask.classList.add('in'); 68 | menu.classList.add('show'); 69 | 70 | if (isWX) { 71 | var top = rootScollTop(); 72 | main.classList.add('lock'); 73 | main.scrollTop = top; 74 | } else { 75 | root.classList.add('lock'); 76 | } 77 | } 78 | 79 | } else { 80 | menu.classList.remove('show'); 81 | mask.classList.remove('in'); 82 | if (isWX) { 83 | var top = main.scrollTop; 84 | main.classList.remove('lock'); 85 | w.scrollTo(0, top); 86 | } else { 87 | root.classList.remove('lock'); 88 | } 89 | 90 | } 91 | }, 92 | fixedHeader: function (top) { 93 | if (top > header.clientHeight) { 94 | header.classList.add('fixed'); 95 | } else { 96 | header.classList.remove('fixed'); 97 | } 98 | }, 99 | toc: (function () { 100 | var toc = $('#post-toc'); 101 | 102 | if (!toc || !toc.children.length) { 103 | return { 104 | fixed: noop, 105 | actived: noop 106 | } 107 | } 108 | 109 | var bannerH = $('.post-header').clientHeight, 110 | headerH = header.clientHeight, 111 | titles = $('#post-content').querySelectorAll('h1, h2, h3, h4, h5, h6'); 112 | 113 | toc.querySelector('a[href="#' + titles[0].id + '"]').parentNode.classList.add('active'); 114 | 115 | // Make every child shrink initially 116 | var tocChilds = toc.querySelectorAll('.post-toc-child'); 117 | for (i = 0, len = tocChilds.length; i < len; i++) { 118 | tocChilds[i].classList.add('post-toc-shrink'); 119 | } 120 | var firstChild = 121 | toc.querySelector('a[href="#' + titles[0].id + '"]') 122 | .nextElementSibling; 123 | if (firstChild) { 124 | firstChild.classList.add('post-toc-expand'); 125 | firstChild.classList.remove('post-toc-shrink'); 126 | } 127 | toc.classList.remove('post-toc-shrink'); 128 | 129 | /** 130 | * Handle toc active and expansion 131 | * @param prevEle previous active li element 132 | * @param currEle current active li element 133 | */ 134 | var handleTocActive = function (prevEle, currEle) { 135 | prevEle.classList.remove('active'); 136 | currEle.classList.add('active'); 137 | 138 | var siblingChilds = currEle.parentElement.querySelectorAll('.post-toc-child'); 139 | for (j = 0, len1 = siblingChilds.length; j < len1; j++) { 140 | siblingChilds[j].classList.remove('post-toc-expand'); 141 | siblingChilds[j].classList.add('post-toc-shrink'); 142 | } 143 | var myChild = currEle.querySelector('.post-toc-child'); 144 | if (myChild) { 145 | myChild.classList.remove('post-toc-shrink'); 146 | myChild.classList.add('post-toc-expand'); 147 | } 148 | }; 149 | 150 | return { 151 | fixed: function (top) { 152 | top >= bannerH - headerH ? toc.classList.add('fixed') : toc.classList.remove('fixed'); 153 | }, 154 | actived: function (top) { 155 | for (i = 0, len = titles.length; i < len; i++) { 156 | if (top > offset(titles[i]).y - headerH - 5) { 157 | var prevListEle = toc.querySelector('li.active'); 158 | var currListEle = toc.querySelector('a[href="#' + titles[i].id + '"]').parentNode; 159 | 160 | handleTocActive(prevListEle, currListEle); 161 | } 162 | } 163 | 164 | if (top < offset(titles[0]).y) { 165 | handleTocActive( 166 | toc.querySelector('li.active'), 167 | toc.querySelector('a[href="#' + titles[0].id + '"]').parentNode 168 | ); 169 | } 170 | } 171 | } 172 | })(), 173 | hideOnMask: [], 174 | modal: function (target) { 175 | this.$modal = $(target); 176 | this.$off = this.$modal.querySelector('.close'); 177 | 178 | var _this = this; 179 | 180 | this.show = function () { 181 | mask.classList.add('in'); 182 | _this.$modal.classList.add('ready'); 183 | setTimeout(function () { 184 | _this.$modal.classList.add('in'); 185 | }, 0) 186 | } 187 | 188 | this.onHide = noop; 189 | 190 | this.hide = function () { 191 | _this.onHide(); 192 | mask.classList.remove('in'); 193 | _this.$modal.classList.remove('in'); 194 | setTimeout(function () { 195 | _this.$modal.classList.remove('ready'); 196 | }, 300) 197 | } 198 | 199 | this.toggle = function () { 200 | return _this.$modal.classList.contains('in') ? _this.hide() : _this.show(); 201 | } 202 | 203 | Blog.hideOnMask.push(this.hide); 204 | this.$off && this.$off.addEventListener(even, this.hide); 205 | }, 206 | share: function () { 207 | 208 | var pageShare = $('#pageShare'), 209 | fab = $('#shareFab'); 210 | 211 | var shareModal = new this.modal('#globalShare'); 212 | 213 | $('#menuShare').addEventListener(even, shareModal.toggle); 214 | 215 | if (fab) { 216 | fab.addEventListener(even, function () { 217 | pageShare.classList.toggle('in') 218 | }, false) 219 | 220 | d.addEventListener(even, function (e) { 221 | !fab.contains(e.target) && pageShare.classList.remove('in') 222 | }, false) 223 | } 224 | 225 | var wxModal = new this.modal('#wxShare'); 226 | wxModal.onHide = shareModal.hide; 227 | 228 | forEach.call($$('.wxFab'), function (el) { 229 | el.addEventListener(even, wxModal.toggle) 230 | }) 231 | 232 | }, 233 | search: function () { 234 | var searchWrap = $('#search-wrap'); 235 | 236 | function toggleSearch() { 237 | searchWrap.classList.toggle('in'); 238 | } 239 | 240 | $('#search').addEventListener(even, toggleSearch); 241 | }, 242 | reward: function () { 243 | var modal = new this.modal('#reward'); 244 | $('#rewardBtn').addEventListener(even, modal.toggle); 245 | 246 | var $rewardToggle = $('#rewardToggle'); 247 | var $rewardCode = $('#rewardCode'); 248 | if ($rewardToggle) { 249 | $rewardToggle.addEventListener('change', function () { 250 | $rewardCode.src = this.checked ? this.dataset.alipay : this.dataset.wechat 251 | }) 252 | } 253 | }, 254 | waterfall: function () { 255 | 256 | if (w.innerWidth < 760) return; 257 | 258 | forEach.call($$('.waterfall'), function (el) { 259 | var childs = el.querySelectorAll('.waterfall-item'); 260 | var columns = [0, 0]; 261 | 262 | forEach.call(childs, function (item) { 263 | var i = columns[0] <= columns[1] ? 0 : 1; 264 | item.style.cssText = 'top:' + columns[i] + 'px;left:' + (i > 0 ? '50%' : 0); 265 | columns[i] += item.offsetHeight; 266 | }) 267 | 268 | el.style.height = Math.max(columns[0], columns[1]) + 'px'; 269 | el.classList.add('in') 270 | }) 271 | 272 | }, 273 | tabBar: function (el) { 274 | el.parentNode.parentNode.classList.toggle('expand') 275 | }, 276 | page: (function () { 277 | var $elements = $$('.fade, .fade-scale'); 278 | var visible = false; 279 | 280 | return { 281 | loaded: function () { 282 | forEach.call($elements, function (el) { 283 | el.classList.add('in') 284 | }); 285 | visible = true; 286 | }, 287 | unload: function () { 288 | forEach.call($elements, function (el) { 289 | el.classList.remove('in') 290 | }); 291 | visible = false; 292 | }, 293 | visible: visible 294 | } 295 | 296 | })(), 297 | lightbox: (function () { 298 | 299 | function LightBox(element) { 300 | this.$img = element.querySelector('img'); 301 | this.$overlay = element.querySelector('overlay'); 302 | this.margin = 40; 303 | this.title = this.$img.title || this.$img.alt || ''; 304 | this.isZoom = false; 305 | 306 | var naturalW, naturalH, imgRect, docW, docH; 307 | 308 | this.calcRect = function () { 309 | docW = body.clientWidth; 310 | docH = body.clientHeight; 311 | var inH = docH - this.margin * 2; 312 | var w = naturalW; 313 | var h = naturalH; 314 | var t = this.margin; 315 | var l = 0; 316 | var sw = w > docW ? docW / w : 1; 317 | var sh = h > inH ? inH / h : 1; 318 | var s = Math.min(sw, sh); 319 | 320 | w = w * s; 321 | h = h * s; 322 | 323 | return { 324 | w: w, 325 | h: h, 326 | t: (docH - h) / 2 - imgRect.top, 327 | l: (docW - w) / 2 - imgRect.left + this.$img.offsetLeft 328 | } 329 | } 330 | 331 | this.setImgRect = function (rect) { 332 | this.$img.style.cssText = 'width: ' + rect.w + 'px; max-width: ' + rect.w + 'px; height:' + rect.h + 'px; top: ' + rect.t + 'px; left: ' + rect.l + 'px'; 333 | } 334 | 335 | this.setFrom = function () { 336 | this.setImgRect({ 337 | w: imgRect.width, 338 | h: imgRect.height, 339 | t: 0, 340 | l: (element.offsetWidth - imgRect.width) / 2 341 | }) 342 | } 343 | 344 | this.setTo = function () { 345 | this.setImgRect(this.calcRect()); 346 | } 347 | 348 | // this.updateSize = function () { 349 | // var sw = sh = 1; 350 | // if (docW !== body.clientWidth) { 351 | // sw = body.clientWidth / docW; 352 | // } 353 | 354 | // if (docH !== body.clientHeight) { 355 | // sh = body.clientHeight / docH; 356 | // } 357 | 358 | // docW = body.clientWidth; 359 | // docH = body.clientHeight; 360 | // var rect = this.$img.getBoundingClientRect(); 361 | // var w = rect.width * sw; 362 | // var h = rect.height * sh; 363 | 364 | // this.$img.classList.remove('zoom-in'); 365 | // this.setImgRect({ 366 | // w: w, 367 | // h: h, 368 | // t: this.$img.offsetTop - (h - rect.height) / 2, 369 | // l: this.$img.offsetLeft - (w - rect.width) / 2 370 | // }) 371 | // } 372 | 373 | this.addTitle = function () { 374 | if (!this.title) { 375 | return; 376 | } 377 | this.$caption = d.createElement('div'); 378 | this.$caption.innerHTML = this.title; 379 | this.$caption.className = 'overlay-title'; 380 | element.appendChild(this.$caption); 381 | } 382 | 383 | this.removeTitle = function () { 384 | this.$caption && element.removeChild(this.$caption) 385 | } 386 | 387 | var _this = this; 388 | 389 | this.zoomIn = function () { 390 | naturalW = this.$img.naturalWidth || this.$img.width; 391 | naturalH = this.$img.naturalHeight || this.$img.height; 392 | imgRect = this.$img.getBoundingClientRect(); 393 | element.style.height = imgRect.height + 'px'; 394 | element.classList.add('ready'); 395 | this.setFrom(); 396 | this.addTitle(); 397 | this.$img.classList.add('zoom-in'); 398 | 399 | setTimeout(function () { 400 | element.classList.add('active'); 401 | _this.setTo(); 402 | _this.isZoom = true; 403 | }, 0); 404 | } 405 | 406 | this.zoomOut = function () { 407 | this.isZoom = false; 408 | element.classList.remove('active'); 409 | this.$img.classList.add('zoom-in'); 410 | this.setFrom(); 411 | setTimeout(function () { 412 | _this.$img.classList.remove('zoom-in'); 413 | _this.$img.style.cssText = ''; 414 | _this.removeTitle(); 415 | element.classList.remove('ready'); 416 | element.removeAttribute('style'); 417 | }, 300); 418 | } 419 | 420 | element.addEventListener('click', function (e) { 421 | _this.isZoom ? _this.zoomOut() : e.target.tagName === 'IMG' && _this.zoomIn() 422 | }) 423 | 424 | d.addEventListener('scroll', function () { 425 | _this.isZoom && _this.zoomOut() 426 | }) 427 | 428 | w.addEventListener('resize', function () { 429 | // _this.isZoom && _this.updateSize() 430 | _this.isZoom && _this.zoomOut() 431 | }) 432 | } 433 | 434 | forEach.call($$('.img-lightbox'), function (el) { 435 | new LightBox(el) 436 | }) 437 | })(), 438 | loadScript: function (scripts) { 439 | scripts.forEach(function (src) { 440 | var s = d.createElement('script'); 441 | s.src = src; 442 | s.async = true; 443 | body.appendChild(s); 444 | }) 445 | } 446 | }; 447 | 448 | w.addEventListener('load', function () { 449 | loading.classList.remove('active'); 450 | Blog.page.loaded(); 451 | w.lazyScripts && w.lazyScripts.length && Blog.loadScript(w.lazyScripts) 452 | }); 453 | 454 | w.addEventListener('DOMContentLoaded', function () { 455 | Blog.waterfall(); 456 | var top = rootScollTop(); 457 | Blog.toc.fixed(top); 458 | Blog.toc.actived(top); 459 | Blog.page.loaded(); 460 | }); 461 | 462 | var ignoreUnload = false; 463 | var $mailTarget = $('a[href^="mailto"]'); 464 | if($mailTarget) { 465 | $mailTarget.addEventListener(even, function () { 466 | ignoreUnload = true; 467 | }); 468 | } 469 | 470 | w.addEventListener('beforeunload', function (e) { 471 | if (!ignoreUnload) { 472 | Blog.page.unload(); 473 | } else { 474 | ignoreUnload = false; 475 | } 476 | }); 477 | 478 | w.addEventListener('pageshow', function () { 479 | // fix OSX safari #162 480 | !Blog.page.visible && Blog.page.loaded(); 481 | }); 482 | 483 | w.addEventListener('resize', function () { 484 | w.BLOG.even = even = 'ontouchstart' in w ? 'touchstart' : 'click'; 485 | Blog.toggleMenu(); 486 | Blog.waterfall(); 487 | }); 488 | 489 | gotop.addEventListener(even, function () { 490 | animate(Blog.goTop.bind(Blog, 0)); 491 | }, false); 492 | 493 | menuToggle.addEventListener(even, function (e) { 494 | Blog.toggleMenu(true); 495 | e.preventDefault(); 496 | }, false); 497 | 498 | menuOff.addEventListener(even, function () { 499 | menu.classList.add('hide'); 500 | }, false); 501 | 502 | mask.addEventListener(even, function (e) { 503 | Blog.toggleMenu(); 504 | Blog.hideOnMask.forEach(function (hide) { 505 | hide() 506 | }); 507 | e.preventDefault(); 508 | }, false); 509 | 510 | d.addEventListener('scroll', function () { 511 | var top = rootScollTop(); 512 | Blog.toggleGotop(top); 513 | Blog.fixedHeader(top); 514 | Blog.toc.fixed(top); 515 | Blog.toc.actived(top); 516 | }, false); 517 | 518 | if (w.BLOG.SHARE) { 519 | Blog.share() 520 | } 521 | 522 | if (w.BLOG.REWARD) { 523 | Blog.reward() 524 | } 525 | 526 | Blog.noop = noop; 527 | Blog.even = even; 528 | Blog.$ = $; 529 | Blog.$$ = $$; 530 | 531 | Object.keys(Blog).reduce(function (g, e) { 532 | g[e] = Blog[e]; 533 | return g 534 | }, w.BLOG); 535 | 536 | if (w.Waves) { 537 | Waves.init(); 538 | Waves.attach('.global-share li', ['waves-block']); 539 | Waves.attach('.article-tag-list-link, #page-nav a, #page-nav span', ['waves-button']); 540 | } else { 541 | console.error('Waves loading failed.') 542 | } 543 | })(window, document); 544 | -------------------------------------------------------------------------------- /source/js/main.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){var s=e.body,n=e.querySelector.bind(e),a=e.querySelectorAll.bind(e),o=n("html"),c=n("#gotop"),l=n("#menu"),r=n("#header"),d=n("#mask"),h=n("#menu-toggle"),f=n("#menu-off"),u=n("#loading"),m=t.requestAnimationFrame,v=12,g=Array.prototype.forEach,p="ontouchstart"in t&&/Mobile|Android|iOS|iPhone|iPad|iPod|Windows Phone|KFAPWI/i.test(navigator.userAgent)?"touchstart":"click",L=/micromessenger/i.test(navigator.userAgent),y=function(){},w=function(t){var e=t.offsetLeft,i=t.offsetTop;if(t.offsetParent){var s=arguments.callee(t.offsetParent);e+=s.x,i+=s.y}return{x:e,y:i}},x=function(){return e.documentElement.scrollTop||e.body.scrollTop},$={goTop:function(e){var i=x(),s=arguments.length>2?arguments[1]:Math.abs(i-e)/v;i&&i>e?(t.scrollTo(0,Math.max(i-s,0)),m(arguments.callee.bind(this,e,s))):e&&e>i?(t.scrollTo(0,Math.min(i+s,e)),m(arguments.callee.bind(this,e,s))):this.toc.actived(e)},toggleGotop:function(e){e>t.innerHeight/2?c.classList.add("in"):c.classList.remove("in")},toggleMenu:function(e){var i=n("#main");if(e){if(l.classList.remove("hide"),t.innerWidth<1241)if(d.classList.add("in"),l.classList.add("show"),L){var s=x();i.classList.add("lock"),i.scrollTop=s}else o.classList.add("lock")}else if(l.classList.remove("show"),d.classList.remove("in"),L){var s=i.scrollTop;i.classList.remove("lock"),t.scrollTo(0,s)}else o.classList.remove("lock")},fixedHeader:function(t){t>r.clientHeight?r.classList.add("fixed"):r.classList.remove("fixed")},toc:function(){var t=n("#post-toc");if(!t||!t.children.length)return{fixed:y,actived:y};var e=n(".post-header").clientHeight,s=r.clientHeight,a=n("#post-content").querySelectorAll("h1, h2, h3, h4, h5, h6");t.querySelector('a[href="#'+a[0].id+'"]').parentNode.classList.add("active");var o=t.querySelectorAll(".post-toc-child");for(i=0,len=o.length;i=e-s?t.classList.add("fixed"):t.classList.remove("fixed")},actived:function(e){for(i=0,len=a.length;iw(a[i]).y-s-5){var n=t.querySelector("li.active"),o=t.querySelector('a[href="#'+a[i].id+'"]').parentNode;l(n,o)}e0?"50%":0),i[e]+=t.offsetHeight}),t.style.height=Math.max(i[0],i[1])+"px",t.classList.add("in")})},tabBar:function(t){t.parentNode.parentNode.classList.toggle("expand")},page:function(){var t=a(".fade, .fade-scale"),e=!1;return{loaded:function(){g.call(t,function(t){t.classList.add("in")}),e=!0},unload:function(){g.call(t,function(t){t.classList.remove("in")}),e=!1},visible:e}}(),lightbox:function(){function i(i){this.$img=i.querySelector("img"),this.$overlay=i.querySelector("overlay"),this.margin=40,this.title=this.$img.title||this.$img.alt||"",this.isZoom=!1;var n,a,o,c,l;this.calcRect=function(){c=s.clientWidth,l=s.clientHeight;var t=l-2*this.margin,e=n,i=a,r=(this.margin,e>c?c/e:1),d=i>t?t/i:1,h=Math.min(r,d);return e*=h,i*=h,{w:e,h:i,t:(l-i)/2-o.top,l:(c-e)/2-o.left+this.$img.offsetLeft}},this.setImgRect=function(t){this.$img.style.cssText="width: "+t.w+"px; max-width: "+t.w+"px; height:"+t.h+"px; top: "+t.t+"px; left: "+t.l+"px"},this.setFrom=function(){this.setImgRect({w:o.width,h:o.height,t:0,l:(i.offsetWidth-o.width)/2})},this.setTo=function(){this.setImgRect(this.calcRect())},this.addTitle=function(){this.title&&(this.$caption=e.createElement("div"),this.$caption.innerHTML=this.title,this.$caption.className="overlay-title",i.appendChild(this.$caption))},this.removeTitle=function(){this.$caption&&i.removeChild(this.$caption)};var r=this;this.zoomIn=function(){n=this.$img.naturalWidth||this.$img.width,a=this.$img.naturalHeight||this.$img.height,o=this.$img.getBoundingClientRect(),i.style.height=o.height+"px",i.classList.add("ready"),this.setFrom(),this.addTitle(),this.$img.classList.add("zoom-in"),setTimeout(function(){i.classList.add("active"),r.setTo(),r.isZoom=!0},0)},this.zoomOut=function(){this.isZoom=!1,i.classList.remove("active"),this.$img.classList.add("zoom-in"),this.setFrom(),setTimeout(function(){r.$img.classList.remove("zoom-in"),r.$img.style.cssText="",r.removeTitle(),i.classList.remove("ready"),i.removeAttribute("style")},300)},i.addEventListener("click",function(t){r.isZoom?r.zoomOut():"IMG"===t.target.tagName&&r.zoomIn()}),e.addEventListener("scroll",function(){r.isZoom&&r.zoomOut()}),t.addEventListener("resize",function(){r.isZoom&&r.zoomOut()})}g.call(a(".img-lightbox"),function(t){new i(t)})}(),loadScript:function(t){t.forEach(function(t){var i=e.createElement("script");i.src=t,i.async=!0,s.appendChild(i)})}};t.addEventListener("load",function(){u.classList.remove("active"),$.page.loaded(),t.lazyScripts&&t.lazyScripts.length&&$.loadScript(t.lazyScripts)}),t.addEventListener("DOMContentLoaded",function(){$.waterfall();var t=x();$.toc.fixed(t),$.toc.actived(t),$.page.loaded()});var E=!1,S=n('a[href^="mailto"]');S&&S.addEventListener(p,function(){E=!0}),t.addEventListener("beforeunload",function(t){E?E=!1:$.page.unload()}),t.addEventListener("pageshow",function(){!$.page.visible&&$.page.loaded()}),t.addEventListener("resize",function(){t.BLOG.even=p="ontouchstart"in t?"touchstart":"click",$.toggleMenu(),$.waterfall()}),c.addEventListener(p,function(){m($.goTop.bind($,0))},!1),h.addEventListener(p,function(t){$.toggleMenu(!0),t.preventDefault()},!1),f.addEventListener(p,function(){l.classList.add("hide")},!1),d.addEventListener(p,function(t){$.toggleMenu(),$.hideOnMask.forEach(function(t){t()}),t.preventDefault()},!1),e.addEventListener("scroll",function(){var t=x();$.toggleGotop(t),$.fixedHeader(t),$.toc.fixed(t),$.toc.actived(t)},!1),t.BLOG.SHARE&&$.share(),t.BLOG.REWARD&&$.reward(),$.noop=y,$.even=p,$.$=n,$.$$=a,Object.keys($).reduce(function(t,e){return t[e]=$[e],t},t.BLOG),t.Waves?(Waves.init(),Waves.attach(".global-share li",["waves-block"]),Waves.attach(".article-tag-list-link, #page-nav a, #page-nav span",["waves-button"])):console.error("Waves loading failed.")}(window,document); 2 | -------------------------------------------------------------------------------- /source/js/search.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | var G = window || this, 4 | even = G.BLOG.even, 5 | $ = G.BLOG.$, 6 | searchIco = $('#search'), 7 | searchWrap = $('#search-wrap'), 8 | keyInput = $('#key'), 9 | back = $('#back'), 10 | searchPanel = $('#search-panel'), 11 | searchResult = $('#search-result'), 12 | searchTpl = $('#search-tpl').innerHTML, 13 | JSON_DATA = (G.BLOG.ROOT + '/content.json').replace(/\/{2}/g, '/'), 14 | searchData; 15 | 16 | function loadData(success) { 17 | 18 | if (!searchData) { 19 | var xhr = new XMLHttpRequest(); 20 | xhr.open('GET', JSON_DATA, true); 21 | 22 | xhr.onload = function () { 23 | if (this.status >= 200 && this.status < 300) { 24 | var res = JSON.parse(this.response); 25 | searchData = res instanceof Array ? res : res.posts; 26 | success(searchData); 27 | } else { 28 | console.error(this.statusText); 29 | } 30 | }; 31 | 32 | xhr.onerror = function () { 33 | console.error(this.statusText); 34 | }; 35 | 36 | xhr.send(); 37 | 38 | } else { 39 | success(searchData); 40 | } 41 | } 42 | 43 | function tpl(html, data) { 44 | return html.replace(/\{\w+\}/g, function (str) { 45 | var prop = str.replace(/\{|\}/g, ''); 46 | return data[prop] || ''; 47 | }); 48 | } 49 | 50 | var noop = G.BLOG.noop; 51 | var root = $('html'); 52 | 53 | var Control = { 54 | show: function () { 55 | G.innerWidth < 760 ? root.classList.add('lock-size') : noop; 56 | searchPanel.classList.add('in'); 57 | }, 58 | hide: function () { 59 | G.innerWidth < 760 ? root.classList.remove('lock-size') : noop; 60 | searchPanel.classList.remove('in'); 61 | } 62 | }; 63 | 64 | function render(data) { 65 | var html = ''; 66 | if (data.length) { 67 | 68 | html = data.map(function (post) { 69 | 70 | return tpl(searchTpl, { 71 | title: post.title, 72 | path: (G.BLOG.ROOT + '/' + post.path).replace(/\/{2,}/g, '/'), 73 | date: new Date(post.date).toLocaleDateString(), 74 | tags: post.tags.map(function (tag) { 75 | return '#' + tag.name + ''; 76 | }).join('') 77 | }); 78 | 79 | }).join(''); 80 | 81 | } else { 82 | html = '

  • Results not found!

    • '; 83 | } 84 | 85 | searchResult.innerHTML = html; 86 | } 87 | 88 | function regtest(raw, regExp) { 89 | regExp.lastIndex = 0; 90 | return regExp.test(raw); 91 | } 92 | 93 | function matcher(post, regExp) { 94 | return regtest(post.title, regExp) || post.tags.some(function (tag) { 95 | return regtest(tag.name, regExp); 96 | }) || regtest(post.text, regExp); 97 | } 98 | 99 | function search(e) { 100 | var key = this.value.trim(); 101 | if (!key) { 102 | return; 103 | } 104 | 105 | var regExp = new RegExp(key.replace(/[ ]/g, '|'), 'gmi'); 106 | 107 | loadData(function (data) { 108 | 109 | var result = data.filter(function (post) { 110 | return matcher(post, regExp); 111 | }); 112 | 113 | render(result); 114 | Control.show(); 115 | }); 116 | 117 | e.preventDefault(); 118 | } 119 | 120 | 121 | searchIco.addEventListener(even, function () { 122 | searchWrap.classList.toggle('in'); 123 | keyInput.value = ''; 124 | searchWrap.classList.contains('in') ? keyInput.focus() : keyInput.blur(); 125 | }); 126 | 127 | back.addEventListener(even, function () { 128 | searchWrap.classList.remove('in'); 129 | Control.hide(); 130 | }); 131 | 132 | document.addEventListener(even, function (e) { 133 | if (e.target.id !== 'key' && even === 'click') { 134 | Control.hide(); 135 | } 136 | }); 137 | 138 | keyInput.addEventListener('input', search); 139 | keyInput.addEventListener(even, search); 140 | 141 | }).call(this); 142 | -------------------------------------------------------------------------------- /source/js/search.min.js: -------------------------------------------------------------------------------- 1 | (function(){function t(t){if(r)t(r);else{var e=new XMLHttpRequest;e.open("GET",g,!0),e.onload=function(){if(this.status>=200&&this.status<300){var e=JSON.parse(this.response);r=e instanceof Array?e:e.posts,t(r)}else console.error(this.statusText)},e.onerror=function(){console.error(this.statusText)},e.send()}}function e(t,e){return t.replace(/\{\w+\}/g,function(t){var n=t.replace(/\{|\}/g,"");return e[n]||""})}function n(t){var n="";n=t.length?t.map(function(t){return e(v,{title:t.title,path:(o.BLOG.ROOT+"/"+t.path).replace(/\/{2,}/g,"/"),date:new Date(t.date).toLocaleDateString(),tags:t.tags.map(function(t){return"#"+t.name+""}).join("")})}).join(""):'

  • Results not found!

    • ',L.innerHTML=n}function i(t,e){return e.lastIndex=0,e.test(t)}function s(t,e){return i(t.title,e)||t.tags.some(function(t){return i(t.name,e)})||i(t.text,e)}function a(e){var i=this.value.trim();if(i){var a=new RegExp(i.replace(/[ ]/g,"|"),"gmi");t(function(t){var e=t.filter(function(t){return s(t,a)});n(e),w.show()}),e.preventDefault()}}var r,o=window||this,c=o.BLOG.even,l=o.BLOG.$,u=l("#search"),f=l("#search-wrap"),d=l("#key"),p=l("#back"),h=l("#search-panel"),L=l("#search-result"),v=l("#search-tpl").innerHTML,g=(o.BLOG.ROOT+"/content.json").replace(/\/{2}/g,"/"),m=o.BLOG.noop,O=l("html"),w={show:function(){o.innerWidth<760?O.classList.add("lock-size"):m,h.classList.add("in")},hide:function(){o.innerWidth<760?O.classList.remove("lock-size"):m,h.classList.remove("in")}};u.addEventListener(c,function(){f.classList.toggle("in"),d.value="",f.classList.contains("in")?d.focus():d.blur()}),p.addEventListener(c,function(){f.classList.remove("in"),w.hide()}),document.addEventListener(c,function(t){"key"!==t.target.id&&"click"===c&&w.hide()}),d.addEventListener("input",a),d.addEventListener(c,a)}).call(this); --------------------------------------------------------------------------------