├── layout ├── _custom │ ├── body.ejs │ ├── head.ejs │ └── script.ejs ├── _partial │ ├── _plugins │ │ ├── valine.ejs │ │ ├── blogroll.ejs │ │ ├── gitment.ejs │ │ └── site-visitor.ejs │ ├── loading.ejs │ ├── post │ │ ├── repo-icon.ejs │ │ ├── music.ejs │ │ ├── top.ejs │ │ ├── reward-btn.ejs │ │ ├── tag.ejs │ │ ├── date.ejs │ │ ├── category.ejs │ │ ├── comment.ejs │ │ ├── updated.ejs │ │ ├── share-fab.ejs │ │ ├── head-meta.ejs │ │ ├── visitor.ejs │ │ ├── copyright.ejs │ │ ├── toc.ejs │ │ ├── title.ejs │ │ ├── thumb.ejs │ │ ├── repo.ejs │ │ ├── comment-count.ejs │ │ ├── nav.ejs │ │ ├── reward.ejs │ │ └── share.ejs │ ├── _third-party │ │ ├── visit_counter.ejs │ │ ├── daovoice.ejs │ │ ├── gitment.ejs │ │ ├── leancloud_visitors.ejs │ │ ├── valine.ejs │ │ ├── baidu_tongji.ejs │ │ ├── local_search.ejs │ │ ├── dynamic_title.ejs │ │ ├── mathjax.ejs │ │ └── github_repo.ejs │ ├── paginator.ejs │ ├── after-footer.ejs │ ├── archive.ejs │ ├── footer.ejs │ ├── tags-bar.ejs │ ├── script.ejs │ ├── index-item.ejs │ ├── head.ejs │ ├── post.ejs │ ├── menu.ejs │ └── header.ejs ├── tag.ejs ├── category.ejs ├── post.ejs ├── layout.ejs ├── tags.ejs ├── categories.ejs ├── archive.ejs ├── index.ejs └── page.ejs ├── source ├── css │ ├── _custom │ │ └── custom.less │ ├── fonts │ │ ├── bluehost │ │ │ ├── Bluehost-Bold.woff │ │ │ └── Bluehost-Regular.woff │ │ └── fontawesome │ │ │ ├── FontAwesome.otf │ │ │ ├── fontawesome-webfont.eot │ │ │ ├── fontawesome-webfont.ttf │ │ │ ├── fontawesome-webfont.woff │ │ │ └── fontawesome-webfont.woff2 │ ├── _partial │ │ ├── bluehost.less │ │ ├── plugins.less │ │ ├── gotop.less │ │ ├── loading.less │ │ ├── imagebox.less │ │ ├── reward.less │ │ ├── tags.less │ │ ├── search.less │ │ ├── header.less │ │ ├── archives.less │ │ ├── repo.less │ │ ├── waves.less │ │ ├── share.less │ │ ├── highlight.less │ │ ├── variable.less │ │ ├── page.less │ │ ├── postlist.less │ │ ├── layout.less │ │ └── article.less │ ├── style.less │ └── third-party │ │ └── daovoice.less ├── img │ ├── brand.jpg │ ├── icons.png │ ├── avatar.jpg │ ├── banner.jpg │ ├── favicon.ico │ ├── github.png │ ├── img-err.png │ ├── loader.gif │ ├── refresh.png │ ├── thumb │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── img-loading.png │ ├── reward-alipay.jpg │ ├── reward-wechat.jpg │ └── icons.svg └── js │ ├── plugins │ ├── valine.js │ ├── daovoice.js │ ├── gitment.js │ ├── ios-orientationchange-fix.js │ ├── leancloud_visitors.js │ └── local_search.js │ ├── blog.js │ ├── _config.yml │ └── method.js ├── .editorconfig ├── languages ├── zh-TW.yml ├── zh-CN.yml └── en.yml ├── package.json ├── LICENSE ├── scripts └── plugins.js ├── README.md └── _config.yml /layout/_custom/body.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layout/_custom/head.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layout/_custom/script.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/css/_custom/custom.less: -------------------------------------------------------------------------------- 1 | //custom style -------------------------------------------------------------------------------- /layout/_partial/_plugins/valine.ejs: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /layout/_partial/loading.ejs: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /layout/tag.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('tags', { 2 | title: theme.tags_title + ': '+ page.tag 3 | }) %> 4 | -------------------------------------------------------------------------------- /source/img/brand.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/brand.jpg -------------------------------------------------------------------------------- /source/img/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/icons.png -------------------------------------------------------------------------------- /source/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/avatar.jpg -------------------------------------------------------------------------------- /source/img/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/banner.jpg -------------------------------------------------------------------------------- /source/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/favicon.ico -------------------------------------------------------------------------------- /source/img/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/github.png -------------------------------------------------------------------------------- /source/img/img-err.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/img-err.png -------------------------------------------------------------------------------- /source/img/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/loader.gif -------------------------------------------------------------------------------- /source/img/refresh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/refresh.png -------------------------------------------------------------------------------- /source/img/thumb/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/thumb/1.jpg -------------------------------------------------------------------------------- /source/img/thumb/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/thumb/10.jpg -------------------------------------------------------------------------------- /source/img/thumb/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/thumb/2.jpg -------------------------------------------------------------------------------- /source/img/thumb/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/thumb/3.jpg -------------------------------------------------------------------------------- /source/img/thumb/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/thumb/4.jpg -------------------------------------------------------------------------------- /source/img/thumb/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/thumb/5.jpg -------------------------------------------------------------------------------- /source/img/thumb/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/thumb/6.jpg -------------------------------------------------------------------------------- /source/img/thumb/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/thumb/7.jpg -------------------------------------------------------------------------------- /source/img/thumb/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/thumb/8.jpg -------------------------------------------------------------------------------- /source/img/thumb/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/thumb/9.jpg -------------------------------------------------------------------------------- /layout/category.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('categories', { 2 | title: theme.categories_title + ': ' + page.category 3 | }) %> -------------------------------------------------------------------------------- /source/img/img-loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/img-loading.png -------------------------------------------------------------------------------- /source/img/reward-alipay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/reward-alipay.jpg -------------------------------------------------------------------------------- /source/img/reward-wechat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/img/reward-wechat.jpg -------------------------------------------------------------------------------- /layout/_partial/post/repo-icon.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.repo) { %> 2 | 3 | <% } %> -------------------------------------------------------------------------------- /layout/_partial/_third-party/visit_counter.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layout/_partial/post/music.ejs: -------------------------------------------------------------------------------- 1 | <% if (/type\=\"music\"/g.test(post.raw)) { %> 2 | 3 | <% } %> -------------------------------------------------------------------------------- /source/css/fonts/bluehost/Bluehost-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/css/fonts/bluehost/Bluehost-Bold.woff -------------------------------------------------------------------------------- /source/css/fonts/fontawesome/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/css/fonts/fontawesome/FontAwesome.otf -------------------------------------------------------------------------------- /layout/_partial/post/top.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 |
5 |
-------------------------------------------------------------------------------- /source/css/fonts/bluehost/Bluehost-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/css/fonts/bluehost/Bluehost-Regular.woff -------------------------------------------------------------------------------- /source/css/fonts/fontawesome/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/css/fonts/fontawesome/fontawesome-webfont.eot -------------------------------------------------------------------------------- /source/css/fonts/fontawesome/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/css/fonts/fontawesome/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /source/css/fonts/fontawesome/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/css/fonts/fontawesome/fontawesome-webfont.woff -------------------------------------------------------------------------------- /source/css/fonts/fontawesome/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codefine/hexo-theme-mellow/HEAD/source/css/fonts/fontawesome/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /layout/_partial/post/reward-btn.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /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/_third-party/daovoice.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layout/_partial/post/date.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 (theme.valine.enable) { %> 2 | <%- partial('../_plugins/valine') %> 3 | <% } %> 4 | 5 | <% if (!theme.valine.enable && theme.gitment.enable) { %> 6 | <%- partial('../_plugins/gitment') %> 7 | <% } %> -------------------------------------------------------------------------------- /layout/_partial/paginator.ejs: -------------------------------------------------------------------------------- 1 | <% if (page.total > 1){ %> 2 | 10 | <% } %> -------------------------------------------------------------------------------- /layout/_partial/_third-party/gitment.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /layout/_partial/after-footer.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | <%- partial('post/share', {scope: 'global'}) %> -------------------------------------------------------------------------------- /layout/_partial/_third-party/leancloud_visitors.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /layout/_partial/post/updated.ejs: -------------------------------------------------------------------------------- 1 | <% if(theme.show_last_updated){ %> 2 | 3 | <%= __('post.last_updated') %> 4 |
5 | <% } %> 6 | -------------------------------------------------------------------------------- /layout/_partial/post/share-fab.ejs: -------------------------------------------------------------------------------- 1 |
2 | <%- partial('share', { scope: 'page' }) %> 3 | 4 | 5 | 6 |
7 | -------------------------------------------------------------------------------- /layout/_partial/_plugins/blogroll.ejs: -------------------------------------------------------------------------------- 1 |

2 | Links: 3 | <% for (var i in theme.blogroll) { var rollItem = theme.blogroll[i] %> 4 | 5 | <%- rollItem.name %> 6 | 7 | <% } %> 8 |

9 | -------------------------------------------------------------------------------- /source/js/plugins/valine.js: -------------------------------------------------------------------------------- 1 | const valine = new Valine({ 2 | el: "#comment" , 3 | notify: DC.v.notify, 4 | verify: DC.v.verify, 5 | app_id: DC.v.appid, 6 | app_key: DC.v.appkey, 7 | placeholder: DC.v.placeholder, 8 | path: window.location.pathname, 9 | avatar: DC.v.avatar 10 | }); -------------------------------------------------------------------------------- /layout/_partial/_third-party/valine.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /layout/_partial/_plugins/gitment.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.gitment.lazy) { %> 2 |
3 | 显示 Gitment 评论 4 |
5 |
6 | <% } else { %> 7 |
8 | <% } %> 9 | -------------------------------------------------------------------------------- /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/_partial/_third-party/baidu_tongji.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | <% } %> -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /source/css/_partial/bluehost.less: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Bluehost"; 3 | src: local('Bluehost Regular'), local('Bluehost-Regular'), 4 | url("@{font-bluehost}/Bluehost-Regular.woff") format("woff") 5 | } 6 | 7 | @font-face { 8 | font-family: "Bluehost"; 9 | src: local('Bluehost Bold'), local('Bluehost-Bold'), 10 | url("@{font-bluehost}/Bluehost-Bold.woff") format("woff") 11 | } 12 | -------------------------------------------------------------------------------- /layout/_partial/_third-party/local_search.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /layout/_partial/post/visitor.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.leancloud_visitors.enable) { %> 2 | 3 | <% if (theme.leancloud_visitors.icon) { %> 4 | 5 | <% } else { %> 6 | 阅读次数 7 | <% } %> 8 | 9 | 10 | <% } %> 11 | -------------------------------------------------------------------------------- /layout/_partial/_plugins/site-visitor.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.visit_counter.site_uv) { %> 2 | 3 | 4 | 5 | 6 | <% } %> 7 | <% if (theme.visit_counter.site_pv) { %> 8 | 9 | 10 | 11 | 12 | <% } %> -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-theme-mellow", 3 | "version": "1.4.4", 4 | "description": "Material Design theme for Hexo.", 5 | "keywords": [ 6 | "hexo", 7 | "theme", 8 | "material design" 9 | ], 10 | "author": { 11 | "name": "Michael.Lu", 12 | "email": "277133779@qq.com" 13 | }, 14 | "license": "MIT", 15 | "repository": { 16 | "url": "git+https://github.com/codefine/hexo-theme-mellow.git", 17 | "type": "git" 18 | } 19 | } -------------------------------------------------------------------------------- /layout/layout.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%- partial('_partial/head') %> 4 | <%- partial('_custom/head') %> 5 | 6 | <%- partial('_partial/loading') %> 7 | <%- partial('_partial/menu') %> 8 |
9 | <%- body %> 10 |
11 | <%- partial('_partial/footer') %> 12 | <%- partial('_partial/after-footer') %> 13 | <%- partial('_custom/body') %> 14 | <%- partial('_partial/script') %> 15 | <%- partial('_custom/script') %> 16 | 17 | 18 | -------------------------------------------------------------------------------- /layout/_partial/archive.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 7 | <%- partial("post/title", { 8 | hasLink: true, 9 | tClass: "" 10 | }) %> 11 | <% if(post.tags && post.tags.length){ %> 12 | 15 | <% } %> 16 |
17 |
-------------------------------------------------------------------------------- /layout/_partial/post/copyright.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.show_last_updated || theme.postMessage) { %> 2 |
3 |
4 | <%- partial('updated') %> 5 | <% if(theme.postMessage) {%> 6 | <%- _.template(theme.postMessage)(locals) %> 7 | <% } %> 8 |
9 | 15 |
16 | <% } %> -------------------------------------------------------------------------------- /layout/_partial/post/toc.ejs: -------------------------------------------------------------------------------- 1 | <% if(theme.toc.enable){ 2 | // const res = post.content.replace(/\<\/a>/g, ""); 3 | const topic = toc(trim(post.content), { 4 | class: 'post-toc', 5 | list_number: theme.toc.list_number, 6 | max_depth: 4 7 | }) 8 | if (topic) { %> 9 | 16 | <% } 17 | } %> -------------------------------------------------------------------------------- /layout/_partial/_third-party/dynamic_title.ejs: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /source/js/plugins/daovoice.js: -------------------------------------------------------------------------------- 1 | (function(i, s, o, g, r, a, m) { 2 | i['DaoVoiceObject'] = r; 3 | (i[r] = 4 | i[r] || 5 | function() { 6 | (i[r].q = i[r].q || []).push(arguments); 7 | }), 8 | (i[r].l = 1 * new Date()); 9 | (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); 10 | a.async = 1; 11 | a.src = g; 12 | a.charset = 'utf-8'; 13 | m.parentNode.insertBefore(a, m); 14 | })( 15 | window, 16 | document, 17 | 'script', 18 | ('https:' == document.location.protocol ? 'https:' : 'http:') + 19 | '//widget.daovoice.io/widget/'+ DC.d.app_id +'.js', 20 | 'daovoice' 21 | ); 22 | -------------------------------------------------------------------------------- /source/css/_partial/plugins.less: -------------------------------------------------------------------------------- 1 | .MathJax:focus{ 2 | outline: none; 3 | } 4 | 5 | .valine{ 6 | .vbtn{ 7 | background-color: initial @imp; 8 | border-color: @borderColor @imp; 9 | color: @textSecondaryColor @imp; 10 | padding: 0.2rem 0.9rem @imp; 11 | font-size: .75rem @imp; 12 | &:hover{ 13 | border-color: @primaryColor_2 @imp; 14 | color: @primaryColor_2 @imp; 15 | } 16 | } 17 | .vcount>.vnum{ 18 | color: @primaryColor_2 @imp; 19 | font-weight: bold @imp; 20 | font-size: @font-size + 8 @imp; 21 | } 22 | .vempty{ 23 | font-size: @font-size - 2; 24 | } 25 | } -------------------------------------------------------------------------------- /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/_third-party/mathjax.ejs: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /layout/_partial/post/thumb.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | if ( _.isBoolean(src) ) { 3 | const len = 10; 4 | src = url_for( `/img/thumb/${ ( (total - index - 1) % total ) % len + 1 }.jpg` ); 5 | } else if ( _.isString(src) ) { 6 | src = src[0] === "/" ? url_for(src) : url_for(post.path) + url_for(src); 7 | } else if ( _.isArray(src) ) { 8 | const len = src.length; 9 | src = url_for( `/img/thumb/${ ( (total - index - 1) % total ) % len + 1 }.jpg` ); 10 | } 11 | %> 12 |
13 | 14 |
15 | 16 |
17 | 图片路径不正确 18 | <%- partial('title', { hasLink: true, tClass: "ab-title" }) %> 19 |
20 | -------------------------------------------------------------------------------- /source/css/_partial/gotop.less: -------------------------------------------------------------------------------- 1 | #gotop { 2 | position: fixed; 3 | right: 50px; 4 | bottom: 30px; 5 | z-index: 30; 6 | width: 56px; 7 | height: 56px; 8 | line-height: 56px; 9 | text-align: center; 10 | color: @textPrimaryColorWhite; 11 | background: @primaryColor_2; 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 | right: 16px; 30 | } 31 | } 32 | @media screen and (max-width: 1040px) { 33 | #gotop { 34 | width: 42px; 35 | height: 42px; 36 | line-height: 42px; 37 | } 38 | } -------------------------------------------------------------------------------- /layout/_partial/post/repo.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

7 |

8 |
9 |
10 | 24 | 25 |
-------------------------------------------------------------------------------- /layout/_partial/post/comment-count.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.valine.enable) { %> 2 | 3 | 4 | 5 | 6 | 7 | 8 | <% } %> 9 | 10 | <% if (!theme.valine.enable && theme.gitment.enable) { %> 11 | 12 | 15 | <% const link = theme.gitment.lazy ? "gitment-display-button" : "gitment"; %> 16 | 17 | 18 | 19 | 20 | <% } %> -------------------------------------------------------------------------------- /layout/_partial/post/nav.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.prev || post.next){ %> 2 | 25 | <% } %> 26 | -------------------------------------------------------------------------------- /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 | <%- partial('_partial/archive', {post: post, date_format: config.date_format}) %> 11 | <% }) %> 12 |
13 | <% } else { 14 | site.tags.each(function(tag){ 15 | if (tag.length) { %> 16 |

<%=tag.name %>

17 |
18 | <% tag.posts.each(function (post) { %> 19 | <%- partial('_partial/archive', {post: post, date_format: config.date_format}) %> 20 | <% }) %> 21 |
22 | <% } 23 | }); 24 | } %> 25 | <%- partial('_partial/paginator') %> 26 |
27 | -------------------------------------------------------------------------------- /layout/categories.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/header', { 2 | title: locals.title || theme.categories_title, 3 | hdClass: 'categories-header' 4 | }) %> 5 |
6 | <% if( is_category() ) { %> 7 |
8 | <% page.posts.each(function (post) { %> 9 | <%- partial('_partial/archive', {post: post, date_format: config.date_format}) %> 10 | <% }) %> 11 |
12 | <% } else { 13 | site.categories.each(function(cate){ 14 | if (cate.length) { %> 15 |

<%=cate.name %>

16 |
17 | <% cate.posts.each(function (post) { %> 18 | <%- partial('_partial/archive', {post: post, date_format: config.date_format}) %> 19 | <% }) %> 20 |
21 | <% } 22 | }) 23 | } %> 24 | <%- partial('_partial/paginator') %> 25 |
26 | -------------------------------------------------------------------------------- /layout/archive.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/header', { 2 | title: theme.archives_title, 3 | hdClass: 'archives-header' 4 | }) %> 5 |
6 | <% 7 | var posts = []; 8 | page.posts.each(function(post){ 9 | posts.push(post); 10 | }); 11 | var sortPosts = _[_.orderBy ? 'orderBy' : 'sortByOrder'](posts, ['date'], ['desc']); 12 | var y = 0, m = 0; 13 | sortPosts.forEach(function (post, i){ 14 | var dt = post.date; 15 | var ny = post.date.year(); 16 | var nm = post.date.month(); 17 | if(ny !== y || nm !== m) { 18 | y = ny; 19 | m = nm; 20 | if (i > 0) { %> 21 |
22 | <% } %> 23 |

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

24 |
25 | <% } %> 26 | <%- partial('_partial/archive', {post: post, date_format: 'MMM D'}) %> 27 | <% }) %> 28 |
29 | <%- partial('_partial/paginator') %> 30 | 31 | -------------------------------------------------------------------------------- /source/css/_partial/loading.less: -------------------------------------------------------------------------------- 1 | #loading { 2 | display: none; 3 | position: fixed; 4 | top: 0; 5 | left: -100%; 6 | z-index: 70; 7 | width: 100%; 8 | height: 3px; 9 | background: @primaryColor_2; 10 | &.active { 11 | -webkit-animation: loading-anim 1s ease-in-out infinite; 12 | animation: loading-anim 1s ease-in-out infinite; 13 | } 14 | } 15 | 16 | @-webkit-keyframes loading-anim { 17 | from {} 18 | to { 19 | .transform(translateX(200%)) 20 | } 21 | } 22 | @keyframes loading-anim { 23 | from {} 24 | to { 25 | .transform(translateX(200%)) 26 | } 27 | } 28 | 29 | .fade, 30 | .fade-scale { 31 | opacity: 0; 32 | 33 | &.in { 34 | opacity: 1; 35 | .transform(none); 36 | } 37 | } 38 | .fade { 39 | .transition(.4s); 40 | .transform(translateY(50px)); 41 | } 42 | .fade-scale { 43 | .transition(.6s); 44 | .transform(translate(3%, 0) scale(1)); 45 | } 46 | 47 | @media screen and (max-width:480px) { 48 | .fade, 49 | .fade-scale { 50 | opacity: 1; 51 | .transform(none); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /layout/index.ejs: -------------------------------------------------------------------------------- 1 | <% if (is_home()) { %> 2 | <%- partial('_partial/header', { 3 | title: config.title, 4 | hdClass: 'index-header' 5 | }) %> 6 |
7 | 27 | <%- partial('_partial/paginator') %> 28 |
29 | <% } %> -------------------------------------------------------------------------------- /layout/_partial/post/reward.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 |

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

