1200字范文 > 【hexo博客】hexo+NexT主题个人博客

【hexo博客】hexo+NexT主题个人博客

时间：2022-08-13 13:36:58

1. 环境准备

参考链接

1.1 在github创建Git仓库

在github托管的GithubPage，也可以托管到Gitee，但是GiteePage好像有一些限制具体看自己选择

仓库名一定要输入username.github.io

一个账号只能用创建一个同名的博客

1.2 安装Git

1.3 安装node管理工具

nvm在github官网下载，解压后直接运行.exe安装程序

1.3.1 安装node

在命令行中输入nvm install 版本号 32/64

如：

nvm install 6.10.2 64

1.3.2 设置node的版本

nvm use 6.10.2

1.4 修改镜像源

npm默认的镜像源在国外，安装包时会卡在sill idealTree buildDeps，最好改成国内

npm config set registry https://registry.

1.5 安装hexo

npm install hexo-cli -g

1.6 创建本地博客

初始化本地博客仓库

hexo init 你的用户名.github.io

1.7 安装NexT主题

Hexo有两份主要的配置文件，都是_config.yml
一份位于本地博客目录下，主要包含Hexo本身配置另一份位于主题目录下xx.github.io/themes/next下

1.7.1 切换到本地博客目录下`xx.github.io`目录下

1.7.2 安装NexT主题

git clone /iissnan/hexo-theme-next themes/next

1.7.3 使用 NexT主题

找到本地博客目录下的_config.yml将theme键值对修改为theme: next

1.7.4站点配置文件基本信息修改

title: xxx # 博客的名字，也称站点名称author: xxx # 作者名字description: xxx # 对站点的描述，搜索引擎会抓取，可以自定义（这个还是加上比较好）language: zh-Hans # 语言简体中文theme: next # 配置主题deploy: # 部署相关配置 type: git # 使用 Git 提交 repo: /xxx/xxx.github.io.git # 就是存放博客的仓库地址

站点配置文件示例

# Hexo Configuration## Docs: https://hexo.io/docs/configuration.html## Source: /hexojs/hexo/# Site 这里的配置，哪项配置反映在哪里，可以参考我的博客title: xxx # 博客的名字，也称站点名称subtitle: xxx # 副标题description: xxx # 对站点的描述，搜索引擎会抓取，可以自定义author: xxx # 作者名字language: zh-Hans # 语言简体中文timezone: # 用默认的即可# URL # 这项暂时不需要配置，绑定域名后，要创建 sitemap.xml 时再配置该项## If your site is put in a subdirectory, set url as '/child' and root as '/child/'url: # root: /permalink: :year/:month/:day/:title/permalink_defaults:# Directory# 目录，不要修改source_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:# Writing # 文章布局、写作格式的定义，不修改new_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight:enable: trueline_number: trueauto_detect: falsetab_replace:# Category & Tagdefault_category: uncategorizedcategory_map:tag_map:# Date / Time format # 日期 / 时间格式，不要修改## Hexo uses Moment.js to parse and display date## You can customize the date format as defined in## /docs/#/displaying/format/date_format: MMM D YYYYtime_format: H:mm:ss# Pagination # 每页显示文章数，可以自定义## Set per_page to 0 to disable paginationper_page: 10pagination_dir: page# Extensions # 配置站点所用主题和插件，这里将默认主题注释，修改为 next## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next#theme: landscape# 头像# 注意：是 xxx.github.io/source 下的开始的相对路径，如果 source 文件夹下面没有 uploads 文件夹，那么新建一个。考虑到会博客中用很多图片，在 uploads 文件夹下请分好类，避免混乱avatar: /uploads/images/avatar.jpg# Deployment # 本地博客部署到 github 上要配置这里## Docs: https://hexo.io/docs/deployment.htmldeploy:type: git # 使用 Git 提交repository: /xxx/xxx.github.io.git # 就是存放博客的仓库地址

1.7.5 本地测试

定位到xxx.github.io目录输入命令：hexo s相当于启动hexo服务预览

启动成功，默认在http://localhost:4000就能打开博客

1.7.6 NexT主题个性化

