-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
481 lines (433 loc) · 21.5 KB
/
blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<!-- 设置移动端的浏览设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客详情</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<link rel="stylesheet" type="text/css" href="static/css/me.css"/>
<!-- 引入typo.css对内容进行排版 -->
<link rel="stylesheet" type="text/css" href="static/css/typo.css"/>
<!-- 引入animate.css添加动画 -->
<link rel="stylesheet" type="text/css" href="static/css/animate.css"/>
<!-- 引入prism.css实现语法高亮 -->
<link rel="stylesheet" type="text/css" href="static/lib/prism/prism.css"/>
<!-- 引入tocbot.css实现自动生成目录 -->
<link rel="stylesheet" type="text/css" href="static/lib/tocbot/tocbot.css"/>
<!-- -->
</head>
<body>
<!-- 导航 -->
<!-- 使用UI组件，使用inverted反转默认颜色，attached去圆角，segment表明这是一个片段，自定义上下内边距 -->
<nav id="nav" class="ui inverted attached segment m-padding-tb-mini">
<div class="ui container">
<!-- 为了适应移动端，这里需要加一个属性stackable,表示可堆叠 -->
<div class="ui inverted secondary stackable menu">
<!-- 添加logo，导航菜单 -->
<h2 class="ui teal header item">Blog</h2>
<a href="index.html" class="menu-item item m-mobile-hide"><i class="home icon"></i>首页</a>
<a href="types.html" class="menu-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
<a href="tags.html" class="menu-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
<a href="archives.html" class="menu-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
<a href="#" class="menu-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
<div class="right menu-item item m-mobile-hide">
<div class="ui icon input">
<input type="text" placeholder="Search..."/>
<i class="search link icon"></i>
</div>
</div>
</div>
</div>
<!-- 设置手机端响应时显示个菜单图标 -->
<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
<i class="sidebar icon"></i>
</a>
</nav>
<!-- 中间内容 -->
<div class="m-container-small m-padding-tb-big animated rollIn">
<div class="ui container">
<!-- 头部 -->
<div class="ui top attached segment">
<div class="ui horizontal link list">
<div class="item">
<img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">silence</a></div>
</div>
<div class="item">
<!-- 设置时间样式的图标 -->
<i class="calendar icon"></i>2020-06-19
</div>
<div class="item">
<i class="eye icon"></i>2020
</div>
</div>
</div>
<!-- 图片 -->
<div class="ui attached segment">
<img src="https://unsplash.it/800/450?image=1005" class="ui rounded image">
</div>
<!-- 内容 -->
<div id="waypoint" class="ui attached padding segment">
<div class="ui right aligned basic segment">
<div class="ui orange basic label">原创</div>
</div>
<!-- 标题 -->
<h2 class="ui center aligned header">使用next主题</h2>
<!-- 正文 -->
<div id="content" class="js-toc-content m-padding-lr-responsive m-padding-tb-large typo typo-selection">
<h3 id="section1-1">1.下载next主题</h3>
<p>NexT主题GitHub首页：
<a href="https://github.com/theme-next/hexo-theme-next">
https://github.com/theme-next/hexo-theme-next
</a>
</p>
<p>然后将解压的主题放置到blog的theme文件夹下</p>
<br />
<h3 id="section1-2">2.配置主题</h3>
<p>在项目根目录下打开_config.yml文件，找到theme属性，改成 theme:next</p>
<h2 id="section1-3">下面看一下prism插件的代码高亮部分的显示情况：</h2>
<pre><code class="language-css">p { color: red }</code></pre>
<h2 id="section2">二、排版实例：</h2>
<p>提供2个排版实例，第一个中文实例来自于来自于<cite class="typo-unique">张燕婴</cite>的《论语》，由于古文排版涉及到的元素比较多，所以采用《论语》中《学而》的第一篇作为排版实例介绍；第2个来自到经典的
Lorem Ipsum，并加入了一些代码和列表等比较具有代表性的排版元素。</p>
<h3 id="section2-1">例1：论语学而篇第一</h3>
<p>
<small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（
<time>前551年9月28日－前479年4月11日</time>
）
</small>
</p>
<h4>本篇引语</h4>
<p>
《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。 </p>
<h4>原文</h4>
<p>子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」 </p>
<h4>译文</h4>
<p>孔子说：「学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？」 </p>
<h4>评析</h4>
<p>宋代著名学者<u class="typo-u">朱熹</u>对此章评价极高，说它是「入道之门，积德之基」。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的「学」不是指学习，而是指学说或主张；「时」不能解为时常，而是时代或社会的意思，「习」不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同<abbr
title="张燕婴">我</abbr>的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。
</p>
<p>此外，在对「人不知，而不愠」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。</p>
<p>总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。</p>
<h3 id="section2-2">例2：英文排版</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</p>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</blockquote>
<h4>The standard Lorem Ipsum passage, used since the 1500s</h4>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<h4>List style in action</h4>
<ul>
<li>If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as
your brother and hope as your sentry.
<p>如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。</p>
</li>
<li>Sometimes one pays most for the things one gets for nothing.
<p>有时候一个人为不花钱得到的东西付出的代价最高。</p>
</li>
<li>Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things
easily.
<p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p>
</li>
</ul>
<h4>You may want to create a perfect <code><hr /></code> line, despite the fact that there will never have one
</h4>
<hr/>
<p><abbr title="法国作家罗切福考尔德">La Racheforcauld</abbr> said:
<mark>"Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails
to succeed".
</mark>
You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will works nice as the
demo you're watching now. The following code is the best way to render typo in Chinese:
</p>
</div>
<!-- 标签 -->
<div class="m-padding-lr-responsive">
<div class="ui basic teal left pointing label">方法论</div>
</div>
<!-- 赞赏：使用basic去掉边线 -->
<div class="ui center aligned basic segment">
<!-- 使用圆角：circular -->
<button id="payBtn" class="ui orange basic circular button" >赞赏</button>
</div>
<!-- 二维码 -->
<div class="ui payQR flowing popup transition hidden">
<div class="ui orange basic label">
<div class="ui images" style="font-size: inherit !important;">
<div class="image" >
<img src="./static/images/wechatpay.jpg" alt="" class="ui rounded bordered img" style="width: 120px;">
<div>微信</div>
</div>
<div class="image" >
<img src="./static/images/wechatpay.jpg" alt="" class="ui rounded bordered img" style="width: 120px;">
<div>支付宝</div>
</div>
</div>
</div>
</div>
</div>
<!-- 博客信息 -->
<div class="ui attached positive message">
<div class="ui middle aligned grid">
<div class="eleven wide column">
<ul class="list">
<li>作者：silence（联系作者）</li>
<li>发表时间：2020-6-19 12:35:40
<li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
<li>公众号转载：请在文末添加作者公众号二维码</li>
</ul>
</div>
<div class="five wide column">
<img src="./static/images/wechatpay.jpg" class="ui right floated rounded bordered" style="width:110px">
</div>
</div>
</div>
<!-- 留言 -->
<div class="ui attached message">
<!-- 留言区域列表 -->
<div class="ui teal segment">
<div class="ui threaded comments">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src="https://unsplash.it/100/100?image=1005">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">今天下午 5:42</span>
</div>
<div class="text">太赞了！ </div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://unsplash.it/100/100?image=1005">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">昨天上午12:30</span>
</div>
<div class="text">
<p>這對我的研究是非常有用.謝謝!</p>
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="https://unsplash.it/100/100?image=1005">
</a>
<div class="content">
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">刚刚</span>
</div>
<div class="text">艾略特你永远是多么正确 :) </div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://unsplash.it/100/100?image=1005">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 天以前</span>
</div>
<div class="text">老兄，这太棒了。非常感谢。 </div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
</div>
</div>
<div class="ui form">
<div class="field">
<textarea name="content" placeholder="请输入评论信息..."></textarea>
</div>
<div class="fields">
<div class="field m-mobile-wide m-margin-bottom-small">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="nickname" placeholder="姓名"/>
</div>
</div>
<div class="field m-mobile-wide m-margin-bottom-small">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="email" placeholder="邮箱"/>
</div>
</div>
<div class="field m-mobile-wide m-margin-bottom-small">
<button class="ui teal button m-mobile-wide"><i class="edit icon"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br><br>
<!-- 目录、返回顶部等等右侧小工具 -->
<div id="toolBar" class=" m-fixed m-right-bottom" style="display: none;">
<div class="ui vertical icon buttons">
<button type="button" class="ui toc teal button">目录</button>
<a href="#comment-container" class="ui teal button">留言</a>
<button class="ui weichat icon button" title="点我生成二维码,在手机上查看"><i class="weixin icon"></i></button>
<!-- 返回顶部图标 -->
<div id="toTop-Btn" class="ui button" title="返回顶部"><i class="chevron up icon" style="margin: auto !important;"></i></div>
</div>
</div>
<div class="ui toc-container flowing popup transition hidden" style="width: 15.625rem !important;">
<ol class="js-toc">
</ol>
</div>
<!-- 微信二维码 -->
<div id="qrcode" class="ui weichatQR flowing popup transition hidden" style="width: 130px !important;">
<!-- <img src="./static/images/wechatpay.jpg" class="ui rounded image" style="width: 126px !important;"> -->
</div>
<!-- 底部栏 -->
<footer class="ui inverted vertical segment m-padding-tb-massive">
<div class="ui center aligned container">
<div class="ui inverted divided stackable grid">
<div class="three wide column">
<h4 class="ui inverted header">扫码关注</h4>
<div class="ui inverted link list">
<div class="item">
<!-- 图片设置为圆角，并使用内联样式控制图片大小 -->
<img src="./static/images/wechatpay.jpg" class="ui rounded image" alt="" style="width:6.25rem;">
</div>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">最新博客</h4>
<div class="ui inverted link list">
<a href="#" class="item">用户故事(User Story)</a>
<a href="#" class="item">用户故事(User Story)</a>
<a href="#" class="item">用户故事(User Story)</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item">Email:[email protected]</a>
<a href="#" class="item">QQ:406685901</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header">Blog</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程、思考等等相关的任何内容，希望可以对来到此站的朋友有所帮助！</p>
</div>
</div>
<div class="ui inverted section divider"></div>
<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright 2020 silence Designed by silence</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/jquery.scrollTo.min.js"></script>
<!-- 引用prism.js实现代码高亮 -->
<script src="static/lib/prism/prism.js"></script>
<!-- 引用tocbot.js实现自动生成目录 -->
<script src="static/lib/tocbot/tocbot.js"></script>
<!-- 引用qrcode.js实现自动生成当前地址的二维码 -->
<script src="static/lib/qrcode/qrcode.js"></script>
<!-- 引用jquery.waypoints.min.js实现滚动侦测 -->
<script src="static/lib/waypoints/jquery.waypoints.min.js"></script>
<script>
// 手机端点击menu按钮时显示菜单
$('.menu.toggle').click(function(){
// 点击按钮时检测menu-item内是否有m-mobile-hide属性，有则删除，没有则添上
$('.menu-item').toggleClass('m-mobile-hide');
});
// “赞赏”点击事件：设置点击时触发，显示位置位于上方中心
$('#payBtn').popup({
popup : $('.payQR.popup'),
on : 'click',
position : 'top center'
});
//初始化tocbot
tocbot.init({
// Where to render the table of contents.
tocSelector: '.js-toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.js-toc-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: true,
});
$('.toc.button').popup({
popup : $('.toc-container.popup'),
on : 'click',
position : 'left center'
});
//weichat
$('.weichat').popup({
popup : $('.weichatQR.popup'),
on : 'click', //其实默认就是hover
position : 'left center'
});
//自动生成二维码
var qrcode = new QRCode("qrcode", {
// text: "http://jindo.dev.naver.com/collie",http://127.0.0.1:8848/SpringBoot_blog/blog.html
text: "http://127.0.0.1:8848/SpringBoot_blog/blog.html",
width: 126,
height: 126,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
//返回顶部
$('#toTop-Btn').click(function(){
$(window).scrollTo(0,500);//grgs:(返回位置，返回过程所用时间)
});
// 导航栏显示
var waypoint = new Waypoint({
element: document.getElementById('waypoint'),
handler: function(direction) {
if (direction == 'down') {
$('#toolBar').show(500);
$('#nav').show(500);
} else {
$('#toolBar').hide(500);
// $('#nav').hide(500);
}
console.log('Scrolled to waypoint! ' + direction);
}
});
</script>
</body>
</html>