8 |
9 | <% 10 | var wechat = theme.reward.wechat; 11 | var alipay = theme.reward.alipay; 12 | %> 13 |
14 | 打赏二维码 15 |
16 | <% if(!!wechat && !!alipay) { %> 17 | 26 | <% } %> 27 |
28 |
29 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /source/img/icons.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layout/_partial/footer.ejs: -------------------------------------------------------------------------------- 1 |
2 | <% if (theme.blogroll) { %> 3 |
4 | <% if (theme.blogroll) { %> 5 | <%- partial("_plugins/blogroll") %> 6 | <% } %> 7 |
8 | <% } %> 9 |
10 |

11 | 12 | <%-config.author %> © <%if (theme.since_year && theme.since_year < date(new Date(), "YYYY")) {%><%- theme.since_year %> - <%}%><%- date(new Date(), "YYYY") %> 13 | 14 | 15 | <% if(theme.ICP_license) {%> 16 | 17 | <%- theme.ICP_license %> 18 | 19 | <% } %> 20 | 21 | <% if(theme.power) {%> 22 | 23 | Power by Hexo Theme <%= config.theme%> 24 | 25 | <% } %> 26 | 27 | <% if(theme.hosted) {%> 28 | 29 | Hosted by Coding Pages 30 | 31 | <% } %> 32 | 33 | <% if (theme.visit_counter) { %> 34 | <%- partial("_plugins/site-visitor") %> 35 | <% } %> 36 |

37 |
38 |
39 | -------------------------------------------------------------------------------- /source/js/plugins/gitment.js: -------------------------------------------------------------------------------- 1 | let id = window.location.pathname; 2 | 3 | if (id === "/") { //home 4 | const idGroup = [...document.querySelectorAll(".post-comments-counter")].map(link => { 5 | return link.id; 6 | }); 7 | idGroup.forEach(id => { 8 | pageGitment(id); 9 | }); 10 | } else { 11 | pageGitment(id); 12 | } 13 | 14 | 15 | if (DC.g.lazy) { 16 | const main = document.getElementById("gitment"); 17 | const autoShow = /(#gitment-display-button)|(#gitment)$/.test(window.location.href); 18 | if (autoShow) { 19 | ShowGitment(); 20 | } 21 | function ShowGitment() { 22 | const moreBtn = document.getElementById("gitment-display-button"); 23 | if (moreBtn) { 24 | moreBtn.style.display = "none"; 25 | } 26 | main.classList.remove('hide'); 27 | const toggleRoot = document.querySelector(".post-comments-count.gitment-comments-count"); 28 | if (toggleRoot) { 29 | toggleRoot.parentNode.href = toggleRoot.parentNode.href.replace(/#gitment-display-button/, "#gitment"); 30 | } 31 | } 32 | } 33 | 34 | function pageGitment(id, onlyCounter) { 35 | const gitment = new Gitmint({ 36 | lang: 'en', 37 | id: id, 38 | owner: DC.g.owner, 39 | repo: DC.g.repo, 40 | oauth: { 41 | client_id: DC.g.oauth.client_id, 42 | client_secret: DC.g.oauth.client_secret 43 | }, 44 | perPage: DC.g.perPage 45 | }); 46 | gitment.render(document.getElementById("gitment")); 47 | } -------------------------------------------------------------------------------- /layout/_partial/tags-bar.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | if(type === 'categories' || type === 'tags'){ %> 3 |
4 | 39 | 40 |
41 | 42 |
43 |
44 | <% } %> 45 | -------------------------------------------------------------------------------- /source/css/_partial/imagebox.less: -------------------------------------------------------------------------------- 1 | .image-box { 2 | text-align: center; 3 | p{ 4 | font-size: @font-size - 2; 5 | font-weight: normal; 6 | color: @textSecondaryColor; 7 | } 8 | } 9 | 10 | .container{ 11 | 12 | img{ 13 | border-radius: 8px; 14 | display: block; 15 | margin: 0 auto; 16 | &.index-item-img{ 17 | width: 60%; 18 | } 19 | &.small{ 20 | max-width: 60%; 21 | } 22 | &.full{ 23 | border-radius: 0; 24 | } 25 | &.justify-small{ 26 | width: 60%; 27 | } 28 | &.justify-full{ 29 | max-width: initial; 30 | width: calc( ~"100% + 72px"); 31 | .transform(translateX(-36px)); 32 | border-radius: 0; 33 | } 34 | } 35 | 36 | .post-content{ 37 | img{ 38 | &.full{ 39 | width: initial; 40 | max-width: calc( ~"100% + 72px"); 41 | .transform(translateX(-36px)); 42 | } 43 | &.justify-full{ 44 | max-width: initial; 45 | width: calc( ~"100% + 72px"); 46 | .transform(translateX(-36px)); 47 | } 48 | } 49 | } 50 | .page-content{ 51 | .image-box{ 52 | padding-bottom: 2px @imp; 53 | } 54 | img{ 55 | &.full{ 56 | width: initial; 57 | max-width: calc( ~"100% + 40px"); 58 | .transform(translateX(-20px)); 59 | } 60 | &.justify-full{ 61 | max-width: initial; 62 | width: calc( ~"100% + 40px"); 63 | .transform(translateX(-20px)); 64 | } 65 | } 66 | } 67 | 68 | } -------------------------------------------------------------------------------- /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}` 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 | hexo.extend.tag.register('image', ([src, alt = '', title = '', imgClass = '']) => { 17 | return `
18 | ${alt} 19 |

${title || alt}

20 |
`; 21 | }); 22 | 23 | hexo.extend.filter.register('before_post_render', data => { 24 | // 包含图片的代码块 [\s\S]*\!\[(.*)\]\((.+)\)[\s\S]*<\/escape> 25 | // 行内图片 [^`]\s*\!\[(.*)\]\((.+)\)([^`]|$) 26 | data.content = data.content.replace(/.*\!\[(.*)\]\((.+)\).*<\/escape>|([^`]\s*|^)\!\[(.*)\]\((.+)\)([^`]|$)/gm, match => { 27 | 28 | // 忽略代码块中的图片 29 | if (/[\s\S]*<\/escape>|.?\s{3,}/.test(match)) { 30 | return match; 31 | } 32 | 33 | return match.replace(/\!\[(.*)\]\((.+)\)/, (img, alt, src) => { 34 | const attrs = src.split(' '); 35 | const title = (attrs[1] && attrs[1].replace(/\"|\'/g, '')) || ''; 36 | return `{% image ${attrs[0]} '${alt}' '${title}' %}` 37 | }) 38 | }); 39 | 40 | //删除xml的非法字符 41 | data.content = data.content.replace(/[\x00-\x08]|[\x0B-\x0C]|[\x0E-\x1F]/g, ""); 42 | return data; 43 | }); 44 | -------------------------------------------------------------------------------- /source/js/plugins/ios-orientationchange-fix.js: -------------------------------------------------------------------------------- 1 | /*! A fix for the iOS orientationchange zoom bug. 2 | Script by @scottjehl, rebound by @wilto. 3 | MIT / GPLv2 License. 4 | */ 5 | (function(w){ 6 | 7 | // This fix addresses an iOS bug, so return early if the UA claims it's something else. 8 | var ua = navigator.userAgent; 9 | if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){ 10 | return; 11 | } 12 | 13 | var doc = w.document; 14 | 15 | if( !doc.querySelector ){ return; } 16 | 17 | var meta = doc.querySelector( "meta[name=viewport]" ), 18 | initialContent = meta && meta.getAttribute( "content" ), 19 | disabledZoom = initialContent + ",maximum-scale=1", 20 | enabledZoom = initialContent + ",maximum-scale=10", 21 | enabled = true, 22 | x, y, z, aig; 23 | 24 | if( !meta ){ return; } 25 | 26 | function restoreZoom(){ 27 | meta.setAttribute( "content", enabledZoom ); 28 | enabled = true; 29 | } 30 | 31 | function disableZoom(){ 32 | meta.setAttribute( "content", disabledZoom ); 33 | enabled = false; 34 | } 35 | 36 | function checkTilt( e ){ 37 | aig = e.accelerationIncludingGravity; 38 | x = Math.abs( aig.x ); 39 | y = Math.abs( aig.y ); 40 | z = Math.abs( aig.z ); 41 | 42 | // If portrait orientation and in one of the danger zones 43 | if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){ 44 | if( enabled ){ 45 | disableZoom(); 46 | } 47 | } 48 | else if( !enabled ){ 49 | restoreZoom(); 50 | } 51 | } 52 | 53 | w.addEventListener( "orientationchange", restoreZoom, false ); 54 | w.addEventListener( "devicemotion", checkTilt, false ); 55 | 56 | })( this ); -------------------------------------------------------------------------------- /layout/_partial/script.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <% if (theme.waves) { %> 7 | 8 | <% } %> 9 | 10 | 11 | 12 | 13 | 14 | <% if (page.repo) { %> 15 | <%- partial("_third-party/github_repo") %> 16 | <% } %> 17 | 18 | <% if (theme.baidu_tongji) { %> 19 | <%- partial('_third-party/baidu_tongji') %> 20 | <% } %> 21 | 22 | <% if (theme.local_search) { %> 23 | <%- partial('_third-party/local_search') %> 24 | <% } %> 25 | 26 | <% if (theme.visit_counter) { %> 27 | <%- partial('_third-party/visit_counter') %> 28 | <% } %> 29 | 30 | <% if ( page.comments || typeof page.comments === "undefined" ) { %> 31 | <% if (theme.valine.enable) { %> 32 | <%- partial("_third-party/valine") %> 33 | <% } %> 34 | <% if (!theme.valine.enable && theme.gitment.enable) { %> 35 | <%- partial('_third-party/gitment') %> 36 | <% } %> 37 | <% } %> 38 | 39 | <% if (theme.leancloud_visitors.enable) { %> 40 | <%- partial('_third-party/leancloud_visitors') %> 41 | <% } %> 42 | 43 | <% if (theme.mathjax.enable && ( page.mathjax || typeof page.mathjax === "undefined" ) ) { %> 44 | <%- partial("_third-party/mathjax") %> 45 | <% } %> 46 | 47 | <% if (theme.title_change) { %> 48 | <%- partial("_third-party/dynamic_title") %> 49 | <% } %> 50 | 51 | <% if (theme.daovoice.app_id) { %> 52 | <%- partial("_third-party/daovoice") %> 53 | <% } %> 54 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | hexo-theme-mellow 2 | ================= 3 | [![](https://img.shields.io/badge/release-v1.4.4-blue.svg?style=flat-square)](https://github.com/codefine/hexo-theme-mellow/releases) 4 | [![](https://img.shields.io/badge/document-CN-green.svg?style=flat-square)](https://github.com/codefine/hexo-theme-mellow/wiki) 5 | [![](https://img.shields.io/badge/preview-Michael.Lu's%20blog-ff69b4.svg?style=flat-square)](https://blog.lujingtao.com) 6 | [![Join the chat at https://gitter.im/hexo-theme-mellow/Lobby](https://badges.gitter.im/hexo-theme-mellow/Lobby.svg)](https://gitter.im/codefine/hexo-theme-mellow?utm_source=share-link&utm_medium=link&utm_campaign=share-link) 7 | 8 | ![mellow](http://blog.lujingtao.com/uploads/show.jpg) 9 | 10 | Material Design 风格的Hexo主题,基于 **Hexo 3.0+** & **Node 7.x+** 制作。 **已经被Hexo官方收录**。 11 | 12 | > TODO: Internationalization 13 | 14 | ## Feature 15 | 16 | 1. 全端响应式主题。 17 | 2. 添加了英文字体支持 bluehost。 18 | 3. 添加了一些波纹效果。By [Waves](https://github.com/fians/Waves) 19 | 4. 无后端依赖的分享、浏览统计功能实现。 20 | 5. 完美集成valine以及gitment评论系统。 21 | 6. 基于静态数据的站内搜索,无第三方侵入。 22 | 7. 支持文章打赏。 23 | 8. 文章内可引入Github仓库。 24 | 9. 持续更新中... 25 | 26 | ## Document 27 | 28 | [文档 | Document](https://github.com/codefine/hexo-theme-mellow/wiki) 29 | 30 | ## ChangeLog 31 | 32 | 升级前请仔细查看更改内容,如非必要可不升级。 33 | 34 | [ChangeLog](https://github.com/codefine/hexo-theme-mellow/releases) 35 | 36 | ## FAQ 37 | 38 | 初次使用时`hexo g`报错,大部分情况是因为**缺少依赖**,或者依赖版本问题。前往[wiki-主题安装](https://github.com/codefine/hexo-theme-mellow/wiki/1.-%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%85)查看如何安装依赖。 39 | 40 | 打不开tags和categories等页面,是因为这两个页面并不属于hexo初始化范畴,需要手动创建。参考[wiki-菜单](https://github.com/codefine/hexo-theme-mellow/wiki/2.-%E4%B8%BB%E9%A2%98%E5%B8%B8%E8%A7%84%E9%85%8D%E7%BD%AE#%E8%8F%9C%E5%8D%95)中*开启与目录中对应页面方法* 41 | 42 | ## Community 43 | 44 | QQ群:527753185 45 | 46 | ## Users 47 | 48 | > 下方陈列长期使用mellow主题的博客地址,不定期更新。需要的话请提交issue并附上博客的在线地址。 49 | 50 | [yirufeng's Blog](http://www.sivan.tech) - http://www.sivan.tech 51 | 52 | [YuanLiChenAi](https://yuanlichenai.cn/) - https://yuanlichenai.cn/ 53 | 54 | [Zip的小窝](https://blog.ourfor.top/) - https://blog.ourfor.top/ 55 | 56 | [ZhangQiang's blog](https://zq-jhon.github.io/) - https://zq-jhon.github.io/ 57 | 58 | [Dandan Rhapsody](https://blog.dandan.tw/) - https://blog.dandan.tw/ 59 | -------------------------------------------------------------------------------- /layout/_partial/index-item.ejs: -------------------------------------------------------------------------------- 1 |
3 | <% if (theme.defaultthumb && !post.src) { %> 4 | <%- partial('post/thumb', {src: theme.defaultthumb, total: total}) %> 5 | <% } %> 6 | <% if (post.src) { %> 7 | <%- partial('post/thumb', {src: post.src, total: total}) %> 8 | <% } %> 9 | <% if (theme.top_icon && post.top) { %> 10 | <%- partial('post/top') %> 11 | <% } %> 12 | <% if (!theme.defaultthumb && !post.src) {%> 13 | <%- partial('post/title', { hasLink: true, tClass: "re-title" }) %> 14 | <% } %> 15 | 23 | 24 |
25 | <% 26 | post.excerpt = post.excerpt.replace(/(.+)<\/table>/, function(match, $1) { 27 | $1 = $1.replace(/
/g, ''); 28 | return `
${$1}
`; 29 | }); 30 | // 首页缩略图大小及路径处理 31 | post.excerpt = post.excerpt.replace(/(img\s)(.+)(\>)/g, (match, $1, attrs, $2) => { 32 | let [src, alt, title = '', imgClass = '' ] = attrs.split(' '); 33 | if ( !/src\=\"\//g.test(src) && !/src\=\"http/g.test(src) ) { // 过滤已经形成相对路径以及外链的src 34 | src = src.replace(/src\=\"/g, `src="${ url_for(post.path) }`); 35 | } 36 | imgClass = `class="index-item-img"`; 37 | let res = Array.of(src, alt, title, imgClass); 38 | return $1 + res.join(' ') + $2; 39 | }); 40 | %> 41 | <% if(theme.excerpt_render) { %> 42 | <%- post.excerpt || post.content %> 43 | <% } else { %> 44 | <%- post.excerpt ? post.excerpt : truncate(strip_html(post.content), { 45 | length: theme.excerpt_length 46 | }) %> 47 | <% } %> 48 | 49 | <%- theme.excerpt_link %> 50 | 51 |
52 |
53 | <% if(post.tags && post.tags.length){ %> 54 | 57 | <% } %> 58 | -------------------------------------------------------------------------------- /layout/_partial/head.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <% if(theme.canonical){ %> 4 | "> 5 | <% }%> 6 | <% 7 | var title = page.title; 8 | 9 | if (is_archive()){ 10 | title = theme.archives_title || 'Archives'; 11 | 12 | if (is_month()){ 13 | title += ': ' + page.year + '/' + page.month; 14 | } else if (is_year()){ 15 | title += ': ' + page.year; 16 | } 17 | } else if (is_category()){ 18 | title = (theme.categories_title || 'Categories') + ': ' + page.category; 19 | } else if (is_tag()){ 20 | title = (theme.tags_title || 'Tags') + ': ' + page.tag; 21 | } 22 | %> 23 | <% if (title){ %><%= title %> | <% } %><%= config.title %><% if (config.subtitle){ %> | <%= config.subtitle %><% } %> 24 | 25 | <% 26 | var keyWords = config.keywords; 27 | if(page.tags){ 28 | keyWords = []; 29 | 30 | _.isArray(page.tags) ? ( keyWords = page.tags ) 31 | : page.tags.each(function(k){ 32 | keyWords.push(k.name); 33 | }); 34 | } 35 | %> 36 | 37 | <%- favicon_tag(theme.favicon) %> 38 | 39 | 40 | <% if (!theme.valine.enable && theme.gitment.enable) { %> 41 | 42 | <% } %> 43 | 53 | 56 | <% if(theme.daovoice.app_id){ %> 57 | 58 | <% }%> 59 | 60 | -------------------------------------------------------------------------------- /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 | page.content = page.content.replace(/]+)>/g, function(img) { 9 | var src = img.match(/src="([^"]+)"/)[1]; 10 | var title = img.match(/title="([^"]+)"/) ? img.match(/title="([^"]+)"/)[1] : ''; 11 | var alt = img.match(/alt="([^"]+)"/) ? img.match(/alt="([^"]+)"/)[1] : ''; 12 | title = title !== img && title ? title : (alt !== img && alt ? alt : ""); 13 | return `${img}`; 14 | }); 15 | %> 16 |
17 |
18 |
19 | <% 20 | page.content = page.content.replace(/(.+)<\/table>/, function(match, $1) { 21 | $1 = $1.replace(/
/g, ''); 22 | return `
${$1}
`; 23 | }); 24 | %> 25 | <%- page.content.replace(/

}<\/p>/g, '

') 26 | .replace(/

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

' 28 | }) %> 29 |
30 | <% if (page.reward) { %> 31 | <%- partial('_partial/post/reward-btn') %> 32 | <% } %> 33 | <% if (page.share || typeof page.share === "undefined") { %> 34 |
35 | <%- image_tag(theme.avatar) %> 36 |
37 |

<%- config.author %>

38 |

<%- config.subtitle %>

39 |

<%- page.share %>

40 |
41 | <%- partial('_partial/post/share-fab') %> 42 |
43 | <% } %> 44 | <% if (page.comments || typeof page.comments === "undefined") { %> 45 |
46 | <%- partial('_partial/post/comment') %> 47 |
48 | <% } %> 49 |
50 | <% if (page.reward) { %> 51 | <%- partial('_partial/post/reward') %> 52 | <% } %> 53 |
54 | -------------------------------------------------------------------------------- /layout/_partial/post.ejs: -------------------------------------------------------------------------------- 1 |
3 |
4 |

<%- post.title %>

5 | 12 |
13 | <% 14 | post.content = post.content.replace(/]+)>/g, function(img) { 15 | var src = img.match(/src="([^"]+)"/)[1]; 16 | var title = img.match(/title="([^"]+)"/) ? img.match(/title="([^"]+)"/)[1] : ''; 17 | var alt = img.match(/alt="([^"]+)"/) ? img.match(/alt="([^"]+)"/)[1] : ''; 18 | title = title !== img && title ? title : (alt !== img && alt ? alt : ""); 19 | return `${img}`; 20 | }); 21 | post.content = post.content.replace(/(.+)<\/table>/, function(match, $1) { 22 | $1 = $1.replace(/
/g, ''); 23 | return `
${$1}
`; 24 | }); 25 | %> 26 | <%- post.content.replace(/

}<\/p>/g, '

') 27 | .replace(/

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