# 挑一些有必要的属性列一下# 网站的faviconfavicon:small: /images/favicon.pngmedium: /images/favicon.pngapple_touch_icon: /images/favicon.pngsafari_pinned_tab: /images/favicon.png#android_manifest: /images/manifest.json#ms_browserconfig: /images/browserconfig.xml# Show multilingual switcher in footer.language_switcher: true# 底部栏的配置footer:# Specify the date when the site was setup. If not defined, current year will be used.# Icon between year and copyright info.# 备选的icon可以在下列网址选择与复制icon:# Icon name in Font Awesome. See: /v4.7.0/icons/# `heart` is recommended with animation in red (#ff0000).name: grav# If you want to animate the icon, set it to true.animated: true #闪动效果# Change the color of icon, using Hex Code.color: "#808080"# If not defined, `author` from Hexo `_config.yml` will be used.copyright: AmosTian# 是否显示Powered by Hexo & NexTpowered: false# Beian ICP and gongan information for Chinese users. See: http://www.beian., http://www.beian:enable: falseicp:# 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./portal/downloadgongan_icon_url:# ---------------------------------------------------------------# Scheme Settings# ---------------------------------------------------------------# 这部分设置nexT的风格# Schemes#scheme: Muse#scheme: Mistscheme: Pisces#scheme: Gemini# Dark Modedarkmode: false# ---------------------------------------------------------------# 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. /blog), remove the leading slash from link value (/archives -> archives).# External url should start with http:// or https://menu:home: / || homecategories: /categories/ || thtags: /tags/ || tagsarchives: /archives/ || archive#about: /about/ || useressay: /categories/随笔// || pied-piper# 这个是我自己做的动态简历，会直接跳转到 \public\dynamic-resume\index.html# 自定义的js或者css文件需要插入到 \themes\next\source下对应的文件夹中# hexo在生成网页时，会将这些文件夹中的文件复制到\public中dynamic-resume: /dynamic-resume/ || cog#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat# Enable / Disable menu icons / item badges.menu_settings:icons: truebadges: true# ---------------------------------------------------------------# Sidebar Settings# See: https://theme-/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 padding in pixels.padding: 18# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).offset: 12# Enable sidebar on narrow view (only for Muse | Mist).onmobile: false# Sidebar Avataravatar:# Replace the default image and set the url here.url: /images/avatar.png# If true, the avatar will be dispalyed in circle.rounded: trueopacity: 1# If true, the avatar will be rotated with the cursor.rotated: false# 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: /AmosTian || githubCSDN: /qq_40479037?type=blog || crosshairs E-Mail: mailto:17636679561@ || envelope#Weibo: /yourname || weibo#Google: /yourname || google#Twitter: /yourname || twitter#FB Page: /yourname || facebook#StackOverflow: /yourname || stack-overflow#YouTube: /yourname || youtube#Instagram: /yourname || instagram#Skype: skype:yourname?call|chat || skype# Table of Contents in the Sidebar# Front-matter variable (unsupport wrap expand_all).toc: #目录配置enable: true #是否自动生成目录# Automatically add list number to toc.number: false #目录自动编号# 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: true# Maximum heading depth of generated toc.max_depth: 6 #最大标题深度# ---------------------------------------------------------------# Post Settings# See: https://theme-/docs/theme-settings/posts# ---------------------------------------------------------------# Automatically excerpt description in homepage as preamble text.excerpt_description: true #自动截取more# Read more button# If true, the read more button will be displayed in excerpt section.read_more_btn: true #添加按钮# Post meta display settingspost_meta:item_text: truecreated_at: trueupdated_at:enable: trueanother_day: truecategories: true# 文章结尾标志passage_end_tag:enabled: true# ---------------------------------------------------------------# Misc Theme Settings# ---------------------------------------------------------------# Set the text alignment in posts / pages.text_align:# Available values: start | end | left | right | center | justify | justify-all | match-parentdesktop: justifymobile: 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"# 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: /chriskempson/tomorrow-themehighlight_theme: normal# Add copy button on codeblockcopy_button:enable: true# Show text copy result.show_result: true# Available values: default | flat | macstyle: macback2top:enable: true# Back to top in sidebar.sidebar: false# Scroll percent label in b2t button.scrollpercent: true# Reading progress barreading_progress:enable: true #顶部显示阅读进度# Available values: top | bottomposition: topcolor: "#37c6c0"height: 3px# Bookmark Supportbookmark: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: truepermalink: /AmosTiantitle: Follow me on GitHub# ---------------------------------------------------------------# Font Settings# See: https://theme-/docs/theme-settings/#Fonts-Customization# ---------------------------------------------------------------# Find fonts on Google Fonts (/fonts)# All fonts set here will have the following styles:# light | light italic | normal | normal italic | bold | bold italic# Be aware that setting too much fonts will cause site running slowly# ---------------------------------------------------------------# To avoid space between header and sidebar in scheme Pisces / Gemini, Web Safe fonts are recommended for `global` (and `title`):# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS# ---------------------------------------------------------------font:enable: true# Uri of fonts host, e.g. (Default).host: # 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 (16px)# Global font settings used for all elements inside <body>.global:external: falsefamily: Comfortaasize:# Font settings for site title (.site-title).title: #网站抬头external: truefamily: Comfortaasize:# Font settings for headlines (<h1> to <h6>).headings: #标题字体external: truefamily: Ma Shan Zhengsize:# Font settings for posts (.post-body).posts: #文章字体external: falsefamily: ZCOOL KuaiLe# Font settings for <code> and code blocks.codes:external: falsefamily: consolas# ---------------------------------------------------------------# Statistics and Analytics# See: https://theme-/docs/third-party-services/statistics-and-analytics# ---------------------------------------------------------------# 统计# Show Views / Visitors of the website / page with busuanzi.# Get more information on http://ibruce.info//04/04/busuanzibusuanzi_count:enable: falsetotal_visitors: truetotal_visitors_icon: usertotal_views: truetotal_views_icon: eyepost_views: truepost_views_icon: eye# Post wordcount display settings# Dependencies: /theme-next/hexo-symbols-count-timesymbols_count_time:separated_meta: true #分隔符|item_text_post: true #是否统计站点总字数item_text_total: true #是否同级文章总字数awl: 2 #平均每个字符的长度wpm: 150 #words per minute

