├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── _config.yml ├── _source ├── about │ └── index.md ├── project │ └── index.md ├── series │ └── index.md └── tags │ └── index.md ├── layout ├── _partial │ ├── archive.ejs │ ├── catalog.ejs │ ├── footer.ejs │ ├── head.ejs │ ├── header.ejs │ ├── nav.ejs │ ├── pager.ejs │ ├── search │ │ ├── localsearch_button.ejs │ │ └── localsearch_view.ejs │ ├── tag.ejs │ └── top.ejs ├── _third-party │ ├── google_analytics.ejs │ ├── localsearch.ejs │ └── mathjax.ejs ├── about.ejs ├── archive.ejs ├── index.ejs ├── layout.ejs ├── page.ejs ├── project.ejs ├── series.ejs └── tags.ejs ├── lint.sh ├── package.json └── source ├── css ├── _config.styl ├── _partial │ ├── about.styl │ ├── archive.styl │ ├── catalog.styl │ ├── categories.styl │ ├── footer.styl │ ├── header.styl │ ├── markdown.styl │ ├── nav.styl │ ├── pager.styl │ ├── project.styl │ ├── search.styl │ └── tags.styl ├── images │ ├── alipay.jpg │ ├── catalog.png │ ├── error_icon.png │ ├── escheres.png │ ├── ga.png │ ├── icp.png │ ├── logo.png │ ├── menu.png │ ├── top.png │ └── wechat.jpg ├── plugins │ └── gitment.css └── style.styl ├── fonts └── SourceSansPro.ttf └── js ├── gitment.js ├── local-search.js ├── qrious.js └── script.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | node_modules/ 3 | .DS_Store 4 | *.log 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | - "7" 5 | cache: 6 | directories: 7 | - "node_modules" 8 | script: 9 | - npm run lint -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 yanm1ng 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vexo = Vue.js Style + Hexo 2 | 3 | > Vexo is a Hexo theme inspired by [Vue.js](https://cn.vuejs.org) official website. 4 | 5 | [![Build Status](https://travis-ci.org/yanm1ng/hexo-theme-vexo.svg?branch=master)](https://travis-ci.org/yanm1ng/hexo-theme-vexo) 6 | [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 7 | 8 | 9 | ## Intro 10 | 11 | ![](http://file.muyutech.com/vexo.png) 12 | 13 | ## Demo 14 | 15 | [Live Example](https://yanm1ng.github.io/) 16 | 17 | ## Features 18 | 19 | * Fully Responsive 20 | * Baidu Analytics 21 | * [Youyan](http://www.uyan.cc/) 22 | * [Gitment](https://imsun.github.io/gitment/) 23 | * Share Qrcode 24 | * SEO 25 | * Immersive Status Bar 26 | * Article Catalog 27 | 28 | ## Install 29 | 30 | 1. Download/Checkout this theme into your project 31 | 32 | ``` 33 | cd your-hexo-folder 34 | 35 | git clone https://github.com/yanm1ng/hexo-theme-vexo.git themes/vexo 36 | 37 | cp -R themes/vexo/_source/* source/ 38 | ``` 39 | 40 | 2. Update project `_config.yml` theme config, look like this 41 | 42 | ``` 43 | themes: vexo 44 | ``` 45 | 46 | Here theme's name must same as the theme folder name. 47 | 48 | 3. Modify theme `themes/vexo/_config.yml` with your own info. 49 | 50 | 4. That's all , hope you will like :) 51 | 52 | ## Update Version 53 | 54 | ``` 55 | cd themes/vexo 56 | git pull 57 | ``` 58 | 59 | ## Post 60 | 61 | The **front-matter** of a post looks like that: 62 | 63 | ``` 64 | --- 65 | title: "Hello World" 66 | date: 2016-06-10 23:00 67 | banner: your-banner-link.jpg 68 | tags: 69 | - Movies 70 | - Life 71 | --- 72 | ``` 73 | 74 | Add this to the top of your article markdown file. 75 | 76 | ## Change Log 77 | **2017-09-21** 78 | * Added article catalog 79 | * Fixed bugs 80 | 81 | **2017-08-08** 82 | * Added article custom banner 83 | * Fixed gitment error 84 | 85 | **2017-06-27** 86 | * Added image-zoom 87 | * Added project-link 88 | 89 | **2017-06-25** 90 | * Added image load `onerror` replace default image 91 | * Added page [loading-bar](https://github.com/rstacruz/nprogress) 92 | * Fixed bugs 93 | 94 | **2017-06-23** 95 | * Added project page to show github project 96 | * Fixed share url error 97 | * Support markdown `table` & `hr` 98 | 99 | **2017-06-20** 100 | * Added personal link icons, support: 101 | * github 102 | * zhihu 103 | * twitter 104 | * weibo 105 | * Fixed bugs 106 | 107 | **2017-06-15** 108 | * Add personal about page 109 | * Replace font-family 110 | * Ignore text-autosizer/font-boosting on mobile-device 111 | * Fixed bugs 112 | 113 | **2017-06-12** 114 | * Added enter-out transition 115 | * Fixed bugs 116 | 117 | **2017-06-11** 118 | * Added archive page 119 | * Fixed HighLight code line-number bug 120 | * Adjust home post display problem 121 | * Thanks @ky0ncheng issue 122 | 123 | ## Comment 124 | 125 | #### 1. Gitment 126 | Vexo use [Gitment](https://github.com/imsun/gitment) as the third party discussion system. 127 | 128 | You can easily complete your comment configuration by just adding your settings into `_config.yml` 129 | 130 | ``` 131 | # comment 132 | # you can set utterances, gitment, uyan or disqus 133 | comment: gitment 134 | 135 | # Gitment 136 | gitment_owner: yanm1ng 137 | gitment_repo: yanm1ng.github.io 138 | gitment_oauth_id: 139 | gitment_oauth_secret: 140 | ``` 141 | 142 | How to use Gitment? [See](https://imsun.github.io/gitment/) 143 | 144 | #### 2. Utterances 145 | 146 | You can also take [Utterances](https://utteranc.es/) as your comment system. It is a lightweight comments widget built on Github issues. You can easily configure which comment system you use in `_config.yml` of this theme. 147 | 148 | ``` 149 | # comment 150 | # you can set utterances, gitment, uyan or disqus 151 | comment: utterances 152 | 153 | # utterances config 154 | utterances_repo: # GitHubAccount/RepoForUtterances 155 | utterances_issue_term: pathname 156 | utterances_theme: github-light 157 | ``` 158 | 159 | A simple introduction and guide for Utterances is [Here](https://utteranc.es/). 160 | 161 | ## Local Search (Search in the blog) 162 | You can add local search engine in your blog. It requires `hexo-generator-searchdb` which can be installed with `npm install hexo-generator-searchdb`. The full instruction can be found [Here](https://github.com/theme-next/hexo-generator-searchdb). 163 | 164 | After installing `hexo-generator-searchdb`, you can enable `local search` in `_config.yml`. It makes the search button visible at the right of the menu bar. 165 | 166 | ``` 167 | # Local Search Support 168 | local_search: 169 | enable: true 170 | ``` 171 | 172 | ## Reward 173 | 174 | You can replace your own Alipay/Wechat qrcode in `themes/source/css/images` 175 | 176 | Here the name must same as `alipay.jpg` or `wechat.jpg`. 177 | 178 | ## Links 179 | 180 | You can easily add your social account by just adding your settings into `_config.yml` 181 | ``` 182 | # Links 183 | weibo_username: your_weibo_account 184 | twitter_username: your_twitter_account 185 | github_username: your_github_account 186 | zhihu_username: your_zhihu_account 187 | ``` 188 | 189 | ## About 190 | 191 | - Give a star if you like , fork or just clone to use , and also you can help me fix bugs and add new feature :) 192 | - If you have any problem or requirement , just open an issue here and i will help you. 193 | - Thanks to [@imsun](https://github.com/imsun) , [@Evan You](https://github.com/yyx990803) and [@Hexo](https://hexo.io). 194 | 195 | ## LICENSE 196 | MIT -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | author: yanm1ng # 作者 2 | description: yanm1ng's blog 3 | keyword: hexo-theme, vuejs 4 | 5 | excerpt_link: Read more 6 | 7 | menu: 8 | Home: / 9 | Series: /series/ 10 | Tags: /tags/ 11 | Archives: /archives/ 12 | Projects: /project/ 13 | About: /about/ 14 | 15 | # highlight 16 | highlight: 17 | tomorrow 18 | 19 | # catalog 20 | catalog: true 21 | 22 | # donate 23 | donate: true 24 | 25 | # qrcode 26 | qrcode: true 27 | 28 | # comment 29 | # you can set utterances, gitment, uyan or disqus 30 | comment: utterances 31 | 32 | # utterances config 33 | utterances_repo: # e.g. GitHubAccount/RepoForUtterances 34 | utterances_issue_term: pathname # you can see other available options at 'https://utteranc.es/' 35 | utterances_theme: github-light # you can see other available options at 'https://utteranc.es/' 36 | 37 | # gitment config 38 | gitment_owner: yanm1ng 39 | gitment_repo: yanm1ng.github.io 40 | gitment_oauth_id: 0f87e490e00ee3fd87ef 41 | gitment_oauth_secret: 4a9d2b148e7971c2201ad12131ce8bf8159ccd2e 42 | 43 | # uyan config 44 | # if you want to use uyan as your blog comment, plz remove/comment out gitment config 45 | baidu_id: 46 | google_analytics: 47 | # disqus config 48 | disqus_shortname: 49 | 50 | about: 51 | banner: "" 52 | avatar: https://avatars3.githubusercontent.com/u/16443628?v=3&s=460 53 | description: "The end is always near." 54 | weibo_username: yanm1ng 55 | twitter_username: yanm1ng 56 | github_username: yanm1ng 57 | zhihu_username: yummy1121 58 | douban_username: yanm1ng 59 | linkedin_username: 60 | 61 | # MathJax Support 62 | mathjax: 63 | enable: true 64 | per_page: false 65 | cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML 66 | 67 | # Local Search Support 68 | local_search: 69 | enable: true 70 | 71 | # China Registration 72 | # e.g. 京ICP备12345678号-1 73 | icp: 74 | enable: false 75 | number: 京ICP备12345678号-1 # e.g. 京ICP备12345678号-1 76 | # e.g. 京公网安备 12345678901234号 77 | ga: 78 | enable: false 79 | province: 京 # e.g. 京 80 | number: 12345678901234 # e.g. 12345678901234 81 | 82 | -------------------------------------------------------------------------------- /_source/about/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | layout: about 4 | --- -------------------------------------------------------------------------------- /_source/project/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Project 3 | layout: project 4 | --- 5 | -------------------------------------------------------------------------------- /_source/series/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Series 3 | layout: series 4 | --- 5 | -------------------------------------------------------------------------------- /_source/tags/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tags 3 | layout: tags 4 | --- 5 | -------------------------------------------------------------------------------- /layout/_partial/archive.ejs: -------------------------------------------------------------------------------- 1 |
2 |

3 | <%= year %> 4 |

5 |
6 | <% posts.sort((l, r) => r.date - l.date) %> 7 | <% posts.forEach(post => { %> 8 |
9 | <%= post.title %> 10 |

<%-date(post.date, "MM-DD")%>

11 |
12 | <% }) %> 13 |
14 |
-------------------------------------------------------------------------------- /layout/_partial/catalog.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layout/_partial/footer.ejs: -------------------------------------------------------------------------------- 1 | 18 | 19 | 29 | 34 | 35 | 55 | 56 | <% if (config.ba_track_id) { %> 57 | 68 | <% } %> 69 | <%- js('js/script') %> 70 | -------------------------------------------------------------------------------- /layout/_partial/head.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <% if (config.favicon || theme.favicon){ %> 7 | 8 | <% } else { %> 9 | <%- favicon_tag('css/images/logo.png') %> 10 | <% } %> 11 | 12 | <% if (page.title){ %> 13 | <%= page.title %> | <%= config.title %> 14 | <% } else { %> 15 | <%= config.title %> 16 | <% } %> 17 | 18 | 19 | 20 | 21 | <%- css('css/style') %> 22 | <% if (theme.comment === 'gitment') { %> 23 | <%- css('css/plugins/gitment.css') %> 24 | <% } %> 25 | 26 | 27 | 28 | <% if (theme.qrcode) { %> 29 | <%- js('js/qrious') %> 30 | <% } %> 31 | <% if (theme.comment === 'gitment') { %> 32 | <%- js('js/gitment') %> 33 | <% } %> 34 | <%- partial('_third-party/mathjax') %> 35 | <%- partial('_third-party/google_analytics') %> 36 | <%- partial('_third-party/localsearch') %> 37 | 38 |
39 | 40 |
-------------------------------------------------------------------------------- /layout/_partial/header.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | <%- config.title %> 6 | 7 | 21 | 26 | 39 | <% if (theme.local_search.enable == true) { %> 40 | <%- partial('_partial/search/localsearch_view.ejs') %> 41 | <% } %> 42 |
43 |
44 | -------------------------------------------------------------------------------- /layout/_partial/nav.ejs: -------------------------------------------------------------------------------- 1 | <% if (page.prev || page.next){ %> 2 | 25 | <% } %> -------------------------------------------------------------------------------- /layout/_partial/pager.ejs: -------------------------------------------------------------------------------- 1 |
2 | <% if (page.prev) { %> 3 | Prev 4 | <% } else { %> 5 | Prev 6 | <% } %> 7 | <% if (page.next) { %> 8 | Next 9 | <% } else { %> 10 | Next 11 | <% } %> 12 |
-------------------------------------------------------------------------------- /layout/_partial/search/localsearch_button.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layout/_partial/search/localsearch_view.ejs: -------------------------------------------------------------------------------- 1 |
2 | 22 |
-------------------------------------------------------------------------------- /layout/_partial/tag.ejs: -------------------------------------------------------------------------------- 1 | <% tags.each(function(tag) { %> 2 | 3 | <%= tag.name %> 4 | 5 | <% }) %> -------------------------------------------------------------------------------- /layout/_partial/top.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /layout/_third-party/google_analytics.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.google_analytics) { %> 2 | 3 | 4 | 10 | <% } %> -------------------------------------------------------------------------------- /layout/_third-party/localsearch.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.local_search.enable == true) { %> 2 | <%- js('js/local-search.js') %> 3 | <% } %> -------------------------------------------------------------------------------- /layout/_third-party/mathjax.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.mathjax.enable) { %> 2 | <% if (!theme.mathjax.per_page || (page.total || page.mathjax)) { %> 3 | 4 | 13 | 14 | 22 | 23 | 24 | <% } %> 25 | <% } %> 26 | -------------------------------------------------------------------------------- /layout/about.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |

