本文主要内容是本站博客使用Next主题的个性化定制和部分优化细节。最后搭建的博客。
注：如果上传到hexo搭建的gitblogshan上时，代码块内的html和js仍然会被解析，可以在代码块开头和结尾加上<xmp></xmp>标签，hexo就不会解析代码块内的内容，但仍然有些字符需要被转义。
Hexo博客搭建的基础流程为： 安装Node.js→安装Git→安装主题→注册给github并创建pages仓库→部署
首先可以将Hexo官方文档看一遍，然后可以参考这篇文章使用Hexo+Github一步步搭建属于自己的博客（基础）进行配置。如果想将博客同步到coding上可以查看这篇文章：基于Hexo+Github+Coding搭建个人博客——基础篇(从菜鸟到放弃)。之后在站点文件夹根目录，安装Git部署插件（以后所有安装的插件都在这个目录），输入下面命令：
所在目录：~/Blog/ npm install hexo-deployer-git --save然后在站点根目录下配置文件，编辑：
文件位置：~/Blog/_config.yml url: https://cqupt-wan.github.io/ . .省略... . # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repository: git@github.com:CQUPT-Wan/CQUPT-Wan.github.io.git branch: master # other deployer -type: leancloud_counter_security_sync将其中的cqupt-wan更改为你的git账号即可，可以执行hexo s在 http://localhost:4000 本地调试成功后，执行 hexo clean && hexo g && hexo d 上传到git博客上。
建立好的站点根目录如下：
. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes每个文件或文件夹的功能如下：
_config.yml
站点博客的配置文件，博客的名称、关键词、作者、语言、博客主题...设置都在里面。
package.json
应用程序信息，新添加的插件内容也会出现在这里面，我们可以不修改这里的内容。
scaffolds
scaffolds就是脚手架的意思，这里放了三个模板文件，分别是新添加博客文章（posts）、新添加博客页（page）和新添加草稿（draft）的目标样式。这部分可以修改的内容是，我们可以在模板上添加比如categories等自定义内容
source
source是放置我们博客内容的地方，里面初始只有两个文件夹，一个是drafts（草稿），一个posts（文章），但之后我们通过命令新建tags（标签）还有categories（分类）页后，这里会相应地增加文件夹。
themes
放置主题文件包的地方。Hexo会根据这个文件来生成静态页面。初始状态下只有landscape一个文件夹，后续我们可以添加自己喜欢的。
两个Hexo主题下载的地方：
知乎话题：有哪些好看的 Hexo 主题？
Hexo官方：Themes
然后使用clone的方式将主题下载，本站博客选用的是Hexo的next主题
所在目录：~/Blog/ git clone https://github.com/theme-next/hexo-theme-next themes/nextclone完成后，修改配置文件中的theme选项
文件位置：~/Blog/_config.yml ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next此外，可以在主题配置文件中修改next主题的不同风格，本站使用的是Gemini风格
文件位置：~/Blog/themes/next/_config.yml # --------------------------------------------------------------- # Scheme Settings # --------------------------------------------------------------- # Schemes #cheme: Muse #scheme: Mist #scheme: Pisces scheme: Gemini默认只有首页和归档两个，如果还需要添加其他，需要修改主题配置文件：
文件位置：~/Blog/themes/next/_config.yml 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修改完配置文件后，还需要创建对应的文件夹，以tags标签为例
所在目录：~/Blog/ hexo new page "tags"此外，还需要修改对应文件夹中的index.md文件，comment对应后面的评论系统
文件位置：~/Blog/source/tags/index.md --- title: 所有标签 date: 2019-05-16 15:12:51 type: "tags" comments: false ---修改主题配置文件，将enable改为true即可
文件位置：~/Blog/themes/next/_config.yml # Canvas-nest # Dependencies: https://github.com/theme-next/theme-next-canvas-nest 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配置项说明：
color ：线条颜色, 默认: '0,0,255'；三个数字分别为(R,G,B)
opacity： 线条透明度（0~1）, 默认: 0.5
count：线条的总数量, 默认: 99
zIndex ：背景的z-index属性，css属性用于控制所在层的位置, 默认: -1
首先安装Hexo插件
所在目录：~/Blog/ npm install --save hexo-generator-feed编辑站点配置文件
文件位置：~/Blog/_config.yml ## Plugins: https://hexo.io/plugins/ plugins: hexo-generate-feed配置主题文件
文件位置：~/Blog/themes/next/_config.yml # Set rss to false to disable feed link. # Leave rss as blank to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`. # Set rss to specific value if you have burned your feed already. rss: /atom.xml原本的标签是‘#’，感觉很丑，所有将rel="tag">#标签更改为rel="tag"><i class="fa fa-tag">现在这个样子
文件位置：~/Blog/themes/next/layout/_macro/post.swig <div class="post-tags"> {% for tag in post.tags %} <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a> {% endfor %} </div> <i class="fa fa-tag">首先新建passage-end-tag.swig文件
所在目录：~/Blog/themes/next/layout/_macro //创建passage-end-tag.swig文件 touch passage-end-tag.swig编辑该文件
文件位置：~/Blog/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-thumbs-up" aria-hidden="true"></i>感谢您的阅读-------------</div> {% endif %} </div>;然后修改post.swig配置文件，在END POST BODY之后添加
文件位置：~/Blog/themes/next/layout/_macro\post.swig {% if not is_index %} <div> {% include '../_macro/passage-end-tag.swig' %} </div> {% endif %}最后修改主题配置文件即可
文件位置：~/Blog/themes/next/_config.yml # 文章末尾添加“本文结束”标记 passage_end_tag: enabled: true不论是网站的图标还是头像都存储在~/Blog/themes/next/source/images中，只需要将默认的图片替换掉即可
文件位置：~/Blog/themes/next/_config.yml favicon: small: /images/pikapika-16-16.png medium: /images/pikapika-32-32.png apple_touch_icon: /images/pikapika.png safari_pinned_tab: /images/pikapika.svg #android_manifest: /images/manifest.json #ms_browserconfig: /images/browserconfig.xml图片转svg在线生成器
进入LeanCloud官网，进行账号注册。登录后，进入控制台，创建应用，应用名为Hexo如下图所示：
创建应用后，点击存储，创建Class，Class命名为Counter，操作如下图所示：
查看AppID和AppKey，如下图所示：
加入热度符号：
文件位置：~/Blog/themes/next/layout/_macro\post.swig {# LeanCloud PageView #} {% if theme.leancloud_visitors.enable or (theme.valine.enable and theme.valine.appid and theme.valine.appkey and theme.valine.visitor) %} <span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}"> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"> <i class="fa fa-eye"></i> </span> {% if theme.post_meta.item_text %} <span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span> {% endif %} <span class="leancloud-visitors-count"></span> <span>℃</span> </span> {% endif %}首先去来必力注册账号，然后进入后台管理系统，如下图所示：
拷贝下图中的data-uid
编辑主题配置文件，将上面的data-uid粘贴到下面位置
文件位置：~/Blog/themes/next/_config.yml # LiveRe comments system # You can get your uid from https://livere.com/insight/myCode (General web site) livere_uid:当分类、标签、关于等组件需要隐藏评论功能时
编辑index.md文件，添加comments将其值设为false:
文件位置：~/Blog/source/about title: About Me date: 2019-05-16 16:04:06 type: "about" comments: false设置主题配置文件
文件位置：~/Blog/themes/next/_config.yml footer: # Specify the date when the site was setup. If not defined, current year will be used. since: 2019修改中文内容
文件位置：~/Blog/themes/next/languages/zh-CN.yml footer: powered: "由 %s 个人专属" theme: 主题 total_views: 总访问量 total_visitors: 总访客量打开Blog/themes/next/layout/_partials/footer.swig，修改相应代码。
文件位置：~/Blog/themes/next/layout/_partials/footer.swig {% if theme.footer.powered.enable %} <div class="powered-by">{# #}{{ __('footer.powered', next_url('https://github.com/CQUPT-Wan', 'CQUPT-Wan', {class: 'theme-link'})) }}{# #}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{# #}</div> {% endif %}安装hexo插件，切换到根目录：
根目录：~/Blog npm install hexo-wordcount --save在~/Blog/themes/next/layout/_partials/footer.swig添加代码：注意这段代码添加的位置和底部最后显示的位置相关，我是加在author后面
文件位置：~/Blog/themes/next/layout/_partials/footer.swig <span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright || author }}</span> <span class="post-meta-divider">|</span> <div class="theme-info"> <div class="powered-by"></div> <span class="post-count">博客全站共{{ totalcount(site) }}字</span> </div>首先编辑主题配置文件
文件位置：~/Blog/themes/next/_config.yml icon: # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/ # `heart` is recommended with animation in red (#ff0000). name: heart然后编辑
文件位置：~/Blog/themes/next/layout/_partials/footer.swig <span class="with-love" id="heart">最后编辑custom.styl，加入：
文件位置：~/Blog/themes/next/source/css/_custom/custom.styl // 自定义页脚跳动的心样式 @keyframes heartAnimate { 0%,100%{transform:scale(1);} 10%,30%{transform:scale(0.9);} 20%,40%,60%,80%{transform:scale(1.1);} 50%,70%{transform:scale(1.1);} } #heart { animation: heartAnimate 1.33s ease-in-out infinite; } .with-love { color: rgb(255, 0, 0); }首先到DaoVoice注册账号，登录成过后，进入到后台管理，点击应用设置——>安装到网站查看安装代码和AppID。
将安装代码添加到Blog/themes/next/layout/_partials/head.swig中：
文件位置：~/Blog/themes/next/layout/_partials/head.swig {% if theme.daovoice %} <script> (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice") daovoice('init', { app_id: "{{theme.daovoice_app_id}}" }); daovoice('update'); </script> {% endif %}
配置主题文件
文件位置：~/Blog/themes/next/_config.yml # Online contact daovoice: true daovoice_app_id: ab02c609NexT主题支持集成 Swiftype、 微搜索、Local Search 和 Algolia。
安装 hexo-generator-search
目录：~/Blog npm install hexo-generator-search --save安装 hexo-generator-searchdb
目录：~/Blog npm install hexo-generator-searchdb --save编辑站点配置文件
文件位置：~/Blog/_config.yml # 搜索 search: path: search.xml field: post format: html limit: 10000编辑主题配置文件，设置Local searchenable为ture
文件位置：~/Blog/themes/next/_config.yml # 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在目录 ~/Blog/themes/next/layout/_macro/ 下添加 my-copyright.swig ，内容如下：
文件位置：~/Blog/themes/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> <!-- JS库 sweetalert 可修改路径 --> <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.path) }}">{{ page.title }}</a></p> <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p> <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p> <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p> <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" 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 (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p> </div> <script> var clipboard = new Clipboard('.fa-clipboard'); $(".fa-clipboard").click(function(){ clipboard.on('success', function(){ swal({ title: "", text: '复制成功', icon: "success", showConfirmButton: true }); }); }); </script> {% endif %}在目录~/Blog/themes/next/source/css/_common/components/post/下添加文件my-post-copyright.styl，添加以下代码：
文件位置：~/Blog/themes/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(255,255,255,0.4); } .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; } 修改~/Blog/themes/next/layout/_macro/post.swig，在END POST BODY后面添加以下代码：
文件位置：~/Blog/themes/next/layout/_macro/post.swig <div> {% if not is_index %} {% include 'my-copyright.swig' %} {% endif %} </div>在~/Blog/themes/next/source/css/_common/components/post/post.styl文件最后加入下面的代码：@import "my-post-copyright"
因为写的博客存在中文标题，如果直接用默认的url会出现中文，这样容易出现网址Bug。而且默认的网址不是html静态网址，修改方式如下
文件位置：~/Blog/_config.yml #permalink: :year/:month/:day/:title/ permalink: :year:month:day-:url_name.html permalink_defaults: url_name: index这里的url_name需要在每篇新建博客的.md文件中设置你想设置的网址名，如果嫌麻烦可以修改模板
文件位置：~/Blog/scaffolds/post.md --- title: {{ title }} url_name: date: {{ date }} tags: categories: copyright: ---对于标签中的中文，可以编辑站点配置文件进行设定：
文件位置：~/Blog/_config.yml # Category & Tag default_category: uncategorized # URL 中的分类和标签「翻译」成英文 category_map: 机器学习: MachineLearning 自然语言处理: NLP 深度学习: DeepLearning 数据结构: DataStructure 编程实践: Coding tag_map:首先加入下面代码
文件位置：~/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("05/15/2019 15:13:14"); today=new Date(); timeold=(today.getTime()-BirthDay.getTime()); sectimeold=timeold/1000 secondsold=Math.floor(sectimeold); msPerDay=24*60*60*1000 e_daysold=timeold/msPerDay daysold=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 {# Blogroll #} {% if theme.links %} <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}"> <div class="links-of-blogroll-title"> <i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i> {{ theme.links_title }} <i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i> </div> <ul class="links-of-blogroll-list"> {% for name, link in theme.links %} <li class="links-of-blogroll-item"> <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a> </li> {% endfor %} </ul> + {% include '../_custom/sidebar.swig' %} </div> {% endif %} - {% include '../_custom/sidebar.swig' %}如果需要修改颜色，则可以修改custom.styl
// 自定义的侧栏时间样式 #days { display: block; color: #f56e25; font-size: 10px; margin-top: 10px; } .site-overview { text-align: center; }本博客使用的主题是Next.Mist，首页内容默认为
如果想修改标题的位置居中或者‘阅读全文’居中，首先可以F12审查元素查看要修改内容的class，然后进行修改
文件位置：~/Blog/themes/next/source/css/_schemes/Mist/_posts-expanded.styl // Post Expanded // -------------------------------------------------- .posts-expand { padding-top: 0; .post-title, .post-meta { text-align: center $site-meta-text-align; //文章属性位置 +mobile() { text-align: center; } } .post-eof { display: none; } .post { margin-top: 120px; } .post:first-child { margin-top: 0; } .post-meta { margin-top: 5px; margin-bottom: 20px; } .post-title { position: center; //文章标题位置 font-size: $font-size-headings-base; font-weight: 400; +mobile() { font-size: $font-size-headings-small; } +desktop-large() { font-size: $font-size-headings-large; } } .post-title:hover:before { background: $black-deep; } .post-body { +mobile() { font-size: $font-size-base; } } .post-body img { margin: 0; } .post-tags { text-align: left; a { padding: 1px 5px; background: $whitesmoke; border-bottom: none; } a:hover { background: $grey-light; } } .post-nav { margin-top: 40px; } } .post-button { margin-top: 20px; text-align: right; //阅读全文位置 a { padding: 0; font-size: $font-size-base; //color: $grey-dim; background: none; border: none; border-bottom: 2px solid $grey-dim; transition-property: border; +mobile() { font-size: $font-size-small; } +desktop-large() { font-size: $font-size-large; } &:hover { border-bottom-color: $black-deep; } } }如果要修改其他主题的内容位置，将~/Blog/themes/next/source/css/_schemes/Mist/_posts-expanded.styl中的Mist修改即可。
参考大佬的文章
tips：大佬的博客可不仅仅有一篇文章，多在上面逗留会，也许会有甜品。
打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化
hexo的next主题个性化教程:打造炫酷网站
Hext-Next配置超炫网页效果
最后如果转载，麻烦留个本文的链接，因为如果读者或我自己发现文章有错误，我会在这里更正，留个本文的链接，防止我暂时的疏漏耽误了他人宝贵的时间。