1.7.7 创建分类与标签

命令行定位到xxx.github.io目录，输入hexo new page categories

这样在\source目录下创建新建对应的目录，找到目录对应的index.md文件

title: 分类date: -02-22 08:05:53type: "categories"

命令行定位到xxx.github.io目录，输入hexo new page "tags"，这样在source目录下新建对应的目录

title: 标签date: -02-22 08:05:42type: "tags"

上述两个操作相当于创建了给所有博客添加了两个分类依据categories以及tags，用于文章的归类管理

某一篇文章要归类或者打标签，只需要在抬头配置对应属性即可，如本篇文章所述：

这两个页面是NexT自动维护的，只要文章按照规矩来就不会报错

2. 写文章与上传

2.1 写文章

2.2 本地运行测试

命令行定位到xxx.github.io目录中，输入命令hexo s

2.3 在浏览器中查看效果

在浏览器地址栏输入http://localhost:4000访问本地博客

2.4 安装自动部署发布工具

为了自动部署到 GithubPage，这里我们需要hexo-deployer-git工具，将md文件转化为静态网页文件，并保存在/public文件夹中，文件夹上传到 github的相应仓库xxx.github.io，等待github部署完成之后，就可以访问http://xxx.github.io查看部署完成的博客了

hexo clean #清楚缓存，网页正常情况可以忽略这条命令hexo g #生成静态网页hexo d #开始部署

3. 文章链接

参考链接

Hexo默认使用的文章链接是

year/:month/:day/:title/

但分享之后会使一堆转义字符，而且一旦修改文章发布日期或者标题，则立马失效，所以需要生成真正的永久链接

abbrlink工具 /rozbo/hexo-abbrlink

3.1 安装abbrlink插件

在博客根目录安装插件

npm install hexo-abbrlink --save

3.2 编辑站点配置文件

# 默认的永久链接permalink: :year/:month/:day/:title/# 使用abbrlinkpermalink: posts/:abbrlink/abbrlink:alg: crc32 #support crc16(default) and crc32 # 链接生成算法rep: dec #support dec(default) and hex #十进制/十六进制

设置的示例：

crc16 & hex/posts/66c8.htmlcrc16 & dec/posts/65535.html'crc32 & hex/posts/8ddf18fb.htmlcrc32 & dec/posts/1690090958.html

4. 自动化构建

参考链接

5. 图片问题

参考链接

5.1 安装插件

npm install hexo-asset-image --save

5.2 站点配置文件修改`post_asset_folder`为`true`

5.3 打开替换内容

/node_modules/hexo-asset-image/index.js

替换为以下内容

'use strict';var cheerio = require('cheerio');// /questions/14480345/how-to-get-the-nth-occurrence-in-a-stringfunction getPosition(str, m, i) {return str.split(m, i).join(m).length;}var version = String(hexo.version).split('.');hexo.extend.filter.register('after_post_render', function(data){var config = hexo.config;if(config.post_asset_folder){var link = data.permalink;if(version.length > 0 && Number(version[0]) == 3)var beginPos = getPosition(link, '/', 1) + 1;elsevar beginPos = getPosition(link, '/', 3) + 1;// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".var endPos = link.lastIndexOf('/') + 1;link = link.substring(beginPos, endPos);var toprocess = ['excerpt', 'more', 'content'];for(var i = 0; i < toprocess.length; i++){var key = toprocess[i];var $ = cheerio.load(data[key], {ignoreWhitespace: false,xmlMode: false,lowerCaseTags: false,decodeEntities: false});$('img').each(function(){if ($(this).attr('src')){// For windows style path, we replace '\' to '/'.var src = $(this).attr('src').replace('\\', '/');if(!/http[s]*.*|\/\/.*/.test(src) &&!/^\s*\//.test(src)) {// For "about" page, the first part of "src" can't be removed.// In addition, to support multi-level local directory.var linkArray = link.split('/').filter(function(elem){return elem != '';});var srcArray = src.split('/').filter(function(elem){return elem != '' && elem != '.';});if(srcArray.length > 1)srcArray.shift();src = srcArray.join('/');$(this).attr('src', config.root + link + src);console.info&&console.info("update link as:-->"+config.root + link + src);}}else{console.info&&console.info("no src attr, skipped...");console.info&&console.info($(this));}});data[key] = $.html();}}});

