0%

NEXT主题配置

以下配置文件摘选于NexT.Mist v7.5.0

自定义样式支持

Next Data文件一样,您可以将所有自定义样式放在一个位置(hexo/source/_data)。在主题配置文件中hexo/source/_datacustom_file_path部分下,在以下文件中添加自定义文件并取消注释所需的文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
next/_config.yml
# For example, you want to put your custom styles file
# outside theme directory in root `source/_data`, set
# `styles: source/_data/styles.styl`
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl

编辑博客目录下themes/next/_config.yml

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
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
# ---------------------------------------------------------------
# Theme Core Configuration Settings 主题核心配置设置
# See: https://theme-next.org/docs/theme-settings/
# ---------------------------------------------------------------

# Remove unnecessary files after hexo generate. 最小化NEXT生成
minify: false

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below. 在站点目录“source/_data”中创建自定义文件,并取消注释下面所需的文件
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl


# ---------------------------------------------------------------
# Site Information Settings 网站信息设置
# See: https://theme-next.org/docs/getting-started/
# ---------------------------------------------------------------

favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

# RSS支持
rss: false

footer: #页尾设置

# Icon between year and copyright info.#页尾年份和copyright信息间的图标 比如心型图标
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: user
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#ff0000"

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright:

powered:
# Hexo link (Powered by Hexo).
enable: true
# Version info of Hexo after Hexo link (vX.X.X).
version: true

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true

# Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
beian:
enable: false
icp:
# The digit in the num of gongan beian.
gongan_id:
# The full num of gongan beian.
gongan_num:
# The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
gongan_icon_url:

# ---------------------------------------------------------------
# Scheme Settings 主题设置
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini


# ---------------------------------------------------------------
# Menu Settings 网页菜单设置
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
home: / || home #首页
categories: /categories/ || th #分类
archives: /archives/ || archive #归档
tags: /tags/ || tags #标签
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
#about: /about/ || user #关于
# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: false


# ---------------------------------------------------------------
# Sidebar Settings 侧边栏设置
# See: https://theme-next.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

sidebar:
# Sidebar Position.
position: left
#position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# Sidebar Display (only for Muse | Mist), available values:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: true

# Sidebar Avatar 侧栏头像
avatar:
# Replace the default image and set the url here.
url: #/images/avatar.gif
# If true, the avatar would be dispalyed in circle.
rounded: true
# If true, the avatar would be rotated with the cursor.
rotated: true

# Posts / Categories / Tags in sidebar.
site_state: true

# Social Links 社交链接
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/wonder-ryan || github
#E-Mail: mailto:yourname@gmail.com || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

social_icons:
enable: true
icons_only: false
transition: false


# Table of Contents in the Sidebar 侧边栏目录
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
max_depth: 6

# ---------------------------------------------------------------
# Post Settings 发布设置
# See: https://theme-next.org/docs/theme-settings/posts
# ---------------------------------------------------------------

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Automatically excerpt (Not recommend).自动摘录
# Use <!-- more --> in the post to control excerpt accurately.使用<!--更多-->在文章中精确控制摘录
auto_excerpt:
enable: true
length: 150 #摘录文字数

# Read more button 阅读更多按钮
# If true, the read more button would be displayed in excerpt section.
read_more_btn: true

# Post meta display settings 文章标题下显示信息设置
post_meta:
item_text: true #显示帖子元的描述文本
created_at: true #显示创建日期
updated_at: #显示更新日期
enable: true
another_day: true
categories: true #显示所属分类

# Post wordcount display settings 显示字数统计
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time 依赖
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true
awl: 2
wpm: 300

#Use icon instead of the symbol # to indicate the tag at the bottom of the post. 修改文章底部的那个带#号的标签:next/layout/_macro/post.swig
# {%- if theme.tag_icon %}
# {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
# {% else %}
# {%- set tag_indicate = '#' %}
tag_icon: true

# Reward (Donate) 悬赏(捐赠)设置
reward_settings:
# If true, reward would be displayed in every article by default.
# You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
enable: false
animation: false
#comment: Donate comment here.

reward:
#wechatpay: /images/wechatpay.png 显示悬赏微信二维码
#alipay: /images/alipay.png
#bitcoin: /images/bitcoin.png

# Related popular posts 相关热门帖子
# Dependencies: https://github.com/tea3/hexo-related-popular-posts 依赖
related_posts:
enable: false
title: # Custom header, leave empty to use the default one
display_in_home: false
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false

