https://chaihongjun.github.io/project/

1<!DOCTYPE html>
2<html>
3  <head>
4  <meta http-equiv="content-type" content="text/html; charset=utf-8">
5  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
6  <meta name="description" content="Front end technology notes">
7  <meta name="keyword" content="Front-End, vuejs">
8  
9    <link rel="shortcut icon" href="/css/images/logo.png">
10  
11  <title>
12    
13      Project | ChaiHongJun Tech Notes
14    
15  </title>
16  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
17  <link href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
18  <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
19  
20<link rel="stylesheet" href="/css/style.css">
21
22  
23    
24<link rel="stylesheet" href="/css/plugins/gitment.css">
25
26  
27  

27<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

27
28  

28<script src="//cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>

28
29  

29<script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>

29
30  
31    

32<script src="/js/qrious.js"></script>

32
33
34  
35  
36    

37<script src="/js/gitment.js"></script>

37
38
39  
40  
41  
42    <!-- MathJax support START -->
43    

43<script type="text/x-mathjax-config">
44      MathJax.Hub.Config({
45        tex2jax: {
46          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
47          processEscapes: true,
48          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
49        }
50      });
51    </script>

51
52
53    

53<script type="text/x-mathjax-config">
54      MathJax.Hub.Queue(function() {
55        var all = MathJax.Hub.getAllJax(), i;
56        for (i=0; i < all.length; i += 1) {
57          all[i].SourceElement().parentNode.className += ' has-jax';
58        }
59      });
60    </script>

60
61    

61<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

61
62    <!-- MathJax support END -->
63  
64
65
66<meta name="generator" content="Hexo 4.2.0"></head>
67<div class="wechat-share">
68  <img src="/css/images/logo.png" />
69</div>
70
71  <body>
72    <header class="header fixed-header">
73  <div class="header-container">
74    <a class="home-link" href="/">
75      <div class="logo"></div>
76      <span>ChaiHongJun Tech Notes</span>
77    </a>
78    <ul class="right-list">
79      
80        <li class="list-item">
81          
82            <a href="/" class="item-link">Home</a>
83          
84        </li>
85      
86        <li class="list-item">
87          
88            <a href="/tags/" class="item-link">Tags</a>
89          
90        </li>
91      
92        <li class="list-item">
93          
94            <a href="/archives/" class="item-link">Archives</a>
95          
96        </li>
97      
98        <li class="list-item">
99          
100            <a href="/project/" class="item-link">Projects</a>
101          
102        </li>
103      
104        <li class="list-item">
105          
106            <a href="/about/" class="item-link">About</a>
107          
108        </li>
109      
110    </ul>
111    <div class="menu">
112      <span class="icon-bar"></span>
113      <span class="icon-bar"></span>
114      <span class="icon-bar"></span>
115    </div>
116    <div class="menu-mask">
117      <ul class="menu-list">
118        
119          <li class="menu-item">
120            
121              <a href="/" class="menu-link">Home</a>
122            
123          </li>
124        
125          <li class="menu-item">
126            
127              <a href="/tags/" class="menu-link">Tags</a>
128            
129          </li>
130        
131          <li class="menu-item">
132            
133              <a href="/archives/" class="menu-link">Archives</a>
134            
135          </li>
136        
137          <li class="menu-item">
138            
139              <a href="/project/" class="menu-link">Projects</a>
140            
141          </li>
142        
143          <li class="menu-item">
144            
145              <a href="/about/" class="menu-link">About</a>
146            
147          </li>
148        
149      </ul>
150    </div>
151  </div>
152</header>
153
154    <div id="article-banner">
155  <h2>Projects</h2>
156  <p class="post-date">开源项目</p>
157</div>
158<main class="app-body project-app">
159  <div class="card-container" id="all-project"></div>
160</main>

161<script>
162  (function() {
163    var url = 'http://yoursite.com/project/index.html';
164    $('#article-banner').geopattern(url);
165    $('.header').removeClass('fixed-header')
166    $.ajax({
167      headers: {
168        Accept: 'application/vnd.github.v3.raw'
169      },
170      type: 'get',
171      url: 'https://api.github.com/users/yanm1ng/repos',
172      success: function (data) {
173        var repos = data.sort(function(a, b) {
174          return (b.stargazers_count - a.stargazers_count)
175        }).slice(0, 6)
176        var cardHtml = repos.map(function(item) {
177          var description = item.description || ""
178          if (description.replace(/[\u0391-\uFFE5]/g, "aa").length > 72) {
179            description = description.slice(0, 72) + '...'
180          }
181          return (
182            '<section class="project-card">' + 
183              '<a class="card-wrap" href="'+ item.html_url +'" target="_blank">' +
184                '<div class="card-header" data-name="'+ item.name +'"></div>' +
185                '<h3 class="card-title">' + item.name + '</h3>' +
186                '<p class="card-description">' + description + '</p>' +
187                '<div class="card-footer">' +
188                  '<span><i class="fa fa-star"></i>'+ item.stargazers_count +'</span>' +
189                  '<span><i class="fa fa-code-fork"></i>' + item.forks_count +'</span>' +
190                '</div>' +
191              '</a>' +
192            '</section>'
193          )
194        }).join('')
195        $('#all-project').html(cardHtml)
196        $('.card-header').each(function() {
197          var name = $(this).data('name');
198          $(this).geopattern(name);
199        })
200      }
201    });
202  })()
203</script>

203
204    <div class="scroll-top">
205  <span class="arrow-icon"></span>
206</div>
207    <footer class="app-footer">
208  <p class="copyright">
209    &copy; 2020 | Proudly powered by <a href="https://hexo.io" target="_blank">Hexo</a>
210    <br>
211    Theme by <a href="https://github.com/yanm1ng" target="_blank" rel="noopener">yanm1ng</a>
212  </p>
213</footer>
214

215<script>
216  function async(u, c) {
217    var d = document, t = 'script',
218      o = d.createElement(t),
219      s = d.getElementsByTagName(t)[0];
220    o.src = u;
221    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
222    s.parentNode.insertBefore(o, s);
223  }
224</script>

224

225<script>
226  async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function(){
227    FastClick.attach(document.body);
228  })
229</script>

229
230

231<script>
232  var hasLine = 'true';
233  async("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js", function(){
234    $('figure pre').each(function(i, block) {
235      var figure = $(this).parents('figure');
236      if (hasLine === 'false') {
237        figure.find('.gutter').hide();
238      }
239      var lang = figure.attr('class').split(' ')[1] || 'code';
240      var codeHtml = $(this).html();
241      var codeTag = document.createElement('code');
242      codeTag.className = lang;
243      codeTag.innerHTML = codeHtml;
244      $(this).attr('class', '').empty().html(codeTag);
245      figure.attr('data-lang', lang.toUpperCase());
246      hljs.highlightBlock(block);
247    });
248  })
249</script>

249
250<!-- Baidu Tongji -->
251
252

253<script src="/js/script.js"></script>

253
254
255  </body>
256</html>