<%- config.author %>

7 | <% if (typeof(theme.about.description) === 'object') { %> 8 | <% for (var i in theme.about.description) { %> 9 |

10 | <%- theme.about.description[i] %> 11 |

12 | <% } %> 13 | <% } else { %> 14 |

<%- theme.about.description %>

15 | <% } %> 16 |
17 | <% if (theme.about.weibo_username) { %> 18 | 19 | 20 | 21 | 22 | 23 | 24 | <% } %> 25 | <% if (theme.about.twitter_username) { %> 26 | 27 | 28 | 29 | 30 | 31 | 32 | <% } %> 33 | <% if (theme.about.github_username) { %> 34 | 35 | 36 | 37 | 38 | 39 | 40 | <% } %> 41 | <% if (theme.about.linkedin_username) { %> 42 | 43 | 44 | 45 | 46 | 47 | 48 | <% } %> 49 | <% if (theme.about.zhihu_username) { %> 50 | 51 | 52 | 53 | 54 | 55 | 56 | <% } %> 57 | <% if (theme.about.douban_username) { %> 58 | 59 | 60 | 61 | 62 | 63 | 64 | <% } %> 65 |
66 |
67 | 68 | 81 | -------------------------------------------------------------------------------- /layout/archive.ejs: -------------------------------------------------------------------------------- 1 |
2 |

Archives

3 |

Archives

4 |
5 |
6 | <% let years = {}; %> 7 | <% 8 | site.posts.each(post => { 9 | const y = post.date.year(); 10 | if (!years[y]) { 11 | years[y] = []; 12 | } 13 | years[y].push(post); 14 | }) 15 | %> 16 | <% for (let year of Object.keys(years).reverse()) { %> 17 | <%- partial('_partial/archive', { year: year, posts: years[year].reverse() }) %> 18 | <% } %> 19 |
20 | 21 | -------------------------------------------------------------------------------- /layout/index.ejs: -------------------------------------------------------------------------------- 1 |
2 | <% page.posts.each(function(post) { %> 3 |
4 |

5 | <%- post.title %> 6 |

7 | 8 | <% if (post.tags && post.tags.length) { %> 9 | <%- partial('_partial/tag', { tags: post.tags }) %> 10 | <% } %> 11 |
12 | <% if (post.excerpt) { %> 13 | <%- post.excerpt %> 14 | <% } else { %> 15 | <%- truncate(strip_html(post.content), { length: 150, omission: ' ...' }) %> 16 | <% } %> 17 |
18 | <%- theme.excerpt_link %> 19 |
20 | <% }) %> 21 | 22 | <% if (page.total > 1){ %> 23 | <%- partial('_partial/pager') %> 24 | <% } %> 25 |
26 | 27 | -------------------------------------------------------------------------------- /layout/layout.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%- partial('_partial/head') %> 4 | 5 | <%- partial('_partial/header') %> 6 | <%- body %> 7 | <%- partial('_partial/top') %> 8 | <%- partial('_partial/footer') %> 9 | 10 | -------------------------------------------------------------------------------- /layout/page.ejs: -------------------------------------------------------------------------------- 1 |
2 |

<%- page.title %>

3 |

<%- date(page.date, "YYYY-MM-DD") %>

4 |
5 | 6 |
7 |
8 |
9 | 10 |
11 |
<%- page.content %>
12 | 13 | <% if (page.tags && page.tags.length) { %> 14 |
15 | Tags: 16 | <%- partial('_partial/tag', { tags: page.tags }) %> 17 |
18 | <% } %> 19 | 20 | 21 | <%- partial('_partial/nav') %> 22 | 23 | 24 | <% if (theme.donate) { %> 25 |
26 |
27 | 赏 28 | 29 | 30 |
31 | 使用支付宝打赏 32 |
33 | 34 |
35 | 使用微信打赏 36 |
37 |
38 |
39 |

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

40 |
41 | <% } %> 42 | 43 | 44 | <% if (theme.qrcode) { %> 45 |
46 | 47 |

扫描二维码,分享此文章

48 |
49 | <% } %> 50 | 51 | <% if (theme.comment === 'utterances') { %> 52 | 53 |
54 | 60 | 61 | <% } else if (theme.comment === 'gitment') { %> 62 | 63 |
64 | 65 | <% } else if (theme.comment === 'uyan') { %> 66 | 67 |
68 | 69 | 70 | <% } else if (theme.comment === 'disqus') { %> 71 | 72 |
73 | 74 | <% } else { %> 75 | 76 | <% } %> 77 |
78 | 79 | 80 | <% if (theme.catalog) { %> 81 | <%- partial('_partial/catalog') %> 82 | <% } %> 83 | 84 |
85 | 86 | 135 | 136 | <% if (theme.qrcode) { %> 137 | 143 | <% } %> 144 | 145 | <% if (theme.comment === 'gitment') { %> 146 | 173 | <% } %> 174 | 175 | <% if (theme.comment === 'disqus') { %> 176 | 189 | <% } %> 190 | -------------------------------------------------------------------------------- /layout/project.ejs: -------------------------------------------------------------------------------- 1 |
2 |

Projects

3 |

GitHub Open Source Projects

4 |
5 |
6 |
7 |
8 | -------------------------------------------------------------------------------- /layout/series.ejs: -------------------------------------------------------------------------------- 1 |
2 |

Series

3 |

Series by Categories

4 |
5 | 6 | <% let categories = {}; %> 7 | <% 8 | site.posts.each(post => { 9 | const c = post.categories['data'][0]['name']; 10 | if (!categories[c]) { 11 | categories[c] = []; 12 | } 13 | categories[c].push(post); 14 | }) 15 | %> 16 | 17 |
18 |
19 | <% for (let category of Object.keys(categories).sort().reverse()) { %> 20 | <%= category %> 21 | <% } %> 22 |
23 | 24 | <% for (let category of Object.keys(categories).sort().reverse()) { %> 25 |
26 |

<%= category %>

27 | <% categories[category].reverse().sort((l, r) => r.date - l.date) %> 28 | <% categories[category].reverse().forEach(post => { %> 29 | 34 | <% }) %> 35 |
36 | <% } %> 37 |
38 | 39 | 54 | -------------------------------------------------------------------------------- /layout/tags.ejs: -------------------------------------------------------------------------------- 1 |
2 |

Tags

3 |

Tag Retrieval

