电脑上如何使用推特（电脑网页版推特）

twitter引流推广3年前发布最强海外脚本-Facebook18.com

4,925 0

一、前言

由于平时自己喜欢看一些技术类文章整理成Word笔记，总感觉这种方式太low，想自己搭建属于自己的博客，在网上查阅了一下，发现Hexo在GitHub或者是码云上搭建博客非常给力。然后自己也搭建了博客，这篇文章就记录了搭建的过程及一些优化。

二、入门Hexo

2.1、什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown 解析文章，在几秒内，即可利用靓丽的主题生成静态网页。大家进入 Hexo官网进行查看。

2.2、安装Hexo

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

Node.js：https://nodejs.org/en/Git：https://git-scm.com/cnpm ：如果npm运行出错就安装cnpm国内镜像

所有必备的应用程序安装完成后，即可使用 npm或者cnpm 安装 Hexo。

打开Git Bash here，输入：

$ npm install -g hexo-cli 或者 $ cnpm install -g hexo-cli

检查是否安装Hexo完成,查询是否成功，显示hexo-cli 版本就说明成功了

$ hexo -V

2.3、建站

安装一切所需的程序后，就可以开始建站了，就是创建我们的博客,大家也可以进入建站官网查看。

新建一个文件夹，来管理我们的博客项目，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

2.3.1、运行命令

$ hexo init <folder>$ cd <folder>$ cnpm install

注：<folder>是表示建站的博客项目名。

打开Git Bash here，输入：

$ hexo init githubBlog

进入创建的博客项目下进行安装

$ cd githubBlog$ cnpm install

安装之后，整个博客项目目录如下：

2.3.2、访问URL

$ hexo server 或者$ hexo s

访问URL：http://localhost:4000，效果如下图：

到这里已经通过Hexo初步创建博客了，下面再来了解一下如何将我们的博客托管到GitHub服务器上。

2.4、托管到GitHub

2.4.1、GitHub创建repositories

进入GitHub官网中浏览器输入 https://github.com/ ,如果还没有账号就创建一个账号就好了。

登录自己的账号。直接new repositories 或者进入You repositories 再new repositories。

进入到创建 repositories 页面后,一定要注意，将新建的repository的名字为: Your account name.github.io。其他默认就好了。

2.4.2、配置

GitHub的Repository创建好后，再回到本地的Hexo的githubBlog项目中，找到在项目的根目录下_config.yml找到 deploy标签

在该文件下面添加如下内容：

deploy: #部署 type: git repository: https://github.com/whb1990/whb1990.github.io.git branch: master

注：repository: https://github.com/whb1990/whb1990.github.io 是自己刚刚创建Your account name.github.io 的repository，在Clone with HTTPS里面，复制粘贴就好了，冒号后面记得空格。branch 后面是master就好了。

在 _config.yml 找到 url 进行修改为：

url: http://whb1990.github.io #博客网址

2.4.3、部署

到这里就差不多了，接下来需要执行一些命令，将博客部署到GitHub上去。

打开Git Bash Here进入githubBlog 根目录下，首先需要安装一下 hexo-deployer-git 不然可能出现错误无法部署成功。

$ cnpm install hexo-deployer-git --save

然后再执行以下命令:

$ hexo clean$ hexo generate$ hexo deploy

或者简写

$ hexo clean$ hexo g$ hexo d

部署成功如下显示:

2.4.4、测试

我们进行访问 https://whb1990.github.io/ 和 http://localhost:4000/ 一样的页面说明是已经成功。

三、站点文件配置

在根githubBlog目录下 _config.yml文件，我们暂且称为站点配置文件，以便与后面讲到的主题配置文件进行区分。

3.1、网站

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
author	您的名字
language	网站使用的语言
timezone	网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

3.2、目录

参数	描述
source_dir	资源文件夹，这个文件夹用来存放内容。
public_dir	公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir	标签文件夹
archive_dir	归档文件夹
category_dir	分类文件夹
code_dir	Include code 文件夹
i18n_dir	国际化文件夹
skip_render	跳过指定文件的渲染，您可使用 glob 来配置路径

3.3、文章

参数	描述	默认值
new_post_name	新文章的文件名称	:title.md
default_layout	预设布局	post
auto_spacing	在中文和英文之间加入空格	false
titlecase	把标题转换为 title case	false
external_link	在新标签中打开链接	true
filename_case	把文件名称转换为小写或大写	0
render_drafts	显示草稿	false
post_asset_folder	启动 Asset 文件夹	false
relative_link	把链接改为与根目录的相对位址	false
future	显示未来的文章	true
highlight	代码块的设置

3.4、分类&标签

参数	描述	默认值
default_category	默认分类	uncategorized
category_map	分类别名
tag_map	标签别名

3.5、分页

参数	描述	默认值
per_page	每页显示的文章量	10
pagination_dir	分页目录	page

四、写作

4.1、创建文章

$ hexo new [layout] <title>

如：创建hello-world

$ hexo new hello-world

如果不添加title，默认就是标题title: hello-world。

这里注意一下，如果创建带有中文的路径名称时，生成静态页面hexo g可能会报错。

warning: LF will be replaced by CRLF in xxxxThe file will have its original line endings in your working directory.

这是由于路径中存在 / 的符号转义问题，如：创建文章时命名为中文，一般都出现这个小问题。

解决方法，在命令行中输入:

$ git config --global core.autocrlf false

然后重新生成文件部署就好了。

4.2、编辑文章

创建的文章在source/_posts目录下，打开文件进行编辑，完全支持Markdown语法。

五、Next主题

在 Hexo主题官网中有许多主题，大家喜欢什么就进行部署和编辑就好了，大致的思路都是差不多的。

我选择的 Next主题，网上很多也是用的这个主题。

5.1、安装

在githubBlog根目录下，执行以下命令：

$ git clone https://github.com/theme-next/hexo-theme-next themes/next

上面的命令是clone蕞新版本的主题，也可以使用下面的命令clone指定版本的主题

$ git clone --branch v7.1.1 https://github.com/theme-next/hexo-theme-next themes/next

安装完成之后，在themes下就会有next目录

5.2、切换主题

在项目根目录下打开 _config.yml 文件将 theme 设置为 next 即可：

部署之后查看效果如下，有点丑：

5.3、主题配置

一般配置都在 theme/next/-config.yml文件下配置。

5.3.1、修改整体布局

在 theme/next/-config.yml 找到 menu 看看自己博客所需的分类