5.4修改typora的图片保存方式

一定要记得修改为相对路径，否则无法正常显示图片

6. 点击图片放大

参考链接

效果如图：

6.1 切换到lib目录

cd xxx.github.io\themes\next\source\lib

6.2 下载插件

git clone /theme-next/theme-next-fancybox3 fancybox

6.3 更换主题配置文件

fancybox: true

7. 数学公式

参考链接

7.1 hexo转化错误

Hexo默认使用hexo-render-marked引擎渲染网页（将一些特殊的makrdown语法转化为html标签），如markdown中的_代表斜体，会被渲染引擎处理为<em>

MathJax引擎在渲染数学公式的时候就会出错。例如， x i x_i xi在开始被渲染的时候，处理为 x ‘ < e m > ‘ i ‘ < / e m > ‘ x`<em>`i`</em>` x‘<em>‘i‘</em>‘，这样MathJax引擎就认为该公式有语法错误，因为不会渲染。

类似的语义冲突的符号还有*，{，}，\\

7.2 解决方法

Hexo渲染主题的两个重要因素：mathjax和kramed，前者是数学公式渲染引擎，后者是Hexo的markdown渲染引擎，hexo默认渲染引擎是marked，但是它不支持mathjax，因此需要替换为kramed引擎。

7.2.1 Hexo添加数学公式解析插件mathjax

如果hexo安装有hexo-math，需要先卸载它

npm uninstall hexo-math --save

安装mathjax

npm install hexo-renderer-mathjax --save

hexo主题开启mathjax

进入主题目录，编辑_config.yml，开启mathjax

# MathJax Supportmathjax:enable: trueper_page: true

在博客文章的开头加入mathjax: true即可使用mathjax

7.2.2 hexo渲染引擎切换为`kramed`

卸载 marked 引擎

npm uninstall hexo-renderer-marked --save

安装kramed引擎

npm install hexo-renderer-kramed --save

修改引擎bug

修改文件node_modules\kramed\lib\rules\inline.js中escape和em两行

// escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,escape: /^\\([`*\[\]()#$+\-.!_>])/,// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

重启hexo

hexo clean && hexo g -d

8. mermaid

8.1 安装hexo插件

在博客的根目录下，安装hexo-filter-mermaid-diagrams插件

官方文档

$ npm install hexo-filter-mermaid-diagrams --save

8.2 NexT启用Mermaid

打开NexT主题的_config.xml配置文件，找到mermaid的配置项，设置enable: true

# Mermaid tagmermaid:enable: true# Available themes: default | dark | forest | neutraltheme:light: defaultdark: dark

9. 文章置顶

参考链接

9.1 使用

Hexo 只提供了按发布日期的排序，所以需要修改依赖文件，在每篇文章的配置项设置top: 数字赋权（升序）

9.2 修改

在node_modules/hexo-generator-index/lib/generator.js目录下新增