4 |
5 |
6 |
7 | <% site.tags.map(function(tag, index) { %> 8 | <%= tag.name %> 9 | <% }) %> 10 |
11 | <% site.tags.map(function(tag, index){ %> 12 |
13 |

<%= tag.name %>

14 | <% tag.posts.map(function(post) { %> 15 | 20 | <% }) %> 21 |
22 | <% }) %> 23 |
24 | 25 | -------------------------------------------------------------------------------- /lint.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Lint EJS files 4 | for f in $(find ./layout -name "*.ejs"); do 5 | echo $f; 6 | node_modules/.bin/ejslint $f; 7 | done 8 | 9 | #Lint JS files 10 | for f in $(find ./source/js -name "*.js"); do 11 | echo $f; 12 | node_modules/.bin/standard $f; 13 | done -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-theme-vexo", 3 | "version": "1.4.0", 4 | "description": "Vexo is a Hexo theme inspired by Vue's official website.", 5 | "scripts": { 6 | "setup": "npm cache clean && npm install", 7 | "lint": "bash lint.sh" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/yanm1ng/hexo-theme-vexo.git" 12 | }, 13 | "keywords": [ 14 | "hexo", 15 | "theme", 16 | "vexo" 17 | ], 18 | "author": "yanm1ng", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/yanm1ng/hexo-theme-vexo/issues" 22 | }, 23 | "homepage": "https://github.com/yanm1ng/hexo-theme-vexo", 24 | "devDependencies": { 25 | "ejs-lint": "^0.2.0", 26 | "eslint": "^6.8.0", 27 | "eslint-plugin-import": "^2.2.0", 28 | "standard": "^10.0.2" 29 | }, 30 | "standard": { 31 | "globals": [ 32 | "jQuery", 33 | "NProgress" 34 | ], 35 | "ignore": [ 36 | "source/js/gitment.js", 37 | "source/js/qrious.js" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /source/css/_config.styl: -------------------------------------------------------------------------------- 1 | // colors 2 | color-primary = #42b983 3 | color-border = #e5e5e5 4 | color-white = #ffffff 5 | color-background = #f8f8f8 6 | color-orange = #e96900 7 | color-dark = #34495e 8 | color-gray = #7f8c8d 9 | color-shadow = #e3e3e3 10 | // images 11 | logo-url = "images/logo.png" 12 | menu-url = "images/menu.png" 13 | arrow-url = "images/top.png" 14 | catalog-url = "images/catalog.png" 15 | alipay-url = "images/alipay.jpg" 16 | wechat-url = "images/wechat.jpg" 17 | avatar-url = "images/avatar.png" 18 | escheres-url = "images/escheres.png" 19 | 20 | m-mobile = "screen and (max-width: 480px)" 21 | m-pad = "screen and (max-width: 960px)" -------------------------------------------------------------------------------- /source/css/_partial/about.styl: -------------------------------------------------------------------------------- 1 | #about-banner 2 | width: 100% 3 | position: relative 4 | background-repeat: no-repeat 5 | background-position: center 6 | background-size: cover 7 | height: 350px 8 | &:after 9 | position: absolute 10 | top: 0 11 | left: 0 12 | width: 100% 13 | height: 100% 14 | content: '' 15 | background: url(escheres-url) 16 | background-color: rgba(0, 0, 0, .05) 17 | @media m-mobile 18 | height: 250px 19 | .author 20 | margin-top: -50px 21 | width: 100% 22 | background: color-background 23 | text-align: center 24 | padding: 0 1em 30px 1em 25 | box-sizing: border-box 26 | .head 27 | width: 100px 28 | height: 100px 29 | border-radius: 50% 30 | padding: 3px 31 | background: #fff 32 | box-shadow: 0 0 5px #95a5a6 33 | position: relative 34 | margin: 0 auto 35 | opacity: 0 36 | transform: translateY(-20px) 37 | transition: all 0.4s 38 | img 39 | width: 100% 40 | height: 100% 41 | display: block 42 | border-radius: 50% 43 | h3 44 | font-size: 1.4em 45 | opacity: 0 46 | transform: translateY(-20px) 47 | transition: all 0.4s 48 | transition-delay: 0.05s 49 | .description 50 | opacity: 0 51 | transform: translateY(-20px) 52 | transition: all 0.4s 53 | transition-delay: 0.1s 54 | .share-icons 55 | opacity: 0 56 | transform: translateY(-20px) 57 | transition: all 0.4s 58 | transition-delay: 0.15s 59 | margin-top: 2em 60 | a 61 | font-size: 1em 62 | display: inline-block 63 | margin: 0 .4em 64 | &:hover 65 | transition: opacity 0.2s 66 | opacity: .6 67 | .icon-weibo 68 | color: #e6162d 69 | .icon-github 70 | color: #333333 71 | .icon-linkedin 72 | color: #0077B5 73 | .icon-zhihu 74 | color: #0767c8 75 | .icon-twitter 76 | color: #2aa9e0 77 | .icon-douban 78 | color: #00B51D -------------------------------------------------------------------------------- /source/css/_partial/archive.styl: -------------------------------------------------------------------------------- 1 | #archives 2 | &:before 3 | position: absolute 4 | top: 2em 5 | bottom: 1em 6 | left: 30px 7 | height: auto 8 | content: '' 9 | background-color:color-primary 10 | width: 4px 11 | .time-section 12 | padding-left: 30px 13 | position: relative 14 | .section-year 15 | cursor: pointer 16 | font-size: 1.8em 17 | margin-left: 10px 18 | &:before 19 | position: absolute 20 | left: 8px 21 | top: 11px 22 | content: '' 23 | background-color: color-white 24 | width: 12px 25 | height: 12px 26 | border: 2px solid color-primary 27 | border-radius: 50% 28 | .section-list 29 | .section-list-item 30 | margin: 20px 0 20px 10px 31 | position: relative 32 | &:before 33 | position: absolute 34 | left: -29px 35 | top: 7px 36 | content: '' 37 | background-color: color-primary 38 | width: 10px 39 | height: 10px 40 | border-radius: 50% 41 | .archive-title 42 | color: color-dark 43 | transition: all .3s ease 44 | font-size: 1.1em 45 | &:hover 46 | color: color-primary 47 | padding-left: 10px 48 | .archive-date 49 | color: color-gray 50 | font-size: .9em 51 | margin: 5px 0 -------------------------------------------------------------------------------- /source/css/_partial/catalog.styl: -------------------------------------------------------------------------------- 1 | .catalog-container 2 | display: block 3 | margin-left: 30px 4 | flex-basis: 280px 5 | -webkit-flex-basis: 280px 6 | flex-shrink: 0 7 | -webkit-flex-shrink: 0 8 | @media m-pad 9 | display: none 10 | .fixed-toc 11 | position: fixed 12 | top: 90px 13 | .toc-main 14 | padding-left: 30px 15 | border-left: 1px solid color-border 16 | width: 280px 17 | box-sizing: border-box 18 | .toc-title 19 | font-size: 1.2em 20 | position: relative 21 | padding-left: 28px 22 | &:before 23 | content: '' 24 | position: absolute 25 | width: 22px 26 | height: 22px 27 | left: 0 28 | top: 2px 29 | background: url(catalog-url) no-repeat 30 | background-size: contain 31 | .toc-nav 32 | padding: 0 33 | margin-top: 1em 34 | overflow-y: scroll 35 | max-height: 480px 36 | &::-webkit-scrollbar 37 | display: none 38 | ol 39 | padding-left: 20px 40 | li 41 | list-style-type: none 42 | line-height: 1.5 -------------------------------------------------------------------------------- /source/css/_partial/categories.styl: -------------------------------------------------------------------------------- 1 | #category-cloud 2 | margin: 30px 0 3 | text-align: center 4 | a 5 | border: none 6 | line-height: 28px 7 | margin: 0 4px 8 | margin-bottom: 8px 9 | background: #63a35c 10 | display: inline-block 11 | border-radius: 4px 12 | padding: 0 10px 13 | color: color-white 14 | transition: background .5s 15 | &:hover 16 | background: rgb(0, 133, 161) 17 | .category0 18 | background: #bbe 19 | .category1 20 | background: #9cb2e1 21 | .category2 22 | background-color: rgba(0, 133, 161, 0.8) 23 | 24 | .category-list 25 | margin-left: 1em 26 | margin-right: 1em 27 | 28 | .category-name 29 | font-size: 1.4em 30 | position: relative 31 | &:before 32 | content: "#" 33 | color: color-primary 34 | position: absolute; 35 | left: -.7em 36 | top: -2px 37 | font-size: 1.2em 38 | font-weight: 700 39 | 40 | .category-preview 41 | font-size: 1.1em 42 | padding-left: 1em 43 | li 44 | cursor: pointer 45 | margin: 10px 0 46 | -------------------------------------------------------------------------------- /source/css/_partial/footer.styl: -------------------------------------------------------------------------------- 1 | .app-footer 2 | padding: 1em 0 3 | margin: 0 auto 4 | max-width: 960px 5 | border-top: 1px solid color-border 6 | background-color: color-white 7 | text-align: center 8 | font-size: 0.9em 9 | 10 | .copyright 11 | color: color-gray 12 | line-height: 1.5 -------------------------------------------------------------------------------- /source/css/_partial/header.styl: -------------------------------------------------------------------------------- 1 | .header 2 | background: none 3 | border: none 4 | position: absolute 5 | top: 0 6 | left: 0 7 | width: 100% 8 | z-index: 200 9 | transition: background .5s 10 | 11 | .fixed-header 12 | position: fixed 13 | background-color: rgba(255, 255, 255, 0.98) 14 | box-shadow: 0 0 3px rgba(14, 14, 14, .26) 15 | .home-link 16 | color: color-primary 17 | .menu .icon-bar 18 | background-color: color-gray 19 | .item-link 20 | color: color-dark 21 | 22 | .header-container 23 | max-width: 1200px 24 | height: 40px 25 | margin: 0 auto; 26 | padding: 10px 40px 27 | position: relative 28 | @media m-mobile 29 | padding: 6px 20px 30 | position: relative 31 | 32 | .logo 33 | background: url(logo-url) 34 | background-size: contain 35 | width: 40px 36 | height: 40px 37 | margin-right: 10px 38 | 39 | .home-link 40 | display: flex 41 | align-items: center 42 | float: left 43 | font-weight: 500 44 | color: color-white 45 | font-size: 1.5em 46 | line-height: 40px 47 | 48 | .right-list 49 | list-style: none 50 | float: right 51 | padding: 0 52 | @media m-mobile 53 | display: none 54 | 55 | .list-item 56 | display: inline-block 57 | margin: 0 8px 58 | 59 | .item-link 60 | height: 40px 61 | line-height: 40px 62 | text-decoration: none 63 | color: color-white 64 | padding-bottom: 3px 65 | 66 | .item-link 67 | &:hover 68 | border-bottom: 3px solid color-primary 69 | 70 | .active 71 | border-bottom: 3px solid color-primary 72 | 73 | .menu 74 | display: none 75 | float: right 76 | width: 24px 77 | height: 24px 78 | margin-top: 10px 79 | .icon-bar 80 | display: block 81 | width: 24px 82 | height: 2px 83 | border-radius: 1px 84 | margin-top: 4px 85 | background-color: color-white 86 | @media m-mobile 87 | display: block 88 | 89 | .menu-mask 90 | display: none 91 | position: fixed 92 | left: 0 93 | top: 52px 94 | z-index: 99 95 | width: 100% 96 | overflow: hidden 97 | max-height: 0 98 | background: rgba(255,255,255,0.98) 99 | -webkit-transition: max-height .2s ease 100 | transition: max-height .2s ease 101 | @media m-mobile 102 | display: block 103 | 104 | .open 105 | max-height: 300px 106 | transition-delay: .1s 107 | 108 | .menu-list 109 | padding: 0 110 | 111 | .menu-item 112 | position: relative 113 | list-style: none 114 | text-align: center 115 | padding: 10px 0 116 | &:after 117 | content: '' 118 | position: absolute 119 | left: 0 120 | bottom: 0 121 | width: 100% 122 | -webkit-transform: scaleY(0.5) 123 | transform: scaleY(0.5) 124 | 125 | .menu-link 126 | text-decoration: none 127 | color: color-gray 128 | 129 | .mobile-active 130 | color: color-primary -------------------------------------------------------------------------------- /source/css/_partial/markdown.styl: -------------------------------------------------------------------------------- 1 | .markdown-content, .article-summary 2 | overflow-y: auto 3 | overflow-x: auto 4 | pre, code 5 | font-family: 'Roboto Mono', Monaco, courier, monospace 6 | font-size: 15px 7 | @media m-mobile 8 | font-size: 14px 9 | .line 10 | min-height: 13px 11 | margin: 2px 0 12 | p 13 | line-height: 1.6em 14 | padding: 8px 0px 15 | code 16 | background-color: color-background 17 | color: color-orange 18 | padding: 3px 5px 19 | margin: 0 2px 20 | border-radius: 2px 21 | white-space: nowrap 22 | h1 23 | font-size: 1.8em 24 | h2 25 | font-size: 1.5em 26 | h3 27 | margin: 1em 0 28 | font-size: 1.3em 29 | padding-bottom: .3em 30 | border-bottom: 1px solid color-border 31 | h4 32 | margin: 1em 0 33 | font-size: 1.2em 34 | &:before 35 | content: "#"; 36 | color: color-primary 37 | margin-right: 5px 38 | font-size: 1.2em 39 | font-weight: 700 40 | h5 41 | font-size: 1em 42 | margin: .8em 0 43 | blockquote 44 | margin: 1em 0 45 | padding: 10px 20px 46 | border-left: 4px solid color-primary 47 | background: color-background 48 | border-bottom-right-radius: 2px 49 | border-top-right-radius: 2px 50 | ul, ol 51 | overflow: auto 52 | margin: 5px 0 53 | li 54 | padding: 5px 0 55 | img 56 | max-width: 100% 57 | display: block 58 | margin: 20px auto 59 | cursor: zoom-in 60 | figure 61 | background: color-background 62 | padding: 0 10px 63 | border-radius: 2px 64 | margin: 20px 0 65 | overflow: auto 66 | position: relative 67 | &:after 68 | content: attr(data-lang) 69 | position: absolute 70 | top: 0 71 | right: 0 72 | color: #ccc 73 | text-align: right 74 | font-size: 0.7em 75 | padding: 5px 10px 0 76 | line-height: 15px 77 | height: 15px 78 | font-weight: 500 79 | > table 80 | width: 100% 81 | thead 82 | background-color: color-primary 83 | border-top-width: 1px 84 | border-top-style: solid 85 | border-top-color: color-border 86 | th 87 | padding: 5px 10px 88 | color: color-white 89 | tbody 90 | tr 91 | &:nth-child(even) 92 | background: #e6eed6 93 | &:nth-child(odd) 94 | background: color-white 95 | td 96 | padding: 5px 10px 97 | hr 98 | border: none 99 | border-bottom: 1px dashed color-border 100 | margin: 30px 0 -------------------------------------------------------------------------------- /source/css/_partial/nav.styl: -------------------------------------------------------------------------------- 1 | .nav-container 2 | width: 100% 3 | padding-top: 1.5em 4 | margin-top: 1.5em 5 | border-top: 1px dashed color-border 6 | font-weight: 600 7 | &:after, &:before 8 | content: '' 9 | display: table 10 | clear: both 11 | .nav-left 12 | float: left 13 | .nav-right 14 | float: right 15 | .nav-arrow 16 | color: color-dark 17 | -------------------------------------------------------------------------------- /source/css/_partial/pager.styl: -------------------------------------------------------------------------------- 1 | .guide-pager 2 | margin: 1em 3em 3 | display: flex 4 | justify-content: space-between 5 | font-size: 15px 6 | font-weight: 600 7 | 8 | .page-arrow 9 | color: color-dark 10 | 11 | .unvisible 12 | visibility: hidden -------------------------------------------------------------------------------- /source/css/_partial/project.styl: -------------------------------------------------------------------------------- 1 | .project-app 2 | max-width: 1020px 3 | min-width: 300px 4 | padding: 1em 0 5 | .card-container 6 | margin: 30px auto 7 | display: -webkit-flex 8 | display: flex 9 | justify-content: space-between 10 | flex-wrap: wrap 11 | @media screen and (max-width: 960px) 12 | width: 660px 13 | @media screen and (max-width: 660px) 14 | width: 320px 15 | .project-card 16 | width: 320px 17 | height: 160px 18 | margin-bottom: 20px 19 | position: relative 20 | .card-wrap 21 | box-sizing: border-box 22 | height: 100% 23 | display: block 24 | padding: 20px 25 | border: 1px solid color-border 26 | border-radius: 4px 27 | color: color-dark 28 | transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out 29 | &:hover 30 | border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.15) 31 | box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.1) 32 | .card-header 33 | position: absolute 34 | width: 100% 35 | height: 20px 36 | top: 0 37 | left: 0 38 | border-top-left-radius: 4px 39 | border-top-right-radius: 4px 40 | .card-title 41 | margin-top: 10px 42 | margin-bottom: 5px 43 | font-size: 1.2em 44 | .card-footer 45 | box-sizing: border-box 46 | position: absolute 47 | width: 100% 48 | padding: 0 20px 49 | bottom: 20px 50 | left: 0 51 | span 52 | &:first-child 53 | padding-right: 20px 54 | .fa 55 | padding-right: 5px -------------------------------------------------------------------------------- /source/css/_partial/search.styl: -------------------------------------------------------------------------------- 1 | .search-pop-overlay { 2 | background: rgba(0, 0, 0, 0); 3 | height: 100%; 4 | left: 0; 5 | position: fixed; 6 | top: 0; 7 | transition: visibility 0s linear .2s, background .2s; 8 | visibility: hidden; 9 | width: 100%; 10 | z-index: 1400; 11 | 12 | &.search-active { 13 | background: rgba(0, 0, 0, .3); 14 | transition: background .2s; 15 | visibility: visible; 16 | } 17 | } 18 | 19 | .search-popup { 20 | background: #f5f5f5; 21 | border-radius: 5px; 22 | height: 80%; 23 | left: calc(50% - 350px); 24 | position: fixed; 25 | top: 10%; 26 | transform: scale(0); 27 | transition: transform .2s; 28 | width: 700px; 29 | z-index: 1500; 30 | 31 | .search-active & { 32 | transform: scale(1); 33 | } 34 | 35 | +mobile() { 36 | border-radius: 0; 37 | height: 100%; 38 | left: 0; 39 | margin: 0; 40 | top: 0; 41 | width: 100%; 42 | } 43 | 44 | .search-icon, .popup-btn-close { 45 | color: #999; 46 | font-size: 18px; 47 | padding: 0 10px; 48 | } 49 | 50 | .popup-btn-close { 51 | cursor: pointer; 52 | 53 | &:hover .fa { 54 | color: #222; 55 | } 56 | } 57 | 58 | .search-header { 59 | background: #eee; 60 | border-top-left-radius: 5px; 61 | border-top-right-radius: 5px; 62 | display: flex; 63 | padding: 5px; 64 | } 65 | 66 | input.search-input { 67 | background: transparent; 68 | border: 0; 69 | outline: 0; 70 | width: 100%; 71 | 72 | &::-webkit-search-cancel-button { 73 | display: none; 74 | } 75 | } 76 | } 77 | 78 | if (hexo-config('local_search.enable')) { 79 | .search-popup { 80 | .search-input-container { 81 | flex-grow: 1; 82 | padding: 2px; 83 | } 84 | 85 | ul.search-result-list { 86 | margin: 0 5px; 87 | padding: 0; 88 | width: 100%; 89 | } 90 | 91 | 92 | li.search-result-element { 93 | padding: 10px 0px 10px 0px; 94 | } 95 | 96 | p.search-result { 97 | border-bottom: 1px; 98 | padding: 3px 0px 0px 0px; 99 | color: #34495e; 100 | } 101 | 102 | a.search-result-title { 103 | font-weight: bold; 104 | color: #34495e; 105 | } 106 | 107 | .search-keyword { 108 | border-bottom: 1px dashed #ff2a2a; 109 | color: #ff2a2a; 110 | font-weight: bold; 111 | } 112 | 113 | #search-result { 114 | display: flex; 115 | height: calc(100% - 55px); 116 | overflow: auto; 117 | padding: 5px 25px; 118 | } 119 | 120 | #no-result { 121 | color: #ccc; 122 | margin: auto; 123 | } 124 | } 125 | 126 | li.menu-item.menu-item-search.right-list { 127 | padding: 10px; 128 | } 129 | } -------------------------------------------------------------------------------- /source/css/_partial/tags.styl: -------------------------------------------------------------------------------- 1 | #tag-cloud 2 | margin: 30px 0 3 | text-align: center 4 | a 5 | border: none 6 | line-height: 28px 7 | margin: 0 4px 8 | margin-bottom: 8px 9 | background: #63a35c 10 | display: inline-block 11 | border-radius: 4px 12 | padding: 0 10px 13 | color: color-white 14 | transition: background .5s 15 | &:hover 16 | background: rgb(0, 133, 161) 17 | .tag0 18 | background: #bbe 19 | .tag1 20 | background: #9cb2e1 21 | .tag2 22 | background-color: rgba(0, 133, 161, 0.8) 23 | 24 | .tag-list 25 | margin-left: 1em 26 | margin-right: 1em 27 | 28 | .tag-name 29 | font-size: 1.4em 30 | position: relative 31 | &:before 32 | content: "#" 33 | color: color-primary 34 | position: absolute; 35 | left: -.7em 36 | top: -2px 37 | font-size: 1.2em 38 | font-weight: 700 39 | 40 | .tag-preview 41 | font-size: 1.1em 42 | padding-left: 1em 43 | li 44 | cursor: pointer 45 | margin: 10px 0 46 | -------------------------------------------------------------------------------- /source/css/images/alipay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/css/images/alipay.jpg -------------------------------------------------------------------------------- /source/css/images/catalog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/css/images/catalog.png -------------------------------------------------------------------------------- /source/css/images/error_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/css/images/error_icon.png -------------------------------------------------------------------------------- /source/css/images/escheres.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/css/images/escheres.png -------------------------------------------------------------------------------- /source/css/images/ga.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/css/images/ga.png -------------------------------------------------------------------------------- /source/css/images/icp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/css/images/icp.png -------------------------------------------------------------------------------- /source/css/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/css/images/logo.png -------------------------------------------------------------------------------- /source/css/images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/css/images/menu.png -------------------------------------------------------------------------------- /source/css/images/top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/css/images/top.png -------------------------------------------------------------------------------- /source/css/images/wechat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/css/images/wechat.jpg -------------------------------------------------------------------------------- /source/css/plugins/gitment.css: -------------------------------------------------------------------------------- 1 | .gitment-container { 2 | font-size: 14px; 3 | line-height: 1.5; 4 | color: #333; 5 | word-wrap: break-word; 6 | } 7 | 8 | .gitment-container * { 9 | box-sizing: border-box; 10 | } 11 | 12 | .gitment-container *:disabled { 13 | cursor: not-allowed; 14 | } 15 | 16 | .gitment-container a, 17 | .gitment-container a:visited { 18 | cursor: pointer; 19 | text-decoration: none; 20 | } 21 | 22 | .gitment-container a:hover { 23 | text-decoration: underline; 24 | } 25 | 26 | .gitment-container .gitment-hidden { 27 | display: none; 28 | } 29 | 30 | .gitment-container .gitment-spinner-icon { 31 | fill: #333; 32 | 33 | -webkit-animation: gitment-spin 1s steps(12) infinite; 34 | animation: gitment-spin 1s steps(12) infinite; 35 | } 36 | 37 | @-webkit-keyframes gitment-spin { 38 | 100% { 39 | -webkit-transform: rotate(360deg); 40 | transform: rotate(360deg) 41 | } 42 | } 43 | 44 | @keyframes gitment-spin { 45 | 100% { 46 | -webkit-transform: rotate(360deg); 47 | transform: rotate(360deg) 48 | } 49 | } 50 | 51 | .gitment-root-container { 52 | margin: 19px 0; 53 | } 54 | 55 | .gitment-header-container { 56 | margin: 19px 0; 57 | } 58 | 59 | .gitment-header-like-btn, 60 | .gitment-comment-like-btn { 61 | cursor: pointer; 62 | } 63 | 64 | .gitment-comment-like-btn { 65 | float: right; 66 | } 67 | 68 | .gitment-comment-like-btn.liked { 69 | color: #F44336; 70 | } 71 | 72 | .gitment-header-like-btn svg { 73 | vertical-align: middle; 74 | height: 30px; 75 | } 76 | 77 | .gitment-comment-like-btn svg { 78 | vertical-align: middle; 79 | height: 20px; 80 | } 81 | 82 | .gitment-header-like-btn.liked svg, 83 | .gitment-comment-like-btn.liked svg { 84 | fill: #F44336; 85 | } 86 | 87 | a.gitment-header-issue-link, 88 | a.gitment-header-issue-link:visited { 89 | float: right; 90 | line-height: 30px; 91 | color: #666; 92 | } 93 | 94 | a.gitment-header-issue-link:hover { 95 | color: #666; 96 | } 97 | 98 | .gitment-comments-loading, 99 | .gitment-comments-error, 100 | .gitment-comments-empty { 101 | text-align: center; 102 | margin: 50px 0; 103 | } 104 | 105 | .gitment-comments-list { 106 | list-style: none; 107 | padding-left: 0; 108 | margin: 0 0 38px; 109 | } 110 | 111 | .gitment-comment, 112 | .gitment-editor-container { 113 | position: relative; 114 | min-height: 60px; 115 | padding-left: 60px; 116 | margin: 19px 0; 117 | } 118 | 119 | .gitment-comment-avatar, 120 | .gitment-editor-avatar { 121 | float: left; 122 | margin-left: -60px; 123 | } 124 | 125 | .gitment-comment-avatar, 126 | .gitment-comment-avatar-img, 127 | .gitment-comment-avatar, 128 | .gitment-editor-avatar-img, 129 | .gitment-editor-avatar svg { 130 | width: 44px; 131 | height: 44px; 132 | border-radius: 22px; 133 | } 134 | 135 | .gitment-editor-avatar .gitment-github-icon { 136 | fill: #fff; 137 | background-color: #333; 138 | } 139 | 140 | .gitment-comment-main, 141 | .gitment-editor-main { 142 | position: relative; 143 | border: 1px solid #CFD8DC; 144 | border-radius: 0; 145 | } 146 | 147 | .gitment-editor-main::before, 148 | .gitment-editor-main::after, 149 | .gitment-comment-main::before, 150 | .gitment-comment-main::after { 151 | position: absolute; 152 | top: 11px; 153 | left: -16px; 154 | display: block; 155 | width: 0; 156 | height: 0; 157 | pointer-events: none; 158 | content: ""; 159 | border-color: transparent; 160 | border-style: solid solid outset; 161 | } 162 | 163 | .gitment-editor-main::before, 164 | .gitment-comment-main::before { 165 | border-width: 8px; 166 | border-right-color: #CFD8DC; 167 | } 168 | 169 | .gitment-editor-main::after, 170 | .gitment-comment-main::after { 171 | margin-top: 1px; 172 | margin-left: 2px; 173 | border-width: 7px; 174 | border-right-color: #fff; 175 | } 176 | 177 | .gitment-comment-header { 178 | margin: 12px 15px; 179 | color: #666; 180 | background-color: #fff; 181 | border-radius: 3px; 182 | } 183 | 184 | .gitment-editor-header { 185 | padding: 0; 186 | margin: 0; 187 | border-bottom: 1px solid #CFD8DC; 188 | } 189 | 190 | a.gitment-comment-name, 191 | a.gitment-comment-name:visited { 192 | font-weight: 600; 193 | color: #666; 194 | } 195 | 196 | .gitment-editor-tabs { 197 | margin-bottom: -1px; 198 | margin-left: -1px; 199 | } 200 | 201 | .gitment-editor-tab { 202 | display: inline-block; 203 | padding: 11px 12px; 204 | font-size: 14px; 205 | line-height: 20px; 206 | color: #666; 207 | text-decoration: none; 208 | background-color: transparent; 209 | border-width: 0 1px; 210 | border-style: solid; 211 | border-color: transparent; 212 | border-radius: 0; 213 | 214 | white-space: nowrap; 215 | cursor: pointer; 216 | user-select: none; 217 | 218 | outline: none; 219 | } 220 | 221 | .gitment-editor-tab.gitment-selected { 222 | color: #333; 223 | background-color: #fff; 224 | border-color: #CFD8DC; 225 | } 226 | 227 | .gitment-editor-login { 228 | float: right; 229 | margin-top: -30px; 230 | margin-right: 15px; 231 | } 232 | 233 | a.gitment-footer-project-link, 234 | a.gitment-footer-project-link:visited, 235 | a.gitment-editor-login-link, 236 | a.gitment-editor-login-link:visited { 237 | color: #42b983; 238 | } 239 | 240 | a.gitment-editor-logout-link, 241 | a.gitment-editor-logout-link:visited { 242 | color: #666; 243 | } 244 | 245 | a.gitment-editor-logout-link:hover { 246 | color: #42b983; 247 | text-decoration: none; 248 | } 249 | 250 | .gitment-comment-body { 251 | position: relative; 252 | margin: 12px 15px; 253 | overflow: hidden; 254 | border-radius: 3px; 255 | } 256 | 257 | .gitment-comment-body-folded { 258 | cursor: pointer; 259 | } 260 | 261 | .gitment-comment-body-folded::before { 262 | display: block !important; 263 | content: ""; 264 | position: absolute; 265 | width: 100%; 266 | left: 0; 267 | top: 0; 268 | bottom: 50px; 269 | pointer-events: none; 270 | background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9)); 271 | background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9)); 272 | } 273 | 274 | .gitment-comment-body-folded::after { 275 | display: block !important; 276 | content: "Click to Expand" !important; 277 | text-align: center; 278 | color: #666; 279 | position: absolute; 280 | width: 100%; 281 | height: 50px; 282 | line-height: 50px; 283 | left: 0; 284 | bottom: 0; 285 | pointer-events: none; 286 | background: rgba(255, 255, 255, .9); 287 | } 288 | 289 | .gitment-editor-body { 290 | margin: 0; 291 | } 292 | 293 | .gitment-comment-body > *:first-child, 294 | .gitment-editor-preview > *:first-child { 295 | margin-top: 0 !important; 296 | } 297 | 298 | .gitment-comment-body > *:last-child, 299 | .gitment-editor-preview > *:last-child { 300 | margin-bottom: 0 !important; 301 | } 302 | 303 | .gitment-editor-body textarea { 304 | display: block; 305 | width: 100%; 306 | min-height: 100px; 307 | max-height: 500px; 308 | padding: 16px; 309 | resize: vertical; 310 | 311 | max-width: 100%; 312 | margin: 0; 313 | font-size: 14px; 314 | line-height: 1.6; 315 | 316 | background-color: #fff; 317 | 318 | color: #333; 319 | vertical-align: middle; 320 | border: none; 321 | border-radius: 0; 322 | outline: none; 323 | box-shadow: none; 324 | 325 | overflow: visible; 326 | } 327 | 328 | .gitment-editor-body textarea:focus { 329 | background-color: #fff; 330 | } 331 | 332 | .gitment-editor-preview { 333 | min-height: 150px; 334 | 335 | padding: 16px; 336 | background-color: transparent; 337 | 338 | width: 100%; 339 | font-size: 14px; 340 | 341 | line-height: 1.5; 342 | word-wrap: break-word; 343 | } 344 | 345 | .gitment-editor-footer { 346 | padding: 0; 347 | margin-top: 10px; 348 | } 349 | 350 | .gitment-editor-footer::after { 351 | display: table; 352 | clear: both; 353 | content: ""; 354 | } 355 | 356 | a.gitment-editor-footer-tip { 357 | display: none; 358 | padding-top: 10px; 359 | font-size: 12px; 360 | color: #666; 361 | } 362 | 363 | a.gitment-editor-footer-tip:hover { 364 | color: #42b983; 365 | text-decoration: none; 366 | } 367 | 368 | .gitment-comments-pagination { 369 | list-style: none; 370 | text-align: right; 371 | border-radius: 0; 372 | margin: -19px 0 19px 0; 373 | } 374 | 375 | .gitment-comments-page-item { 376 | display: inline-block; 377 | cursor: pointer; 378 | border: 1px solid #CFD8DC; 379 | margin-left: -1px; 380 | padding: .25rem .5rem; 381 | } 382 | 383 | .gitment-comments-page-item:hover { 384 | background-color: #f5f5f5; 385 | } 386 | 387 | .gitment-comments-page-item.gitment-selected { 388 | background-color: #f5f5f5; 389 | } 390 | 391 | .gitment-editor-submit, 392 | .gitment-comments-init-btn { 393 | border-radius: 20px; 394 | color: #fff; 395 | background-color: #42b983; 396 | 397 | position: relative; 398 | display: inline-block; 399 | padding: 7px 13px; 400 | font-size: 14px; 401 | font-weight: 600; 402 | line-height: 20px; 403 | white-space: nowrap; 404 | vertical-align: middle; 405 | cursor: pointer; 406 | -webkit-user-select: none; 407 | -moz-user-select: none; 408 | -ms-user-select: none; 409 | user-select: none; 410 | background-size: 110% 110%; 411 | border: none; 412 | -webkit-appearance: none; 413 | -moz-appearance: none; 414 | appearance: none; 415 | } 416 | 417 | .gitment-editor-submit:hover, 418 | .gitment-comments-init-btn:hover { 419 | background-color: #42b983; 420 | } 421 | 422 | .gitment-comments-init-btn:disabled, 423 | .gitment-editor-submit:disabled { 424 | color: rgba(255,255,255,0.75); 425 | background-color: #42b983; 426 | box-shadow: none; 427 | } 428 | 429 | .gitment-editor-submit { 430 | float: right; 431 | } 432 | 433 | .gitment-footer-container { 434 | margin-top: 30px; 435 | margin-bottom: 20px; 436 | text-align: right; 437 | font-size: 12px; 438 | } 439 | 440 | /* 441 | * Markdown CSS 442 | * Copied from https://github.com/sindresorhus/github-markdown-css 443 | */ 444 | .gitment-markdown { 445 | -ms-text-size-adjust: 100%; 446 | -webkit-text-size-adjust: 100%; 447 | line-height: 1.5; 448 | color: #333; 449 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 450 | font-size: 16px; 451 | line-height: 1.5; 452 | word-wrap: break-word; 453 | } 454 | 455 | .gitment-markdown .pl-c { 456 | color: #969896; 457 | } 458 | 459 | .gitment-markdown .pl-c1, 460 | .gitment-markdown .pl-s .pl-v { 461 | color: #0086b3; 462 | } 463 | 464 | .gitment-markdown .pl-e, 465 | .gitment-markdown .pl-en { 466 | color: #795da3; 467 | } 468 | 469 | .gitment-markdown .pl-smi, 470 | .gitment-markdown .pl-s .pl-s1 { 471 | color: #333; 472 | } 473 | 474 | .gitment-markdown .pl-ent { 475 | color: #63a35c; 476 | } 477 | 478 | .gitment-markdown .pl-k { 479 | color: #a71d5d; 480 | } 481 | 482 | .gitment-markdown .pl-s, 483 | .gitment-markdown .pl-pds, 484 | .gitment-markdown .pl-s .pl-pse .pl-s1, 485 | .gitment-markdown .pl-sr, 486 | .gitment-markdown .pl-sr .pl-cce, 487 | .gitment-markdown .pl-sr .pl-sre, 488 | .gitment-markdown .pl-sr .pl-sra { 489 | color: #183691; 490 | } 491 | 492 | .gitment-markdown .pl-v, 493 | .gitment-markdown .pl-smw { 494 | color: #ed6a43; 495 | } 496 | 497 | .gitment-markdown .pl-bu { 498 | color: #b52a1d; 499 | } 500 | 501 | .gitment-markdown .pl-ii { 502 | color: #f8f8f8; 503 | background-color: #b52a1d; 504 | } 505 | 506 | .gitment-markdown .pl-c2 { 507 | color: #f8f8f8; 508 | background-color: #b52a1d; 509 | } 510 | 511 | .gitment-markdown .pl-c2::before { 512 | content: "^M"; 513 | } 514 | 515 | .gitment-markdown .pl-sr .pl-cce { 516 | font-weight: bold; 517 | color: #63a35c; 518 | } 519 | 520 | .gitment-markdown .pl-ml { 521 | color: #693a17; 522 | } 523 | 524 | .gitment-markdown .pl-mh, 525 | .gitment-markdown .pl-mh .pl-en, 526 | .gitment-markdown .pl-ms { 527 | font-weight: bold; 528 | color: #1d3e81; 529 | } 530 | 531 | .gitment-markdown .pl-mq { 532 | color: #008080; 533 | } 534 | 535 | .gitment-markdown .pl-mi { 536 | font-style: italic; 537 | color: #333; 538 | } 539 | 540 | .gitment-markdown .pl-mb { 541 | font-weight: bold; 542 | color: #333; 543 | } 544 | 545 | .gitment-markdown .pl-md { 546 | color: #bd2c00; 547 | background-color: #ffecec; 548 | } 549 | 550 | .gitment-markdown .pl-mi1 { 551 | color: #55a532; 552 | background-color: #eaffea; 553 | } 554 | 555 | .gitment-markdown .pl-mc { 556 | color: #ef9700; 557 | background-color: #ffe3b4; 558 | } 559 | 560 | .gitment-markdown .pl-mi2 { 561 | color: #d8d8d8; 562 | background-color: #808080; 563 | } 564 | 565 | .gitment-markdown .pl-mdr { 566 | font-weight: bold; 567 | color: #795da3; 568 | } 569 | 570 | .gitment-markdown .pl-mo { 571 | color: #1d3e81; 572 | } 573 | 574 | .gitment-markdown .pl-ba { 575 | color: #595e62; 576 | } 577 | 578 | .gitment-markdown .pl-sg { 579 | color: #c0c0c0; 580 | } 581 | 582 | .gitment-markdown .pl-corl { 583 | text-decoration: underline; 584 | color: #183691; 585 | } 586 | 587 | .gitment-markdown .octicon { 588 | display: inline-block; 589 | vertical-align: text-top; 590 | fill: currentColor; 591 | } 592 | 593 | .gitment-markdown a { 594 | background-color: transparent; 595 | -webkit-text-decoration-skip: objects; 596 | } 597 | 598 | .gitment-markdown a:active, 599 | .gitment-markdown a:hover { 600 | outline-width: 0; 601 | } 602 | 603 | .gitment-markdown strong { 604 | font-weight: inherit; 605 | } 606 | 607 | .gitment-markdown strong { 608 | font-weight: bolder; 609 | } 610 | 611 | .gitment-markdown h1 { 612 | font-size: 2em; 613 | margin: 0.67em 0; 614 | } 615 | 616 | .gitment-markdown img { 617 | border-style: none; 618 | } 619 | 620 | .gitment-markdown svg:not(:root) { 621 | overflow: hidden; 622 | } 623 | 624 | .gitment-markdown code, 625 | .gitment-markdown kbd, 626 | .gitment-markdown pre { 627 | font-family: monospace, monospace; 628 | font-size: 1em; 629 | } 630 | 631 | .gitment-markdown hr { 632 | box-sizing: content-box; 633 | height: 0; 634 | overflow: visible; 635 | } 636 | 637 | .gitment-markdown input { 638 | font: inherit; 639 | margin: 0; 640 | } 641 | 642 | .gitment-markdown input { 643 | overflow: visible; 644 | } 645 | 646 | .gitment-markdown [type="checkbox"] { 647 | box-sizing: border-box; 648 | padding: 0; 649 | } 650 | 651 | .gitment-markdown * { 652 | box-sizing: border-box; 653 | } 654 | 655 | .gitment-markdown input { 656 | font-family: inherit; 657 | font-size: inherit; 658 | line-height: inherit; 659 | } 660 | 661 | .gitment-markdown a { 662 | color: #0366d6; 663 | text-decoration: none; 664 | } 665 | 666 | .gitment-markdown a:hover { 667 | text-decoration: underline; 668 | } 669 | 670 | .gitment-markdown strong { 671 | font-weight: 600; 672 | } 673 | 674 | .gitment-markdown hr { 675 | height: 0; 676 | margin: 15px 0; 677 | overflow: hidden; 678 | background: transparent; 679 | border: 0; 680 | border-bottom: 1px solid #dfe2e5; 681 | } 682 | 683 | .gitment-markdown hr::before { 684 | display: table; 685 | content: ""; 686 | } 687 | 688 | .gitment-markdown hr::after { 689 | display: table; 690 | clear: both; 691 | content: ""; 692 | } 693 | 694 | .gitment-markdown table { 695 | border-spacing: 0; 696 | border-collapse: collapse; 697 | } 698 | 699 | .gitment-markdown td, 700 | .gitment-markdown th { 701 | padding: 0; 702 | } 703 | 704 | .gitment-markdown h1, 705 | .gitment-markdown h2, 706 | .gitment-markdown h3, 707 | .gitment-markdown h4, 708 | .gitment-markdown h5, 709 | .gitment-markdown h6 { 710 | margin-top: 0; 711 | margin-bottom: 0; 712 | } 713 | 714 | .gitment-markdown h1 { 715 | font-size: 32px; 716 | font-weight: 600; 717 | } 718 | 719 | .gitment-markdown h2 { 720 | font-size: 24px; 721 | font-weight: 600; 722 | } 723 | 724 | .gitment-markdown h3 { 725 | font-size: 20px; 726 | font-weight: 600; 727 | } 728 | 729 | .gitment-markdown h4 { 730 | font-size: 16px; 731 | font-weight: 600; 732 | } 733 | 734 | .gitment-markdown h5 { 735 | font-size: 14px; 736 | font-weight: 600; 737 | } 738 | 739 | .gitment-markdown h6 { 740 | font-size: 12px; 741 | font-weight: 600; 742 | } 743 | 744 | .gitment-markdown p { 745 | margin-top: 0; 746 | margin-bottom: 10px; 747 | } 748 | 749 | .gitment-markdown blockquote { 750 | margin: 0; 751 | } 752 | 753 | .gitment-markdown ul, 754 | .gitment-markdown ol { 755 | padding-left: 0; 756 | margin-top: 0; 757 | margin-bottom: 0; 758 | } 759 | 760 | .gitment-markdown ol ol, 761 | .gitment-markdown ul ol { 762 | list-style-type: lower-roman; 763 | } 764 | 765 | .gitment-markdown ul ul ol, 766 | .gitment-markdown ul ol ol, 767 | .gitment-markdown ol ul ol, 768 | .gitment-markdown ol ol ol { 769 | list-style-type: lower-alpha; 770 | } 771 | 772 | .gitment-markdown dd { 773 | margin-left: 0; 774 | } 775 | 776 | .gitment-markdown code { 777 | font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; 778 | font-size: 12px; 779 | } 780 | 781 | .gitment-markdown pre { 782 | margin-top: 0; 783 | margin-bottom: 0; 784 | font: 12px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; 785 | } 786 | 787 | .gitment-markdown .octicon { 788 | vertical-align: text-bottom; 789 | } 790 | 791 | .gitment-markdown .pl-0 { 792 | padding-left: 0 !important; 793 | } 794 | 795 | .gitment-markdown .pl-1 { 796 | padding-left: 4px !important; 797 | } 798 | 799 | .gitment-markdown .pl-2 { 800 | padding-left: 8px !important; 801 | } 802 | 803 | .gitment-markdown .pl-3 { 804 | padding-left: 16px !important; 805 | } 806 | 807 | .gitment-markdown .pl-4 { 808 | padding-left: 24px !important; 809 | } 810 | 811 | .gitment-markdown .pl-5 { 812 | padding-left: 32px !important; 813 | } 814 | 815 | .gitment-markdown .pl-6 { 816 | padding-left: 40px !important; 817 | } 818 | 819 | .gitment-markdown::before { 820 | display: table; 821 | content: ""; 822 | } 823 | 824 | .gitment-markdown::after { 825 | display: table; 826 | clear: both; 827 | content: ""; 828 | } 829 | 830 | .gitment-markdown>*:first-child { 831 | margin-top: 0 !important; 832 | } 833 | 834 | .gitment-markdown>*:last-child { 835 | margin-bottom: 0 !important; 836 | } 837 | 838 | .gitment-markdown a:not([href]) { 839 | color: inherit; 840 | text-decoration: none; 841 | } 842 | 843 | .gitment-markdown .anchor { 844 | float: left; 845 | padding-right: 4px; 846 | margin-left: -20px; 847 | line-height: 1; 848 | } 849 | 850 | .gitment-markdown .anchor:focus { 851 | outline: none; 852 | } 853 | 854 | .gitment-markdown p, 855 | .gitment-markdown blockquote, 856 | .gitment-markdown ul, 857 | .gitment-markdown ol, 858 | .gitment-markdown dl, 859 | .gitment-markdown table, 860 | .gitment-markdown pre { 861 | margin-top: 0; 862 | margin-bottom: 16px; 863 | } 864 | 865 | .gitment-markdown hr { 866 | height: 0.25em; 867 | padding: 0; 868 | margin: 24px 0; 869 | background-color: #e1e4e8; 870 | border: 0; 871 | } 872 | 873 | .gitment-markdown blockquote { 874 | padding: 0 1em; 875 | color: #6a737d; 876 | border-left: 0.25em solid #dfe2e5; 877 | } 878 | 879 | .gitment-markdown blockquote>:first-child { 880 | margin-top: 0; 881 | } 882 | 883 | .gitment-markdown blockquote>:last-child { 884 | margin-bottom: 0; 885 | } 886 | 887 | .gitment-markdown kbd { 888 | display: inline-block; 889 | padding: 3px 5px; 890 | font-size: 11px; 891 | line-height: 10px; 892 | color: #444d56; 893 | vertical-align: middle; 894 | background-color: #fafbfc; 895 | border: solid 1px #c6cbd1; 896 | border-bottom-color: #959da5; 897 | border-radius: 0; 898 | box-shadow: inset 0 -1px 0 #959da5; 899 | } 900 | 901 | .gitment-markdown h1, 902 | .gitment-markdown h2, 903 | .gitment-markdown h3, 904 | .gitment-markdown h4, 905 | .gitment-markdown h5, 906 | .gitment-markdown h6 { 907 | margin-top: 24px; 908 | margin-bottom: 16px; 909 | font-weight: 600; 910 | line-height: 1.25; 911 | } 912 | 913 | .gitment-markdown h1 .octicon-link, 914 | .gitment-markdown h2 .octicon-link, 915 | .gitment-markdown h3 .octicon-link, 916 | .gitment-markdown h4 .octicon-link, 917 | .gitment-markdown h5 .octicon-link, 918 | .gitment-markdown h6 .octicon-link { 919 | color: #1b1f23; 920 | vertical-align: middle; 921 | visibility: hidden; 922 | } 923 | 924 | .gitment-markdown h1:hover .anchor, 925 | .gitment-markdown h2:hover .anchor, 926 | .gitment-markdown h3:hover .anchor, 927 | .gitment-markdown h4:hover .anchor, 928 | .gitment-markdown h5:hover .anchor, 929 | .gitment-markdown h6:hover .anchor { 930 | text-decoration: none; 931 | } 932 | 933 | .gitment-markdown h1:hover .anchor .octicon-link, 934 | .gitment-markdown h2:hover .anchor .octicon-link, 935 | .gitment-markdown h3:hover .anchor .octicon-link, 936 | .gitment-markdown h4:hover .anchor .octicon-link, 937 | .gitment-markdown h5:hover .anchor .octicon-link, 938 | .gitment-markdown h6:hover .anchor .octicon-link { 939 | visibility: visible; 940 | } 941 | 942 | .gitment-markdown h1 { 943 | padding-bottom: 0.3em; 944 | font-size: 2em; 945 | border-bottom: 1px solid #eaecef; 946 | } 947 | 948 | .gitment-markdown h2 { 949 | padding-bottom: 0.3em; 950 | font-size: 1.5em; 951 | border-bottom: 1px solid #eaecef; 952 | } 953 | 954 | .gitment-markdown h3 { 955 | font-size: 1.25em; 956 | } 957 | 958 | .gitment-markdown h4 { 959 | font-size: 1em; 960 | } 961 | 962 | .gitment-markdown h5 { 963 | font-size: 0.875em; 964 | } 965 | 966 | .gitment-markdown h6 { 967 | font-size: 0.85em; 968 | color: #6a737d; 969 | } 970 | 971 | .gitment-markdown ul, 972 | .gitment-markdown ol { 973 | padding-left: 2em; 974 | } 975 | 976 | .gitment-markdown ul ul, 977 | .gitment-markdown ul ol, 978 | .gitment-markdown ol ol, 979 | .gitment-markdown ol ul { 980 | margin-top: 0; 981 | margin-bottom: 0; 982 | } 983 | 984 | .gitment-markdown li>p { 985 | margin-top: 16px; 986 | } 987 | 988 | .gitment-markdown li+li { 989 | margin-top: 0.25em; 990 | } 991 | 992 | .gitment-markdown dl { 993 | padding: 0; 994 | } 995 | 996 | .gitment-markdown dl dt { 997 | padding: 0; 998 | margin-top: 16px; 999 | font-size: 1em; 1000 | font-style: italic; 1001 | font-weight: 600; 1002 | } 1003 | 1004 | .gitment-markdown dl dd { 1005 | padding: 0 16px; 1006 | margin-bottom: 16px; 1007 | } 1008 | 1009 | .gitment-markdown table { 1010 | display: block; 1011 | width: 100%; 1012 | overflow: auto; 1013 | } 1014 | 1015 | .gitment-markdown table th { 1016 | font-weight: 600; 1017 | } 1018 | 1019 | .gitment-markdown table th, 1020 | .gitment-markdown table td { 1021 | padding: 6px 13px; 1022 | border: 1px solid #dfe2e5; 1023 | } 1024 | 1025 | .gitment-markdown table tr { 1026 | background-color: #fff; 1027 | border-top: 1px solid #c6cbd1; 1028 | } 1029 | 1030 | .gitment-markdown table tr:nth-child(2n) { 1031 | background-color: #f5f5f5; 1032 | } 1033 | 1034 | .gitment-markdown img { 1035 | max-width: 100%; 1036 | box-sizing: content-box; 1037 | background-color: #fff; 1038 | } 1039 | 1040 | .gitment-markdown code { 1041 | padding: 0; 1042 | padding-top: 0.2em; 1043 | padding-bottom: 0.2em; 1044 | margin: 0; 1045 | font-size: 85%; 1046 | background-color: rgba(27,31,35,0.05); 1047 | border-radius: 0; 1048 | } 1049 | 1050 | .gitment-markdown code::before, 1051 | .gitment-markdown code::after { 1052 | letter-spacing: -0.2em; 1053 | content: "\00a0"; 1054 | } 1055 | 1056 | .gitment-markdown pre { 1057 | word-wrap: normal; 1058 | } 1059 | 1060 | .gitment-markdown pre>code { 1061 | padding: 0; 1062 | margin: 0; 1063 | font-size: 100%; 1064 | word-break: normal; 1065 | white-space: pre; 1066 | background: transparent; 1067 | border: 0; 1068 | } 1069 | 1070 | .gitment-markdown .highlight { 1071 | margin-bottom: 16px; 1072 | } 1073 | 1074 | .gitment-markdown .highlight pre { 1075 | margin-bottom: 0; 1076 | word-break: normal; 1077 | } 1078 | 1079 | .gitment-markdown .highlight pre, 1080 | .gitment-markdown pre { 1081 | padding: 16px; 1082 | overflow: auto; 1083 | font-size: 85%; 1084 | line-height: 1.45; 1085 | background-color: #f5f5f5; 1086 | border-radius: 0; 1087 | } 1088 | 1089 | .gitment-markdown pre code { 1090 | display: inline; 1091 | max-width: auto; 1092 | padding: 0; 1093 | margin: 0; 1094 | overflow: visible; 1095 | line-height: inherit; 1096 | word-wrap: normal; 1097 | background-color: transparent; 1098 | border: 0; 1099 | } 1100 | 1101 | .gitment-markdown pre code::before, 1102 | .gitment-markdown pre code::after { 1103 | content: normal; 1104 | } 1105 | 1106 | .gitment-markdown .full-commit .btn-outline:not(:disabled):hover { 1107 | color: #42b983; 1108 | border-color: #42b983; 1109 | } 1110 | 1111 | .gitment-markdown kbd { 1112 | display: inline-block; 1113 | padding: 3px 5px; 1114 | font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; 1115 | line-height: 10px; 1116 | color: #444d56; 1117 | vertical-align: middle; 1118 | background-color: #fcfcfc; 1119 | border: solid 1px #c6cbd1; 1120 | border-bottom-color: #959da5; 1121 | border-radius: 0; 1122 | box-shadow: inset 0 -1px 0 #959da5; 1123 | } 1124 | 1125 | .gitment-markdown :checked+.radio-label { 1126 | position: relative; 1127 | z-index: 1; 1128 | border-color: #42b983; 1129 | } 1130 | 1131 | .gitment-markdown .task-list-item { 1132 | list-style-type: none; 1133 | } 1134 | 1135 | .gitment-markdown .task-list-item+.task-list-item { 1136 | margin-top: 3px; 1137 | } 1138 | 1139 | .gitment-markdown .task-list-item input { 1140 | margin: 0 0.2em 0.25em -1.6em; 1141 | vertical-align: middle; 1142 | } 1143 | 1144 | .gitment-markdown hr { 1145 | border-bottom-color: #eee; 1146 | } 1147 | @media screen and (max-width: 420px) { 1148 | .gitment-editor-tab:last-child { 1149 | display: none; 1150 | } 1151 | } 1152 | -------------------------------------------------------------------------------- /source/css/style.styl: -------------------------------------------------------------------------------- 1 | @import "_config" 2 | @font-face 3 | font-family: 'Source Sans Pro' 4 | src: url('../fonts/SourceSansPro.ttf') 5 | 6 | ::selection 7 | background: color-primary 8 | color: color-white 9 | 10 | body 11 | font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif 12 | -webkit-font-smoothing: antialiased 13 | -moz-osx-font-smoothing: grayscale 14 | -webkit-text-size-adjust: none 15 | position: relative 16 | height: 100% 17 | margin: 0 18 | color: color-dark 19 | font-size: 16px 20 | @media m-mobile 21 | font-size: 15px 22 | 23 | ol, ul, form, p 24 | margin: 0 25 | 26 | a 27 | text-decoration: none 28 | color: color-primary 29 | cursor: pointer 30 | 31 | p 32 | word-spacing: 0.05em 33 | 34 | pre 35 | overflow-x: auto 36 | 37 | .flex-box 38 | display: flex 39 | display: -ms-flexbox 40 | display: -webkit-box 41 | display: -webkit-flex 42 | transform: unset !important 43 | 44 | .wechat-share 45 | width: 0 46 | height: 0 47 | overflow: hidden 48 | img 49 | width: 400px 50 | height 400px 51 | 52 | .app-body 53 | padding: 2em 1em 54 | margin: 0 auto 55 | height: 100% 56 | max-width: 980px 57 | position: relative 58 | opacity: 0 59 | transform: translateY(-20px) 60 | transition: all 0.4s 61 | 62 | .hljs 63 | background: none !important 64 | 65 | .tags 66 | margin: 15px 0 67 | span 68 | &:first-child 69 | margin-right: 10px 70 | font-weight: 600 71 | 72 | .tag-code 73 | font-family: 'Roboto Mono', Monaco, courier, monospace 74 | font-size: .8em 75 | display: inline-block 76 | background-color: color-background 77 | color: color-orange 78 | padding: 3px 5px 79 | margin: 0 2px 5px 0 80 | border-radius: 2px 81 | white-space: nowrap 82 | 83 | .article-card 84 | padding-bottom: 20px 85 | &:first-child 86 | margin-top: 60px 87 | 88 | h2.article-head 89 | font-size: 1.6em 90 | margin-bottom: 0 91 | 92 | .article-head > a 93 | color: color-dark 94 | &:hover 95 | border-bottom: 2px solid color-primary 96 | 97 | .article-date 98 | color: color-gray 99 | margin: 10px 0 100 | font-size: 0.9em 101 | 102 | .article-summary 103 | margin: 10px 0 104 | color: color-dark 105 | 106 | .more 107 | font-weight: 600 108 | display: inline-block 109 | transition: all 0.3s 110 | &:hover 111 | transform: translateX(10px) 112 | 113 | #article-banner 114 | width: 100% 115 | box-sizing: border-box 116 | top: 0 117 | left: 0 118 | padding: 100px 20px 25px 20px 119 | text-align: center 120 | position: relative 121 | background-repeat: no-repeat 122 | background-position: center 123 | background-size: cover 124 | @media m-mobile 125 | padding: 80px 10px 25px 10px 126 | h2 127 | margin: .4em 0 128 | font-size: 2.2em 129 | color: color-white 130 | text-shadow: 0 0 40px color-dark 131 | opacity: 0 132 | transform: translateY(-20px) 133 | transition: all 0.4s 134 | @media m-mobile 135 | font-size: 2em 136 | .post-date 137 | margin: 10px 0 20px 0 138 | color: color-white 139 | opacity: 0 140 | transform: translateY(-20px) 141 | transition: all 0.4s 142 | transition-delay: 0.05s 143 | .arrow-down 144 | display: flex 145 | width: 100% 146 | justify-content: center 147 | opacity: 0 148 | transform: translateY(-20px) 149 | transition: all 0.4s 150 | transition-delay: 0.1s 151 | a 152 | z-index: 4 153 | display: block 154 | width: 25px 155 | height: 25px 156 | -webkit-transform: rotate(315deg) 157 | transform: rotate(315deg) 158 | -webkit-animation-name: shine 159 | -webkit-animation-duration: 1.5s 160 | -webkit-animation-iteration-count: infinite 161 | animation-iteration-count: infinite 162 | border-bottom: 1px solid color-white 163 | border-left: 1px solid color-white 164 | 165 | .post-article 166 | margin-top: 0 167 | width: 100% 168 | display: inline-grid 169 | 170 | .money-like 171 | padding: 2em 0 3em 172 | .reward-btn 173 | cursor: pointer 174 | font-size: 1.6em 175 | line-height: 2em 176 | position: relative 177 | display: block 178 | width: 2em 179 | height: 2em 180 | margin: 0 auto 181 | padding: 0 182 | text-align: center 183 | vertical-align: middle 184 | color: color-white 185 | border: 1px solid #f1b60e 186 | border-radius: 50% 187 | background: linear-gradient(to bottom, #fccd60 0, #fbae12 100%, #2989d8 100%, #207cca 100%) 188 | .money-code 189 | position: absolute 190 | top: -7em 191 | left: 50% 192 | display: none 193 | width: 10.5em 194 | height: 5.5em 195 | margin-left: -5.9em 196 | padding: 10px 15px 197 | background: color-white 198 | box-shadow: 0 0 0 1px color-border 199 | border-radius: 4px 200 | span 201 | display: inline-block 202 | width: 4.5em 203 | height: 4.5em 204 | .alipay-code 205 | float: left 206 | .code-image 207 | background-image: url(alipay-url) 208 | background-size: contain 209 | background-repeat: no-repeat 210 | width: 4.5em 211 | height: 4.5em 212 | .wechat-code 213 | float: right 214 | .code-image 215 | background-image: url(wechat-url) 216 | background-size: contain 217 | background-repeat: no-repeat 218 | width: 4.5em 219 | height: 4.5em 220 | b 221 | font-size: .5em 222 | line-height: 24px 223 | display: block 224 | margin: 0 225 | text-align: center 226 | color: color-dark 227 | 228 | .notice 229 | font-size: 12px 230 | display: block 231 | margin-top: 10px 232 | text-align: center 233 | color: color-gray 234 | font-style: italic 235 | 236 | .qrcode 237 | padding-bottom: 30px 238 | text-align: center 239 | border-bottom: 1px dashed color-border 240 | canvas 241 | width: 8em 242 | height: 8em 243 | padding: 5px 244 | box-shadow: 0 0 1px color-shadow 245 | 246 | #uyan_frame 247 | margin-top: 20px 248 | 249 | .image-view-wrap 250 | position: fixed 251 | top: 0 252 | left: 0 253 | bottom: 0 254 | right: 0 255 | z-index: 1000 256 | transition: all 0.3s ease-in-out 257 | .image-view-inner 258 | position: relative 259 | img 260 | display: block 261 | margin: 0 auto 262 | cursor: zoom-out 263 | transition: all 0.3s ease-in-out 264 | .wrap-active 265 | background-color: rgba(255, 255, 255, .9) 266 | 267 | .scroll-top 268 | cursor: pointer 269 | opacity: 0 270 | position: fixed 271 | box-sizing: border-box 272 | right: 2em 273 | bottom: 45px 274 | width: 40px 275 | height: 40px 276 | padding: 5px 277 | background-color: color-primary 278 | border-radius: 20px 279 | transform: translate(80px, 0) 280 | transition: all .3s ease 281 | box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 3px 3px 0 rgba(0,0,0,.24) 282 | .arrow-icon 283 | background-image: url(arrow-url) 284 | width: 30px 285 | height: 30px 286 | display: block 287 | background-size: contain 288 | 289 | .opacity 290 | opacity: 1 291 | transform: translate(0, 0) 292 | 293 | @keyframes shine 294 | 0%, 100% 295 | opacity: .1 296 | 25%, 75% 297 | opacity: .2 298 | 50% 299 | opacity: 1 300 | 301 | @import "_partial/header" 302 | @import "_partial/footer" 303 | @import "_partial/pager" 304 | @import "_partial/markdown" 305 | @import "_partial/tags" 306 | @import "_partial/categories" 307 | @import "_partial/archive" 308 | @import "_partial/about" 309 | @import "_partial/project" 310 | @import "_partial/catalog" 311 | @import "_partial/nav" 312 | @import "_partial/search" -------------------------------------------------------------------------------- /source/fonts/SourceSansPro.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanm1ng/hexo-theme-vexo/ec32b67732f3e113522a562c8047935b47d35055/source/fonts/SourceSansPro.ttf -------------------------------------------------------------------------------- /source/js/local-search.js: -------------------------------------------------------------------------------- 1 | /* global CONFIG */ 2 | 3 | document.addEventListener('DOMContentLoaded', () => { 4 | // Popup Window 5 | let isfetched = false; 6 | let datas; 7 | let isXml = true; 8 | // Search DB path 9 | let searchPath = "/search.xml"; //CONFIG.search.path 10 | if (searchPath.length === 0) { 11 | searchPath = 'search.xml'; 12 | } else if (searchPath.endsWith('json')) { 13 | isXml = false; 14 | } 15 | const input = document.querySelector('.search-input'); 16 | const resultContent = document.getElementById('search-result'); 17 | 18 | const getIndexByWord = (word, text, caseSensitive) => { 19 | if (false) { // CONFIG.localsearch.unescape = false 20 | let div = document.createElement('div'); 21 | div.innerText = word; 22 | word = div.innerHTML; 23 | } 24 | let wordLen = word.length; 25 | if (wordLen === 0) return []; 26 | let startPosition = 0; 27 | let position = []; 28 | let index = []; 29 | if (!caseSensitive) { 30 | text = text.toLowerCase(); 31 | word = word.toLowerCase(); 32 | } 33 | while ((position = text.indexOf(word, startPosition)) > -1) { 34 | index.push({ position, word }); 35 | startPosition = position + wordLen; 36 | } 37 | return index; 38 | }; 39 | 40 | // Merge hits into slices 41 | const mergeIntoSlice = (start, end, index, searchText) => { 42 | let item = index[index.length - 1]; 43 | let { position, word } = item; 44 | let hits = []; 45 | let searchTextCountInSlice = 0; 46 | while (position + word.length <= end && index.length !== 0) { 47 | if (word === searchText) { 48 | searchTextCountInSlice++; 49 | } 50 | hits.push({ 51 | position, 52 | length: word.length 53 | }); 54 | let wordEnd = position + word.length; 55 | 56 | // Move to next position of hit 57 | index.pop(); 58 | while (index.length !== 0) { 59 | item = index[index.length - 1]; 60 | position = item.position; 61 | word = item.word; 62 | if (wordEnd > position) { 63 | index.pop(); 64 | } else { 65 | break; 66 | } 67 | } 68 | } 69 | return { 70 | hits, 71 | start, 72 | end, 73 | searchTextCount: searchTextCountInSlice 74 | }; 75 | }; 76 | 77 | // Highlight title and content 78 | const highlightKeyword = (text, slice) => { 79 | let result = ''; 80 | let prevEnd = slice.start; 81 | slice.hits.forEach(hit => { 82 | result += text.substring(prevEnd, hit.position); 83 | let end = hit.position + hit.length; 84 | result += `${text.substring(hit.position, end)}`; 85 | prevEnd = end; 86 | }); 87 | result += text.substring(prevEnd, slice.end); 88 | return result; 89 | }; 90 | 91 | const inputEventFunction = () => { 92 | if (!isfetched) return; 93 | let searchText = input.value.trim().toLowerCase(); 94 | let keywords = searchText.split(/[-\s]+/); 95 | if (keywords.length > 1) { 96 | keywords.push(searchText); 97 | } 98 | let resultItems = []; 99 | if (searchText.length > 0) { 100 | // Perform local searching 101 | datas.forEach(({ title, content, url }) => { 102 | let titleInLowerCase = title.toLowerCase(); 103 | let contentInLowerCase = content.toLowerCase(); 104 | let indexOfTitle = []; 105 | let indexOfContent = []; 106 | let searchTextCount = 0; 107 | keywords.forEach(keyword => { 108 | indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false)); 109 | indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false)); 110 | }); 111 | 112 | // Show search results 113 | if (indexOfTitle.length > 0 || indexOfContent.length > 0) { 114 | let hitCount = indexOfTitle.length + indexOfContent.length; 115 | // Sort index by position of keyword 116 | [indexOfTitle, indexOfContent].forEach(index => { 117 | index.sort((itemLeft, itemRight) => { 118 | if (itemRight.position !== itemLeft.position) { 119 | return itemRight.position - itemLeft.position; 120 | } 121 | return itemLeft.word.length - itemRight.word.length; 122 | }); 123 | }); 124 | 125 | let slicesOfTitle = []; 126 | if (indexOfTitle.length !== 0) { 127 | let tmp = mergeIntoSlice(0, title.length, indexOfTitle, searchText); 128 | searchTextCount += tmp.searchTextCountInSlice; 129 | slicesOfTitle.push(tmp); 130 | } 131 | 132 | let slicesOfContent = []; 133 | while (indexOfContent.length !== 0) { 134 | let item = indexOfContent[indexOfContent.length - 1]; 135 | let { position, word } = item; 136 | // Cut out 100 characters 137 | let start = position - 20; 138 | let end = position + 80; 139 | if (start < 0) { 140 | start = 0; 141 | } 142 | if (end < position + word.length) { 143 | end = position + word.length; 144 | } 145 | if (end > content.length) { 146 | end = content.length; 147 | } 148 | let tmp = mergeIntoSlice(start, end, indexOfContent, searchText); 149 | searchTextCount += tmp.searchTextCountInSlice; 150 | slicesOfContent.push(tmp); 151 | } 152 | 153 | // Sort slices in content by search text's count and hits' count 154 | slicesOfContent.sort((sliceLeft, sliceRight) => { 155 | if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) { 156 | return sliceRight.searchTextCount - sliceLeft.searchTextCount; 157 | } else if (sliceLeft.hits.length !== sliceRight.hits.length) { 158 | return sliceRight.hits.length - sliceLeft.hits.length; 159 | } 160 | return sliceLeft.start - sliceRight.start; 161 | }); 162 | 163 | // Select top N slices in content 164 | let upperBound = parseInt(1, 10); // CONFIG.localsearch.top_n_per_article: 1 165 | if (upperBound >= 0) { 166 | slicesOfContent = slicesOfContent.slice(0, upperBound); 167 | } 168 | 169 | let resultItem = ''; 170 | 171 | if (slicesOfTitle.length !== 0) { 172 | resultItem += `
  • ${highlightKeyword(title, slicesOfTitle[0])}`; 173 | } else { 174 | resultItem += `
  • ${title}`; 175 | } 176 | 177 | slicesOfContent.forEach(slice => { 178 | resultItem += `

    ${highlightKeyword(content, slice)}...

    `; 179 | }); 180 | 181 | resultItem += '
  • '; 182 | resultItems.push({ 183 | item: resultItem, 184 | id : resultItems.length, 185 | hitCount, 186 | searchTextCount 187 | }); 188 | } 189 | }); 190 | } 191 | if (keywords.length === 1 && keywords[0] === '') { 192 | resultContent.innerHTML = '
    '; 193 | } else if (resultItems.length === 0) { 194 | resultContent.innerHTML = '
    '; 195 | } else { 196 | resultItems.sort((resultLeft, resultRight) => { 197 | if (resultLeft.searchTextCount !== resultRight.searchTextCount) { 198 | return resultRight.searchTextCount - resultLeft.searchTextCount; 199 | } else if (resultLeft.hitCount !== resultRight.hitCount) { 200 | return resultRight.hitCount - resultLeft.hitCount; 201 | } 202 | return resultRight.id - resultLeft.id; 203 | }); 204 | resultContent.innerHTML = ``; 205 | window.pjax && window.pjax.refresh(resultContent); 206 | } 207 | }; 208 | 209 | const fetchData = () => { 210 | fetch('' + searchPath) // CONFIG.root = '' 211 | .then(response => response.text()) 212 | .then(res => { 213 | // Get the contents from search data 214 | isfetched = true; 215 | datas = isXml ? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(element => { 216 | return { 217 | title : element.querySelector('title').textContent, 218 | content: element.querySelector('content').textContent, 219 | url : element.querySelector('url').textContent 220 | }; 221 | }) : JSON.parse(res); 222 | // Only match articles with not empty titles 223 | datas = datas.filter(data => data.title).map(data => { 224 | data.title = data.title.trim(); 225 | data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : ''; 226 | data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/'); 227 | return data; 228 | }); 229 | // Remove loading animation 230 | document.getElementById('no-result').innerHTML = ''; 231 | inputEventFunction(); 232 | }); 233 | }; 234 | 235 | if (false) { // CONFIG.localsearch.preload: false 236 | fetchData(); 237 | } 238 | 239 | if ('auto' === 'auto') { // CONFIG.localsearch.trigger: 'auto' / 'manual' 240 | input.addEventListener('input', inputEventFunction); 241 | } else { 242 | document.querySelector('.search-icon').addEventListener('click', inputEventFunction); 243 | input.addEventListener('keypress', event => { 244 | if (event.key === 'Enter') { 245 | inputEventFunction(); 246 | } 247 | }); 248 | } 249 | 250 | // Handle and trigger popup window 251 | document.querySelectorAll('.popup-trigger').forEach(element => { 252 | element.addEventListener('click', () => { 253 | document.body.style.overflow = 'hidden'; 254 | document.querySelector('.search-pop-overlay').classList.add('search-active'); 255 | input.focus(); 256 | if (!isfetched) fetchData(); 257 | }); 258 | }); 259 | 260 | // Monitor main search box 261 | const onPopupClose = () => { 262 | document.body.style.overflow = ''; 263 | document.querySelector('.search-pop-overlay').classList.remove('search-active'); 264 | }; 265 | 266 | document.querySelector('.search-pop-overlay').addEventListener('click', event => { 267 | if (event.target === document.querySelector('.search-pop-overlay')) { 268 | onPopupClose(); 269 | } 270 | }); 271 | document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose); 272 | window.addEventListener('pjax:success', onPopupClose); 273 | window.addEventListener('keyup', event => { 274 | if (event.key === 'Escape') { 275 | onPopupClose(); 276 | } 277 | }); 278 | }); 279 | -------------------------------------------------------------------------------- /source/js/qrious.js: -------------------------------------------------------------------------------- 1 | /*! QRious v4.0.2 | (C) 2017 Alasdair Mercer | GPL v3 License 2 | Based on jsqrencode | (C) 2010 tz@execpc.com | GPL v3 License 3 | */ 4 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.QRious=e()}(this,function(){"use strict";function t(t,e){var n;return"function"==typeof Object.create?n=Object.create(t):(s.prototype=t,n=new s,s.prototype=null),e&&i(!0,n,e),n}function e(e,n,s,r){var o=this;return"string"!=typeof e&&(r=s,s=n,n=e,e=null),"function"!=typeof n&&(r=s,s=n,n=function(){return o.apply(this,arguments)}),i(!1,n,o,r),n.prototype=t(o.prototype,s),n.prototype.constructor=n,n.class_=e||o.class_,n.super_=o,n}function i(t,e,i){for(var n,s,a=0,h=(i=o.call(arguments,2)).length;a>1&1,n=0;n0;e--)n[e]=n[e]?n[e-1]^_.EXPONENT[v._modN(_.LOG[n[e]]+t)]:n[e-1];n[0]=_.EXPONENT[v._modN(_.LOG[n[0]]+t)]}for(t=0;t<=i;t++)n[t]=_.LOG[n[t]]},_checkBadness:function(){var t,e,i,n,s,r=0,o=this._badness,a=this.buffer,h=this.width;for(s=0;sh*h;)u-=h*h,c++;for(r+=c*v.N4,n=0;n=o-2&&(t=o-2,s>9&&t--);var a=t;if(s>9){for(r[a+2]=0,r[a+3]=0;a--;)e=r[a],r[a+3]|=255&e<<4,r[a+2]=e>>4;r[2]|=255&t<<4,r[1]=t>>4,r[0]=64|t>>12}else{for(r[a+1]=0,r[a+2]=0;a--;)e=r[a],r[a+2]|=255&e<<4,r[a+1]=e>>4;r[1]|=255&t<<4,r[0]=64|t>>4}for(a=t+3-(s<10);a=5&&(i+=v.N1+n[e]-5);for(e=3;et||3*n[e-3]>=4*n[e]||3*n[e+3]>=4*n[e])&&(i+=v.N3);return i},_finish:function(){this._stringBuffer=this.buffer.slice();var t,e,i=0,n=3e4;for(e=0;e<8&&(this._applyMask(e),(t=this._checkBadness())>=1)1&n&&(s[r-1-e+8*r]=1,e<6?s[8+r*e]=1:s[8+r*(e+1)]=1);for(e=0;e<7;e++,n>>=1)1&n&&(s[8+r*(r-7+e)]=1,e?s[6-e+8*r]=1:s[7+8*r]=1)},_interleaveBlocks:function(){var t,e,i=this._dataBlock,n=this._ecc,s=this._eccBlock,r=0,o=this._calculateMaxLength(),a=this._neccBlock1,h=this._neccBlock2,f=this._stringBuffer;for(t=0;t1)for(t=u.BLOCK[n],i=s-7;;){for(e=s-7;e>t-3&&(this._addAlignment(e,i),!(e6)for(t=d.BLOCK[r-7],e=17,i=0;i<6;i++)for(n=0;n<3;n++,e--)1&(e>11?r>>e-12:t>>e)?(s[5-i+o*(2-n+o-11)]=1,s[2-n+o-11+o*(5-i)]=1):(this._setMask(5-i,2-n+o-11),this._setMask(2-n+o-11,5-i))},_isMasked:function(t,e){var i=v._getMaskBit(t,e);return 1===this._mask[i]},_pack:function(){var t,e,i,n=1,s=1,r=this.width,o=r-1,a=r-1,h=(this._dataBlock+this._eccBlock)*(this._neccBlock1+this._neccBlock2)+this._neccBlock2;for(e=0;ee&&(i=t,t=e,e=i),i=e,i+=e*e,i>>=1,i+=t},_modN:function(t){for(;t>=255;)t=((t-=255)>>8)+(255&t);return t},N1:3,N2:3,N3:40,N4:10}),p=v,m=f.extend({draw:function(){this.element.src=this.qrious.toDataURL()},reset:function(){this.element.src=""},resize:function(){var t=this.element;t.width=t.height=this.qrious.size}}),g=h.extend(function(t,e,i,n){this.name=t,this.modifiable=Boolean(e),this.defaultValue=i,this._valueTransformer=n},{transform:function(t){var e=this._valueTransformer;return"function"==typeof e?e(t,this):t}}),k=h.extend(null,{abs:function(t){return null!=t?Math.abs(t):null},hasOwn:function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},noop:function(){},toUpperCase:function(t){return null!=t?t.toUpperCase():null}}),w=h.extend(function(t){this.options={},t.forEach(function(t){this.options[t.name]=t},this)},{exists:function(t){return null!=this.options[t]},get:function(t,e){return w._get(this.options[t],e)},getAll:function(t){var e,i=this.options,n={};for(e in i)k.hasOwn(i,e)&&(n[e]=w._get(i[e],t));return n},init:function(t,e,i){"function"!=typeof i&&(i=k.noop);var n,s;for(n in this.options)k.hasOwn(this.options,n)&&(s=this.options[n],w._set(s,s.defaultValue,e),w._createAccessor(s,e,i));this._setAll(t,e,!0)},set:function(t,e,i){return this._set(t,e,i)},setAll:function(t,e){return this._setAll(t,e)},_set:function(t,e,i,n){var s=this.options[t];if(!s)throw new Error("Invalid option: "+t);if(!s.modifiable&&!n)throw new Error("Option cannot be modified: "+t);return w._set(s,e,i)},_setAll:function(t,e,i){if(!t)return!1;var n,s=!1;for(n in t)k.hasOwn(t,n)&&this._set(n,t[n],e,i)&&(s=!0);return s}},{_createAccessor:function(t,e,i){var n={get:function(){return w._get(t,e)}};t.modifiable&&(n.set=function(n){w._set(t,n,e)&&i(n,t)}),Object.defineProperty(e,t.name,n)},_get:function(t,e){return e["_"+t.name]},_set:function(t,e,i){var n="_"+t.name,s=i[n],r=t.transform(null!=e?e:t.defaultValue);return i[n]=r,r!==s}}),M=w,b=h.extend(function(){this._services={}},{getService:function(t){var e=this._services[t];if(!e)throw new Error("Service is not being managed with name: "+t);return e},setService:function(t,e){if(this._services[t])throw new Error("Service is already managed with name: "+t);e&&(this._services[t]=e)}}),B=new M([new g("background",!0,"white"),new g("backgroundAlpha",!0,1,k.abs),new g("element"),new g("foreground",!0,"black"),new g("foregroundAlpha",!0,1,k.abs),new g("level",!0,"L",k.toUpperCase),new g("mime",!0,"image/png"),new g("padding",!0,null,k.abs),new g("size",!0,100,k.abs),new g("value",!0,"")]),y=new b,O=h.extend(function(t){B.init(t,this,this.update.bind(this));var e=B.get("element",this),i=y.getService("element"),n=e&&i.isCanvas(e)?e:i.createCanvas(),s=e&&i.isImage(e)?e:i.createImage();this._canvasRenderer=new c(this,n,!0),this._imageRenderer=new m(this,s,s===e),this.update()},{get:function(){return B.getAll(this)},set:function(t){B.setAll(t,this)&&this.update()},toDataURL:function(t){return this.canvas.toDataURL(t||this.mime)},update:function(){var t=new p({level:this.level,value:this.value});this._canvasRenderer.render(t),this._imageRenderer.render(t)}},{use:function(t){y.setService(t.getName(),t)}});Object.defineProperties(O.prototype,{canvas:{get:function(){return this._canvasRenderer.getElement()}},image:{get:function(){return this._imageRenderer.getElement()}}});var A=O,L=h.extend({getName:function(){}}).extend({createCanvas:function(){},createImage:function(){},getName:function(){return"element"},isCanvas:function(t){},isImage:function(t){}}).extend({createCanvas:function(){return document.createElement("canvas")},createImage:function(){return document.createElement("img")},isCanvas:function(t){return t instanceof HTMLCanvasElement},isImage:function(t){return t instanceof HTMLImageElement}});return A.use(new L),A}); 5 | 6 | //# sourceMappingURL=qrious.min.js.map -------------------------------------------------------------------------------- /source/js/script.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | console.log('© Theme-Vexo | https://github.com/yanm1ng/hexo-theme-vexo') 3 | var app = $('.app-body') 4 | var header = $('.header') 5 | var banner = document.getElementById('article-banner') || false 6 | var about = document.getElementById('about-banner') || false 7 | var top = $('.scroll-top') 8 | var catalog = $('.catalog-container .toc-main') 9 | var isOpen = false 10 | 11 | $(document).ready(function () { 12 | NProgress.start() 13 | $('#nprogress .bar').css({ 14 | 'background': '#42b983' 15 | }) 16 | $('#nprogress .spinner').hide() 17 | 18 | var fade = { 19 | transform: 'translateY(0)', 20 | opacity: 1 21 | } 22 | if (banner) { 23 | app.css('transition-delay', '0.15s') 24 | $('#article-banner').children().css(fade) 25 | } 26 | if (about) { 27 | $('.author').children().css(fade) 28 | } 29 | app.css(fade) 30 | }) 31 | 32 | window.onload = function () { 33 | setTimeout(function () { 34 | NProgress.done() 35 | }, 200) 36 | } 37 | 38 | $('.menu').on('click', function () { 39 | if (!header.hasClass('fixed-header') || isOpen) { 40 | header.toggleClass('fixed-header') 41 | isOpen = !isOpen 42 | } 43 | $('.menu-mask').toggleClass('open') 44 | }) 45 | 46 | $('#tag-cloud a').on('click', function () { 47 | var list = $('.tag-list') 48 | var name = $(this).data('name').replace(/[\ \'\/\+\#]/gi, "\\$&") 49 | var maoH = list.find('#' + name).offset().top 50 | $('html,body').animate({ 51 | scrollTop: maoH - header.height() 52 | }, 500) 53 | }) 54 | 55 | $('#category-cloud a').on('click', function () { 56 | var list = $('.category-list') 57 | var name = $(this).data('name').replace(/[\ \'\/\+\#]/gi, "\\$&") 58 | var maoH = list.find('#' + name).offset().top 59 | $('html,body').animate({ 60 | scrollTop: maoH - header.height() 61 | }, 500) 62 | }) 63 | 64 | $('.reward-btn').on('click', function () { 65 | $('.money-code').fadeToggle() 66 | }) 67 | 68 | $('.arrow-down').on('click', function () { 69 | $('html, body').animate({ 70 | scrollTop: banner.offsetHeight - header.height() 71 | }, 500) 72 | }) 73 | 74 | $('.toc-nav a').on('click', function (e) { 75 | e.preventDefault() 76 | var catalogTarget = e.currentTarget 77 | // var scrollTarget = $(catalogTarget.getAttribute('href')) 78 | var scrollTarget = $(decodeURIComponent(catalogTarget.getAttribute('href'))) 79 | var top = scrollTarget.offset().top 80 | if (top > 0) { 81 | $('html,body').animate({ 82 | scrollTop: top - 65 83 | }, 500) 84 | } 85 | }) 86 | 87 | top.on('click', function () { 88 | $('html, body').animate({ scrollTop: 0 }, 600) 89 | }) 90 | 91 | document.addEventListener('scroll', function () { 92 | var scrollTop = document.documentElement.scrollTop || document.body.scrollTop 93 | var headerH = header.height() 94 | if (banner) { 95 | if (scrollTop > headerH) { 96 | header.addClass('fixed-header') 97 | } else if (scrollTop === 0) { 98 | header.removeClass('fixed-header') 99 | } 100 | } 101 | if (scrollTop > 100) { 102 | top.addClass('opacity') 103 | } else { 104 | top.removeClass('opacity') 105 | } 106 | if (scrollTop > 190) { 107 | catalog.addClass('fixed-toc') 108 | } else { 109 | catalog.removeClass('fixed-toc') 110 | } 111 | }) 112 | })(jQuery) 113 | --------------------------------------------------------------------------------