menu: home: / || home #首页 about: /about/ || user #关于 tags: /tags/ || tags #标签 categories: /categories/ || th #目录 archives: /archives/ || archive #归档 #schedule: /schedule/ || calendar #日程 sitemap: /sitemap.xml || sitemap #站点地图 commonweal: /404/ || heartbeat #公益404

在menu_settings如果设置icon: false则无图标，badges: true则标签都会显示数字

menu_settings: icons: true badges: false

注：这里需要创建about页面，很简单，同创建标签tags、归档archives页面一样的方式，所需要创建的名称要与menu相对应，举例说明如下。

$ hexo new page about #看看menu上还有什么标签没创建就行创建$ hexo new page tags #创建标签等

创建完成之后在自己项目查找，如我的是githubBlog/source/目录下查看新创建好的相关标签页面，里面包含各自的index.md文件，大家可以自行编辑了。

5.3.2、Schemes方案设置

# Schemes#scheme: Muse #这是 Nex默认版本，黑白主调，大量留白 #scheme: Mist #Muse 的紧凑版本，整洁有序的单栏外观#scheme: Pisces #双栏 Scheme，小家碧玉似的清新scheme: Gemini #双子座，也是双栏形式，和Pisces类似

自己喜欢什么风格自行选择。

5.3.3、social设置

使用方式: Key: permalink || icon Key表示标签显示，permalink表示URI连接，icon表示图标，自己添加所要显示的

social: GitHub: https://github.com/whb1990 || github E-Mail: mailto:[email protected] || envelope QQ: 270028806 || qq 微信: yan521bo ||weixin #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 || skypesocial_icons: #设置图标是否显示这里 enable: true #表示开启 icons_only: false #只显示图片 transition: false

注：图标库来源https://fontawesome.com/icons?from=io，在scheme: Pisces该效果不显示。

5.3.4、avatar头像设置

avatar: # In theme directory : /images/avatar.gif # In site directory : /uploads/avatar.gif # You can also use other linking images. url: /images/avatar.jpg # If true, the avatar would be dispalyed in circle. #圆形框 rounded: true # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar. opacity: 1 # If true, the avatar would be rotated with the cursor. #头像是否旋转 rotated: true

5.3.5、toc边栏中的目录设置

toc: #边栏设置 enable: true #是否启用边栏 # Automatically add list number to toc. number: true #自动将列表编号添加到toc # If true, all words will placed on next lines if header width longer then sidebar width. wrap: false #true时是当标题宽度很长时，自动换到下一行 # 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 #蕞大深度

5.3.6、Creative Commons 4.0国际许可设置

5.3.7、sidebar侧边栏配置这里选择默认吧

sidebar: # Sidebar Position, available values: left | right . position: left #position: right # Manual define the sidebar width. If commented, will be default for: # Muse | Mist: 320 # Pisces | Gemini: 240 width: 240 # Sidebar Display, 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 . offset: 12 # Enable sidebar on narrow view . onmobile: true # Click any blank part of the page to close sidebar . dimmer: false

5.3.8、save_scroll配置

# Automatically saving scroll position on each post / page in cookies.save_scroll: false #是否在Cookie中自动保存每个帖子/页面上的滚动位置。

5.3.9、excerpt_description

# Automatically excerpt description in homepage as preamble text.excerpt_description: false #是否自动摘录主页中的描述作为前导文本。

5.3.10、auto_excerpt配置

auto_excerpt: enable: true #是否自动摘录。不推荐 length: 150 #这里是说文章开头弟一个字到弟150个字就显示"阅读全文"

5.3.22、codeblock代码块配置

codeblock: # Code Highlight theme # Available values: normal | night | night eighties | night blue | night bright # See: https://github.com/chriskempson/tomorrow-theme highlight_theme: normal #代码突出显示主题 # Manual define the border radius in codeblock, leave it blank for the default value: 1 border_radius: 1 # Add copy button on codeblock copy_button: enable: true # Show text copy result. show_result: true # Available values: default | flat | mac style: flat

5.3.12、wechat_subscriber微信配置

wechat_subscriber: enabled: true #是否启动微信订阅 qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg description: ex. subscribe to my blog by scanning my public wechat account

5.3.13、footer 底部设置

footer: # Specify the date when the site was setup. If not defined, current year will be used. since: 2019 #建站开始时间 # Icon between year and copyright info. icon: # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/ # `heart` is recommended with animation in red . name: heart #设置图标，想修改图标从https://fontawesome.com/v4.7.0/icons获取 # 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: ©2019 by 王洪博 #版权 powered: # Hexo link . enable: true ##是否显示Hexo link # Version info of Hexo after Hexo link . version: true #是否显示Hexo版本 theme: # Theme & scheme info link . enable: true #是否显示NexT主题 # Version info of NexT after scheme info . version: true #是否显示NexT版本

5.3.14、favicon标签页图标

favicon: small: /images/favicon-16x16-next.png #小图标默认的NexT medium: /images/favicon-32x32-next.png #中图标默认NexT apple_touch_icon: /images/apple-touch-icon-next.png #苹果触摸图标 safari_pinned_tab: /images/logo.svg #safari固定标签

5.3.15、Math Equations Render Support 数学方程式渲染支持

math: enable: true #默认为false per_page: true engine: mathjax #两种方式 mathjax / katex mathjax: cdn: //cdn.jsdelivr.net/npm/[email protected]/MathJax.js?config=TeX-AMS-MML_HTMLorMML #默认这里大家根据自己需求 katex: cdn: //cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css #默认

5.3.16、Han Support 支持汉字

设置汉字支持，按照以下步骤：

1. 打开Git Bash Here，进入theme/next目录下

$ cd themes/next

2. 获取该汉字支持Git module，执行命令以下命令获得

$ git clone https://github.com/theme-next/theme-next-han source/lib/Han

3. 设置汉字支持

han: true

4. 更新update

$ cd themes/next/source/lib/Han$ git pull

5.3.17、font字体设置

font: # Use custom fonts families or not. # Depended options: `external` and `family`. enable: true #默认false 如果要进行字体修改那么设置为true # Uri of fonts host, e.g. //fonts.googleapis.com . host: //fonts.lug.ustc.edu.cn # Font options: # `external: true` will load this font family from `host` above. # `family: Times New Roman`. Without any quotes. # `size: x.x`. Use `em` as unit. Default: 1 # Global font settings used for all elements inside <body>. global: external: true family: Lato size: # Font settings for site title . title: external: true family: size: # Font settings for headlines . headings: external: true family: Roboto Slab size: # Font settings for posts . posts: external: true family: # Font settings for <code> and code blocks. codes: external: true family: Roboto Mono # Font settings for Logo. # Fallback to `global` font settings. logo: external: true family: size:

六、添加图标链接到GitHub

一般在右上角或者左上角，如配置右上角Fork_me_on_GitHub，按以下步骤进行

1. 打开 Fork_me_on_GitHub 链接，里面有许多样式，选择自己喜欢的样式，将其复制下来。

2. 打开自己博客项目中的themes/next/layout/_layout.swig文件，搜索<div class="headband"></div> 将复制的内容粘贴到<div class="headband"></div>下面，如下：

配置右上角的Fork_me_on_GitHub:

七、修改文章底部标签

在博客项目中找到/themes/next/layout/_macro/post.swig，搜索 rel="tag"，将 #号换成<i class="fa fa-tag"></i>

原先#号的样式

修改为图标的样式

八、设置背景动画样式

NexT里面有几种动画背景样式canvas_nest、three_waves、canvas_lines、canvas_sphere等

8.1、canvas_nest如下图所示:

按照以下步骤完成：

1. 打开Git Bash Here进入自己文件夹下/themes/next文件夹下

$ cd /themes/next

2. 下载安装 canvas_nest module`执行

$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

在 /themes/next/source/lib查看会看到canvas_nest文件夹

3. 在/themes/next/_config.yml设置

canvas_nest: true

8.2、 three_waves如图所示

three_waves 设置步骤，和 canvas_nest 步骤是一样的。

下载完成后，在/themes/next/_config.yml设置

three_waves: true#ORcanvas_lines: true#ORcanvas_sphere: true

8.3、canvas_riadfdson

canvas_riadfdson只适合 scheme、Pisces这里不测试了，大家可以进入 canvas_riadfdson 安装。

九、在网站底部添加访问量

1. 进入 \\themes\\next\\layout\\_partials\\footer.swig 文件顶部弟一行添加

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2. 搜索

{% if theme.footer.powered.enable %}

在这个位置上添加以下代码:

<div class="powered-by"><i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv"> 本站访客数:<span id="busuanzi_value_site_uv"></span></span></div>

注：这里的id值可以选择两种

busuanzi_value_site_uv #表示用户连续点击n篇文章，只记录1次访客数busuanzi_value_site_pv #表示用户连续点击n篇文章，记录+n次访问量

十、给每篇文章添加类别和标签

在创建的文章都在source/_post目录下找到，每篇文章添加tags、categories。

十一、添加进度条

添加进度条的话在手机浏览的时候一般情况都有自带的进度条了，例如微信浏览、浏览器浏览等等，这样就出现重复的进度条了，这里看个人是否添加。但是在电脑浏览器浏览却是不错的。

按照以下步骤进行或者进入这里 Progress配置查看如何配置

1. 打开Git Bash Here进入自己文件夹下/themes/next文件夹下

$ cd /themes/next

2. 下载安装 Progress module 执行

$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

在 /themes/next/source/lib查看会看到pace文件夹

3. 在/themes/next/_config.yml设置

十二、添加站内搜索

由于可能需要快速查找相关文章，那么就需要添加站内搜索。

按以下步骤进行或者进入 NexT配置站内搜索文档查看如何配置

1. 安装站内搜索插件

$ npm install hexo-generator-searchdb --save或者$ cnpm install hexo-generator-searchdb --save

2. 在根目录下的 _config.yml添加

#表示站内搜索search: path: search.xml field: post format: html limit: 10000

3. 在themes/next/_config.yml文件中搜索local_search，进行设置

local_search: enable: true #设置为true trigger: auto # auto / manual，auto 自动搜索、manual：按回车[enter ]键手动搜索 top_n_per_article: 1 unescape: true

十三、添加打赏

NexT主要提供三种打赏方式分别是微信、支付宝、比特币

在themes/next搜索Reward：

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: true #启用打赏 animation: true #启用动画效果 comment: 捐赠作者请点击下方的“打赏”按钮 #内容

十四、友情链接

# Blog rolls #友情链接links_icon: linklinks_title: 友情链接links_layout: block#links_layout: inlinelinks: Eirunye: http://eirunye.github.io/ #所需添加的友情链接 Title是表示友情链接的博客名称或者随意你取，后面是链接，冒号后面记得空格程晓明: https://www.infoq.cn/profile/1278512```

十五、添加阅读统计

给每篇文章进行添加阅读统计，效果如下图:

1. 进入 leancloud

2. 创建应用

3. 进入设置页面获取应用Key

将App ID、App Key 配置到next/_config.yml中leancloud_visitors

leancloud_visitors: enable: true 设置为true 默认为false app_id: #你的App ID，注意冒号后面空格 app_key: #你的App Key，注意冒号后面空格 Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security #设置依赖 security: true #如果您不关心lc计数器中的安全性并且只想直接使用它，请将`security`设置为`false`。 betterPerformance: true#更好的性能

4. 在leancloud存储的位置创建Class，必须命名为Counter

5. 查看后台统计数据

十六、添加评论

我的博客选择的是Valine。

在next/_config.yml搜索Valine，进入 Valine 官网，也是 leancloud 官网，进入leancloud 控制台,没有账号密码就进行设置。

1. 创建应用

参考上面添加阅读统计的创建应用。

2. 进入设置页面获取应用key

参考上面添加阅读统计的进入设置页面获取应用key。

3. 在next/_config.yml进行配置。

valine: enable: true # 设置为true，默认为false appid: # 将应用key的App ID设置在这里 appkey: # 将应用key的App Key设置在这里 notify: true# 邮箱通知 , https://github.com/xCss/Valine/wiki，默认为false verify: true# 验证码默认为false placeholder: Just go go ^_^ # 初始化评论显示，根据自己修改，这里默认， avatar: wavatar # 头像风格，默认为mm，可进入网址：https://valine.js.org/visitor.html查看头像设置，这里有许多头像风格，进行设置 guest_info: nick,mail,link # 自定义评论标题 pageSize: 10 # 分页大小，10页就自动分页 visitor: true # 是否允许游客评论，进入官网查看设置：https://valine.js.org/visitor.html

4. 显示结果

这样就完成了valine评论的配置了，接下来就可以进行评论了，我们还可以在后台查看评论信息。

5. 在后台查看评论数据

在valine后台，存储位置中的数据里面创建Class，名称必须为命名为Comment。

参考上面添加阅读统计的创建Class。

注：选择valine评论系统是因为支持国内网络，不需要连接外网就可以进行显示评论系统，而且很好管理，页面简单。

十七、添加RSS

效果如下图：

实现步骤如下：