posts.data = posts.data.sort(function(a, b) {if(a.top && b.top) {// 两篇文章top都有定义if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排else return b.top - a.top; // 否则按照top值降序排}else if(a.top && !b.top) {// 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）return -1;}else if(!a.top && b.top) {return 1;}else return b.date - a.date; // 都没定义按照文章日期降序排});

如图：

10. Hexo添加helper-live2d动态模型插件

参考链接

10.1 安装模块

在hexo根目录执行命令

# npm install --save hexo-helper-live2d

10.2 下载模型

live2d模型仓库

需要哪个模型就安装哪个

# npm install live2d-widget-model-hibiki

10.3 配置

在主题配置文件或者博客配置文件的_config.xml都可以

如：

# Live2D## /EYHN/hexo-helper-live2d## /docs/class/src/index.js~L2Dwidget.html#instance-method-initlive2d:enable: true#enable: falsescriptFrom: local # 默认pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)pluginJsPath: lib/ # 脚本文件相对与插件根目录路径pluginModelPath: assets/ # 模型文件相对与插件根目录路径# scriptFrom: jsdelivr # jsdelivr CDN# scriptFrom: unpkg # unpkg CDN# scriptFrom: /npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 urltagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中debug: false # 调试, 是否在控制台输出日志model:use: live2d-widget-model-hibiki# use: live2d-widget-model-wanko # npm-module package name# use: wanko # 博客根目录/live2d_models/ 下的目录名# use: ./wives/wanko # 相对于博客根目录的路径# use: /npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 urldisplay:position: rightwidth: 145height: 315mobile:show: true # 是否在移动设备上显示scale: 0.5 # 移动设备上的缩放react:opacityDefault: 0.7opacityOnHover: 0.8

11. 压缩静态资源

11.1 gulp

参考链接

11.1.1 全局安装gulp

npm install glup -ggulp -v #查看版本

11.1.2 在站点目录下安装

npm install gulp-minify-css --save

11.1.3 安装gulp插件

npm install gulp --savenpm install gulp-minify-css --savenpm install gulp-uglify --savenpm install gulp-htmlmin --savenpm install gulp-htmlclean --savenpm install gulp-imagemin --save# 解决【Gulp打包问题】 GulpUglifyError: unable to minify JavaScript# 解决 gulp-uglify 压缩JavaScript 不兼容 es5 语法的问题npm install babel-core@6.26.3 --savenpm install gulp-babel@7.0.1 --savenpm install babel-preset-es@6.24.1 --save# gulp-babel 取消严格模式方法("use strict")npm install babel-plugin-transform-remove-strict-mode --save

11.1.4 创建`gulp.js`文件

在Hexo站点下创建gulpfile.js文件

11.1.4 创建`.babelrc`文件

{'presets': ['es'],"plugins": ["transform-remove-strict-mode"]}

目前问题：

11.2 hexo-neat

我们利用Hexo生成的博客文件中存在大量的空格和空行，从而使得博客资源中有很多不必要的内存消耗，使得网站加载变慢，所以可以利用neat进行博文压缩，

已知 BUG：

压缩 md 文件会使 markdown 语法的代码块消失会删除全角空格

首先安装：

npm install hexo-neat --save

为了在开启hexo-neat的同时，不要将我们的动态配置压缩了，可在站点配置文件中加入：

# hexo-neat# 博文压缩neat_enable: true# 压缩htmlneat_html:enable: trueexclude:# 压缩css neat_css:enable: trueexclude:- '**/*.min.css'# 压缩jsneat_js:enable: truemangle: trueoutput:compress:exclude:- '**/*.min.js'- '**/jquery.fancybox.pack.js'- '**/index.js' - '**/clicklove.js'- '**/fireworks.js'

在hexo g时自动调用

12. NexT主题优化

12.1 简单配置(主题配置文件)

12.1.1 主题选择

Next提供了四中主题风格scheme，可以在主题配置文件blog/themes/next/_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini：

12.1.2 添加博客自定义图标

博客网站的图标可以是一些矢量图标，然后选择或者创建相应大小的图标文件，放置在blog/themes/next/sources/images目录下，并在主题配置文件中进行配置

favicon:small: /images/16x16.pngmedium: /images/32x32.pngapple_touch_icon: /images/128x128.pngsafari_pinned_tab: /images/logo2.svg

12.1.3 修改标签样式

博客底部的标签样式默认为#tag，我们可以将其改成：

只需要修改模板/themes/next/layout/_macro/post.swig，搜索rel="tag">#，将#换成<i class="fa fa-tag"></i>

12.1.4 文章结束标志

在路径\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之后(END POST BODY)，post-footer之前添加如代码：

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

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

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

12.1.5 侧边栏设置

设置主题配置文件，其中social表示社交信息，我们可以填入我们相关的链接，格式为链接名:链接地址 || 链接图标，其中链接图标必须是FontAwesome网站中存在的图标名

# 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 `||` delimeter is the target permalink.# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.social:GitHub: /nightmaredimple || github #CSDN: /nightmare_dimple || crosshairs#E-Mail: mailto:yourname@ || envelope#Weibo: /yourname || weibo#Google: /yourname || google#Twitter: /yourname || twitter#FB Page: /yourname || facebook#VK Group: /yourname || vk#StackOverflow: /yourname || stack-overflow#YouTube: /yourname || youtube#Instagram: /yourname || instagram#Skype: skype:yourname?call|chat || skypesocial_icons:enable: true #是否显示社交图标icons_only: false #是否仅显示社交图标transition: true # Follow me on GitHub banner in right-top corner.# Usage: `permalink || title`# Value before `||` delimeter is the target permalink.# Value after `||` delimeter is the title and aria-label name.github_banner: /nightmaredimple || Follow me on GitHub #添加右上角github绑带# Blog rollslinks_icon: linklinks_title: Linkslinks_layout: block#links_layout: inline#links:#Title: # Sidebar Avataravatar: #头像设置# in theme directory(source/images): /images/avatar.gif# in site directory(source/uploads): /uploads/avatar.gif# You can also use other linking images.url: /images/author.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# Table Of Contents in the Sidebartoc:enable: true #是否自动生成目录# Automatically add list number to toc.number: false #目录是否自动产生编号# If true, all words will placed on next lines if header width longer then sidebar width.wrap: false #标题过长是否换行# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.max_depth: 6 #最大标题深度sidebar:# Sidebar Position, available values: left | right (only for Pisces | Gemini).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, available values (only for Muse | Mist):# - 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#display: always#display: hide#display: remove# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).offset: 12 #侧边栏相对主菜单像素距离# Back to top in sidebar.b2t: true #是否提供一键置顶# Scroll percent label in b2t button.scrollpercent: true #是否显示当前阅读进度# Enable sidebar on narrow view (only for Muse | Mist).onmobile: false #手机上是否显示侧边栏

12.1.6 添加文章版权信息

要想开启博客的版权功能，需要设置主题配置文件：

creative_commons:license: by-nc-sasidebar: truepost: true

12.1.7 设置博客底部布局

footer:# Specify the date when the site was setup.# If not defined, current year will be used.since: #建站时间# Icon between year and copyright info.icon:# Icon name in fontawesome, see: /v4.7.0/icons/# `heart` is recommended with animation in red (#ff0000).name: heart #作者图标（默认是author人像)# If you want to animate the icon, set it to true.animated: true #图标是否闪动# Change the color of icon, using Hex Code.color: "#808080" #图标颜色# If not defined, `author` from Hexo main config will be used.copyright: 黄飘 #别填bool型，最后显示的东西是copyright || author，即左边没有设置的话就显示作者# -------------------------------------------------------------powered:# Hexo link (Powered by Hexo).enable: false #是否显示 Powered by hexo# Version info of Hexo after Hexo link (vX.X.X).version: false #是否显示Hexo版本theme:# Theme & scheme info link (Theme - NexT.scheme).enable: false #是否显示主题信息# Version info of NexT after scheme info (vX.X.X).version: false #是否显示主题版本# -------------------------------------------------------------# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.# http://www.beian:enable: false #是否显示网站备案信息icp:# -------------------------------------------------------------# Any custom text can be defined here.#custom_text: Hosted by <a href="https://pages.coding.me" class="theme-link" rel="noopener" target="_blank">Coding Pages</a>

12.1.8 设置博客摘要显示

对于摘要显示，首先我们需要开启摘要功能，修改主题配置文件：

# Automatically scroll page to section which is under  mark.scroll_to_more: true #选取博客正文前的内容# Automatically saving scroll position on each post/page in cookies.save_scroll: false# Automatically excerpt description in homepage as preamble text.excerpt_description: true #自动截取摘要# Automatically Excerpt. Not recommend.# Use  in the post to control excerpt accurately.auto_excerpt: enable: false #自动截取一定程度的摘要length: 150# Read more button# If true, the read more button would be displayed in excerpt section.read_more_btn: true #显示阅读全文按钮

12.1.9 修改文章链接样式

修改文件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;}}

12.1.10 修改分类层级显示

修改post.swig

\hexo-theme\next\layout\_macro\post.swig

查找

{{ __('ma') }}

改为

{{('>') }}

修改custom.styl

\themes\next\source\css\_common\components\pages

.category-list ul {list-style: none;li:before {content: '>>';}}

12.1.11 更改标签云颜色

/blog/themes/next/layout/page.swig

{{ tagcloud({min_font : theme.tagcloud.min,max_font : theme.tagcloud.max,amount: theme.tagcloud.amount,color: true,start_color: '#9733EE',end_color : '#FF512F'})}}

hexo 颜色配置：https://hexo.io/zh-cn/docs/helpers.html#tagcloud

12.2 添加懒加载

lazylod可以在用户不查看的时候，不加载相关部分，从而提升网站加载速度：

在themes/next/下执行

git clone /theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload

然后配置博客文件：

lazyload: true

12.3 网站动态元素延时加载

我们的网站添加了许多动态元素之后，加载速度会变慢，所以可以先不加载动态元素，等静态元素加载完之后再加载动态元素，这样就加速了网站的登入。可设置主题文件：

12.4 添加站内静态搜索

Next集成了站内搜索功能，可先安装依赖：

npm install hexo-generator-searchdb --save

然后设置主题配置文件：

# Local search# Dependencies: /theme-next/hexo-generator-searchdblocal_search:enable: true# if auto, trigger search by changing input# if manual, trigger search by pressing enter key or search buttontrigger: auto# show top n results per article, show all results by setting to -1top_n_per_article: 3# unescape html strings to the readable oneunescape: false

12.5. 侧边栏目录

12.5.1 显示侧边目录

主题文件配置文件

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 padding in pixels.padding: 18# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).offset: 12# Enable sidebar on narrow view (only for Muse | Mist).onmobile: false

12.5.2 中文目录不跳转

/theme-next/hexo-theme-next/pull/1540/commits/ec521c927dc10255977324284c1c667f2e220da7

主题目录：

12.6 统计功能

安装插件，在hexo根目录下执行

npm install hexo-wordcount --save

在主题配置文件_coinfig.xml下搜索Post wordcount，并配置以下参数：

wordcount：字数统计

min2read：阅读时长统计

totalcount：总子树统计

12.7 鼠标点击特效

在/themes/next/source/js/src下新建文件 clicklove.js ，接着把下面的代码拷贝粘贴到 clicklove.js 文件中：

在\themes\next\layout\_layout.swig文件末尾添加

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

跟那个红心是差不多的，首先在themes/next/source/js/src里面建一个叫fireworks.js的文件，代码如下：

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

打开themes/next/layout/_layout.swig,在</body>上面写下如下代码：

{% if theme.fireworks %}<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> <script type="text/javascript" src="///animejs/2.2.0/anime.min.js"></script> <script type="text/javascript" src="/js/src/fireworks.js"></script>{% endif %}

打开主题配置文件，在里面最后写下：

# Fireworksfireworks: true

12.8 添加动态背景

转载：/posts/hexo-theme-beautify.html

12.8.1 粒子漂浮聚合

上面这种只是其中一种动态背景，新版的Next主题集成了该功能，

在根目录下克隆依赖

git clone /theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

只需要在主题配置中设置如下即可

# Canvas-nest# Dependencies: /theme-next/theme-next-canvas-nestcanvas_nest: # 网络背景enable: trueonmobile: true # display on mobile or notcolor: '0,0,0' # RGB values, use ',' to separateopacity: 0.5 # the opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 150 # the number of lines# JavaScript 3D library.# Dependencies: /theme-next/theme-next-three# three_wavesthree_waves: false# canvas_linescanvas_lines: false# canvas_spherecanvas_sphere: false# Canvas-ribbon# Dependencies: /theme-next/theme-next-canvas-ribbon# size: The width of the ribbon.# alpha: The transparency of the ribbon.# zIndex: The display level of the ribbon.canvas_ribbon:enable: falsesize: 300alpha: 0.6zIndex: -1

12.8.2 Three三维效果

在安装依赖根目录下

$ git clone /theme-next/theme-next-three themes/next/source/lib/three

然后在主题配置文件中设置开启对应的动效选项即可。

# JavaScript 3D library.# Dependencies: /theme-next/theme-next-three# three_wavesthree_waves: true# canvas_linescanvas_lines: false# canvas_spherecanvas_sphere: false

12.8.3 随机三角丝带

点击下方按钮下载相应的脚本，并置于 themes\next\source\js\ 目录下：

if (document.getElementById('evanyou')) {var c = document.getElementById('evanyou'),x = c.getContext('2d'),pr = window.devicePixelRatio || 1,w = window.innerWidth,h = window.innerHeight,f = 90,q,m = Math,r = 0,u = m.PI * 2,v = m.cos,z = m.randomc.width = w * prc.height = h * prx.scale(pr, pr)x.globalAlpha = 0.6function evanyou () {x.clearRect(0, 0, w, h)q = [{x: 0, y: h * .7 + f }, {x: 0, y: h * .7 - f }]while (q[1].x < w + f) d(q[0], q[1])}function d (i, j) {x.beginPath()x.moveTo(i.x, i.y)x.lineTo(j.x, j.y)var k = j.x + (z() * 2 - 0.25) * f,n = y(j.y)x.lineTo(k, n)x.closePath()r -= u / -50x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)x.fill()q[0] = q[1]q[1] = {x: k, y: n }}function y (p) {var t = p + (z() * 2 - 1.1) * freturn (t > h || t < 0) ? y(p) : t}document.onclick = evanyoudocument.ontouchstart = evanyouevanyou()}