# ---------------------------------------------------------------
# Custom Page Settings 自定义页面设置
# See: https://theme-next.org/docs/theme-settings/custom-pages
# ---------------------------------------------------------------

# Enable "cheers" for archive page.
cheers: true

# TagCloud settings for tags page.
tagcloud:
# All values below are same as default, change them by yourself.
min: 12 # Minimun font size in px
max: 30 # Maxium font size in px
start: "#ccc" # Start color (hex, rgba, hsla or color keywords)
end: "#111" # End color (hex, rgba, hsla or color keywords)
amount: 200 # Amount of tags, change it if you have more than 200 tags

# Google Calendar
# Share your recent schedule to others via calendar page.
calendar:
calendar_id: <required> # Your Google account E-Mail
api_key: <required>
orderBy: startTime
offsetMax: 24 # Time Range
offsetMin: 4 # Time Range
showDeleted: false
singleEvents: true
maxResults: 250


# ---------------------------------------------------------------
# Misc Theme Settings Misc主题设置
# ---------------------------------------------------------------

# Set the text alignment in posts / pages.
text_align:
# Available values: start | end | left | right | center | justify | justify-all | match-parent
desktop: justify
mobile: justify

# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: false

# Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
android_chrome_color: "#222"

# Hide sticky headers and color the menu bar on Safari (iOS / macOS).
safari_rainbow: false

# Custom Logo (Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.jpg

codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# Add copy button on codeblock
copy_button:
enable: false
# Show text copy result.
show_result: false
# Available values: default | flat | mac
style:

back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: false

# Reading progress bar
reading_progress:
enable: false
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 3px

# Bookmark Support
bookmark:
enable: false
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: false
permalink: https://github.com/yourname
title: Follow me on GitHub



# ---------------------------------------------------------------
# Comments Settings 评论设置
# See: https://theme-next.org/docs/third-party-services/comments
# ---------------------------------------------------------------

# Multiple Comment System Support
comments:
# Available values: tabs | buttons
style: tabs
# Choose a comment system to be displayed by default.
# Available values: changyan | disqus | disqusjs | gitalk | livere | valine
active:
# Setting `true` means remembering the comment system selected by the visitor.
storage: true
# Modify texts or order for any navs, here are some examples.
nav:
#disqus:
# text: Load Disqus
# order: -1
#gitalk:
# order: -2

# Disqus
disqus:
enable: false
shortname:
count: true
lazyload: false
#post_meta_order: 0

# DisqusJS
# Alternative Disqus - Render comment component using Disqus API.
# Demo: https://suka.js.org/DisqusJS/
# For more information: https://github.com/SukkaW/DisqusJS
disqusjs:
enable: false
# API Endpoint of Disqus API (https://disqus.com/api/).
# Leave api empty if you are able to connect to Disqus API.
# Otherwise you need a reverse proxy for Disqus API.
# For example:
# api: https://disqus.skk.moe/disqus/
api:
apikey: # Register new application from https://disqus.com/api/applications/
shortname: # See: https://disqus.com/admin/settings/general/

# Changyan
changyan:
enable: false
appid:
appkey:
#post_meta_order: 0

# Valine
# You can get your appid and appkey from https://leancloud.cn
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: false # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version
appid: # Your leancloud application appid
appkey: # Your leancloud application appkey
notify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0

# LiveRe comments system
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: # <your_uid>

# Gitalk
# Demo: https://gitalk.github.io
# For more information: https://github.com/gitalk/gitalk
gitalk:
enable: false
github_id: # GitHub repo owner
repo: # Repository name to store issues
client_id: # GitHub Application Client ID
client_secret: # GitHub Application Client Secret
admin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language:



# ---------------------------------------------------------------
# Search Services 搜索服务
# See: https://theme-next.org/docs/third-party-services/search-services
# ---------------------------------------------------------------

# Algolia Search Algolia 搜索需要注册
# For more information: https://www.algolia.com
algolia_search:
enable: false
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"

# Local Search 本地搜索 一般开启这个
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb 依赖
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

# Swiftype Search API Key
swiftype_key:


# ---------------------------------------------------------------
# Chat Services 聊天服务
# See: https://theme-next.org/docs/third-party-services/chat-services
# ---------------------------------------------------------------

# Chatra Support
# See: https://chatra.io
# Dashboard: https://app.chatra.io/settings/general
chatra:
enable: false
async: true
id: # Visit Dashboard to get your ChatraID
#embed: # Unfinished experimental feature for developers. See: https://chatra.io/help/api/#injectto