1. 切换到你的blog根目录下，然后安装 Hexo 插件：

$ cnpm install --save hexo-generator-feed

2. 然后在根目录的站点配置文件 _config.yml下进行配置

## Plugins: http://hexo.io/plugins/plugins: hexo-generate-feed # RSS订阅

3. 然后打开next主题文件夹里面的_config.yml，在里面配置为如下：

# Set rss to false to disable feed link.# Leave rss as empty to use site's feed link.# Set rss to specific value if you have burned your feed already.rss: /atom.xml

十八、点击出现桃心效果

效果如下图：

实现步骤如下：

1. 打开浏览器，输入：http://7u2ss1.com1.z0.glb.clouddn.com/love.js

2. 然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。

3. 将love.js文件放到路径/themes/next/source/js/src里面，然后打开\\themes\\next\\layout\\_layout.swig文件,在末尾添加以下代码：

<script type="text/javascript" src="/js/src/love.js"></script>

十九、修改文章内链接文本样式

效果如下图：

实现步骤如下：

修改文件 themes\\next\\source\\css\\_common\\components\\post\\post.styl，在末尾添加如下css样式：

// 文章内链接文本样式.post-body p a{ color: #0593d3; border-bottom: none; border-bottom: 1px solid #0593d3; &:hover { color: #fc6423; border-bottom: none; border-bottom: 1px solid #fc6423; }}

其中选择 .post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式，颜色可以自己定义。

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

效果如下图：

实现步骤如下：

在路径 \\themes\\next\\layout\\_macro 中新建 passage-end-tag.swig 文件，并添加以下内容：

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