' 29 | }) %> 30 |
31 | <%- partial('post/copyright') %> 32 | <% if (post.reward || typeof post.reward === "undefined") { 33 | if (theme.reward.alipay || theme.reward.wechat) { %> 34 | <%- partial('post/reward-btn') %> 35 | <% } %> 36 | <% } %> 37 | 41 | <% if (post.comment || typeof post.comment === "undefined") { %> 42 | <%- partial('post/comment') %> 43 | <% } %> 44 |
45 | <%- partial('post/nav') %> 46 | <% if (page.repo) { %> 47 | <%- partial('post/repo') %> 48 | <% } %> 49 | <%- partial('post/toc', { post: page}) %> 50 |
51 | <% if (post.reward || typeof post.reward === "undefined") { 52 | if (theme.reward.alipay || theme.reward.wechat) { %> 53 | <%- partial('post/reward') %> 54 | <% } 55 | } %> 56 | -------------------------------------------------------------------------------- /source/js/blog.js: -------------------------------------------------------------------------------- 1 | $.BLOG = { 2 | init: function() { 3 | this.console(); 4 | this.basic(); 5 | this.menu(); 6 | setTimeout(function(THIS) { 7 | THIS.toc().scroll( $(window).scrollTop() ); 8 | THIS.toc().go(); 9 | }, 500, this); 10 | this.scroll(); 11 | this.resize(); 12 | this.goTop().active(); 13 | this.share(); 14 | this.header(); 15 | this.search().init(); 16 | this.reward(); 17 | this.waves(); 18 | this.mask(); 19 | this.waterfall(); 20 | this.footer(); 21 | this.tabBar(); 22 | }, 23 | console: function() { 24 | console.log('%cMellow','background:#aaa;color:#bada55', 'https://github.com/codefine/hexo-theme-mellow'); 25 | }, 26 | basic: function() { 27 | $.fixedClick(); 28 | $.page().loaded(); 29 | }, 30 | menu: function() { 31 | $.toggleMenu().init(); 32 | }, 33 | header: function(top) { 34 | if (!top) { 35 | var top = $(window).scrollTop(); 36 | } 37 | $.fixedHeader(top); 38 | }, 39 | footer: function() { 40 | $.initFooter(); 41 | }, 42 | toc: function() { 43 | var toc = $('#post-toc'); 44 | var repo = $('#repo'); 45 | return { 46 | scroll: function(top) { 47 | if (!toc.length) return; 48 | $.toc().fixed(top); 49 | $.toc().actived(top); 50 | }, 51 | go: function() { 52 | if (!toc.length && !repo.length) { 53 | $('.post-article').css("width", "100%"); 54 | return; 55 | }; 56 | $.toc().go(); 57 | } 58 | } 59 | }, 60 | goTop: function() { 61 | return { 62 | active: function() { 63 | $.toggleGoTop().active(); 64 | }, 65 | scroll: function(top) { 66 | $.toggleGoTop().scroll(top); 67 | } 68 | } 69 | }, 70 | share: function() { 71 | $.share(); 72 | }, 73 | search: function() { 74 | return { 75 | init: function() { 76 | $.search().init(); 77 | $.search().zoom(); 78 | }, 79 | zoom: function() { 80 | $.search().zoom(); 81 | }, 82 | } 83 | }, 84 | waves: function(){ 85 | $.waves(); 86 | }, 87 | reward: function() { 88 | $.reward(); 89 | }, 90 | mask: function() { 91 | $.mask(); 92 | }, 93 | waterfall: function() { 94 | $.waterfall(); 95 | }, 96 | tabBar: function() { 97 | $.tabBar(); 98 | }, 99 | scroll: function() { 100 | $(window).scroll(function() { 101 | var top = $(window).scrollTop(); 102 | $.BLOG.toc().scroll(top); 103 | $.BLOG.header(top); 104 | $.BLOG.goTop().scroll(top); 105 | $.BLOG.waterfall(); 106 | }); 107 | }, 108 | resize: function() { 109 | $(window).resize(function() { 110 | var top = $(window).scrollTop(); 111 | $.BLOG.toc().scroll(top); 112 | $.BLOG.search().zoom(); 113 | }); 114 | } 115 | }; 116 | 117 | $.BLOG.init(); -------------------------------------------------------------------------------- /layout/_partial/_third-party/github_repo.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layout/_partial/menu.ejs: -------------------------------------------------------------------------------- 1 | 68 | -------------------------------------------------------------------------------- /layout/_partial/header.ejs: -------------------------------------------------------------------------------- 1 | 23 |
24 | <%- fragment_cache('bg', function(){ 25 | return ``; 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 | <% if ( is_archive() ) { 39 | let postsLen = site.posts.length; 40 | let contentsLen = 0; 41 | site.posts.forEach((post) => { 42 | contentsLen += strip_html(post.content).length; 43 | }); 44 | contentsLen = (contentsLen / 1000).toFixed(1); 45 | %> 46 |
47 |

总计文章( <%= postsLen %> )篇,约( <%= contentsLen %>K )字

48 |

Keep moving😎!!!

49 |
50 | <% } %> 51 |
52 | <%- partial('tags-bar', { 53 | type: hdClass.split('-')[0] 54 | }) %> 55 |
56 | <% if (theme.local_search) { %> 57 | 69 | <% } %> -------------------------------------------------------------------------------- /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: @font-size + 6; 11 | color: @textPrimaryColorWhite; 12 | background: @rewardColor; 13 | .boxShadow(); 14 | &:hover, 15 | &:active { 16 | color: @textPrimaryColorWhite; 17 | text-decoration: none; 18 | } 19 | } 20 | 21 | .reward-title { 22 | font-size: @font-size + 3; 23 | position: relative; 24 | padding: 10px 30px; 25 | 26 | .icon-quote-left, 27 | .icon-quote-right { 28 | position: absolute; 29 | font-size: 80%; 30 | color: @dividerColor; 31 | } 32 | .icon-quote-left { 33 | top: 0; 34 | left: 0; 35 | } 36 | .icon-quote-right { 37 | bottom: 0; 38 | right: 0; 39 | } 40 | } 41 | .reward-lay { 42 | max-width: 100%; 43 | width: 360px; 44 | .close{ 45 | color: @primaryColor_2; 46 | } 47 | } 48 | .reward-content { 49 | margin: 20px 0; 50 | } 51 | .reward-code { 52 | width: 200px; 53 | height: 200px; 54 | margin: 0 auto; 55 | } 56 | 57 | .reward-toggle { 58 | position: relative; 59 | display: block; 60 | width: 120px; 61 | overflow: hidden; 62 | margin: 40px auto 0; 63 | border-radius: 3px; 64 | cursor: pointer; 65 | .boxShadow(); 66 | 67 | &-check { 68 | position: absolute; 69 | visibility: hidden; 70 | &:checked { 71 | +.reward-toggle-ctrol { 72 | .transform(translate3d(-60px, 0, 0)) 73 | } 74 | } 75 | } 76 | 77 | &-ctrol { 78 | display: flex; 79 | width: 180px; 80 | height: 30px; 81 | line-height: 30px; 82 | background: #eee; 83 | border-radius: 3px; 84 | overflow: hidden; 85 | user-select: none; 86 | .transition(.1s) 87 | } 88 | 89 | &-item, 90 | &-label { 91 | flex: 0 0 auto; 92 | width: 60px; 93 | height: 100%; 94 | } 95 | 96 | &-item { 97 | position: relative; 98 | z-index: 2; 99 | height: 100%; 100 | text-align: center; 101 | color: @textPrimaryColorWhite; 102 | font-size: @font-size - 2; 103 | box-shadow: inset 0 0 15px saturate(@textPrimaryColorBlack, 0.4); 104 | } 105 | .alipay { 106 | background: @alipayColor; 107 | } 108 | .wechat { 109 | background: @weChatColor; 110 | } 111 | } 112 | 113 | @media screen and (max-width:760px) { 114 | .reward-title { 115 | font-size: @font-size + 3; 116 | } 117 | } 118 | 119 | @media screen and (max-width: 480px) { 120 | .reward-lay { 121 | border-radius: 0 122 | } 123 | .reward-content { 124 | margin: 0; 125 | } 126 | .reward-toggle { 127 | margin: 20px auto 0 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /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 | 57 |
58 | 59 | <% if(scope === 'global') { %> 60 |
61 | 62 |

扫一扫,分享到微信

63 | 微信分享二维码 64 |
65 | <% } %> 66 | -------------------------------------------------------------------------------- /source/js/plugins/leancloud_visitors.js: -------------------------------------------------------------------------------- 1 | function showTime(Counter) { 2 | var query = new AV.Query(Counter); 3 | var entries = []; 4 | var $visitors = $(".leancloud_visitors"); 5 | 6 | $visitors.each(function () { 7 | entries.push($(this).attr("id").trim()); 8 | }); 9 | 10 | query.containedIn('url', entries); 11 | query.find().done(function (results) { 12 | var COUNT_CONTAINER_REF = '.leancloud-visitors-count'; 13 | if (results.length === 0) { 14 | $visitors.find(COUNT_CONTAINER_REF).text(0); 15 | return; 16 | } 17 | 18 | for (var i = 0; i < results.length; i++) { 19 | var item = results[i]; 20 | var url = item.get('url'); 21 | var time = item.get('time'); 22 | var element = document.getElementById(url); 23 | $(element).find(COUNT_CONTAINER_REF).text(time); 24 | } 25 | 26 | for (var i = 0; i < entries.length; i++) { 27 | var url = entries[i]; 28 | var element = document.getElementById(url); 29 | var countSpan = $(element).find(COUNT_CONTAINER_REF); 30 | if (countSpan.text() == '') { 31 | countSpan.text(0); 32 | } 33 | } 34 | }).fail(function (object, error) { 35 | console.log("Error: " + error.code + " " + error.message); 36 | }); 37 | } 38 | 39 | function addCount(Counter) { 40 | 41 | var $visitors = $(".leancloud_visitors"); 42 | var url = $visitors.attr('id').trim(); 43 | var title = $visitors.attr('data-flag-title').trim(); 44 | var query = new AV.Query(Counter); 45 | 46 | query.equalTo("url", url); 47 | query.find({ 48 | success: function (results) { 49 | if (results.length > 0) { 50 | var counter = results[0]; 51 | counter.fetchWhenSave(true); 52 | counter.increment("time"); 53 | counter.save(null, { 54 | success: function (counter) { 55 | var $element = $(document.getElementById(url)); 56 | $element.find('.leancloud-visitors-count').text(counter.get('time')); 57 | }, 58 | error: function (counter, error) { 59 | console.log('Failed to save Visitor num, with error message: ' + error.message); 60 | } 61 | }); 62 | } else { 63 | var newcounter = new Counter(); 64 | /* Set ACL */ 65 | var acl = new AV.ACL(); 66 | acl.setPublicReadAccess(true); 67 | acl.setPublicWriteAccess(true); 68 | newcounter.setACL(acl); 69 | /* End Set ACL */ 70 | newcounter.set("title", title); 71 | newcounter.set("url", url); 72 | newcounter.set("time", 1); 73 | newcounter.save(null, { 74 | success: function (newcounter) { 75 | var $element = $(document.getElementById(url)); 76 | $element.find('.leancloud-visitors-count').text(newcounter.get('time')); 77 | }, 78 | error: function (newcounter, error) { 79 | console.log('Failed to create'); 80 | } 81 | }); 82 | } 83 | }, 84 | error: function (error) { 85 | console.log('Error:' + error.code + " " + error.message); 86 | } 87 | }); 88 | } 89 | 90 | AV.initialize(DC.lv.app_id, DC.lv.app_key); 91 | 92 | var Counter = AV.Object.extend("Counter"); 93 | 94 | if ($('.leancloud_visitors').length == 1) { 95 | addCount(Counter); 96 | } else if ($('.post-title-link').length > 1) { 97 | showTime(Counter); 98 | } 99 | -------------------------------------------------------------------------------- /source/css/_partial/tags.less: -------------------------------------------------------------------------------- 1 | .tabs-bar { 2 | position: relative; 3 | padding: 0; 4 | margin-top: 14px; 5 | 6 | &.expand { 7 | text-align: left; 8 | overflow: visible; 9 | text-shadow: none; 10 | height: 76px; 11 | .tags-list { 12 | position: absolute; 13 | top: 0; 14 | left: 0; 15 | display: block; 16 | padding: 16px 0; 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: 12px 1em; 25 | color: @textSecondaryColor; 26 | &:hover { 27 | opacity: .7; 28 | text-decoration: underline; 29 | } 30 | &:after { 31 | display: none; 32 | } 33 | &.active { 34 | color: @textPrimaryColorWhite; 35 | background: @primaryColor_2; 36 | border-radius: .2em 37 | } 38 | } 39 | 40 | .tags-list-more .action{ 41 | color: @primaryColor_1; 42 | } 43 | } 44 | } 45 | .tags-list { 46 | font-size: 0; 47 | position: relative; 48 | left: 0; 49 | top: 0; 50 | z-index: 1; 51 | width: 100%; 52 | overflow-x: hidden; 53 | overflow-y: hidden; 54 | margin: 0 auto; 55 | list-style: none; 56 | padding: 16px 0; 57 | white-space: nowrap; 58 | .transition(.2s); 59 | 60 | .flex-row; 61 | } 62 | 63 | .tags-list-item { 64 | font-size: @font-size !important; 65 | position: relative; 66 | -webkit-box-flex: none; 67 | -webkit-flex: none; 68 | -ms-flex: none; 69 | flex: none; 70 | padding: 12px 1em; 71 | line-height: 20px; 72 | color: saturate(@textPrimaryColorWhite, 0.8); 73 | border-radius: .2em .2em 0 0; 74 | &:after { 75 | content: ''; 76 | position: absolute; 77 | bottom: 0; 78 | left: 0; 79 | width: 100%; 80 | height: 3px; 81 | } 82 | &.active { 83 | color: @textPrimaryColorWhite; 84 | &:after { 85 | background: @primaryColor_2 86 | } 87 | } 88 | &:hover, 89 | &:active { 90 | color: @textPrimaryColorWhite; 91 | text-decoration: none; 92 | } 93 | } 94 | 95 | .tags-list-more { 96 | position: absolute; 97 | right: 0; 98 | top: 0; 99 | z-index: 2; 100 | height: 44px; 101 | 102 | .action { 103 | width: 44px; 104 | height: 44px; 105 | line-height: 20px; 106 | border-radius: 50%; 107 | .transition(.2s); 108 | } 109 | } 110 | 111 | @media screen and (max-width:760px) { 112 | .tabs-bar { 113 | // margin-left: -16px; 114 | // margin-right: -16px; 115 | // padding: 0 0 0 16px; 116 | width: 100%; 117 | } 118 | 119 | .tags-list { 120 | overflow-x: auto; 121 | &::-webkit-scrollbar { 122 | display: none 123 | } 124 | } 125 | 126 | .tags-list-more { 127 | top: -14px; 128 | // display: none; 129 | } 130 | } -------------------------------------------------------------------------------- /source/css/_partial/search.less: -------------------------------------------------------------------------------- 1 | #site_search_btn{ 2 | float: right; 3 | } 4 | 5 | #site_search{ 6 | margin: -@searchHeight/2 -@searchWidth/2 0 0; 7 | width: @searchWidth; 8 | height: @searchHeight; 9 | background: @backColor; 10 | position: fixed; 11 | z-index: 120; 12 | right: 50vw; 13 | top: 50vh; 14 | overflow: hidden; 15 | .transform(scale(0, 0)); 16 | .transition(0.2s); 17 | border-radius: 4px; 18 | box-shadow: @boxShadow; 19 | 20 | &.shrink{ 21 | width: calc( ~"@searchWidth - @menuWidth" ); 22 | } 23 | &.in{ 24 | .transform(scale(1, 1)); 25 | } 26 | 27 | .search-title{ 28 | line-height: 2.5em; 29 | border-radius: 0 0 4px 4px; 30 | .boxShadow(@s:.4s); 31 | background: @textPrimaryColorWhite; 32 | position: relative; 33 | z-index: 1; 34 | 35 | span{ 36 | text-align: center; 37 | width: 2.5em; 38 | height: 2.5em; 39 | line-height: 2.5em; 40 | border-radius: 50%; 41 | color: @primaryColor_2; 42 | background: none; 43 | } 44 | .close{ 45 | color: @primaryColor_2; 46 | } 47 | input{ 48 | width: calc( ~"100% - 5em" ); 49 | line-height: 2.5em; 50 | border: none; 51 | text-indent: 4px; 52 | color: @textPrimaryColorBlack; 53 | } 54 | } 55 | 56 | #local-search-result{ 57 | width: 100%; 58 | height: calc( ~"100% - 2.5em" ); 59 | position: relative; 60 | overflow-y: scroll; 61 | #no-result{ 62 | margin: -50px 0 0 -50px; 63 | width: 100px; 64 | height: 100px; 65 | line-height: 100px; 66 | text-align: center; 67 | position: absolute; 68 | left: 50%; 69 | top: 50%; 70 | color: @textSecondaryColor; 71 | } 72 | 73 | } 74 | 75 | .search-result-list{ 76 | a:hover{ 77 | text-decoration: none; 78 | } 79 | 80 | .search-result-title{ 81 | font-size: @font-size + 2; 82 | color: @primaryColor_1; 83 | text-decoration: underline; 84 | font-weight: bold; 85 | &:hover{ 86 | text-decoration: underline; 87 | } 88 | } 89 | 90 | .search-result{ 91 | font-size: @font-size; 92 | line-height: 26px; 93 | margin: 10px 32px 20px 0; 94 | color: @textSecondaryColor; 95 | border-bottom: 1px dashed @dividerColor; 96 | padding: 5px 0; 97 | word-wrap: break-word; 98 | .transition(0.4s); 99 | 100 | &:hover{ 101 | color: @textPrimaryColorBlack; 102 | } 103 | 104 | .search-keyword{ 105 | border-bottom: 1px dashed @primaryColor_2; 106 | font-weight: bold; 107 | color: @primaryColor_2; 108 | } 109 | 110 | } 111 | } 112 | 113 | 114 | } 115 | 116 | 117 | &::-webkit-input-placeholder { 118 | color: @lightPrimaryColor 119 | } 120 | 121 | @media screen and (max-width:760px) { 122 | 123 | #site_search{ 124 | margin: 0; 125 | width: 100vw; 126 | height: 100vh; 127 | border-radius: 0; 128 | right: 0; 129 | top: 0; 130 | } 131 | 132 | } -------------------------------------------------------------------------------- /source/css/_partial/header.less: -------------------------------------------------------------------------------- 1 | .top-header { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | width: 100%; 6 | color: @textPrimaryColorWhite; 7 | height: @topBarH; 8 | .transition(0.2s); 9 | z-index: 30; 10 | text-shadow: 2px 2px 10px rgba(0,0,0,0.6); 11 | &.fixed { 12 | box-shadow: 0 4px 6px rgba(0,0,0,.6); 13 | background: fade(@primaryColor_1, 90%); 14 | // box-shadow: @boxShadow; 15 | // background: @primaryColor_1; 16 | .header-title { 17 | visibility: visible; 18 | } 19 | 20 | } 21 | 22 | } 23 | 24 | .header-icon { 25 | width: @topBarH; 26 | height: @topBarH; 27 | line-height: @topBarH; 28 | text-align: center; 29 | color: @textPrimaryColorWhite; 30 | 31 | &:hover { 32 | color: @textPrimaryColorWhite; 33 | } 34 | } 35 | 36 | .header-title { 37 | visibility: hidden; 38 | font-weight: bold; 39 | line-height: 56px; 40 | font-size: @font-size; 41 | text-align: center; 42 | white-space: nowrap; 43 | transition: text-indent 0.4s ease-in-out; 44 | &.push{ 45 | text-indent: 200px; 46 | } 47 | } 48 | 49 | .header-description{ 50 | font-weight: normal; 51 | } 52 | 53 | .content-header { 54 | height: @headerH; 55 | color: @textPrimaryColorWhite; 56 | background: @primaryColor_1; 57 | background-repeat: no-repeat; 58 | background-size: 100% 100%; 59 | background-position: center center; 60 | text-shadow: 0 1px 1px rgba(0, 0, 0, .2); 61 | box-shadow: @boxShadow; 62 | position: relative; 63 | text-align: center; 64 | 65 | .subtitle { 66 | font-weight: normal; 67 | padding-top: 6px; 68 | color: @textPrimaryColorWhite; 69 | text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); 70 | } 71 | 72 | .title { 73 | font-weight: bold; 74 | text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); 75 | } 76 | 77 | .article-category-list-link { 78 | color: lighten(@primaryColor_2, 10%); 79 | } 80 | 81 | .header-bg{ 82 | width: 100%; 83 | height: 100%; 84 | position: absolute; 85 | left: 0; 86 | top: 0; 87 | } 88 | 89 | .container{ 90 | position: absolute; 91 | left: 50%; 92 | top: 50%; 93 | .transform(translate(-50%, -50%)); 94 | 95 | &.tabs-bar{ 96 | top: initial; 97 | bottom: 0; 98 | .transform(translate(-50%, 0)); 99 | } 100 | } 101 | } 102 | 103 | .post-header { 104 | 105 | .title, .subtitle { 106 | visibility: hidden; 107 | } 108 | } 109 | .tags-header, 110 | .categories-header { 111 | position: relative; 112 | z-index: 6; 113 | padding-bottom: 0!important 114 | } 115 | 116 | @media screen and (max-width:1240px) { 117 | 118 | .header-title { 119 | text-align: left; 120 | text-indent: 0; 121 | } 122 | 123 | } 124 | 125 | @media screen and (max-width:760px) { 126 | .content-header { 127 | height: @headerH * 0.5; 128 | margin: 0; 129 | // min-height: auto; 130 | padding: 80px 16px 20px; 131 | 132 | .title { 133 | font-size: @font-size + 10; 134 | line-height: 30px; 135 | } 136 | 137 | .subtitle { 138 | font-size: @font-size; 139 | line-height: 20px 140 | } 141 | 142 | } 143 | 144 | .post-header { 145 | .title, .subtitle { 146 | visibility: visible; 147 | } 148 | } 149 | 150 | } 151 | -------------------------------------------------------------------------------- /source/css/_partial/archives.less: -------------------------------------------------------------------------------- 1 | .archive-separator { 2 | margin: 35px 0 13px; 3 | color: @primaryColor_1; 4 | font-size: @font-size; 5 | 6 | &:first-child { 7 | margin-top: 10px; 8 | } 9 | } 10 | 11 | .article-card { 12 | padding: 16px 20px 0; 13 | .card(); 14 | .boxShadow(); 15 | 16 | .post-content { 17 | word-break: break-word; 18 | position: relative; 19 | z-index: 1; 20 | 21 | .highlight, 22 | > pre { 23 | margin-left: -20px; 24 | margin-right: -20px; 25 | padding: 20px; 26 | } 27 | } 28 | 29 | .post-time { 30 | line-height: 24px; 31 | font-weight: bold; 32 | } 33 | 34 | .post-footer { 35 | margin: 0 -20px; 36 | padding: 12px 20px 8px; 37 | } 38 | 39 | .top{ 40 | .tip-left(); 41 | @topSize: 20px; 42 | width: @topSize; 43 | height: @topSize; 44 | position: absolute; 45 | top: 0; 46 | right: 0; 47 | z-index: 1; 48 | .top-wrap{ 49 | width: @topSize; 50 | height: @topSize; 51 | position: absolute; 52 | top: 0; 53 | right: 0; 54 | border-radius: 0 3px 0 0; 55 | overflow: hidden; 56 | 57 | p{ 58 | position: absolute; 59 | left: 0; 60 | top: -12px; 61 | width: @topSize; 62 | height: @topSize; 63 | border-top: @topSize solid @primaryColor_2; 64 | border-left: @topSize solid transparent; 65 | } 66 | } 67 | &:before { 68 | content: 'TOP:'attr(data-title); 69 | } 70 | 71 | } 72 | 73 | } 74 | 75 | .archive-article { 76 | .post-meta{ 77 | text-align: left; 78 | } 79 | .post-title { 80 | font-size: @font-size + 4; 81 | margin-bottom: 0; 82 | padding-bottom: 16px; 83 | text-align: left; 84 | position: relative; 85 | left: 0; 86 | top: 0; 87 | background: initial; 88 | line-height: 32px; 89 | text-overflow: initial; 90 | overflow: initial; 91 | white-space: initial; 92 | .post-title-link{ 93 | color: @primaryColor_1; 94 | } 95 | } 96 | } 97 | .waterfall { 98 | position: relative; 99 | margin: 10px -10px -20px; 100 | .fade; 101 | } 102 | .waterfall-item { 103 | position: absolute; 104 | width: 50%; 105 | padding: 0 10px 20px; 106 | } 107 | 108 | @media screen and (max-width:760px) { 109 | .archive-article { 110 | display: block; 111 | margin: 0 -16px; 112 | padding: 16px 16px 8px; 113 | border-bottom: 1px solid @borderColor; 114 | .post-footer { 115 | border-top: none; 116 | padding-top: 0; 117 | padding-bottom: 0; 118 | } 119 | } 120 | 121 | .article-card { 122 | border-radius: 0; 123 | .top{ 124 | right: 0; 125 | .top-wrap{ 126 | border-radius: 0; 127 | } 128 | } 129 | } 130 | 131 | .archive-separator { 132 | margin-top: 16px; 133 | } 134 | 135 | .waterfall { 136 | margin: 0; 137 | height: auto!important; 138 | opacity: 1; 139 | .transform(translateY(0)); 140 | } 141 | 142 | .waterfall-item { 143 | position: static; 144 | width: 100%; 145 | padding: 0; 146 | } 147 | } 148 | 149 | @media screen and (max-width:420px) { 150 | .archive-article { 151 | padding: 16px 16px 0; 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /source/css/_partial/repo.less: -------------------------------------------------------------------------------- 1 | #repo{ 2 | width: @asideW; 3 | height: @asideW / 2; 4 | background: @githubCardColor; 5 | border-radius: 4px; 6 | position: absolute; 7 | overflow: hidden; 8 | cursor: pointer; 9 | right: -@asideW - 30px; 10 | top: 14px; 11 | .boxShadow(); 12 | z-index: 2; 13 | p{ 14 | margin: 0; 15 | } 16 | 17 | .loading{ 18 | width: 50px; 19 | height: 50px; 20 | background: url(../../img/refresh.png) no-repeat center center; 21 | background-size: cover; 22 | position: absolute; 23 | left: 50%; 24 | top: 50%; 25 | margin: -25px 0 0 -25px; 26 | &.active{ 27 | animation: rotate 2s linear infinite; 28 | } 29 | } 30 | 31 | .top{ 32 | width: 100%; 33 | height: 70px; 34 | color: #fff; 35 | padding: 5px 5px; 36 | opacity: 0; 37 | transition: 0.4s ease-out; 38 | &.active{ 39 | opacity: 1; 40 | } 41 | 42 | .avatar{ 43 | width: 50px; 44 | height: 50px; 45 | background: url(../../img/github.png) no-repeat center center; 46 | background-size: 100% 100%; 47 | margin: 5px 10px; 48 | border-radius: 50%; 49 | transition: 0.3s; 50 | } 51 | 52 | .content>p{ 53 | width: 120px; 54 | line-height: 30px; 55 | font-size: 13px; 56 | text-overflow: ellipsis; 57 | overflow: hidden; 58 | white-space: nowrap; 59 | font-family: @font; 60 | 61 | &:last-of-type{ 62 | font-weight: bold; 63 | } 64 | } 65 | } 66 | 67 | .bottom{ 68 | margin: 0; 69 | padding: 0; 70 | width: 100%; 71 | height: 30px; 72 | line-height: 30px; 73 | background: rgba(0, 0, 0, .2); 74 | text-align: center; 75 | color: #fff; 76 | transform: translateY(30px); 77 | transition: 0.2s ease-in-out; 78 | &.active{ 79 | transform: translateY(0); 80 | } 81 | 82 | li{ 83 | padding: 0 8px; 84 | display: inline-block; 85 | } 86 | 87 | .val{ 88 | font-size: 13px; 89 | transition: 0.3s; 90 | } 91 | } 92 | 93 | .link{ 94 | width: 0; 95 | height: 0; 96 | visibility: hidden; 97 | } 98 | } 99 | 100 | 101 | @keyframes rotate { 102 | 0%{ 103 | transform: rotate(0deg); 104 | } 105 | 100%{ 106 | transform: rotate(360deg); 107 | } 108 | } 109 | 110 | // @media screen and (max-width:1040px) { 111 | // #repo{ 112 | // right: 34px; 113 | // top: 140px; 114 | // } 115 | // } 116 | 117 | @media screen and (max-width:1040px) { 118 | #repo{ 119 | width: 80px; 120 | right: -80px - 8px; 121 | // right: -@asideW + 60px; 122 | .top>.content{ 123 | display: none; 124 | } 125 | 126 | .bottom>li{ 127 | padding: 0 4px; 128 | } 129 | .bottom>.date{ 130 | display: none; 131 | } 132 | } 133 | } 134 | 135 | @media screen and (max-width:760px) { 136 | #repo{ 137 | width: 40px; 138 | height: 40px; 139 | right: 8px; 140 | top: -72px; 141 | .loading{ 142 | width: 30px; 143 | height: 30px; 144 | margin: -15px 0 0 -15px; 145 | } 146 | .top{ 147 | padding: 0; 148 | .avatar{ 149 | margin: 8px; 150 | width: 24px; 151 | height: 24px; 152 | } 153 | } 154 | } 155 | } -------------------------------------------------------------------------------- /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: saturate(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/_partial/share.less: -------------------------------------------------------------------------------- 1 | .share-icons { 2 | li { 3 | display: inline-block; 4 | } 5 | 6 | .icon-square:before { 7 | display: inline-block; 8 | text-align: center; 9 | color: saturate(@textPrimaryColorBlack, 0); 10 | border-radius: .2em; 11 | } 12 | 13 | a { 14 | display: inline-block; 15 | border-radius: .2em; 16 | color: @textPrimaryColorWhite; 17 | text-align: center; 18 | &.weibo { 19 | background: @color-weibo 20 | } 21 | 22 | &.qq { 23 | background: @color-qq 24 | } 25 | 26 | &.weixin { 27 | background: @color-weixin 28 | } 29 | 30 | &.facebook { 31 | background: @color-facebook 32 | } 33 | 34 | &.twitter { 35 | background: @color-twitter 36 | } 37 | 38 | &.google { 39 | background: @color-google-plus 40 | } 41 | 42 | } 43 | 44 | } 45 | 46 | .global-share { 47 | position: fixed; 48 | top: 56px; 49 | right: 56px; 50 | z-index: 96; 51 | width: 260px; 52 | padding: 16px 6px; 53 | background: #fff; 54 | border-radius: 3px; 55 | visibility: hidden; 56 | .boxShadow(.3s); 57 | .transform(scale(0)); 58 | transform-origin: top right; 59 | -webkit-transform-origin: top right; 60 | 61 | &.in { 62 | visibility: visible; 63 | .transform(none); 64 | } 65 | 66 | .share-icons { 67 | margin: 0 auto; 68 | } 69 | 70 | li { 71 | width: 80px; 72 | text-align: center; 73 | } 74 | 75 | a { 76 | position: relative; 77 | width: 40px; 78 | height: 40px; 79 | line-height: 40px; 80 | margin-bottom: 20px; 81 | font-size: 1.33333333em; 82 | &:after { 83 | position: absolute; 84 | bottom: -22px; 85 | left: 50%; 86 | content: attr(data-title); 87 | white-space: nowrap; 88 | line-height: 20px; 89 | font-size: @font-size - 2; 90 | color: @primaryColor_1; 91 | .transform(translateX(-50%)); 92 | } 93 | 94 | } 95 | 96 | } 97 | 98 | @share-fab-size: 42px; 99 | @share-icon-size: @share-fab-size - 8px; 100 | 101 | .page-share-fab { 102 | display: block; 103 | width: @share-fab-size; 104 | height: @share-fab-size; 105 | line-height: @share-fab-size; 106 | color: @primaryColor_2; 107 | background: @copyrightColor; 108 | .boxShadow(); 109 | &:hover{ 110 | color: @primaryColor_2; 111 | } 112 | } 113 | 114 | .page-share-wrap { 115 | position: absolute; 116 | right: 35px; 117 | top: @share-fab-size / -2; 118 | z-index: 2; 119 | .page-share { 120 | visibility: hidden 121 | } 122 | } 123 | 124 | .page-share { 125 | position: absolute; 126 | right: @share-fab-size + 8px; 127 | top: ( @share-fab-size - @share-icon-size ) / 2; 128 | text-align: center; 129 | width: (@share-icon-size + 4px) * 6; 130 | 131 | &.in { 132 | visibility: visible; 133 | .share-icons a { 134 | opacity: 1; 135 | .transform(scale(1)); 136 | } 137 | } 138 | 139 | .share-icons { 140 | text-align: right; 141 | font-size: 0; 142 | a { 143 | width: @share-icon-size; 144 | height: @share-icon-size; 145 | line-height: @share-icon-size; 146 | font-size: 1.33333rem; 147 | border-radius: 50%; 148 | .tip-top(); 149 | .boxShadow(.3s); 150 | opacity: 0; 151 | .transform(scale(0)); 152 | -webkit-transform-origin: right center; 153 | transform-origin: right center; 154 | 155 | &:before { 156 | content: '分享到'attr(data-title); 157 | } 158 | 159 | } 160 | 161 | li { 162 | margin-left: 4px; 163 | } 164 | 165 | } 166 | } 167 | 168 | .wx-share { 169 | p { 170 | margin: 0 0 15px; 171 | } 172 | 173 | img { 174 | width: 200px; 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /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: @font-size; 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: @primaryColor_2; // 行号色 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-top: 0; 47 | padding-bottom: 0; 48 | padding-left: 0; 49 | } 50 | 51 | .line { 52 | height: @h-fs*1.6; 53 | line-height: @h-fs*1.6; 54 | } 55 | 56 | table { 57 | margin: 0; 58 | width: auto; 59 | } 60 | 61 | td { 62 | border: none; 63 | } 64 | 65 | tr, 66 | td { 67 | border-collapse: collapse; 68 | padding: 0; 69 | margin: 0; 70 | } 71 | 72 | figcaption { 73 | font-size: 0.85em; 74 | color: @h-comment; 75 | line-height: 1em; 76 | margin-bottom: 1em; 77 | 78 | a { 79 | float: right 80 | } 81 | 82 | } 83 | 84 | .gutter pre { 85 | .line-numbers(); 86 | text-align: right; 87 | padding-right: 20px; 88 | } 89 | 90 | 91 | } 92 | 93 | .gist { 94 | background: @h-background; 95 | 96 | tr, td { 97 | height: auto; 98 | } 99 | 100 | .gist-file { 101 | border: none; 102 | font-family: @font-code; 103 | 104 | .highlight { 105 | margin: 0; 106 | padding: 0; 107 | border: none; 108 | } 109 | 110 | } 111 | .gist-data { 112 | border: none; 113 | 114 | .line-numbers { 115 | .line-numbers(); 116 | background: none; 117 | border: none; 118 | padding: 0 20px 0 0 119 | } 120 | 121 | .line-data { 122 | padding: 0 !important 123 | } 124 | 125 | } 126 | 127 | .gist-meta { 128 | background: @h-background; 129 | color: @h-comment; 130 | font: 0.85em @font-code; 131 | 132 | a { 133 | color: @primaryColor_2; 134 | font-weight: normal; 135 | 136 | &:hover { 137 | text-decoration: underline 138 | } 139 | 140 | } 141 | 142 | } 143 | 144 | } 145 | 146 | } 147 | 148 | pre { 149 | .comment { 150 | color: @h-comment 151 | } 152 | 153 | .tag { 154 | color: @h-comment 155 | } 156 | 157 | .variable, 158 | .title, 159 | .type, 160 | .regexp, 161 | .ruby .constant, 162 | .xml .tag .title, 163 | .xml .pi, 164 | .xml .doctype, 165 | .html .doctype, 166 | .selector-pseudo, 167 | .css .id, 168 | .css .class, 169 | .css .pseudo, 170 | .tag .name { 171 | color: @h-red 172 | } 173 | 174 | .class, 175 | .number, 176 | .preprocessor, 177 | .built_in, 178 | .literal, 179 | .params, 180 | .constant { 181 | color: @h-orange 182 | } 183 | 184 | .attribute, 185 | .label, 186 | .ruby .class .title, 187 | .css .rules .attribute, 188 | .tag .attr { 189 | color: @h-green 190 | } 191 | 192 | .string, 193 | .value, 194 | .inheritance, 195 | .header, 196 | .ruby .symbol, 197 | .xml .cdata { 198 | color: @h-blue 199 | } 200 | 201 | .selector-tag, 202 | .css .hexcolor, 203 | .css .tag { 204 | color: @h-aqua 205 | } 206 | 207 | .function, 208 | .python .decorator, 209 | .python .title, 210 | .ruby .function .title, 211 | .ruby .title .keyword, 212 | .perl .sub, 213 | .javascript .title, 214 | .coffeescript .title { 215 | color: @h-blue 216 | } 217 | 218 | .selector-id, 219 | .selector-class, 220 | .keyword, 221 | .javascript .function { 222 | color: @h-purple 223 | } 224 | 225 | } 226 | @media screen and(max-width:760px) { 227 | .post-content .highlight { 228 | margin-left: -16px; 229 | margin-right: -16px; 230 | padding: 20px 16px; 231 | } 232 | } -------------------------------------------------------------------------------- /source/css/_partial/variable.less: -------------------------------------------------------------------------------- 1 | // font 2 | @font-bluehost: "fonts/bluehost"; 3 | @font: Bluehost, "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif; 4 | @font-code: Consolas, Monaco, courier, monospace; 5 | @font-en: "MV Boli", Bluehost, serif; 6 | // font-size 7 | @font-size: 14px; 8 | // Palette generated by Material Palette - materialpalette.com/indigo/pink 9 | @primaryColor_1: #424242; 10 | @primaryColor_2: #b71c1c; 11 | @darkPrimaryColor: darken(@primaryColor_1, 5%); 12 | @lightPrimaryColor: lighten(@primaryColor_1, 5%); 13 | @textPrimaryColorWhite: #fff; 14 | @textPrimaryColorBlack: #000; 15 | @textCardTitle: #fff; 16 | @textSecondaryColor: lighten(@textPrimaryColorBlack, 40%); 17 | @thumbHoverColor: #000; 18 | @linkHoverColor: lighten(@primaryColor_2, 20%); 19 | @copyrightColor: lighten(@primaryColor_1, 70%); 20 | @dividerColor: lighten(@textPrimaryColorBlack, 60%); 21 | @borderColor: lighten(@textPrimaryColorBlack, 70%); 22 | @backColor: lighten(@textPrimaryColorBlack, 95%); 23 | @alipayColor: #1e88e5; 24 | @weChatColor: #4caf50; 25 | @rewardColor: #d50000; 26 | @githubCardColor: lighten(#424242, 20%); 27 | // tags color 28 | @tag-color-1: #03a9f4; 29 | @tag-color-2: #ff4081; 30 | @tag-color-3: #8bc34a; 31 | @tag-color-4: #ff5722; 32 | @tag-color-5: #ab47bc; 33 | @tag-color-6: #009688; 34 | //share color 35 | @color-weibo: #E6162D; 36 | @color-qq: #3D95D5; 37 | @color-weixin: #2BAD13; 38 | @color-facebook: #4862A3; 39 | @color-twitter: #55ACEE; 40 | @color-google-plus: #db4437; 41 | //layout 42 | @contentWidth: 960px; 43 | @menuWidth: 200px; 44 | @menuPadding: 20px; 45 | @topBarH: 56px; 46 | @headerH: 400px; 47 | @homeW: 700px; 48 | @postW: 70%; 49 | @asideW: 200px; 50 | @postOffsetY: -150px; 51 | @navH: 44px; 52 | @mNavH: 36px; 53 | @searchWidth: 80vw; 54 | @searchHeight: 80vh; 55 | @boxShadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); 56 | @imp: !important; 57 | 58 | .clearfix:after{ 59 | content: ""; 60 | display: block; 61 | clear: both; 62 | visibility: visible; 63 | } 64 | 65 | .pull-left{ 66 | float: left; 67 | } 68 | 69 | .pull-right{ 70 | float: right; 71 | } 72 | 73 | .transition(@s, @dur: ease-in-out) { 74 | -webkit-transition: @s @dur; 75 | transition: @s @dur; 76 | } 77 | 78 | .transform(@prop) { 79 | -webkit-transform: @prop; 80 | transform: @prop; 81 | } 82 | 83 | .transform-origin(@h:center, @v:center) { 84 | -webkit-transform-origin: @h @v; 85 | transform-origin: @h @v; 86 | } 87 | 88 | .boxShadow(@s:.4s) { 89 | box-shadow: @boxShadow; 90 | .transition(@s); 91 | 92 | &:hover, 93 | &:active { 94 | box-shadow: 0 6px 12px rgba(0, 0, 0, .2), 0 4px 15px rgba(0, 0, 0, .2); 95 | } 96 | } 97 | 98 | .hoverLine(@color) { 99 | position: relative; 100 | display: inline-block; 101 | 102 | &::after { 103 | content: ""; 104 | position: absolute; 105 | width: 100%; 106 | height: 1px; 107 | bottom: 0; 108 | left: 0; 109 | background-color: @color; 110 | visibility: hidden; 111 | .transform(scaleX(0)); 112 | .transition(.4s); 113 | } 114 | 115 | &:hover { 116 | text-decoration: none; 117 | } 118 | 119 | &:hover::after, 120 | &:active::after { 121 | visibility: visible; 122 | .transform(scaleX(1)); 123 | } 124 | } 125 | 126 | .tip() { 127 | position: relative; 128 | 129 | &:before, 130 | &:after { 131 | position: absolute; 132 | visibility: hidden; 133 | opacity: 0; 134 | pointer-events: none; 135 | .transition(.3s); 136 | } 137 | 138 | &:before { 139 | content: attr(data-title); 140 | font-size: @font-size - 3; 141 | color: @textPrimaryColorWhite; 142 | white-space: nowrap; 143 | line-height: 24px; 144 | padding: 0 5px; 145 | border-radius: 3px; 146 | background: @primaryColor_2; 147 | } 148 | 149 | &:after { 150 | content: ""; 151 | border: 6px solid transparent; 152 | } 153 | 154 | &:hover { 155 | &:before, 156 | &:after { 157 | visibility: visible; 158 | opacity: 1; 159 | } 160 | } 161 | } 162 | 163 | .tip-top() { 164 | .tip(); 165 | 166 | &:before, 167 | &:after { 168 | top: -10px; 169 | right: 50%; 170 | } 171 | 172 | &:before { 173 | .transform(translate(50%, -100%)); 174 | } 175 | 176 | &:after { 177 | border-top-color: @primaryColor_2; 178 | .transform(translateX(50%)); 179 | } 180 | } 181 | .tip-left() { 182 | .tip(); 183 | &:before, 184 | &:after { 185 | top: 60%; 186 | .transform(translateY(-50%)); 187 | } 188 | 189 | &:before { 190 | right: 120%; 191 | } 192 | 193 | &:after { 194 | right: 60%; 195 | border-left-color: @primaryColor_2; 196 | } 197 | } 198 | 199 | .card(@radius: 3px) { 200 | background: #fff; 201 | border-radius: @radius; 202 | box-shadow: 0 1px 3px rgba(151, 151, 151, .58); 203 | .center{ 204 | text-align: center; 205 | } 206 | .right{ 207 | text-align: right; 208 | } 209 | .center, 210 | .right{ 211 | p{ 212 | margin-bottom: 0; 213 | } 214 | } 215 | } 216 | -------------------------------------------------------------------------------- /source/js/_config.yml: -------------------------------------------------------------------------------- 1 | # hexo-theme-mellow 2 | # https://github.com/yscoder/hexo-theme-indigo 3 | # 为了避免未知解析错误,配置中的缩紧为2个半角空格,冒号后跟1个半角空格 4 | # 不需要的配置可以注释掉,也可以修改对应键布尔值(enable和disable) 5 | 6 | 7 | ##################### 8 | #### 全局配置 ### 9 | ##################### 10 | 11 | # 是否启用less压缩 12 | ## 建议压缩,并且不要修改默认paths 13 | less: 14 | compress: true #是否压缩 15 | paths: 16 | - source/css/style.less #压缩后的文件路径 17 | 18 | # 站点ico图标 19 | favicon: /img/favicon.ico 20 | 21 | # 头部背景 22 | # 如/img/avatar.jpg 或 https://i.loli.net/2017/12/12/5a2fd18a74471.jpg 23 | headerBg: /img/banner.jpg 24 | 25 | # 动态定义title 26 | #title_change: 27 | #normal: (つェ⊂)咦!又好了! #页面获得焦点时显示(短暂存在) 28 | #leave: 死鬼去哪里了! #页面失去焦点后显示 29 | 30 | # 规范网址 31 | ## 让搜索引擎重定向你的不同域名、不同子域、同域不同目录的站点到你期望的路径 32 | ## https://support.google.com/webmasters/answer/139066 33 | ## 假设配置为 canonical: http://www.lujingtao.com,那么从搜索引擎中 www.lujingtao.com 进入会重定向到 lujingtao.com 34 | canonical: false 35 | 36 | ############################################################################################################################## 37 | 38 | ##################### 39 | #### 菜单配置 ### 40 | ##################### 41 | 42 | # 头像 43 | avatar: /img/avatar.jpg 44 | 45 | # 头像点击后的链接地址 46 | avatar_link: / #默认为主页 47 | 48 | # 头像区域背景图 49 | brand: /img/brand.png 50 | 51 | # 电子邮件 52 | email: 277133779@qq.com 53 | 54 | # 电子邮件下方的链接图标 55 | ## 新连接规则[name]: url | icon 56 | ## 使用fontawesome图标,只需要写图标名。github -> icon-github | fa-github 57 | ## http://http://fontawesome.dashgame.com/ 58 | menu_link: 59 | github: https://github.com/codefine | github 60 | 61 | # 添加新菜单项遵循以下规则 62 | ## menu: 63 | ## link: [必要][不渲染] 用于区分类别 64 | ## icon: _blank [必要][渲染] 菜单图标。使用内置fontawesome图标,省略前缀 65 | ## text: About [必要][渲染] 菜单文字信息 66 | ## url: /about [必要][渲染] 菜单链接,绝对或相对路径。 67 | ## target: _blank [必要][不渲染] 是否跳出,省略则在当前页面打开 68 | menu: 69 | home: 70 | text: HOME 71 | url: / 72 | icon: home 73 | th-list: 74 | text: CATEGORIES 75 | url: /categories 76 | icon: th-list 77 | tags: 78 | text: TAGS 79 | url: /tags 80 | icon: tags 81 | archives: 82 | text: ARCHIVES 83 | url: /archives 84 | icon: archives 85 | #about: 86 | #text: ABOUT 87 | #url: /about 88 | #icon: user 89 | demo: 90 | text: CUSTOM 91 | url: /custom 92 | icon: plus-square 93 | #github: 94 | #url: https://github.com/codefine 95 | #target: _blank 96 | #icon: github 97 | #weibo: 98 | #url: http://www.weibo.com/codefine 99 | #target: _blank 100 | 101 | ############################################################################################################################## 102 | 103 | ##################### 104 | #### 首页配置 ### 105 | ##################### 106 | 107 | # 首页是否开启置顶标志 108 | top_icon: true 109 | 110 | # 首页中文章缩略图是否使用相对路径 111 | ## 只有disable为true的时候,下面的路径url才会生效,路径地址位于: 全局/source/uploads 112 | ## uploads可以是任意存在文件夹名(不存在可以自己闯将),用于放置各种需要引入到页面的静态文件,如img等。 113 | ## 参考https://hexo.io/zh-cn/docs/asset-folders.html#文章资源文件夹 114 | 115 | 116 | ############################################################################################################################## 117 | 118 | ##################### 119 | #### 文章配置 ### 120 | ##################### 121 | 122 | # 页面标题 123 | ## 标签页 / 分类页 / 归档页的标题只能在这里设置 124 | ## 其他自定义页面标题在页面markdown文件的title中设置 125 | tags_title: Tags #标签页 126 | categories_title: Categories #分类页 127 | archives_title: Archives #归档页 128 | 129 | # 主页文章摘要缩略图 130 | defaultthumb: true 131 | 132 | # 自动生成文章摘要 133 | ## 显示在主页中 134 | ## excerpt_length只在excerpt_render为true时生效。 135 | ## excerpt_render为false时可进行手动截断。方法为在文章的markdown文件中加入,其之前的内容视为摘要部分。 136 | excerpt_render: false #自动截断 137 | excerpt_length: 200 #截断长度 138 | 139 | # 是否显示文章最后更新时间 140 | ## 位于文章底部的copyright 141 | show_last_updated: true 142 | 143 | # 版权信息copyright 144 | ## 位于文章底部 145 | ## hexo中所有变量及辅助函数等均可调用,具体请查阅 hexo.io 146 | postMessage: 转载注明出处,原文地址:" target="_blank" rel="external"><%- page.permalink.replace(/index\.html$/, "") %> 147 | 148 | # 打赏 149 | ## 可以在文章markdown中设置reward: false来取消本篇文章的打赏功能 150 | ## 全局取消直接注释下方配置 151 | reward: 152 | title: 我们一起来让这个世界有趣一点 153 | wechat: /img/reward-wechat.jpg #微信 154 | alipay: /img/reward-alipay.jpg #支付宝 155 | 156 | # 分享 157 | ## 内置6种分享途径,不需要的设置对应的为false 158 | ## 可以在文章markdown中设置share: false来取消本篇文章的打赏功能 159 | ## 全局取消直接注释下方配置 160 | share_items: 161 | weibo: true 162 | wechat: true 163 | qq: true 164 | facebook: false 165 | twitter: false 166 | google: false 167 | 168 | # 目录 169 | ## 捕捉文章markdown的#一级标题 / ##二级标题 / ###三级标题等 170 | ## 位于文章右侧,移动端或者小屏幕自动隐藏 171 | toc: 172 | enable: true 173 | list_number: true # 是否显示数字排序 174 | 175 | ############################################################################################################################## 176 | 177 | ##################### 178 | #### 页脚配置 ### 179 | ##################### 180 | 181 | # 友情链接 182 | blogroll: 183 | item1: 184 | name: HOME 185 | url: https://www.lujingtao.com 186 | #item2: 187 | #name: gitee 188 | #url: https://www.gitee.com 189 | #item3: 190 | #name: coding 191 | #url: https://www.coding.net 192 | 193 | # 版权起始年份 194 | since_year: 2017 195 | 196 | # icp备案号 197 | ## 例如ICP_license: 京ICP备123456号 198 | ICP_license: false 199 | 200 | # 驱动引擎/主题等信息 201 | power: true 202 | 203 | # 搭载服务器信息 204 | ## 如果使用github或者gitee等pages功能,可以设置为false 205 | ## 如果使用coding.net的pages作为host,该选项将帮助您清楚默认广告页面 206 | ## 详情见https://coding.net/help/doc/pages/guide-page.html 207 | hosted: false 208 | 209 | ############################################################################################################################## 210 | 211 | ##################### 212 | #### 第三方配置 ### 213 | ##################### 214 | 215 | # 搜索 216 | local_search: true 217 | 218 | # 百度统计 219 | baidu_tongji: #appid 220 | 221 | # valine评论系统 222 | ## https://valine.js.org/ 223 | valine: 224 | enable: false 225 | appid: #appid 226 | appkey: #appkey 227 | notify: true #是否开启邮箱提醒 228 | verify: true #是否开启验证码 229 | placeholder: give me some sugers plz... #留言板中的预留信息 230 | avatar: 'wavatar' #用户头像 231 | 232 | # 文章浏览统计 233 | leancloud_visitors: 234 | enable: false 235 | app_id: #appid 236 | app_key: #appkey 237 | icon: true #true只显示图标,false只显示文字 238 | 239 | # 数学公式 240 | mathjax: 241 | enable: true 242 | cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML 243 | 244 | # 是否使用按钮waves插件 245 | waves: true -------------------------------------------------------------------------------- /source/css/_partial/page.less: -------------------------------------------------------------------------------- 1 | .page-header { 2 | text-align: center 3 | } 4 | .page-article { 5 | padding-top: 20px; 6 | .card { 7 | padding: 20px; 8 | .card(3px); 9 | > *:last-child { 10 | margin-bottom: 0; 11 | } 12 | > *:first-child { 13 | padding-top: 0; 14 | margin-top: 0; 15 | } 16 | } 17 | 18 | .card, 19 | .column, 20 | .timeline { 21 | margin-bottom: 20px; 22 | } 23 | } 24 | .page-content { 25 | margin-bottom: 30px; 26 | border-bottom: 2px solid @borderColor; 27 | 28 | > blockquote, 29 | > pre, 30 | img, 31 | > figure { 32 | .card(3px); 33 | } 34 | 35 | img { 36 | width: 100%; 37 | padding: 0; 38 | margin: 0; 39 | border: none; 40 | } 41 | 42 | figure, 43 | pre { 44 | margin-left: 0!important; 45 | margin-right: 0!important; 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 | } 70 | 71 | .page-about-me { 72 | position: relative; 73 | padding: 30px 35px!important; 74 | 75 | .avatar { 76 | margin-right: 35px; 77 | width: 100px; 78 | height: 100px; 79 | box-shadow: @boxShadow; 80 | 81 | img { 82 | border-radius: 50%; 83 | } 84 | } 85 | .content { 86 | color: @textPrimaryColorBlack; 87 | p { 88 | margin-top: 0; 89 | } 90 | } 91 | } 92 | 93 | @media screen and(max-width: 480px) { 94 | .page-content { 95 | margin-left: -16px; 96 | margin-right: -16px; 97 | .column { 98 | display: block; 99 | } 100 | .column-2>*, 101 | .column-3>*{ 102 | width: 100%; 103 | } 104 | } 105 | .post-content { 106 | .column-2>*, 107 | .column-3>*{ 108 | width: 100%; 109 | } 110 | } 111 | .page-about-me { 112 | padding: 15px 20px!important; 113 | .avatar { 114 | margin-right: 20px; 115 | width: 60px; 116 | height: 60px; 117 | } 118 | } 119 | } 120 | 121 | .page-modal { 122 | display: none; 123 | position: fixed; 124 | top: 24%; 125 | left: 50%; 126 | z-index: 120; 127 | padding: 30px; 128 | text-align: center; 129 | color: @textSecondaryColor; 130 | background: #fff; 131 | border-radius: 4px; 132 | box-shadow: @boxShadow; 133 | opacity: 0; 134 | .transform(translate(-50%, -200%)); 135 | 136 | &.ready { 137 | visibility: hidden; 138 | display: block; 139 | .transform(translate(-50%, -100%)); 140 | .transition(.3s); 141 | } 142 | 143 | &.in { 144 | visibility: visible; 145 | opacity: 1; 146 | .transform(translate(-50%, 0)); 147 | } 148 | 149 | .close { 150 | position: absolute; 151 | right: 15px; 152 | top: 15px; 153 | color: saturate(@textPrimaryColorBlack, 0.2); 154 | font-size: @font-size + 2; 155 | line-height: 20px; 156 | &:hover, &:active { 157 | color: saturate(@textPrimaryColorBlack, 0.4); 158 | } 159 | } 160 | } 161 | 162 | #comment{ 163 | margin-top: 12px; 164 | } 165 | 166 | .remind{ 167 | span{ 168 | margin-top: -4px; 169 | display: inline-block; 170 | font-weight: bold; 171 | color: @primaryColor_2; 172 | font-size: @font-size + 6; 173 | text-shadow: 2px 2px 10px rgba(0,0,0,0.6); 174 | vertical-align: middle; 175 | } 176 | } 177 | 178 | .column-2, 179 | .column-3 { 180 | .flex-row; 181 | .flex-row-wrap; 182 | .flex-justify-between; 183 | 184 | // > * { 185 | // .flex-col; 186 | // } 187 | } 188 | 189 | .column-2 { 190 | > * { 191 | width: 48%; 192 | } 193 | } 194 | 195 | .column-3 { 196 | > * { 197 | width: 31%; 198 | } 199 | } 200 | 201 | .timeline { 202 | position: relative; 203 | text-align: center; 204 | 205 | &:before { 206 | content: ''; 207 | position: absolute; 208 | top: 0; 209 | left: 50%; 210 | z-index: 1; 211 | width: 4px; 212 | height: 100%; 213 | margin-left: -2px; 214 | background: @borderColor; 215 | } 216 | 217 | h5 { 218 | position: relative; 219 | z-index: 2; 220 | display: inline-block; 221 | margin-bottom: 15px; 222 | padding: .5em 2em; 223 | color: @textPrimaryColorWhite; 224 | background: @primaryColor_1; 225 | border-radius: 3px; 226 | box-shadow: @boxShadow; 227 | } 228 | 229 | .item { 230 | position: relative; 231 | z-index: 2; 232 | margin-bottom: 30px; 233 | padding: 15px 0; 234 | text-align: left; 235 | > p { 236 | display: inline-block; 237 | width: 45%; 238 | margin: 0; 239 | padding: 10px 15px; 240 | text-align: center; 241 | .card(3px) 242 | } 243 | 244 | > .card { 245 | display: inline-block; 246 | width: 45%; 247 | margin: 0; 248 | padding: 10px 15px; 249 | text-align: left; 250 | .card(3px) 251 | } 252 | 253 | > h6 { 254 | position: absolute; 255 | top: 50%; 256 | padding: 3px 8px; 257 | color: @textPrimaryColorWhite; 258 | background: @primaryColor_2; 259 | border-radius: 3px; 260 | .transform(translateY(-50%)) 261 | } 262 | 263 | &:nth-child(odd) { 264 | text-align: right; 265 | > h6 { 266 | right: 50%; 267 | margin-right: 30px; 268 | } 269 | } 270 | 271 | &:nth-child(even) { 272 | > h6 { 273 | left: 50%; 274 | margin-left: 30px; 275 | } 276 | } 277 | 278 | &:after { 279 | content: ''; 280 | position: absolute; 281 | top: 50%; 282 | left: 50%; 283 | border: 4px solid @primaryColor_2; 284 | outline: 2px solid @backColor; 285 | border-radius: 50%; 286 | .transform(translate(-50%, -50%)); 287 | } 288 | 289 | } 290 | } -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # hexo-theme-mellow 2 | # https://github.com/yscoder/hexo-theme-indigo 3 | # 为了避免未知解析错误,配置中的缩紧为2个半角空格,冒号后跟1个半角空格 4 | # 不需要的配置可以注释掉,也可以修改对应键布尔值(enable和disable) 5 | 6 | 7 | ##################### 8 | #### 全局配置 ### 9 | ##################### 10 | 11 | # 是否启用less压缩 12 | ## 建议压缩,并且不要修改默认paths 13 | less: 14 | compress: true #是否压缩 15 | paths: 16 | - source/css/style.less #压缩后的文件路径 17 | 18 | # 站点ico图标 19 | favicon: /img/favicon.ico 20 | 21 | # 头部背景 22 | # 如/img/banner.jpg 或 https://i.loli.net/2017/12/12/5a2fd18a74471.jpg 23 | headerBg: /img/banner.jpg 24 | 25 | # 动态定义title 26 | #title_change: 27 | #normal: (つェ⊂)咦!又好了! #页面获得焦点时显示(短暂存在) 28 | #leave: 死鬼去哪里了! #页面失去焦点后显示 29 | 30 | # 规范网址 31 | ## 让搜索引擎重定向你的不同域名、不同子域、同域不同目录的站点到你期望的路径 32 | ## https://support.google.com/webmasters/answer/139066 33 | ## 假设配置为 canonical: http://www.lujingtao.com,那么从搜索引擎中 www.lujingtao.com 进入会重定向到 lujingtao.com 34 | canonical: false 35 | 36 | # DaoVoice 聊天室 37 | daovoice: 38 | app_id: 39 | 40 | # 主页文章排序方式 41 | ## true 按照文章更新时间排序 42 | ## false 按照文章创建时间排序 43 | articleSort: false 44 | 45 | # 站浏览数统计 46 | visit_counter: 47 | site_uv: true # 访客数量 48 | site_pv: true # 浏览次数 49 | 50 | ############################################################################################################################## 51 | 52 | ##################### 53 | #### 菜单配置 ### 54 | ##################### 55 | 56 | # 头像 57 | avatar: /img/avatar.jpg 58 | 59 | # 头像点击后的链接地址 60 | avatar_link: / #默认为主页 61 | 62 | # 头像区域背景图 63 | brand: /img/brand.jpg 64 | 65 | # 电子邮件 66 | email: 277133779@qq.com 67 | 68 | # 电子邮件下方的链接图标 69 | ## 新连接规则[name]: url | icon 70 | ## 使用fontawesome图标,只需要写图标名。github -> icon-github | fa-github 71 | ## http://http://fontawesome.dashgame.com/ 72 | menu_link: 73 | github: https://github.com/codefine | github 74 | 75 | # 添加新菜单项遵循以下规则 76 | ## menu: 77 | ## link: [必要][不渲染] 用于区分类别 78 | ## icon: _blank [必要][渲染] 菜单图标。使用内置fontawesome图标,省略前缀 79 | ## text: About [必要][渲染] 菜单文字信息 80 | ## url: /about [必要][渲染] 菜单链接,绝对或相对路径。 81 | ## target: _blank [必要][不渲染] 是否跳出,省略则在当前页面打开 82 | menu: 83 | home: 84 | text: HOME 85 | url: / 86 | icon: home 87 | th-list: 88 | text: CATEGORIES 89 | url: /categories 90 | icon: th-list 91 | tags: 92 | text: TAGS 93 | url: /tags 94 | icon: tags 95 | archives: 96 | text: ARCHIVES 97 | url: /archives 98 | icon: archives 99 | #about: 100 | #text: ABOUT 101 | #url: /about 102 | #icon: user 103 | demo: 104 | text: CUSTOM 105 | url: /custom 106 | icon: plus-square 107 | #github: 108 | #url: https://github.com/codefine 109 | #target: _blank 110 | #icon: github 111 | #weibo: 112 | #url: http://www.weibo.com/codefine 113 | #target: _blank 114 | 115 | # 进入文章时自动隐藏 116 | auto_hide: false 117 | 118 | ############################################################################################################################## 119 | 120 | ##################### 121 | #### 首页配置 ### 122 | ##################### 123 | 124 | # 首页是否开启置顶标志 125 | top_icon: true 126 | 127 | # 首页中文章缩略图是否使用相对路径 128 | ## 只有disable为true的时候,下面的路径url才会生效,路径地址位于: 全局/source/uploads 129 | ## uploads可以是任意存在文件夹名(不存在可以自己闯将),用于放置各种需要引入到页面的静态文件,如img等。 130 | ## 参考https://hexo.io/zh-cn/docs/asset-folders.html#文章资源文件夹 131 | 132 | 133 | ############################################################################################################################## 134 | 135 | ##################### 136 | #### 文章配置 ### 137 | ##################### 138 | 139 | # 页面标题 140 | ## 标签页 / 分类页 / 归档页的标题只能在这里设置 141 | ## 其他自定义页面标题在页面markdown文件的title中设置 142 | tags_title: Tags #标签页 143 | categories_title: Categories #分类页 144 | archives_title: Archives #归档页 145 | 146 | # 主页文章摘要缩略图 147 | defaultthumb: true 148 | 149 | # 自动生成文章摘要 150 | ## 显示在主页中 151 | ## excerpt_length只在excerpt_render为true时生效。 152 | ## excerpt_render为false时可进行手动截断。方法为在文章的markdown文件中加入,其之前的内容视为摘要部分。 153 | excerpt_render: false #自动截断 154 | excerpt_length: 200 #截断长度 155 | excerpt_link: more #更多按钮内容 156 | 157 | # 是否显示文章最后更新时间 158 | ## 位于文章底部的copyright 159 | show_last_updated: true 160 | 161 | # 版权信息copyright 162 | ## 位于文章底部 163 | ## hexo中所有变量及辅助函数等均可调用,具体请查阅 hexo.io 164 | postMessage: 转载注明出处,原文地址:" target="_blank" rel="external"><%- page.permalink.replace(/index\.html$/, "") %> 165 | 166 | # 打赏 167 | ## 可以在文章markdown中设置reward: false来取消本篇文章的打赏功能 168 | ## 全局取消直接注释下方配置 169 | reward: 170 | title: 我们一起来让这个世界有趣一点 171 | wechat: /img/reward-wechat.jpg #微信 172 | alipay: /img/reward-alipay.jpg #支付宝 173 | 174 | # 分享 175 | ## 内置6种分享途径,不需要的设置对应的为false 176 | ## 可以在文章markdown中设置share: false来取消本篇文章的打赏功能 177 | ## 全局取消直接注释下方配置 178 | share_items: 179 | weibo: true 180 | wechat: true 181 | qq: true 182 | facebook: false 183 | twitter: false 184 | google: false 185 | 186 | # 目录 187 | ## 捕捉文章markdown的#一级标题 / ##二级标题 / ###三级标题等 188 | ## 位于文章右侧,移动端或者小屏幕自动隐藏 189 | toc: 190 | enable: true 191 | list_number: true # 是否显示数字排序 192 | 193 | ############################################################################################################################## 194 | 195 | ##################### 196 | #### 页脚配置 ### 197 | ##################### 198 | 199 | # 固定页脚 200 | footer_fixation: false 201 | 202 | # 友情链接 203 | blogroll: 204 | item1: 205 | name: HOME 206 | url: https://www.lujingtao.com 207 | #item2: 208 | #name: gitee 209 | #url: https://www.gitee.com 210 | #item3: 211 | #name: coding 212 | #url: https://www.coding.net 213 | 214 | # 版权起始年份 215 | since_year: 2017 216 | 217 | # icp备案号 218 | ## 例如ICP_license: 京ICP备123456号 219 | ICP_license: false 220 | 221 | # 驱动引擎/主题等信息 222 | power: true 223 | 224 | # 搭载服务器信息 225 | ## 如果使用github或者gitee等pages功能,可以设置为false 226 | ## 如果使用coding.net的pages作为host,该选项将帮助您清楚默认广告页面 227 | ## 详情见https://coding.net/help/doc/pages/guide-page.html 228 | hosted: false 229 | 230 | ############################################################################################################################## 231 | 232 | ##################### 233 | #### 第三方配置 ### 234 | ##################### 235 | 236 | # 搜索 237 | local_search: true 238 | 239 | # 百度统计 240 | baidu_tongji: #appid 241 | 242 | # gitment评论系统 243 | ## https://github.com/imsun/gitment 244 | gitment: 245 | enable: false 246 | lazy: true #是否开启初始化隐藏评论 247 | owner: codefine #github账号 248 | repo: gitment #留言仓库 249 | oauth: 250 | client_id: #client_id 251 | client_secret: #client_id 252 | perPage: 10 #分页 253 | 254 | # valine评论系统 255 | ## https://valine.js.org/ 256 | valine: 257 | enable: false 258 | appid: #appid 259 | appkey: #appkey 260 | notify: true #是否开启邮箱提醒 261 | verify: true #是否开启验证码 262 | placeholder: give me some sugers plz... #留言板中的预留信息 263 | avatar: 'wavatar' #用户头像 264 | 265 | # 文章浏览统计 266 | leancloud_visitors: 267 | enable: false 268 | app_id: #appid 269 | app_key: #appkey 270 | icon: true #true只显示图标,false只显示文字 271 | 272 | # 数学公式 273 | mathjax: 274 | enable: true 275 | cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML 276 | 277 | # 是否使用按钮waves插件 278 | waves: true -------------------------------------------------------------------------------- /source/css/_partial/postlist.less: -------------------------------------------------------------------------------- 1 | .post-list { 2 | padding: 0; 3 | list-style: none; 4 | .post-list-item { 5 | margin-left: auto; 6 | margin-right: auto; 7 | max-width: @homeW; 8 | .card(); 9 | .boxShadow(); 10 | padding: 0; 11 | margin-bottom: 30px; 12 | position: relative; 13 | 14 | .article-card{ 15 | position: relative; 16 | box-shadow: none; 17 | } 18 | 19 | .post-footer { 20 | margin: 0; 21 | padding: 12px 20px 8px; 22 | } 23 | } 24 | } 25 | 26 | .post-list-item { 27 | .card(); 28 | .boxShadow(); 29 | padding: 0 12px; 30 | margin-bottom: 30px; 31 | position: relative; 32 | overflow: hidden; 33 | .post-footer { 34 | margin: 0; 35 | padding: 12px 20px 8px; 36 | } 37 | } 38 | 39 | 40 | .post-title { 41 | &.re-title{ 42 | margin-bottom: 10px; 43 | position: relative; 44 | .post-title-link{ 45 | color: @primaryColor_1; 46 | } 47 | } 48 | &.ab-title{ 49 | margin: 0; 50 | position: absolute; 51 | left: 0; 52 | bottom: 10px; 53 | height: auto; 54 | z-index: 1; 55 | .post-title-link{ 56 | color: @textCardTitle; 57 | } 58 | } 59 | width: 100%; 60 | text-align: center; 61 | } 62 | 63 | 64 | .post-title-link { 65 | color: @primaryColor_1; 66 | text-shadow: 1px 1px 2px rgba(0,0,0,0.2); 67 | .hoverLine(@primaryColor_2); 68 | &:hover{ 69 | color: @primaryColor_2; 70 | } 71 | } 72 | 73 | .post-meta { 74 | text-align: center; 75 | margin: 0 0 10px; 76 | line-height: 14px; 77 | font-size: @font-size - 2; 78 | color: @textSecondaryColor; 79 | position: relative; 80 | z-index: 1; 81 | overflow: hidden; 82 | >*:not(:first-child) { 83 | &:before { 84 | content: "·"; 85 | padding: 0 .5em; 86 | white-space: nowrap; 87 | } 88 | } 89 | } 90 | 91 | .article-category-list { 92 | position: relative; 93 | display: inline; 94 | list-style: none; 95 | padding: 0; 96 | * { 97 | display: inline; 98 | } 99 | ul { 100 | padding-left: 0 101 | } 102 | } 103 | .article-category-list-child { 104 | &:before { 105 | content: "›"; 106 | padding: 0 .3em; 107 | font-size: 120%; 108 | } 109 | } 110 | 111 | .article-category-list-link { 112 | color: @primaryColor_2; 113 | &:hover { 114 | color: @primaryColor_2; 115 | } 116 | } 117 | 118 | .article-tag-list { 119 | overflow: hidden; 120 | margin: 0; 121 | padding: 0; 122 | font-size: @font-size - 2; 123 | } 124 | .article-tag-list-item { 125 | display: inline-block; 126 | margin: 0 8px 8px 0; 127 | box-shadow: 0 0 0 rgba(0,0,0,0); 128 | border-radius: 2px; 129 | .article-tag-list-link{ 130 | color: @textPrimaryColorWhite; 131 | } 132 | // color: @primaryColor_2; 133 | // border: 1px dotted @primaryColor_2; 134 | .transition(.2s); 135 | &:hover { 136 | // border-style: solid; 137 | box-shadow: @boxShadow; 138 | // background: @primaryColor_2; 139 | .article-tag-list-link{ 140 | color: @textPrimaryColorWhite; 141 | } 142 | } 143 | &:nth-of-type(6n+1) { 144 | background: @tag-color-1 145 | } 146 | &:nth-of-type(6n+2) { 147 | background: @tag-color-2 148 | } 149 | &:nth-of-type(6n+3) { 150 | background: @tag-color-3 151 | } 152 | &:nth-of-type(6n+4) { 153 | background: @tag-color-4 154 | } 155 | &:nth-of-type(6n+5) { 156 | background: @tag-color-5 157 | } 158 | &:nth-of-type(6n+6) { 159 | background: @tag-color-6 160 | } 161 | } 162 | 163 | 164 | .article-tag-list-link { 165 | display: block; 166 | padding: 0 16px; 167 | line-height: 28px; 168 | // color: saturate(@textPrimaryColorWhite, .8); 169 | color: @primaryColor_2; 170 | .transition(.2s); 171 | } 172 | .item-thumb{ 173 | width: calc(~"100% + 40px"); 174 | // height: @thumbH; 175 | margin-bottom: 8px; 176 | position: relative; 177 | left: -20px; 178 | top: -16px; 179 | border-radius: 3px 3px 0 0 @imp; 180 | overflow: hidden; 181 | 182 | img{ 183 | border-radius: 3px 3px 0 0 @imp; 184 | display: block; 185 | width: 100%; 186 | } 187 | 188 | .thumb-hover{ 189 | width: 100%; 190 | height: 100%; 191 | color: @textSecondaryColor; 192 | font-size: @font-size + 30; 193 | position: absolute; 194 | left: 0; 195 | top: 0; 196 | z-index: 1; 197 | transition: 0.4s; 198 | background: fade( @thumbHoverColor, 50% ); 199 | opacity: 0; 200 | 201 | .icon{ 202 | position: absolute; 203 | left: 50%; 204 | top: 50%; 205 | .transform(translate(-50%, -50%)); 206 | } 207 | } 208 | 209 | .thumb-link{ 210 | width: 100%; 211 | height: 100%; 212 | position: absolute; 213 | left: 0; 214 | top: 0; 215 | z-index: 2; 216 | } 217 | 218 | &:hover{ 219 | .thumb-hover{ 220 | opacity: 1; 221 | } 222 | } 223 | } 224 | .post-more { 225 | width: 50px; 226 | margin: 10px auto 0; 227 | display: block; 228 | padding: 0 6px; 229 | font-weight: normal; 230 | color: @primaryColor_2 @imp; 231 | border: 1px solid @primaryColor_2 @imp; 232 | border-radius: 3px; 233 | line-height: 1.4; 234 | 235 | &:hover, 236 | &:active { 237 | color: @textPrimaryColorWhite @imp; 238 | background: @primaryColor_2; 239 | } 240 | } 241 | .leancloud-comment, 242 | .leancloud_visitors{ 243 | display: inline-block; 244 | } 245 | 246 | #page-nav { 247 | margin: 30px 0 0; 248 | text-align: center; 249 | 250 | .inner { 251 | display: inline-block; 252 | } 253 | 254 | a, 255 | span { 256 | display: inline-block; 257 | line-height: 34px; 258 | padding: 0 1em; 259 | margin: 0 2px; 260 | font-size: @font-size; 261 | color: @textSecondaryColor; 262 | border-radius: 3px; 263 | overflow: hidden; 264 | .transition(.4s); 265 | } 266 | 267 | a { 268 | &:hover, 269 | &:active { 270 | color: #fff; 271 | background: @primaryColor_2; 272 | } 273 | } 274 | 275 | .current { 276 | color: @textPrimaryColorWhite; 277 | background: @primaryColor_1; 278 | } 279 | } 280 | 281 | @media screen and (max-width:768px) { 282 | .post-title { 283 | font-size: @font-size + 6; 284 | } 285 | .post-more { 286 | height: 28px; 287 | line-height: 28px; 288 | font-size: @font-size - 2; 289 | } 290 | .post-list{ 291 | .post-list-item { 292 | width: 100%; 293 | padding: 0; 294 | margin-bottom: 16px; 295 | } 296 | } 297 | } 298 | -------------------------------------------------------------------------------- /source/css/_partial/layout.less: -------------------------------------------------------------------------------- 1 | .container, 2 | #main { 3 | position: relative; 4 | } 5 | 6 | #menu-off { 7 | display: block; 8 | position: absolute; 9 | top: 0; 10 | left: 100%; 11 | .transition(.4s, cubic-bezier(.18, .81, .3, .89)); 12 | } 13 | 14 | #menu { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | bottom: 0; 19 | z-index: 99; 20 | width: @menuWidth; 21 | min-height: 100%; 22 | background: #fff; 23 | box-shadow: @boxShadow; 24 | .transition(.4s, cubic-bezier(.18, .81, .3, .89)); 25 | 26 | &.hide { 27 | .transform(translateX(-100%)); 28 | #menu-off { 29 | .transform( scale(0, 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 | position: relative; 43 | background-size: 100% 100%; 44 | background: fade(@primaryColor_1, 50%); 45 | } 46 | 47 | .brand-bg{ 48 | width: 100%; 49 | height: 100%; 50 | position: absolute; 51 | left: 0; 52 | top: 0; 53 | z-index: 1; 54 | } 55 | 56 | .brand { 57 | position: relative; 58 | left: 0; 59 | top: 0; 60 | z-index: 2; 61 | padding: 40px @menuPadding 2em; 62 | text-align: center; 63 | } 64 | 65 | .avatar { 66 | display: inline-block; 67 | width: 80px; 68 | height: 80px; 69 | border: 2px solid #fff; 70 | border-radius: 50%; 71 | overflow: hidden; 72 | .boxShadow(); 73 | } 74 | 75 | .introduce { 76 | margin: 1em 0 0; 77 | color: @primaryColor_1; 78 | text-shadow: 2px 2px 10px rgba(0,0,0,0.6); 79 | .nickname{ 80 | font-weight: normal; 81 | } 82 | } 83 | 84 | .mail { 85 | display: inline-block; 86 | padding-top: 4px; 87 | color: @primaryColor_1; 88 | font-size: 0; 89 | text-shadow: 2px 2px 10px rgba(0,0,0,0.6); 90 | .transition(0.4s); 91 | &:hover{ 92 | color: @primaryColor_2; 93 | text-decoration: none; 94 | } 95 | span{ 96 | font-size: @font-size - 2; 97 | } 98 | } 99 | 100 | .scroll-wrap { 101 | position: relative; 102 | overflow-y: auto; 103 | } 104 | 105 | 106 | .nav { 107 | margin: 0; 108 | padding: 12px 0; 109 | height: 300px; 110 | min-height: ~"calc(100% - 115px)"; 111 | list-style: none; 112 | line-height: @navH; 113 | .transition(0.4s); 114 | 115 | li { 116 | padding: 0 @menuPadding; 117 | position: relative; 118 | text-indent: 22px; 119 | .transition(0.4s); 120 | 121 | a{ 122 | font-size: @font-size - 2; 123 | font-weight: normal; 124 | } 125 | 126 | .icon { 127 | position: absolute; 128 | top: 0; 129 | left: @menuPadding; 130 | line-height: inherit; 131 | } 132 | 133 | &:hover, 134 | &.active { 135 | background: rgba(0, 0, 0, .05); 136 | 137 | a, 138 | .icon { 139 | color: @primaryColor_2; 140 | } 141 | } 142 | } 143 | 144 | a { 145 | display: block; 146 | padding-left: @menuPadding*2.4; 147 | height: @navH; 148 | line-height: @navH; 149 | font-weight: bold; 150 | color: @textSecondaryColor; 151 | text-decoration: none; 152 | } 153 | } 154 | 155 | .menu-link{ 156 | margin-bottom: 0; 157 | width: 100%; 158 | padding: 0; 159 | text-align: center; 160 | line-height: 20px; 161 | text-shadow: 2px 2px 10px rgba(0,0,0,0.6); 162 | li{ 163 | margin: 0 2px; 164 | list-style: none; 165 | display: inline-block; 166 | 167 | a{ 168 | color: @textPrimaryColorBlack; 169 | .transition(0.4s); 170 | } 171 | 172 | &:hover a{ 173 | color: @primaryColor_2; 174 | } 175 | } 176 | } 177 | } 178 | 179 | #main { 180 | padding-left: @menuWidth; 181 | min-height: 100%; 182 | .transition(.4s); 183 | } 184 | 185 | .body-wrap { 186 | padding: 0 0 40px; 187 | // min-height: ~'calc(100vh - 340px)'; 188 | } 189 | 190 | .container { 191 | width: @postW; 192 | margin: 0 auto; 193 | 194 | &:after { 195 | content: ""; 196 | display: table; 197 | clear: both; 198 | } 199 | } 200 | 201 | .mask { 202 | visibility: hidden; 203 | position: fixed; 204 | top: 0; 205 | left: 0; 206 | bottom: 0; 207 | z-index: 88; 208 | width: 100%; 209 | height: 100%; 210 | background: #000; 211 | opacity: 0; 212 | pointer-events: none; 213 | .transition(.3s); 214 | 215 | &.in { 216 | visibility: visible; 217 | pointer-events: auto; 218 | opacity: .5; 219 | } 220 | } 221 | 222 | .footer { 223 | width: 100%; 224 | color: saturate(@textPrimaryColorWhite, 0.6); 225 | background: @darkPrimaryColor; 226 | &.fixed{ 227 | position: fixed; 228 | bottom: 0; 229 | z-index: 87; 230 | } 231 | 232 | p { 233 | margin: 0; 234 | line-height: 1.6; 235 | font-size: @font-size - 2; 236 | text-align: center; 237 | span { 238 | &:not(:first-child):not(.blogroll-item):before { 239 | content: "·"; 240 | padding: 0 .5em; 241 | } 242 | &.blogroll-item:not(:last-child):after{ 243 | content: "|"; 244 | padding: 0 .5em; 245 | } 246 | } 247 | a { 248 | border-bottom: 1px dotted rgba(255,255,255,.5); 249 | &:hover { 250 | border-bottom: 1px solid @primaryColor_2; 251 | } 252 | } 253 | } 254 | 255 | .top { 256 | padding: 16px; 257 | background: @primaryColor_1; 258 | } 259 | a { 260 | color: inherit; 261 | opacity: .8; 262 | font-weight: bold; 263 | 264 | &:hover { 265 | color: @primaryColor_2; 266 | text-decoration: none; 267 | } 268 | } 269 | .bottom { 270 | padding: 16px; 271 | } 272 | } 273 | 274 | @media screen and (min-width:1240px) { 275 | .footer{ 276 | padding-left: @menuWidth; 277 | .transition(.4s); 278 | &.onMenuHide{ 279 | padding-left: 0; 280 | } 281 | } 282 | } 283 | 284 | @media screen and (max-width:1240px) { 285 | #menu-off { 286 | display: none; 287 | } 288 | 289 | #menu { 290 | z-index: 99; 291 | box-shadow: none; 292 | .transform(translateX(-100%)); 293 | 294 | &.show { 295 | .transform(translateX(0)); 296 | } 297 | } 298 | 299 | #main { 300 | padding-left: 0; 301 | } 302 | } 303 | 304 | 305 | // @media screen and (max-width:1040px) { 306 | // .container { 307 | // width: 100%; 308 | // padding: 30px 16px 0; 309 | // } 310 | // .content-header .container:first-child{ 311 | // padding-left: 0; 312 | // } 313 | // } 314 | 315 | @media screen and (max-width:760px) { 316 | .container{ 317 | width: 96%; 318 | } 319 | 320 | .content-header .container{ 321 | padding-right: 0; 322 | text-align: center; 323 | } 324 | 325 | #main { 326 | width: 100%; 327 | overflow-x: hidden; 328 | } 329 | 330 | #menu { 331 | .brand { 332 | padding-top: 20px; 333 | padding-bottom: 1em; 334 | } 335 | 336 | .nav { 337 | line-height: @mNavH; 338 | 339 | a { 340 | height: @mNavH; 341 | line-height: @mNavH; 342 | } 343 | } 344 | } 345 | 346 | ::-webkit-scrollbar { 347 | display: none; 348 | } 349 | } 350 | 351 | -------------------------------------------------------------------------------- /source/css/style.less: -------------------------------------------------------------------------------- 1 | @import "_partial/variable"; 2 | @import "_partial/bluehost"; 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 | color: @textPrimaryColorWhite; 35 | background: @primaryColor_2; 36 | } 37 | 38 | html { 39 | background-color: @backColor; 40 | color: @textPrimaryColorBlack; 41 | font-size: @font-size; 42 | line-height: 1.5; 43 | overflow-x: hidden; 44 | } 45 | 46 | body { 47 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 48 | -webkit-overflow-scrolling: touch; 49 | } 50 | 51 | html, 52 | body { 53 | position: relative; 54 | min-height: 100%; 55 | height: 100%; 56 | } 57 | 58 | .lock { 59 | max-height: 100%; 60 | // overflow: hidden; 61 | } 62 | 63 | body, 64 | input, 65 | button, 66 | textarea, 67 | select, 68 | option { 69 | font: normal 1em @font; 70 | } 71 | 72 | body, 73 | h1, 74 | h2, 75 | h3, 76 | h4, 77 | h5, 78 | h6, 79 | p, 80 | figure, 81 | pre, 82 | dl, 83 | dd, 84 | blockquote, 85 | button, 86 | input { 87 | margin: 0; 88 | } 89 | 90 | input, 91 | legend, 92 | input, 93 | textarea, 94 | button { 95 | padding: 0; 96 | } 97 | 98 | form, 99 | fieldset, 100 | th, 101 | td { 102 | margin: 0; 103 | padding: 0; 104 | } 105 | 106 | ol, 107 | ul { 108 | margin: 12px 0; 109 | padding: 0 0 0 32px; 110 | 111 | &.reset { 112 | margin: 0; 113 | padding: 0; 114 | list-style: none; 115 | } 116 | } 117 | 118 | ol ol, 119 | ol ul, 120 | ul ol, 121 | ul ul { 122 | margin-top: 0; 123 | margin-bottom: 0; 124 | } 125 | 126 | p { 127 | margin: 12px 0; 128 | } 129 | 130 | small { 131 | font-size: 75%; 132 | line-height: 1; 133 | } 134 | 135 | main { 136 | display: block 137 | } 138 | template { 139 | display: none 140 | } 141 | 142 | img { 143 | max-width: 100%; 144 | border: none; 145 | } 146 | 147 | img, 148 | input, 149 | button, 150 | label { 151 | vertical-align: middle; 152 | } 153 | 154 | i { 155 | font-style: normal; 156 | } 157 | 158 | h1, 159 | h2, 160 | h3, 161 | h4, 162 | h5, 163 | h6 { 164 | font-weight: bold; 165 | } 166 | 167 | h1, 168 | .h1 { 169 | font-size: @font-size + 30; 170 | line-height: 48px; 171 | } 172 | 173 | h2, 174 | .h2 { 175 | font-size: @font-size + 20; 176 | line-height: 40px; 177 | } 178 | 179 | h3, 180 | .h3 { 181 | font-size: @font-size + 10; 182 | line-height: 32px; 183 | } 184 | 185 | h4, 186 | .h4 { 187 | font-size: @font-size + 6; 188 | line-height: 28px; 189 | } 190 | 191 | h5, 192 | .h5 { 193 | font-size: @font-size + 2; 194 | line-height: 24px; 195 | } 196 | 197 | h6, 198 | .h6 { 199 | font-size: @font-size - 2; 200 | line-height: 20px; 201 | } 202 | 203 | input[type="button"], 204 | input[type="submit"], 205 | input[type="search"], 206 | input[type="reset"] { 207 | cursor: pointer; 208 | -webkit-appearance: button; 209 | } 210 | 211 | input:focus, 212 | select:focus, 213 | button:focus, 214 | textarea:focus { 215 | outline: none; 216 | } 217 | 218 | textarea { 219 | resize: none; 220 | } 221 | 222 | a { 223 | background-color: transparent; 224 | background-image: none; 225 | color: @primaryColor_2; 226 | text-decoration: none; 227 | outline: 0; 228 | .transition(0.2s); 229 | } 230 | 231 | a:hover { 232 | color: @linkHoverColor; 233 | text-decoration: underline; 234 | } 235 | 236 | hr, 237 | .hr { 238 | border: 0; 239 | border-top: 1px solid @borderColor; 240 | box-sizing: content-box; 241 | display: block; 242 | height: 0; 243 | margin-top: 24px; 244 | margin-bottom: 24px; 245 | } 246 | 247 | .fl { 248 | float: left; 249 | } 250 | 251 | .fr { 252 | float: right; 253 | } 254 | 255 | .tr { 256 | text-align: right; 257 | } 258 | 259 | .tc { 260 | text-align: center; 261 | } 262 | 263 | .clearfix:after { 264 | content: ""; 265 | display: table; 266 | clear: both; 267 | overflow: hidden; 268 | } 269 | 270 | .ellipsis { 271 | overflow: hidden; 272 | text-overflow: ellipsis; 273 | white-space: nowrap; 274 | } 275 | 276 | /* flex布局 */ 277 | .flex-row, 278 | .flex-column, 279 | .flex-row-vertical { 280 | display: -webkit-box; 281 | display: -webkit-flex; 282 | display: -ms-flexbox; 283 | display: flex; 284 | } 285 | .flex-column { 286 | -webkit-box-orient: horizontal; 287 | -webkit-box-direction: normal; 288 | -webkit-flex-direction: row; 289 | -ms-flex-direction: row; 290 | flex-direction: row; 291 | } 292 | .flex-row-vertical { 293 | -webkit-box-orient: vertical; 294 | -webkit-box-direction: normal; 295 | -webkit-flex-direction: column; 296 | -ms-flex-direction: column; 297 | flex-direction: column; 298 | } 299 | 300 | /* 多行布局 */ 301 | .flex-row-wrap, 302 | .flex-column { 303 | -webkit-flex-wrap: wrap; 304 | -ms-flex-wrap: wrap; 305 | flex-wrap: wrap; 306 | } 307 | 308 | /* 子元素反向排列 */ 309 | .flex-row-reverse { 310 | -webkit-box-orient: horizontal; 311 | -webkit-box-direction: reverse; 312 | -webkit-flex-direction: row-reverse; 313 | -ms-flex-direction: row-reverse; 314 | flex-direction: row-reverse; 315 | } 316 | 317 | /* 子元素默认平均分布 */ 318 | .flex-row >* { 319 | display: block; 320 | } 321 | 322 | .flex-col { 323 | -webkit-box-flex: 1; 324 | -webkit-flex: 1; 325 | -ms-flex: 1; 326 | flex: 1; 327 | } 328 | 329 | /* 垂直居中 */ 330 | .flex-middle { 331 | -webkit-box-align: center; 332 | -webkit-align-items: center; 333 | -ms-flex-align: center; 334 | align-items: center; 335 | } 336 | 337 | /* 底部对齐 */ 338 | .flex-bottom { 339 | -webkit-box-align: end; 340 | -webkit-align-items: flex-end; 341 | -ms-flex-align: end; 342 | align-items: flex-end; 343 | } 344 | 345 | /* 沿主轴方向排列方式 */ 346 | .flex-justify-start { 347 | -webkit-box-pack: start; 348 | -webkit-justify-content: flex-start; 349 | -ms-flex-pack: start; 350 | justify-content: flex-start; 351 | } 352 | 353 | .flex-justify-end { 354 | -webkit-box-pack: end; 355 | -webkit-justify-content: flex-end; 356 | -ms-flex-pack: end; 357 | justify-content: flex-end; 358 | } 359 | 360 | .flex-justify-between { 361 | -webkit-box-pack: justify; 362 | -webkit-justify-content: space-between; 363 | -ms-flex-pack: justify; 364 | justify-content: space-between; 365 | } 366 | 367 | /* 沿侧轴方向排列方式 */ 368 | .flex-align-start { 369 | -webkit-align-content: flex-start; 370 | -ms-flex-line-pack: start; 371 | align-content: flex-start; 372 | } 373 | 374 | .flex-align-end { 375 | -webkit-align-content: flex-end; 376 | -ms-flex-line-pack: end; 377 | align-content: flex-end; 378 | } 379 | 380 | .flex-align-around { 381 | -webkit-align-content: space-around; 382 | -ms-flex-line-pack: distribute; 383 | align-content: space-around; 384 | } 385 | 386 | .flex-align-between { 387 | -webkit-align-content: space-between; 388 | -ms-flex-line-pack: justify; 389 | align-content: space-between; 390 | } 391 | 392 | .flex-col-auto { 393 | -webkit-box-flex: 0; 394 | -webkit-flex: 0 auto; 395 | -ms-flex: 0 auto; 396 | flex: 0 auto; 397 | } 398 | 399 | @import "_partial/loading"; 400 | @import "_partial/waves"; 401 | @import "_partial/layout"; 402 | @import "_partial/header"; 403 | @import "_partial/highlight"; 404 | @import "_partial/postlist"; 405 | @import "_partial/gotop"; 406 | @import "_partial/share"; 407 | @import "_partial/article"; 408 | @import "_partial/archives"; 409 | @import "_partial/page"; 410 | @import "_partial/tags"; 411 | @import "_partial/search"; 412 | @import "_partial/reward"; 413 | @import "_partial/repo"; 414 | @import "_partial/imagebox"; 415 | @import "_partial/plugins"; 416 | @import "third-party/daovoice"; 417 | @import "_custom/custom"; -------------------------------------------------------------------------------- /source/css/third-party/daovoice.less: -------------------------------------------------------------------------------- 1 | @import '../_partial/variable'; 2 | 3 | #daodream-container { 4 | #daodream-launcher{ 5 | width: 56px !important; 6 | height: 56px !important; 7 | right: 56px !important; 8 | top: 0 !important; 9 | left: initial !important; 10 | bottom: initial !important; 11 | z-index: 87 !important; 12 | } 13 | .daodream-launcher-button { 14 | width: 100% !important; 15 | height: 100% !important; 16 | background-color: rgba(0, 0, 0, 0) !important; 17 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg5OUM1QUY5NjNFOTExRThBOEI2OUVERUNDMTYzOUU4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg5OUM1QUZBNjNFOTExRThBOEI2OUVERUNDMTYzOUU4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODk5QzVBRjc2M0U5MTFFOEE4QjY5RURFQ0MxNjM5RTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODk5QzVBRjg2M0U5MTFFOEE4QjY5RURFQ0MxNjM5RTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz48DwJaAAAU4ElEQVR42uxd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') !important; 18 | background-size: 20px !important; 19 | box-shadow: none !important; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /source/js/method.js: -------------------------------------------------------------------------------- 1 | $.extend({ 2 | menuInWidth: 1240, 3 | hideOnMask: [], 4 | minWidth: 760, 5 | fixedClick: function() { 6 | FastClick.attach(document.body); 7 | }, 8 | page: function () { 9 | var $elements = $('.fade, .fade-scale'); 10 | var visible = false; 11 | return { 12 | loaded: function () { 13 | $elements.each(function () { 14 | $(this).addClass('in') 15 | }); 16 | visible = true; 17 | }, 18 | unload: function () { 19 | $elements.each(function () { 20 | $(this).removeClass('in') 21 | }); 22 | visible = true; 23 | }, 24 | visible: visible 25 | } 26 | }, 27 | toc: function (toc) { 28 | var toc = $('.post-widget'); 29 | var tocBar = $('.toc-bar'); 30 | var bannerH = $('.post-header').outerHeight(); 31 | var headerH = $('#header').outerHeight(); 32 | var titles = $('#post-content').find('h1, h2, h3, h4'); 33 | var scrollTop = $(document).scrollTop(); 34 | var card = $('.post-card'); 35 | return { 36 | fixed: function (top) { 37 | if (top >= bannerH - headerH) { 38 | toc.css({ 39 | 'left': card.offset().left + card.outerWidth(true) + 40 40 | }); 41 | toc.addClass('fixed'); 42 | } else { 43 | toc.css('left', ""); 44 | toc.removeClass('fixed'); 45 | } 46 | }, 47 | actived: function (top) { 48 | var target; 49 | titles.each(function (i, elem) { 50 | if (top > $(elem).offset().top - headerH) { 51 | target = toc.find('a[href="#' + $(elem).attr('id') + '"]').parent(); 52 | } 53 | }); 54 | if (target) { 55 | toc.find('li.active').removeClass('active'); 56 | target.addClass('active'); 57 | target.parents('.post-toc-item').addClass('active'); 58 | tocBar.css("top", target.position().top + toc.scrollTop()); 59 | if (target.position().top + toc.scrollTop() > 400) { 60 | toc.scrollTop(target.position().top + toc.scrollTop() - 400 + tocBar.outerHeight(true)); 61 | } else { 62 | toc.scrollTop(0); 63 | } 64 | } 65 | if (top < titles.eq(0).offset().top) { 66 | toc.find('li.active').removeClass('active'); 67 | var active = toc.find('a[href="#' + titles.eq(0).attr('id') + '"]').parent(); 68 | active.addClass('active'); 69 | tocBar.css("top", active.position().top); 70 | } 71 | }, 72 | go: function () { 73 | toc.delegate('.post-toc-item', 'click', function (e) { 74 | e.preventDefault(); 75 | e.stopPropagation(); 76 | var id = $(this).children(".post-toc-link").attr('href').replace(/^\#/, ''); 77 | var titles = $('#post-content').find('h1, h2, h3, h4'); 78 | titles.each(function (i, el) { 79 | if ($(this).attr('id') === id) { 80 | var top = $(this).offset().top; 81 | $('body,html').stop(true, false); 82 | $('body,html').animate({ 83 | scrollTop: top 84 | }, 300); 85 | } 86 | }); 87 | }); 88 | } 89 | } 90 | }, 91 | toggleMenu: function () { 92 | var main = $('#main'); 93 | var menu = $('#menu'); 94 | var root = $('html'); 95 | var mask = $('#mask'); 96 | var footer = $('footer'); 97 | var headerTitle = $('.header-title'); 98 | var isWX = /micromessenger/i.test(navigator.userAgent); 99 | return { 100 | init: function () { 101 | var menuToggle = $('#menu-toggle'); 102 | var menuOff = $('#menu-off'); 103 | menuToggle.click(function (e) { 104 | e.preventDefault(); 105 | $.toggleMenu().show(); 106 | }); 107 | menuOff.click(function (e) { 108 | e.preventDefault(); 109 | $.toggleMenu().hide(); 110 | }); 111 | if ($(document).width() >= $.menuInWidth) { 112 | headerTitle.addClass('push'); 113 | footer.removeClass('onMenuHide'); 114 | } 115 | }, 116 | show: function () { 117 | menu.removeClass('hide'); 118 | $.hideOnMask = []; 119 | $.hideOnMask.push($('#menu-off')); 120 | if ($(document).width() < $.menuInWidth) { 121 | mask.addClass('in'); 122 | menu.addClass('show'); 123 | menu.removeClass('hide'); 124 | if (isWX) { 125 | var top = $(document).scrollTop(); 126 | main.addClass('lock'); 127 | main.scrollTop(top); 128 | } else { 129 | root.addClass('lock'); 130 | } 131 | } else { 132 | headerTitle.addClass('push'); 133 | footer.removeClass('onMenuHide'); 134 | } 135 | }, 136 | hide: function () { 137 | menu.removeClass('show'); 138 | menu.addClass('hide'); 139 | mask.removeClass('in'); 140 | headerTitle.removeClass('push'); 141 | footer.addClass('onMenuHide'); 142 | if (isWX) { 143 | var top = $(document).scrollTop(); 144 | main.removeClass('lock'); 145 | main.scrollTop(top); 146 | } else { 147 | root.removeClass('lock'); 148 | } 149 | } 150 | } 151 | }, 152 | fixedHeader: function (top) { 153 | var header = $('#header'); 154 | var targetHeight = $('.content-header').outerHeight() - header.outerHeight(); 155 | if (top > targetHeight) { 156 | header.addClass('fixed'); 157 | } else { 158 | header.removeClass('fixed'); 159 | } 160 | }, 161 | initFooter: function() { 162 | var footer = $('.footer'); 163 | if (footer.hasClass('fixed')) { 164 | $('#main').css('paddingBottom', footer.outerHeight()) 165 | } 166 | }, 167 | toggleGoTop: function () { 168 | var gotop = $('#gotop'); 169 | return { 170 | active: function () { 171 | gotop.click(function () { 172 | $('body,html').stop(true, false); 173 | $('body,html').animate({ 174 | scrollTop: 0 175 | }, 300); 176 | }); 177 | }, 178 | scroll: function (top) { 179 | if (top > $(document).height() / 5) { 180 | gotop.addClass('in'); 181 | } else { 182 | gotop.removeClass('in'); 183 | } 184 | } 185 | } 186 | }, 187 | share: function () { 188 | var pageShare = $('#pageShare'); 189 | var fabShare = $('#shareFab'); 190 | var menuShare = $('#menuShare'); 191 | var globalShare = $('#globalShare'); 192 | var wxShareBtn = $('.wxFab'); 193 | var wxSharePop = $('#wxShare'); 194 | var mask = $('#mask'); 195 | 196 | if (fabShare.length > 0) { 197 | fabShare.click(function () { 198 | pageShare.toggleClass('in'); 199 | }); 200 | 201 | $(document).click(function (e) { 202 | if (!fabShare.get(0).contains(e.target)) { 203 | pageShare.removeClass('in'); 204 | } 205 | }); 206 | } 207 | 208 | wxShareBtn.click(function () { 209 | if (wxSharePop.hasClass('in')) { 210 | mask.removeClass('in'); 211 | wxSharePop.removeClass('in'); 212 | setTimeout(function () { 213 | wxSharePop.removeClass('ready'); 214 | }, 300) 215 | } else { 216 | mask.addClass('in'); 217 | wxSharePop.addClass('ready'); 218 | setTimeout(function () { 219 | wxSharePop.addClass('in'); 220 | }, 0); 221 | $.hideOnMask = []; 222 | $.hideOnMask.push($(this), wxSharePop.find('.close')); 223 | } 224 | }); 225 | wxSharePop.find('.close').click(function () { 226 | mask.removeClass('in'); 227 | wxSharePop.removeClass('in'); 228 | globalShare.removeClass('in'); 229 | $.hideOnMask = []; 230 | setTimeout(function () { 231 | wxSharePop.removeClass('ready'); 232 | globalShare.removeClass('ready'); 233 | }, 300) 234 | }); 235 | }, 236 | search: function () { 237 | var searchBtn = $('#site_search_btn'); 238 | var searchPanel = $('#site_search'); 239 | var searchClose = searchPanel.find('.close'); 240 | var mask = $('#mask'); 241 | return { 242 | init: function () { 243 | searchBtn.click(function () { 244 | if ($(window).width() < $.minWidth) { 245 | $('html').addClass('lock'); 246 | } else { 247 | mask.addClass('in'); 248 | } 249 | searchPanel.addClass('in'); 250 | $.hideOnMask = []; 251 | $.hideOnMask.push($(this), searchPanel.find('.close')); 252 | }); 253 | searchClose.click(function () { 254 | if ($(window).width() < $.minWidth) { 255 | $('html').removeClass('lock'); 256 | } else { 257 | mask.removeClass('in'); 258 | } 259 | searchPanel.removeClass('in'); 260 | }); 261 | }, 262 | zoom: function () { 263 | if ($(document).width() < $.menuInWidth) { 264 | searchPanel.removeClass('shrink'); 265 | } else { 266 | searchPanel.addClass('shrink'); 267 | } 268 | }, 269 | } 270 | }, 271 | reward: function () { 272 | var reward = $('#reward'); 273 | var rewardBtn = $('#rewardBtn'); 274 | var rewardToggle = $('#rewardToggle'); 275 | var rewardCode = $('#rewardCode'); 276 | var mask = $('#mask'); 277 | 278 | rewardBtn.click(function () { 279 | if (reward.hasClass('in')) { 280 | mask.removeClass('in'); 281 | reward.removeClass('in'); 282 | setTimeout(function () { 283 | reward.removeClass('ready'); 284 | }, 300); 285 | } else { 286 | mask.addClass('in'); 287 | reward.addClass('ready'); 288 | setTimeout(function () { 289 | reward.addClass('in'); 290 | }, 0); 291 | $.hideOnMask = []; 292 | $.hideOnMask.push($(this), reward.find('.close')); 293 | } 294 | }); 295 | 296 | reward.find('.close').click(function () { 297 | mask.removeClass('in'); 298 | reward.removeClass('in'); 299 | $.hideOnMask = []; 300 | setTimeout(function () { 301 | reward.removeClass('ready'); 302 | }, 300); 303 | }); 304 | 305 | if (rewardToggle.length != 0) { 306 | rewardToggle.change(function () { 307 | rewardCode.attr('src', this.checked ? this.dataset.alipay : this.dataset.wechat); 308 | }); 309 | } 310 | }, 311 | mask: function () { 312 | var mask = $('#mask'); 313 | mask.click(function (e) { 314 | $.hideOnMask.forEach(function (el) { 315 | el.trigger('click'); 316 | }); 317 | e.preventDefault(); 318 | }); 319 | }, 320 | waves: function () { 321 | if (window.Waves) { 322 | Waves.init(); 323 | Waves.attach('.global-share li', ['waves-block']); 324 | Waves.attach('.article-tag-list-link, #page-nav a, #page-nav span', ['waves-button']); 325 | } 326 | }, 327 | waterfall: function () { 328 | 329 | if ($(window).width() < $.minWidth) return; 330 | 331 | $('.waterfall').each(function () { 332 | var childs = $(this).find('.waterfall-item'); 333 | var columns = [0, 0]; 334 | 335 | childs.each(function () { 336 | var i = columns[0] <= columns[1] ? 0 : 1; 337 | // item.style.cssText = 'top:' + columns[i] + 'px;left:' + (i > 0 ? '50%' : 0); 338 | 339 | $(this).css({ 340 | top: columns[i], 341 | left: i > 0 ? '50%' : 0 342 | }); 343 | columns[i] += $(this).get(0).offsetHeight; 344 | }) 345 | 346 | // el.style.height = Math.max(columns[0], columns[1]) + 'px'; 347 | $(this).css('height', Math.max(columns[0], columns[1])); 348 | $(this).addClass('in'); 349 | }) 350 | 351 | var headerH = $("#main>.content-header").height(); 352 | var containerH = $("#main>.container").outerHeight(true); 353 | var footerH = $(".footer").height(); 354 | var winH = $(window).height(); 355 | if ( headerH + containerH + footerH < winH ) { 356 | var minH = winH - footerH - headerH - 10; 357 | $("#main>.container").css('min-height', minH); 358 | } 359 | }, 360 | tabBar: function () { 361 | var allTagsBtn = $('.tags-list-more'); 362 | if (allTagsBtn.length > 0) { 363 | allTagsBtn.click(function () { 364 | $(this).parents('.tabs-bar').toggleClass('expand'); 365 | }); 366 | } 367 | } 368 | }); -------------------------------------------------------------------------------- /source/js/plugins/local_search.js: -------------------------------------------------------------------------------- 1 | var searchFunc = function (path, search_id, content_id) { 2 | 3 | $.ajax({ 4 | url: path, 5 | dataType: "xml", 6 | async: true, 7 | success: function (res) { 8 | // get the contents from search data 9 | var datas = $("entry", res).map(function () { 10 | return { 11 | title: $("title", this).text(), 12 | content: $("content", this).text(), 13 | url: $("url", this).text() 14 | }; 15 | }).get(); 16 | var input = document.getElementById(search_id); 17 | var resultContent = document.getElementById(content_id); 18 | resultContent.innerHTML = '
' 19 | var inputEventFunction = function () { 20 | var searchText = input.value.trim().toLowerCase(); 21 | var keywords = searchText.split(/[\s\-]+/); 22 | if (keywords.length > 1) { 23 | keywords.push(searchText); 24 | } 25 | var resultItems = []; 26 | if (searchText.length > 0) { 27 | // perform local searching 28 | datas.forEach(function (data) { 29 | var isMatch = false; 30 | var hitCount = 0; 31 | var searchTextCount = 0; 32 | var title = data.title.trim(); 33 | var titleInLowerCase = title.toLowerCase(); 34 | var content = data.content.trim().replace(/<[^>]+>/g, ""); 35 | var contentInLowerCase = content.toLowerCase(); 36 | var articleUrl = decodeURIComponent(data.url); 37 | var indexOfTitle = []; 38 | var indexOfContent = []; 39 | // only match articles with not empty titles 40 | if (title != '') { 41 | keywords.forEach(function (keyword) { 42 | function getIndexByWord(word, text, caseSensitive) { 43 | var wordLen = word.length; 44 | if (wordLen === 0) { 45 | return []; 46 | } 47 | var startPosition = 0, position = [], index = []; 48 | if (!caseSensitive) { 49 | text = text.toLowerCase(); 50 | word = word.toLowerCase(); 51 | } 52 | while ((position = text.indexOf(word, startPosition)) > -1) { 53 | index.push({ position: position, word: word }); 54 | startPosition = position + wordLen; 55 | } 56 | return index; 57 | } 58 | 59 | indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false)); 60 | indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false)); 61 | }); 62 | if (indexOfTitle.length > 0 || indexOfContent.length > 0) { 63 | isMatch = true; 64 | hitCount = indexOfTitle.length + indexOfContent.length; 65 | } 66 | } 67 | 68 | // show search results 69 | 70 | if (isMatch) { 71 | // sort index by position of keyword 72 | 73 | [indexOfTitle, indexOfContent].forEach(function (index) { 74 | index.sort(function (itemLeft, itemRight) { 75 | if (itemRight.position !== itemLeft.position) { 76 | return itemRight.position - itemLeft.position; 77 | } else { 78 | return itemLeft.word.length - itemRight.word.length; 79 | } 80 | }); 81 | }); 82 | 83 | // merge hits into slices 84 | 85 | function mergeIntoSlice(text, start, end, index) { 86 | var item = index[index.length - 1]; 87 | var position = item.position; 88 | var word = item.word; 89 | var hits = []; 90 | var searchTextCountInSlice = 0; 91 | while (position + word.length <= end && index.length != 0) { 92 | if (word === searchText) { 93 | searchTextCountInSlice++; 94 | } 95 | hits.push({ position: position, length: word.length }); 96 | var wordEnd = position + word.length; 97 | 98 | // move to next position of hit 99 | 100 | index.pop(); 101 | while (index.length != 0) { 102 | item = index[index.length - 1]; 103 | position = item.position; 104 | word = item.word; 105 | if (wordEnd > position) { 106 | index.pop(); 107 | } else { 108 | break; 109 | } 110 | } 111 | } 112 | searchTextCount += searchTextCountInSlice; 113 | return { 114 | hits: hits, 115 | start: start, 116 | end: end, 117 | searchTextCount: searchTextCountInSlice 118 | }; 119 | } 120 | 121 | var slicesOfTitle = []; 122 | if (indexOfTitle.length != 0) { 123 | slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle)); 124 | } 125 | 126 | var slicesOfContent = []; 127 | while (indexOfContent.length != 0) { 128 | var item = indexOfContent[indexOfContent.length - 1]; 129 | var position = item.position; 130 | var word = item.word; 131 | // cut out 100 characters 132 | var start = position - 20; 133 | var end = position + 80; 134 | if (start < 0) { 135 | start = 0; 136 | } 137 | if (end < position + word.length) { 138 | end = position + word.length; 139 | } 140 | if (end > content.length) { 141 | end = content.length; 142 | } 143 | slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent)); 144 | } 145 | 146 | // sort slices in content by search text's count and hits' count 147 | 148 | slicesOfContent.sort(function (sliceLeft, sliceRight) { 149 | if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) { 150 | return sliceRight.searchTextCount - sliceLeft.searchTextCount; 151 | } else if (sliceLeft.hits.length !== sliceRight.hits.length) { 152 | return sliceRight.hits.length - sliceLeft.hits.length; 153 | } else { 154 | return sliceLeft.start - sliceRight.start; 155 | } 156 | }); 157 | 158 | slicesOfContent = slicesOfContent.slice(0, 1); 159 | 160 | // highlight title and content 161 | 162 | function highlightKeyword(text, slice) { 163 | var result = ''; 164 | var prevEnd = slice.start; 165 | slice.hits.forEach(function (hit) { 166 | result += text.substring(prevEnd, hit.position); 167 | var end = hit.position + hit.length; 168 | result += '' + text.substring(hit.position, end) + ''; 169 | prevEnd = end; 170 | }); 171 | result += text.substring(prevEnd, slice.end); 172 | return result; 173 | } 174 | 175 | var resultItem = ''; 176 | 177 | if (slicesOfTitle.length != 0) { 178 | resultItem += "
  • " + highlightKeyword(title, slicesOfTitle[0]) + ""; 179 | } else { 180 | resultItem += "
  • " + title + ""; 181 | } 182 | 183 | slicesOfContent.forEach(function (slice) { 184 | resultItem += "" + 185 | "

    " + highlightKeyword(content, slice) + 186 | "...

    " + "
    "; 187 | }); 188 | 189 | resultItem += "
  • "; 190 | resultItems.push({ 191 | item: resultItem, 192 | searchTextCount: searchTextCount, 193 | hitCount: hitCount, 194 | id: resultItems.length 195 | }); 196 | } 197 | }) 198 | } 199 | if (keywords.length === 1 && keywords[0] === "") { 200 | resultContent.innerHTML = '
    ' 201 | } else if (resultItems.length === 0) { 202 | resultContent.innerHTML = '
    ' 203 | } else { 204 | resultItems.sort(function (resultLeft, resultRight) { 205 | if (resultLeft.searchTextCount !== resultRight.searchTextCount) { 206 | return resultRight.searchTextCount - resultLeft.searchTextCount; 207 | } else if (resultLeft.hitCount !== resultRight.hitCount) { 208 | return resultRight.hitCount - resultLeft.hitCount; 209 | } else { 210 | return resultRight.id - resultLeft.id; 211 | } 212 | }); 213 | var searchResultList = '
      '; 214 | resultItems.forEach(function (result) { 215 | searchResultList += result.item; 216 | }) 217 | searchResultList += "
    "; 218 | resultContent.innerHTML = searchResultList; 219 | } 220 | } 221 | 222 | input.addEventListener('input', inputEventFunction, false); 223 | } 224 | }); 225 | } -------------------------------------------------------------------------------- /source/css/_partial/article.less: -------------------------------------------------------------------------------- 1 | .post-widget { 2 | width: @asideW - 10px; 3 | position: absolute; 4 | right: -@asideW - 30px; 5 | top: -@postOffsetY + 10px; 6 | max-height: calc(~"100% - @{topBarH} * 3 - 40px - 16px"); 7 | overflow-y: scroll; 8 | &.fixed { 9 | // .transition(0.4s); 10 | position: fixed; 11 | top: @topBarH + 10px; 12 | } 13 | } 14 | 15 | .post-article { 16 | width: calc( ~"100% - 200px" ); 17 | position: relative; 18 | 19 | .card { 20 | padding: 20px; 21 | .card(3px); 22 | > *:last-child { 23 | margin-bottom: 0; 24 | } 25 | > *:first-child { 26 | // padding-top: 0; 27 | margin-top: 0; 28 | } 29 | } 30 | 31 | .card, 32 | .column{ 33 | margin-bottom: 20px; 34 | } 35 | } 36 | 37 | @media screen and (max-width: 1040px) { 38 | .post-widget { 39 | display: none; 40 | } 41 | .post-article { 42 | width: 100%; 43 | } 44 | } 45 | 46 | .post-toc-wrap { 47 | overflow-x: hidden; 48 | ol, 49 | ul { 50 | list-style: none; 51 | margin: 0; 52 | } 53 | 54 | strong { 55 | line-height: 2rem; 56 | font-size: @font-size + 1; 57 | font-weight: bold; 58 | color: @textSecondaryColor; 59 | } 60 | } 61 | .post-toc-child { 62 | padding-left: 10px; 63 | } 64 | .post-toc { 65 | padding: 0; 66 | font-size: @font-size - 1; 67 | } 68 | .post-toc-item { 69 | line-height: 1.5rem; 70 | color: @textSecondaryColor; 71 | text-overflow: ellipsis; 72 | overflow: hidden; 73 | white-space: nowrap; 74 | cursor: pointer; 75 | .transition(0.3s); 76 | &:not(.active) ol{ 77 | display: none; 78 | } 79 | &:not(.active){ 80 | text-shadow: initial; 81 | color: @textSecondaryColor; 82 | .post-toc-link{ 83 | color: @textSecondaryColor; 84 | } 85 | .post-toc-number{ 86 | color: @textSecondaryColor; 87 | } 88 | } 89 | &:hover, 90 | &.active { 91 | color: @primaryColor_2; 92 | text-shadow: 0 0 0.5px @primaryColor_2; 93 | .post-toc-link{ 94 | color: @primaryColor_2; 95 | } 96 | } 97 | } 98 | .post-toc-link { 99 | padding-right: 10px; 100 | color: @textSecondaryColor; 101 | .transition(none); 102 | &:hover{ 103 | text-decoration: none; 104 | } 105 | } 106 | 107 | .toc-bar{ 108 | width: calc(~"100% + 10px"); 109 | height: 1.5rem; 110 | background: rgba(0, 0, 0, .1); 111 | position: absolute; 112 | left: -10px; 113 | top: 2rem; 114 | border-left: 2px solid @primaryColor_2; 115 | .transition(0.2s); 116 | } 117 | 118 | .post-article { 119 | .post-content { 120 | padding-top: 20px; 121 | } 122 | } 123 | .post-card { 124 | margin-top: @postOffsetY; 125 | min-height: 100px; 126 | padding: 35px; 127 | background: #fff; 128 | border-radius: 4px; 129 | box-shadow: 0 10px 30px rgba(0, 0, 0, .2); 130 | .post-meta { 131 | margin-top: 8px; 132 | } 133 | } 134 | .post-card-title { 135 | color: @primaryColor_1; 136 | font-size: @font-size + 18; 137 | text-align: center; 138 | text-shadow: 1px 1px 2px rgba(0,0,0,0.2); 139 | } 140 | .post-nav { 141 | margin-top: 30px; 142 | padding: 16px 0 0; 143 | 144 | .prev, 145 | .next { 146 | width: 47%; 147 | } 148 | 149 | .next { 150 | text-align: right; 151 | } 152 | } 153 | 154 | .post-nav-link { 155 | display: block; 156 | line-height: 2em; 157 | font-size: @font-size + 2; 158 | padding: 10px 16px; 159 | .transition(0.2s); 160 | .hoverLine(@primaryColor_1); 161 | &:hover{ 162 | text-decoration: none; 163 | } 164 | 165 | .icon { 166 | vertical-align: -9%; 167 | } 168 | 169 | .tips { 170 | color: @textSecondaryColor; 171 | } 172 | 173 | } 174 | 175 | .post-copyright { 176 | margin-bottom: 100px; 177 | font-size: @font-size; 178 | 179 | .content { 180 | margin-bottom: 1em; 181 | padding: 20px 30px; 182 | word-break: break-all; 183 | color: @textSecondaryColor; 184 | background: @copyrightColor; 185 | border-radius: 30px 30px 0; 186 | } 187 | 188 | footer { 189 | float: right; 190 | 191 | a { 192 | position: relative; 193 | display: block; 194 | overflow: hidden; 195 | padding: 0 16px 0 42px; 196 | height: 28px; 197 | line-height: 28px; 198 | color: @textSecondaryColor; 199 | background: @copyrightColor; 200 | border-radius: 14px; 201 | } 202 | img { 203 | position: absolute; 204 | top: 0; 205 | left: 0; 206 | width: 28px; 207 | height: 28px; 208 | border-radius: 50%; 209 | } 210 | } 211 | } 212 | 213 | .post-footer { 214 | position: relative; 215 | margin: 0 -35px; 216 | padding: 20px 35px 0; 217 | border-top: 1px solid #ddd; 218 | } 219 | 220 | .post-content { 221 | padding-bottom: 20px; 222 | line-height: 1.8; 223 | 224 | >.highlight, 225 | >.image-bubble, 226 | >pre { 227 | margin-left: -35px; 228 | margin-right: -35px; 229 | } 230 | 231 | >.highlight, 232 | >pre { 233 | padding: 20px 35px; 234 | } 235 | 236 | .image-bubble { 237 | margin-top: 20px; 238 | margin-bottom: 20px; 239 | text-align: center; 240 | } 241 | .image-caption { 242 | display: inline-block; 243 | margin-top: 10px; 244 | color: @textSecondaryColor; 245 | } 246 | 247 | .headerlink { 248 | opacity: 0; 249 | margin-left: -1em; 250 | padding-right: 5px; 251 | color: @lightPrimaryColor; 252 | transition: 0.2s; 253 | &:before { 254 | content: "#"; 255 | } 256 | } 257 | 258 | p { 259 | word-wrap: break-word; 260 | } 261 | 262 | p, 263 | li { 264 | a { 265 | color: @primaryColor_2; 266 | border-bottom: 1px dotted lighten(@primaryColor_2, 20%); 267 | word-break: break-all; 268 | &:hover, 269 | &:active { 270 | text-decoration: none; 271 | border-bottom-style: solid; 272 | opacity: .7; 273 | } 274 | } 275 | } 276 | 277 | strong { 278 | font-weight: bold; 279 | color: @primaryColor_2; 280 | a { 281 | border-color: @primaryColor_2 282 | } 283 | } 284 | 285 | em { 286 | color: @textSecondaryColor; 287 | } 288 | 289 | h1 { 290 | font-size: @font-size + 10; 291 | } 292 | 293 | h2 { 294 | font-size: @font-size + 6; 295 | } 296 | 297 | h3 { 298 | font-size: @font-size + 3; 299 | } 300 | 301 | h4 { 302 | font-size: @font-size + 2; 303 | } 304 | 305 | h5 { 306 | font-size: @font-size + 1; 307 | } 308 | 309 | h6 { 310 | font-size: @font-size; 311 | } 312 | 313 | h1, 314 | h2, 315 | h3, 316 | h4, 317 | h5 { 318 | padding-top: @topBarH; 319 | margin-top: @topBarH * -1; 320 | } 321 | 322 | h1, 323 | h2, 324 | h3, 325 | h4, 326 | blockquote, 327 | ol, 328 | p, 329 | pre, 330 | table, 331 | ul, 332 | figure, 333 | .video-container { 334 | margin-bottom: 20px; 335 | } 336 | .video-container iframe { 337 | max-width: 100%; 338 | } 339 | 340 | h1, 341 | h2, 342 | h3, 343 | h4, 344 | h5, 345 | h6 { 346 | color: @primaryColor_1; 347 | &:hover { 348 | .headerlink { 349 | opacity: 1; 350 | } 351 | } 352 | } 353 | 354 | blockquote p:first-child, 355 | blockquote:first-child, 356 | ol:first-child, 357 | p:first-child, 358 | pre:first-child, 359 | table:first-child, 360 | ul:first-child, 361 | figure:first-child { 362 | margin-top: 0 363 | } 364 | 365 | ol, 366 | ul { 367 | font-size: @font-size; 368 | line-height: 30px; 369 | } 370 | 371 | video, 372 | audio { 373 | max-width: 100%; 374 | } 375 | 376 | 377 | blockquote { 378 | position: relative; 379 | padding: 16px 20px; 380 | border-left: 4px solid @primaryColor_2; 381 | color: @textSecondaryColor; 382 | background: @backColor; 383 | font-size: @font-size; 384 | border-radius: 0 2px 2px 0; 385 | 386 | p { 387 | margin: 0; 388 | } 389 | 390 | footer { 391 | margin-top: 10px; 392 | text-align: right; 393 | font-size: 80%; 394 | } 395 | 396 | ul:first-child{ 397 | margin-bottom: 0; 398 | } 399 | ul:not(:first-child){ 400 | margin-top: 20px; 401 | } 402 | } 403 | 404 | table { 405 | width: 100%; 406 | border: 1px solid #dedede; 407 | margin: 15px 0; 408 | border-collapse: collapse; 409 | 410 | tr, 411 | td { 412 | height: 35px; 413 | } 414 | 415 | thead { 416 | tr { 417 | background: #f8f8f8; 418 | } 419 | } 420 | 421 | tbody { 422 | tr { 423 | &:hover { 424 | background: #efefef; 425 | } 426 | } 427 | } 428 | 429 | td, 430 | th { 431 | border: 1px solid #dedede; 432 | padding: 0 10px; 433 | } 434 | } 435 | 436 | figure { 437 | table { 438 | border: none; 439 | width: auto; 440 | margin: 0; 441 | 442 | tbody { 443 | tr { 444 | &:hover { 445 | background: none; 446 | } 447 | } 448 | 449 | td { 450 | border: none; 451 | } 452 | } 453 | } 454 | } 455 | 456 | code, 457 | kbd, 458 | pre, 459 | samp { 460 | font-family: @font-code; 461 | } 462 | 463 | code, 464 | pre { 465 | display: inline-block; 466 | vertical-align: middle; 467 | } 468 | 469 | p code, 470 | li code { 471 | color: @primaryColor_2; 472 | line-height: 1; 473 | margin: 0 4px; 474 | font-size: 80%; 475 | padding: 3px 5px; 476 | border: 1px solid #eee; 477 | border-radius: 2px; 478 | word-wrap: break-word; 479 | } 480 | 481 | blockquote code{ 482 | background: @textPrimaryColorWhite; 483 | } 484 | 485 | pre { 486 | margin: 24px 0; 487 | code { 488 | border-radius: 0; 489 | font-size: inherit; 490 | margin: 0; 491 | padding: 0; 492 | } 493 | } 494 | 495 | .column-2, 496 | .column-3 { 497 | .flex-row; 498 | .flex-row-wrap; 499 | .flex-justify-between; 500 | 501 | // > * { 502 | // .flex-col; 503 | // } 504 | } 505 | 506 | .column-2 { 507 | > * { 508 | width: 48%; 509 | } 510 | } 511 | 512 | .column-3 { 513 | > * { 514 | width: 31%; 515 | } 516 | } 517 | } 518 | 519 | 520 | .comments { 521 | padding: 40px 0 0; 522 | } 523 | 524 | @media screen and (max-width:760px) { 525 | .post-widget { 526 | display: none 527 | } 528 | 529 | .post-article { 530 | float: none; 531 | width: 100%!important; 532 | padding-right: 0!important; 533 | } 534 | 535 | .post-card { 536 | position: relative; 537 | margin: 0 -16px; 538 | border-radius: 0; 539 | padding: 16px; 540 | 541 | .post-meta { 542 | margin-top: -40px; 543 | padding: 20px 12px; 544 | background: #fff; 545 | box-shadow: 0 1px 4px 0 rgba(0,0,0,.16); 546 | border-radius: 2px; 547 | } 548 | } 549 | 550 | .post-card-title { 551 | display: none 552 | } 553 | 554 | .post-nav { 555 | padding: 0; 556 | margin-left: -16px; 557 | margin-right: -16px; 558 | .prev, 559 | .next { 560 | width: 50%; 561 | background: #fff; 562 | border-bottom: 1px solid @borderColor; 563 | box-shadow: @boxShadow; 564 | } 565 | h4 { 566 | font-size: @font-size + 2; 567 | line-height: 1.5; 568 | } 569 | } 570 | 571 | .has-jax { 572 | font-size: @font-size - 1; 573 | } 574 | .MJXc-display { 575 | overflow-x: auto; 576 | overflow-y: hidden; 577 | } 578 | 579 | .comments { 580 | margin-left: -16px; 581 | margin-right: -16px 582 | } 583 | } 584 | 585 | @media screen and (max-width:480px) { 586 | .has-jax { 587 | font-size: @font-size - 4; 588 | } 589 | .post-content { 590 | .highlight, 591 | .image-bubble, 592 | >pre { 593 | margin-left: -16px; 594 | margin-right: -16px; 595 | } 596 | .highlight, 597 | >pre { 598 | padding: 16px; 599 | } 600 | } 601 | } 602 | 603 | --------------------------------------------------------------------------------