在主题自定义布局文件中添加以下代码：

themes\next\layout\_custom\custom.swig

{# 随机三角丝带背景 #}{% if theme.evanyou %}<canvas id="evanyou"></canvas><style>#evanyou {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: -1;}</style><script src="/js/evan-you.js"></script>{% endif %}

如果 custom.swig 文件不存在，需要手动新建并在布局页面中 body 末尾引入：

themes\next\layout\_layout.swig

...{% include '_third-party/exturl.swig' %}{% include '_third-party/bookmark.swig' %}{% include '_third-party/copy-code.swig' %}+{% include '_custom/custom.swig' %}</body></html>

在主题配置文件中添加以下代码：

# colorful trilateral riband backgroundevanyou: true

12.9 回到顶部

原理很简单，将 back-to-top 按钮添加图片背景，并添加 CSS3 动效即可。

首先，找到自己喜欢的图片素材放到 source\images\ 目录下。

你可以点击下方按钮下载本站所使用的小猫上吊素材（小猫咪这么可爱，当然要多放点孜然啦…）

然后在自定义样式文件中添加如下代码：

themes\next\source\css\_custom\custom.styl

//自定义回到顶部样式.back-to-top {right: 60px;width: 70px; //图片素材宽度height: 900px; //图片素材高度top: -900px;bottom: unset;transition: all .5s ease-in-out;background: url("/images/scroll.png");//隐藏箭头图标> i {display: none;}&.back-to-top-on {bottom: unset;top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;}}

刷新浏览器即可预览效果。

12.10 加入已运行时间

/blog/themes/next/layout/_custom/sidebar.swig

<div id="days"></div><script>function show_date_time(){window.setTimeout("show_date_time()", 1000);BirthDay=new Date("01/27/ 15:13:14");today=new Date();timeold=(today.getTime()-BirthDay.getTime());sectimeold=timeold/1000secondsold=Math.floor(sectimeold);msPerDay=24*60*60*1000e_daysold=timeold/msPerDaydaysold=Math.floor(e_daysold);e_hrsold=(e_daysold-daysold)*24;hrsold=setzero(Math.floor(e_hrsold));e_minsold=(e_hrsold-hrsold)*60;minsold=setzero(Math.floor((e_hrsold-hrsold)*60));seconds=setzero(Math.floor((e_minsold-minsold)*60));document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒";}function setzero(i) {if (i<10) {i="0" + i};return i;}show_date_time();</script>

上面Date的值记得改为你自己的，且按上面格式，然后修改：/blog/themes/next/layout/_macro/sidebar.swig

{% include '../_custom/sidebar.swig' %}

百度收录

/college/articleinfo?id=1003

域名映射

个人博客支持https //01/11/GitHub-Https-config/

/p/4ef35521fee9

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。

【hexo博客】hexo+NexT主题个人博客

1. 环境准备

1.1 在github创建Git仓库

1.2 安装Git

1.3 安装node管理工具

1.3.1 安装node

1.3.2 设置node的版本

1.4 修改镜像源

1.5 安装hexo

1.6 创建本地博客

1.7 安装NexT主题

1.7.1 切换到本地博客目录下xx.github.io目录下

1.7.2 安装NexT主题

1.7.3 使用 NexT主题

1.7.4站点配置文件基本信息修改

1.7.5 本地测试

1.7.6 NexT主题个性化

1.7.7 创建分类与标签

2. 写文章与上传

2.1 写文章

2.2 本地运行测试

2.3 在浏览器中查看效果

2.4 安装自动部署发布工具

3. 文章链接

3.1 安装abbrlink插件

3.2 编辑站点配置文件

4. 自动化构建

5. 图片问题

5.1 安装插件

5.2 站点配置文件修改post_asset_folder为true

5.3 打开替换内容

5.4修改typora的图片保存方式

6. 点击图片放大

6.1 切换到lib目录

6.2 下载插件

6.3 更换主题配置文件

7. 数学公式

7.1 hexo转化错误

7.2 解决方法

7.2.1 Hexo添加数学公式解析插件mathjax

7.2.2 hexo渲染引擎切换为kramed

8. mermaid

8.1 安装hexo插件

8.2 NexT启用Mermaid

9. 文章置顶

9.1 使用

9.2 修改

10. Hexo添加helper-live2d动态模型插件

10.1 安装模块

10.2 下载模型

10.3 配置

11. 压缩静态资源

11.1 gulp

11.1.1 全局安装gulp

11.1.2 在站点目录下安装

11.1.3 安装gulp插件

11.1.4 创建gulp.js文件

11.1.4 创建.babelrc文件

11.2 hexo-neat

12. NexT主题优化

12.1 简单配置(主题配置文件)

12.1.1 主题选择

12.1.2 添加博客自定义图标

12.1.3 修改标签样式

12.1.4 文章结束标志

12.1.5 侧边栏设置

12.1.6 添加文章版权信息

12.1.7 设置博客底部布局

12.1.8 设置博客摘要显示

12.1.9 修改文章链接样式

12.1.10 修改分类层级显示

12.1.11 更改标签云颜色

12.2 添加懒加载

12.3 网站动态元素延时加载

12.4 添加站内静态搜索

12.5. 侧边栏目录

12.5.1 显示侧边目录

12.5.2 中文目录不跳转

12.6 统计功能

12.7 鼠标点击特效

1.7.1 切换到本地博客目录下`xx.github.io`目录下

5.2 站点配置文件修改`post_asset_folder`为`true`

7.2.2 hexo渲染引擎切换为`kramed`

11.1.4 创建`gulp.js`文件

11.1.4 创建`.babelrc`文件