接着打开\\themes\\next\\layout\\_macro\\post.swig文件，在post-body 之后， post-footer`之前添加如下画红色部分代码：

<div> {% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %}</div>

然后打开主题配置文件_config.yml，在末尾添加：

# 文章末尾添加“本文结束”标记passage_end_tag: enabled: true

二十一、修改“代码块自定义样式

效果如下：

实现步骤如下：

打开\\themes\\next\\source\\css\\_custom\\custom.styl，向里面加入：

// Custom styles.code { color: #ff7600; background: #fbf7f8; margin: 2px;}// 大代码块的自定义样式.highlight, pre { margin: 5px 0; padding: 5px; border-radius: 3px;}.highlight, code, pre { border: 1px solid #d6d6d6;}

二十二、主页文章添加阴影效果

效果如下图：

实现步骤如下：

打开\\themes\\next\\source\\css\\_custom\\custom.styl，向里面加入：

// 主页文章添加阴影效果 .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba; -moz-box-shadow: 0 0 5px rgba; }

二十三、添加热度

效果如下图：

实现步骤如下：

next主题集成leanCloud，打开/themes/next/layout/_macro/post.swig ，在画红线的区域添加 ℃：

然后打开，/themes/next/languages/zh-Hans.yml，将画红框的改为热度就可以了:

二十四、网站底部字数统计

效果如下图：

实现步骤如下：

切换到根目录下，然后运行如下代码

$ cnpm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

<div class="theme-info"> <div class="powered-by"></div> <span class="post-count">站点总字数{{ totalcount }}字</span></div>

二十五、添加 README.md 文件

每个项目下一般都有一个 README.md 文件，但是使用 hexo 部署到仓库后，项目下是没有 README.md 文件的。

在 Hexo 目录下的 source 根目录下添加一个 README.md 文件，修改站点配置文件 _config.yml，将 skip_render 参数的值设置为

skip_render: README.md

保存退出即可。再次使用 hexo d 命令部署博客的时候就不会在渲染 README.md 这个文件了。

二十六、实现统计功能

效果如下图：

实现步骤如下：

在根目录下安装 hexo-wordcount，运行：

$ cnpm install hexo-wordcount --save

然后在主题的配置文件中，配置如下：

# Post wordcount display settings# Dependencies: https://github.com/willin/hexo-wordcountpost_wordcount: item_text: true wordcount: true #字数统计 min2read: true #阅读时长预计 totalcount: true #总字数统计 separated_meta: true

二十七、添加顶部加载条

效果如下图：

实现步骤如下：

打开/themes/next/layout/_partials/head.swig文件，添加红框上的代码

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script><link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码

<style> .pace .pace-progress { background: #1E92FB; /*进度条颜色*/ height: 3px; } .pace .pace-progress-inner { box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/ } .pace .pace-activity { border-top-color: #1E92FB; /*上边框颜色*/ border-left-color: #1E92FB; /*左边框颜色*/ }</style>

二十八、在文章底部增加版权信息

效果如下图：

实现步骤如下：

在目录 next/layout/_macro/下添加 my-copyright.swig：

{% if page.copyright %}<div class="my_post_copyright"> <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <p><span>本文标题:</span><a href="{{ url_for }}">{{ page.title }}</a></p> <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p> <p><span>发布时间:</span>{{ page.date.format }}</p> <p><span>蕞后更新:</span>{{ page.updated.format }}</p> <p><span>原始链接:</span><a href="{{ url_for }}" title="{{ page.title }}">{{ page.permalink }}</a> <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功！"></i></span> </p> <!-- <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International ">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接：https://www.chuahi18.com

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

.my_post_copyright { width: 85%; max-width: 45em; margin: 2.8em auto 0; padding: 0.5em 1.0em; border: 1px solid #d3d3d3; font-size: 0.93rem; line-height: 1.6em; word-break: break-all; background: rgba;}.my_post_copyright p{margin:0;}.my_post_copyright span { display: inline-block; width: 5.2em; color: #b5b5b5; font-weight: bold;}.my_post_copyright .raw { margin-left: 1em; width: 5em;}.my_post_copyright a { color: #808080; border-bottom:0;}.my_post_copyright a:hover { color: #a3d2a3; text-decoration: underline;}.my_post_copyright:hover .fa-clipboard { color: #000;}.my_post_copyright .post-url:hover { font-weight: normal;}.my_post_copyright .copy-path { margin-left: 1em; width: 1em; +mobile{display:none;}}.my_post_copyright .copy-path:hover { color: #808080; cursor: pointer;}

修改next/layout/_macro/post.swig，在代码

<div> {% if not is_index %} {% include 'wechat-subscriber.swig' %} {% endif %}</div>

之前添加增加如下代码：

<div> {% if not is_index %} {% include 'my-copyright.swig' %} {% endif %}</div>

如下图：

修改next/source/css/_common/components/post/post.styl文件，在蕞后一行增加代码：

@import "my-post-copyright"

保存重新生成即可。如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

---title: Java并发-ReentrantLockcopyright: truedate: 2019-08-26 14:59:12updated:tags: - Java - J.U.Ccategories: - Java - J.U.C---

如果你觉得每次都要输入copyright: true很麻烦的话,那么在/scaffolds/post.md文件中添加：

copyright: true

这样每次hexo new "你的内容"之后，生成的md文件会自动把copyright:true加到里面去。

二十九、隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig，隐藏或删除如下代码，如下图：

三十、修改打赏字体不闪动

修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数wechat:hover和alipay:hover，如下：

/* 注释文字闪动函数 #wechat:hover p{ animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear;} #alipay:hover p{ animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear;}*/

三十一、文章加密访问

效果如下图：

实现步骤如下：

打开themes/next/layout/_partials/head/head.swig文件,在以下位置插入这样一段代码：

<script> { if{ if !== '{{ page.password }}'){ alert; history.back; } } });</script>

然后在文章上写成类似这样：

三十二、添加鼠标点击显示字体效果

效果如下图：

实现步骤如下：

在 /themes/next/source/js 下新建文件click_show_text.js，在 click_show_text.js文件中添加以下代码：

var a_idx = 0;jQuery.ready { $.click { var a = new Array ; var $i = $.text; a_idx = % a.length; var x = e.pageX, y = e.pageY; $i.css; $.append; $i.animate { $i.remove; }); }); setTimeout', 2000);});function delay { $.removeAttr;}

其中的社会主义核心价值观可以根据你自己的创意替换为其他文字，然后在 \\themes\\next\\layout\\_layout.swing文件末尾添加以下代码：

<script type="text/javascript" src="/js/click_show_text.js"></script>

三十三、添加鼠标点击烟花爆炸效果

效果如下图：

实现步骤如下：

在 \\themes\\next\\source\\js 目录下新建一个 fireworks.js 的文件，里面写入以下代码：

"use strict";function updateCoords{pointerX=-canvasEl.getBoundingClientRect.left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect.top}function setParticuleDirection{var t=anime.random*Math.PI/180,a=anime.random,n=[-1,1][anime.random]*a;return{x:e.x+n*Math.cos,y:e.y+n*Math.sin}}function createParticule{var a={};return a.x=e,a.y=t,a.color=colors[anime.random],a.radius=anime.random,a.endPos=setParticuleDirection,a.draw=function{ctx.beginPath,ctx.arc,ctx.fillStyle=a.color,ctx.fill},a}function createCircle{var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function{ctx.globalAlpha=a.alpha,ctx.beginPath,ctx.arc,ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke,ctx.globalAlpha=1},a}function renderParticule{for{e.animatables[t].target.draw}}function animateParticules{for,n=[],i=0;i<numberOfParticules;i++){n.push)}anime.timeline.add{return e.endPos.x},y:function{return e.endPos.y},radius:0.1,duration:anime.random,easing:"easeOutExpo",update:renderParticule}).add,lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random},duration:anime.random,easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce{var a;return function{var n=this,i=arguments;clearTimeout,a=setTimeout{e.apply},t)}}var canvasEl=document.querySelector;if{var ctx=canvasEl.getContext,numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce{canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext.scale},500),render=anime{ctx.clearRect}});document.addEventListener{"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&,updateCoords,animateParticules)},!1),setCanvasSize,window.addEventListener}"use strict";function updateCoords{pointerX=-canvasEl.getBoundingClientRect.left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect.top}function setParticuleDirection{var t=anime.random*Math.PI/180,a=anime.random,n=[-1,1][anime.random]*a;return{x:e.x+n*Math.cos,y:e.y+n*Math.sin}}function createParticule{var a={};return a.x=e,a.y=t,a.color=colors[anime.random],a.radius=anime.random,a.endPos=setParticuleDirection,a.draw=function{ctx.beginPath,ctx.arc,ctx.fillStyle=a.color,ctx.fill},a}function createCircle{var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function{ctx.globalAlpha=a.alpha,ctx.beginPath,ctx.arc,ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke,ctx.globalAlpha=1},a}function renderParticule{for{e.animatables[t].target.draw}}function animateParticules{for,n=[],i=0;i<numberOfParticules;i++){n.push)}anime.timeline.add{return e.endPos.x},y:function{return e.endPos.y},radius:0.1,duration:anime.random,easing:"easeOutExpo",update:renderParticule}).add,lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random},duration:anime.random,easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce{var a;return function{var n=this,i=arguments;clearTimeout,a=setTimeout{e.apply},t)}}var canvasEl=document.querySelector;if{var ctx=canvasEl.getContext,numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce{canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext.scale},500),render=anime{ctx.clearRect}});document.addEventListener{"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&,updateCoords,animateParticules)},!1),setCanvasSize,window.addEventListener};

然后在 \\themes\\next\\layout\\layout.swing 文件中写入以下代码：

<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> <script type="text/javascript" src="/js/fireworks.js"></script>

三十四、自定义鼠标指针样式

在 \\themes\\next\\source\\css\\_custom\\custom.styl 文件 body 样式里写入如下代码：

/*自定义鼠标样式*/body { cursor: url,auto; background-color: @theme_background;}

鼠标指针可以用 Axialis CursorWorkshop 这个软件自己制作，不同主题具体放的文件有所不同，确保在博客主体 body 的 CSS 文件中即可，其中的鼠标指针链接可替换成自己的，首先尝试加载mouse.cur ，如果该文件不存在或由于其他原因无效，那么 auto 会被使用，也就是自动默认效果，图片格式为.ico、.ani、.cur，建议使用.cur，如果使用.ani或者其他格式无效，原因是浏览器兼容问题。

三十五、添加彩色滚动变换字体

在你想要添加彩色滚动变换字体的地方写入以下代码即可，其中文字可自行更改：

<div id="binft"></div> <script> var binft = function { function t { return b[Math.floor * b.length)] } function e { return String.fromCharCode + 33) } function n { for , i = 0; r > i; i++) { var l = document.createElement; l.textContent = e, l.style.color = t, n.appendChild } return n } function i { var t = o[c.skillI]; c.step ? c.step-- : , c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? : c.delay ? c.delay-- : : c.skillP > 0 ? , c.skillP--) : % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild : Math.min)), setTimeout } var l = "", o = ["青青陵上柏，磊磊涧中石。", "人生天地间，忽如远行客。","斗酒相娱乐，聊厚不为薄。", "驱车策驽马，游戏宛与洛。","洛中何郁郁，冠带自相索。","长衢罗夹巷，王侯多弟宅。","两宫遥相望，双阙百余尺。","极宴娱心意，戚戚何所迫？"].map { return r + "" }), a = 2, g = 1, s = 5, d = 75, b = ["rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb", "rgb"], c = { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g }; i }; binft);</script>

我是放在了侧边栏头像的下边，描述的位置\\themes\\next\\layout\\_macro\\sidebar.swing：

三十六、浏览器网页标题恶搞

效果如下图：

实现步骤如下：

在目录 \\themes\\next\\source\\js 下新建一个 FunnyTitle.js 文件，在里面填写如下代码：

 var OriginTitle = document.title; var titleTime; document.addEventListener { if { $.attr; document.title = 'ヽノ你丑你就走！'; clearTimeout; } else { $.attr; document.title = 'ヾノ你帅就回来！' + OriginTitle; titleTime = setTimeout { document.title = OriginTitle; }, 2000); } });

然后在 \\themes\\next\\layout\\layout.swing 文件中写入以下代码：

<script type="text/javascript" src="\\js\\FunnyTitle.js"></script>

再次部署博客后就可以看见标题搞笑的效果了。

三十七、添加网站雪花飘落效果

效果如下图：

实现步骤如下：

在\\themes\\next\\source\\js目录下新建一个 snow.js文件，粘贴以下代码：

/*样式一*/{ $.fn.snow = function{ var $flake = $.css.html, documentHeight = $.height, documentWidth = $.width, defaults = { minSize : 10, maxSize : 20, newOn : 1000, flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */ }, options = $.extend; var interval= setInterval{ var startPositionLeft = Math.random * documentWidth - 100, startOpacity = 0.5 + Math.random, sizeFlake = options.minSize + Math.random * options.maxSize, endPositionTop = documentHeight - 200, endPositionLeft = startPositionLeft - 500 + Math.random * 500, durationFall = documentHeight * 10 + Math.random * 5000; $flake.clone.appendTo.css.animate{ $.remove }); }, options.newOn); };});${ $.fn.snow;});

/*样式二*//* 控制下雪 */function snowFall { /* 可配置属性 */ snow = snow || {}; this.maxFlake = snow.maxFlake || 200; /* 蕞多片数 */ this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */ this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */}/* 兼容写法 */requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function { setTimeout; };cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame;/* 开始下雪 */snowFall.prototype.start = function{ /* 创建画布 */ snowCanvas.apply; /* 创建雪花形状 */ createFlakes.apply; /* 画雪 */ drawSnow.apply}/* 创建画布 */function snowCanvas { /* 添加Dom结点 */ var snowcanvas = document.createElement; snowcanvas.id = "snowfall"; snowcanvas.width = window.innerWidth; snowcanvas.height = document.body.clientHeight; snowcanvas.setAttribute; document.getElementsByTagName[0].appendChild; this.canvas = snowcanvas; this.ctx = snowcanvas.getContext; /* 窗口大小改变的处理 */ window.onresize = function { snowcanvas.width = window.innerWidth; /* snowcanvas.height = window.innerHeight */ }}/* 雪运动对象 */function flakeMove { this.x = Math.floor * canvasWidth); /* x坐标 */ this.y = Math.floor * canvasHeight); /* y坐标 */ this.size = Math.random * flakeSize + 2; /* 形状 */ this.maxSize = flakeSize; /* 蕞大形状 */ this.speed = Math.random * 1 + fallSpeed; /* 坠落速度 */ this.fallSpeed = fallSpeed; /* 坠落速度 */ this.velY = this.speed; /* Y方向速度 */ this.velX = 0; /* X方向速度 */ this.stepSize = Math.random / 30; /* 步长 */ this.step = 0 /* 步数 */}flakeMove.prototype.update = function { var x = this.x, y = this.y; /* 左右摆动 */ this.velX *= 0.98; if { this.velY = this.speed } this.velX += Math.cos * this.stepSize; this.y += this.velY; this.x += this.velX; /* 飞出边界的处理 */ if { this.reset }};/* 飞出边界-放置蕞顶端继续坠落 */flakeMove.prototype.reset = function { this.x = Math.floor * width); this.y = 0; this.size = Math.random * this.maxSize + 2; this.speed = Math.random * 1 + this.fallSpeed; this.velY = this.speed; this.velX = 0;};// 渲染雪花-随机形状flakeMove.prototype.render = function { var snowFlake = ctx.createRadialGradient; snowFlake.addColorStop"); /* 此处是雪花颜色，默认是白色 */ snowFlake.addColorStop"); /* 若要改为其他颜色，请自行查 */ snowFlake.addColorStop"); /* 找16进制的RGB 颜色代码。*/ ctx.save; ctx.fillStyle = snowFlake; ctx.beginPath; ctx.arc; ctx.fill; ctx.restore;};/* 创建雪花-定义形状 */function createFlakes { var maxFlake = this.maxFlake, flakes = this.flakes = [], canvas = this.canvas; for { flakes.push) }}/* 画雪 */function drawSnow { var maxFlake = this.maxFlake, flakes = this.flakes; ctx = this.ctx, canvas = this.canvas, that = this; /* 清空雪花 */ ctx.clearRect; for { flakes[e].update; flakes[e].render; } /* 一帧一帧的画 */ this.loop = requestAnimationFrame { drawSnow.apply; });}/* 调用及控制方法 */var snow = new snowFall;snow.start;

然后在 \\themes\\next\\layout\\layout.swing 文件中写入以下代码：

<script type="text/javascript" src="\\js\\snow.js"></script>

如果没效果，请确认网页是否已载入JQurey，如果没有请在下雪代码之前引入JQ即可：

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script><script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

三十八、添加背景动态彩带效果

效果如下图：

实现步骤如下：

在 \\themes\\next\\layout\\layout.swing 文件中写入以下代码：

<script src="https://g.joyinshare.com/hc/riadfdson.min.js" type="text/javascript"></script><script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script>

三十九、添加背景代码雨特效

效果如下图：

实现步骤如下：

在 \\themes\\next\\source\\js 目录下新建一个 DigitalRain.js文件，粘贴以下代码：

然后在 \\themes\\next\\source\\css\\_custom\\custom.styl 中写入样式：

canvas { position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; height: auto; width: auto; z-index: -1;}

在 \\themes\\next\\layout\\layout.swing 文件中写入以下代码：

 <canvas id="canvas" width="1440" height="900" ></canvas> <script type="text/javascript" src="/js/DigitalRain.js"></script>

四十、代码块复制功能

效果如下图：

实现步骤如下：

1. 下载 clipboard.js

clipboard.js clipboard.min.js

保存文件clipboard.js / clipboard.min.js 到路径\\themes\\next\\source\\js\\src下。

2. 使用clipboard.js

也是在 \\themes\\next\\source\\js\\src 目录下，创建clipboard-use.js，文件内容如下：

/*页面载入完成后，创建复制按钮*/!function { /* code */ var initCopyCode = function{ var copyHtml = ''; copyHtml += '<button class="btn-copy" data-clipboard-snippet="">'; copyHtml += ' <i class="fa fa-globe"></i><span>copy</span>'; copyHtml += '</button>'; $.before; new ClipboardJS { return trigger.nextElementSibling; } }); } initCopyCode;

在\\themes\\next\\source\\css\\_custom\\custom.styl样式文件中添加下面代码：

//代码块复制按钮.highlight{ //方便copy代码按钮的定位 position: relative;}.btn-copy { display: inline-block; cursor: pointer; background-color: #eee; background-image: linear-gradient; border: 1px solid #d5d5d5; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; font-size: 13px; font-weight: 700; line-height: 20px; color: #333; -webkit-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; padding: 2px 6px; position: absolute; right: 5px; top: 5px; opacity: 0;}.btn-copy span { margin-left: 5px;}.highlight:hover .btn-copy{ opacity: 1;}

3. 引用

在\\themes\\next\\layout\\_layout.swig文件中，添加引用之前添加）：

 <script type="text/javascript" src="/js/src/clipboard.min.js"></script> <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

四十一、Hexo文章中图片点击实现全屏查看

使用图片浏览放大功能fancybox插件。

1. 切换到lib目录

$ cd next/source/lib

2. 下载插件

$ git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

3. 更改主题配置文件

fancybox: true

四十二、3D动态标签云

1. 安装标签云hexo-tag-cloud插件

$ cnpm install hexo-tag-cloud@^2.* --save

2. 配置sidebar.swig文件

打开next/layout/_macro/sidebar.swig，输入：

{% if site.tags.length > 1 %}<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script><script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script><div class="widget-wrap"> <div id="myCanvasContainer" class="widget tagcloud"> <canvas width="250" height="250" id="resCanvas" style="width=100%"> {{ list_tags }} </canvas> </div></div>{% endif %}

根据自己的需要放在合适的位置。重新hexo s一下，就可以出现刚刚那个3d标签云了!

四十三、添加卡通人物

效果如下图：

实现步骤如下：

1. 下载 live2d

$ cnpm install --save hexo-helper-live2d

2. 下载模型

$ cnpm install live2d-widget-model-z16

更多模型选择请访问https://github.com/EYHN/hexo-helper-live2d。

3. 修改站点配置文件

#添加萌宠，以下任选一个#live2d-widget-model-chitose#live2d-widget-model-epsilon2_1#live2d-widget-model-gf#live2d-widget-model-haru/01 #live2d-widget-model-haru/02 #live2d-widget-model-haruto#live2d-widget-model-hibiki#live2d-widget-model-hijiki#live2d-widget-model-izumi#live2d-widget-model-koharu#live2d-widget-model-miku#live2d-widget-model-ni-j#live2d-widget-model-nico#live2d-widget-model-nietzsche#live2d-widget-model-nipsilon#live2d-widget-model-nito#live2d-widget-model-shizuku#live2d-widget-model-tororo#live2d-widget-model-tsumiki#live2d-widget-model-unitychan#live2d-widget-model-wanko#live2d-widget-model-z16live2d: enable: true scriptFrom: local model: use: live2d-widget-model-z16 display: position: right #模型位置 width: 140 #模型宽度 height: 260 #模型高度 mobile: show: false #是否在手机端显示

四十四、卡通人物升级版

效果如下图：

能说话、能换装、能玩游戏、能拍照、还能自定义。

实现步骤如下：

1. 下载张书樵大神的项目，解压到本地博客目录的themes/next/source下，修改autoload.js文件，将如下代码：

const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";

改为

const live2d_path = "/live2d-widget/";

2. 在/themes/next/layout/_layout.swing中,新增如下内容：

<script src="/live2d-widget/autoload.js"></script>

3. 在主题配置文件中,新增如下内容：

live2d: enable: true

想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。

四十五、扩展看板娘模型

由于官方的看板娘模型比较少，可手动添加模型。

把 github模型下载到本地，解压后将assets目录拷贝到博客根目录中的live2d_models里，再修改_config.yml 里的 live2d中model.use即可。

四十六、去掉顶部黑线

打开themes\\next\\source\\css\\_custom\\custom.styl添加以下代码：

.headband {display:none;}

四十七、修改主题页面布局为圆角

47.1、方法一

在/themes/next/source/css/_variables/custom.styl文件种添加如下代码：

// 修改主题页面布局为圆角// Variables of Gemini scheme// =================================================@import "Pisces.styl";// Settings for some of the most global styles.// --------------------------------------------------$body-bg-color = #eee// Borders.// --------------------------------------------------$box-shadow-inner = 0 2px 2px 0 rgba, 0 3px 1px -2px rgba, 0 1px 5px 0 rgba$box-shadow = 0 2px 2px 0 rgba, 0 3px 1px -2px rgba, 0 1px 5px 0 rgba, 0 -1px .5px 0 rgba$border-radius-inner = initial$border-radius = initial$border-radius-inner = 15px 15px 15px 15px;$border-radius = 15px;

47.2、方法二

在\\themes\\next\\source\\css\\_variables\\Gemini.styl文件中直接添加：

// 修改主题页面布局为圆角$border-radius-inner = 15px 15px 15px 15px;$border-radius = 15px;

效果如下图：

四十八、自适应背景图片

1. 在站点配置文件夹/themes/next/source/images/放入你的背景图片;

2. 然后修改主题文件夹themes/source/css/_custom/custom.styl，在custom.styl开头加入如下的代码:

body { background: url; background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; /*这是设置底部文字, 看个人需要修改*/ #footer > div > div { color: #eee; }}

四十九、防止每次heox clean 后CNAME文件被删除

1. 先把github中的CNAME文件复制一份到本地public

2. 再安装插件

cnpm install hexo-generator-cname --save

3. 根目录_config.yml中添加

Plugins:- hexo-generator-cname

并修改

url: yoursite.com

五十、去除valine的Powered By

修改\\themes\\next\\layout\\_third-party\\comments\\valine.swig文件

new Valine;//新增以下代码即可，可以移除.info下所有子节点。var infoEle = document.querySelector;if { infoEle.childNodes.forEach { item.parentNode.removeChild; });}

五十一、增加词云

增加之前的效果如下图：

方法比较简单，加个js脚本就好了，就加在标签的那个页面好了。

打开themes\\next\\layout\\page.swig`找到