# Tidio Support
# See: https://www.tidiochat.com
# Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
enable: false
key: # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer


# ---------------------------------------------------------------
# Tags Settings 标签插件设置
# See: https://theme-next.org/docs/tag-plugins/
# ---------------------------------------------------------------

# Note tag (bs-callout)
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

# Tabs tag
tabs:
transition:
tabs: false
labels: true
border_radius: 0

# PDF tag, requires two plugins: pdfObject and pdf.js
# pdfObject will try to load pdf files natively, if failed, pdf.js will be used.
# The following `cdn` setting is only for pdfObject, because cdn for pdf.js might be blocked by CORS policy.
# So, you must install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# See: https://github.com/theme-next/theme-next-pdf
pdf:
enable: false
# Default height
height: 500px

# Mermaid tag
mermaid:
enable: false
# Available themes: default | dark | forest | neutral
theme: forest


# ---------------------------------------------------------------
# Animation Settings 动画设置
# ---------------------------------------------------------------

# Use velocity to animate everything.
# For more information: http://velocityjs.org
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | flipXIn | flipYIn | flipBounceXIn | flipBounceYIn
# swoopIn | whirlIn | shrinkIn | expandIn
# bounceIn | bounceUpIn | bounceDownIn | bounceLeftIn | bounceRightIn
# slideUpIn | slideDownIn | slideLeftIn | slideRightIn
# slideUpBigIn | slideDownBigIn | slideLeftBigIn | slideRightBigIn
# perspectiveUpIn | perspectiveDownIn | perspectiveLeftIn | perspectiveRightIn
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn
# Only for Pisces | Gemini.
sidebar: slideUpIn

# Progress bar in the top during page loading. 加载网页进度条
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
pace:
enable: false
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal

# JavaScript 3D library. 3D库背景
# Dependencies: https://github.com/theme-next/theme-next-three
three:
enable: false
three_waves: false
canvas_lines: false
canvas_sphere: false

# Canvas-nest 动态巢型背景
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest 依赖
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
enable: true
onmobile: true # Display on mobile or not
color: "0,0,255" # RGB values, use `,` to separate
opacity: 0.5 # The opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # The number of lines

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
enable: false
size: 300 # The width of the ribbon
alpha: 0.6 # The transparency of the ribbon
zIndex: -1 # The display level of the ribbon

---------------------------------------------------------------

更多参见帮助文档

在每篇文章末尾统一添加“本文结束”标记

具体实现方法

在路径 \themes\next\layout\_macro 中编辑 post.swig文件在<footer class="post-footer">前添加以下内容:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-heart"></i>感谢您的阅读-------------</div>
{% endif %}
</div>

添加helper-live2d动态模型

添加helper-live2d动态模型

添加鼠标点击特效

1.添加点击心型特效

只需要在主题目录下next/source/js/src下面新建一个clicklove.js文件,当然名字可以自己任取,然后在其中加入以下内容:

1
2
/*网页鼠标点击特效(爱心)*/
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

上面这个是鼠标点击出现小心心的文件,也可以加上鼠标点击出现社会主义核心价值观的js文件,如果只想要一个就只加一个文件即可,在刚才的目录下继续创建clicksocialvalue.js文件,然后在文件中加入以下内容:

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
(function() {
var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"],
index = Math.floor(Math.random() * coreSocialistValues.length);
document.body.addEventListener('click',
function(e) {
if (e.target.tagName == 'A') {
return;
}
var x = e.pageX,
y = e.pageY,
span = document.createElement('span');
span.textContent = coreSocialistValues[index];
index = (index + 1) % coreSocialistValues.length;
span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');
document.body.appendChild(span);
animate(span);
});
function animate(el) {
var i = 0,
top = parseInt(el.style.top),
id = setInterval(frame, 16.7);
function frame() {
if (i > 180) {
clearInterval(id);
el.parentNode.removeChild(el);
} else {
i += 2;
el.style.top = top - i + 'px';
el.style.opacity = (180 - i) / 180;
}
}
}
} ());

当然如果两个都需要的话,可以直接将两个文件的代码合并到一个文件即可。

然后在主题目录下next/layout/_layout.swig文件末尾引入刚才创建的js文件:

1
2
3
<!-- 页面点击特效 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>
<script type="text/javascript" src="/js/src/clicksocialvalue.js"></script>

然后只需要重新渲染页面hexo g && hexo s就可以看到效果啦~

-------------本文结束感谢您的阅读-------------