{% if page.type === "tags" %}

将下面这段代码:

<div class="tag-cloud"> <div class="tag-cloud-title"> {% set visibleTags = 0 %} {% for tag in site.tags %} {% if tag.length %} {% set visibleTags += 1 %} {% endif %} {% endfor %} {{ _p }} </div> <div class="tag-cloud-tags"> {% if not theme.tagcloud %} {{ tagcloud }} {% else %} {{ tagcloud }} {% endif %} </div></div>

换成下面这段代码：

<div class="tag-cloud">  <div class="tag-cloud-tags" id="tags"> {{ tagcloud }} </div></div><br><script type="text/javascript"> var alltags=document.getElementById; var tags=alltags.getElementsByTagName; for { var r=Math.floor*75+130); var g=Math.floor*75+100); var b=Math.floor*75+80); tags[i].style.background = "rgb"; }</script><style type="text/css"> div#posts.posts-expand .tag-cloud a{ background-color: #f5f7f1; border-radius: 6px; padding-left: 10px; padding-right: 10px; margin-top: 18px; } .tag-cloud a{ background-color: #f5f7f1; border-radius: 4px; padding-right: 5px; padding-left: 5px; margin-right: 5px; margin-left: 0px; margin-top: 8px; margin-bottom: 0px; } .tag-cloud a:before{ content: ""; } .tag-cloud-tags{ text-align: left; counter-reset: tags; }</style>

效果如下图：

五十二、代码块Mac Panel特效

先上效果图：

能设置阴影效果和实现文本编辑功能，不过文本只存在浏览器页面上，不会真正保存。

实现步骤如下：

1.引入JS

这里需要新建两个js文件events.js和codeblock.js，路径位于/themes/next/scripts/包下。

events.js代码如下：

// mac Panel效果代码块相关var exec = require.exec;// new 后自动打开编辑器hexo.on{ exec;});

codeblock.js代码如下：

// mac Panel效果代码块相关var attributes = [ 'autocomplete="off"', 'autocorrect="off"', 'autocapitalize="off"', 'spellcheck="false"', 'contenteditable="true"']var attributesStr = attributes.joinhexo.extend.filter.register { while ">.*?<\\/figure>/.test) { data.content = data.content.replace">.*?<\\/figure>/, function { var language = RegExp.$1 || 'plain' var lastMatch = RegExp.lastMatch lastMatch = lastMatch.replace return '<div class="highlight-wrap"' + attributesStr + 'data-rel="' + language.toUpperCase + '">' + lastMatch + '</div>' }) } return data})

2.引入CSS

在/themes/next/source/css/_common/components/highlight/目录下新建macPanel.styl文件，内容如下：

// mac Panel效果代码块相关.highlight-wrap[data-rel] { position: relative; overflow: hidden; border-radius: 5px; //box-shadow: 0 10px 30px 0px rgba; box-shadow:18px 18px 15px 0px rgba margin: 35px 0; ::-webkit-scrollbar { height: 10px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba; border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba; } &::before { color: white; content: attr; height: 38px; line-height: 38px; //background: #21252b; background: #108414de; color: #fff; font-size: 16px; //position: absolute; top: 0; left: 0; width: 100%; //font-family: 'Source Sans Pro', sans-serif; font-weight: bold; padding: 0px 80px; text-indent: 15px; float: left; } &::after { content: ' '; position: absolute; -webkit-border-radius: 50%; border-radius: 50%; background: #fc625d; width: 12px; height: 12px; top: 0; left: 20px; margin-top: 13px; -webkit-box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b; box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b; z-index: 3; }}

此css是根据我本地的样式做过调整，注释的代码为原有的，根据需要调整样式即可。

3.配置引用

在themes/next/source/css/_common/components/highlight/highlight.styl文件中引入刚才新建的macPanel.styl：

@require "macPanel"

配置在文件的顶部位置即可。

到此Mac Panel已配置完成，根据需要可调整主题配置文件中的highlight_theme选项，选择自己喜欢的样式。

4.可能遇到的问题

如果在配置完毕后，hexo启动报错，可将站点配置文件里的highlight属性auto_detect改成false：

highlight: enable: true line_number: true- auto_detect: true+ auto_detect: false tab_replace:

如果还是有问题，可仔细检查一下刚才新建的文件、修改的配置文件，有什么地方配置错了，或者是语法上的错误,修改后重新启动即可看到效果。

五十三、为文章生成永久链接

hexo默认的文章链接形式为year/:month/:day/:title，是按照年、月、日、标题来生成的。当把文章源文件名改掉之后，链接也会改变，这很不友好。并且如果文章标题是中文的，那么该路径就会出现中文字符。在路径中出现了中文字符很容易引发各种问题，而且也不利于seo，因为路径包含了年月日三个层级，层级太深不利于百度蜘蛛抓取。

解决办法就是利用其它的插件来生成唯一的路径，这样就算文件标题随意修改，而不会导致原本的链接失效而造成站点下存在大量的死链。

1.安装插件

cnpm install hexo-aadfdsrlink --save

注意：执行此命令可能会不成功，提示你缺少相应的依赖，比如babel-eslint、mini-css-extract-plugin、webpack-cli…使用npm命令安装即可。比如：

npm install [email protected] babel-eslint@8 --save-dev

2.配置

修改根目录站点配置文件config.yml，改为：

permalink: posts/:aadfdsrlink.html # 此处可以自己设置，也可以直接使用 /:aadfdsrlinkaadfdsrlink: alg: crc32 #算法：crc16 and crc32 rep: hex #进制：dec and hex

这里将页面都添加了 .html 的后缀，用来伪装成静态页面，这样可以直接从路径就知道这是个静态页面，方便seo。

生成的链接将会是这样的：

crc16 & hexhttps://post.zz173.com/posts/66c8.htmlcrc16 & dechttps://post.zz173.com/posts/65535.htmlcrc32 & hexhttps://post.zz173.com/posts/8ddf18fb.htmlcrc32 & dechttps://post.zz173.com/posts/1690090958.html

生成完后，原md文件的Front-matter内会增加aadfdsrlink字段，值为生成的ID`。这个字段确保了在我们修改了Front-matter内的博客标题title或创建日期date字段之后而不会改变链接地址。

蕞后附上一张我个人网站的全览图：

海外精品引流脚本–最强海外引流

官网：www.facebook18.com

唯一TG：https://t.me/Facebook181818