NexT

1.提早队列download：https://www.sisuoit.com/2811.... 复制下哉ZY：https://www.sisuoit.com/2811.html咱们都晓得，在 Java 中有类型泛滥的汇合。那么你据说过 DelayQueue 吗？它是一个非凡类型的 Java 汇合，容许咱们依据元素的延迟时间对其进行排序。坦率来讲，这是一个十分有意思的类。只管 DelayQueue 类是 Java 汇合的成员之一，然而它位于 java.util.concurrent 包中。它实现了 BlockingQueue 接口。只有当元素的工夫过期时，能力从队列中取出。 要应用这个汇合，首先，咱们的类须要实现 Delayed 接口的 getDelay 办法。当然，它不肯定必须是类，也能够是 Java Record。 public record DelayedEvent(long startTime, String msg) implements Delayed { public long getDelay(TimeUnit unit) { long diff = startTime - System.currentTimeMillis(); return unit.convert(diff, TimeUnit.MILLISECONDS); } public int compareTo(Delayed o) { return (int) (this.startTime - ((DelayedEvent) o).startTime); }}假如咱们想要把元素提早 10 秒钟，那么咱们只须要在 DelayedEvent 类上将工夫设置成以后工夫加上 10 秒钟即可。 final DelayQueue<DelayedEvent> delayQueue = new DelayQueue<>();final long timeFirst = System.currentTimeMillis() + 10000;delayQueue.offer(new DelayedEvent(timeFirst, "1"));log.info("Done");log.info(delayQueue.take().msg());对于下面的代码，咱们可能看到什么输入呢？如下所示。 ...

之前的这篇文章《Linux下使用 github+hexo 搭建个人博客01-hexo搭建》，相信大家都知道怎么搭建 hexo ，怎么切换主题，并且完成了一篇博文的创建，以及 MarkDown 标记语法的用法。如果还不清楚或者不知道的，那就先回去看看这篇文章。 那么我们接下来就需要将 hexo 和 GitHub Pages 结合了，为什么要结合呢？因为当前我们的博客还是在本地机器，如果因为我们不小心删了数据，或者购买的云服务因为没有及时续费，导致机器被释放了，那我们就永久失去了这些数据。 因此如果这些数据对我们还有用，并且想永久保存，那么就需要找个类似 SVN 或者 Git 之类的代码版本托管仓库了。那理所当然选 GitHub 了，就当前环境还有比 GitHub 更好的吗。 注册 GitHub 账号GitHub 官网： https://github.com/具体注册过程也很简单，这里就不说了。请自行注册。 使用 GitHub Pages创建指定的 GitHub 仓库点击创建按钮 仓库名称和配置选择 开启 GitHub Pages进入 Settings 默认已开启 GitHub Pages 选择主题 浏览器访问https://zhanglianghhh.github.io/ 在 GitHub 上添加 SSH Keys 信息为了能将个人博客服务器上的博客数据推送到 GitHub，达到数据永久保存效果，我们需要把博客服务器的 SSH keys 信息在 GitHub 上添加信任。 本地服务器创建 ssh-key 信息[root@zhangblog ~]# ssh-keygen -t rsa # 如果遇见等待输入的地方，按下 Enter 回车键即可，无需任何其他输入Generating public/private rsa key pair.Enter file in which to save the key (/root/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in /root/.ssh/id_rsa.Your public key has been saved in /root/.ssh/id_rsa.pub.The key fingerprint is:SHA256:73zrQW4LTBgAVqQKvOoTxFrgaGF/sobf643Q+3w7or0 root@zhangblogThe key's randomart image is:+---[RSA 2048]----+| o++ ||oo . . . ||*oo . . ||.*o+ . o ||+oo + S . . ||oo o. + o ||. +... + + ||.. ...*. = o.o || .. .*+E+.=o+. |+----[SHA256]-----+[root@zhangblog ~]# cd .ssh/[root@zhangblog .ssh]# lltotal 12-rw------- 1 root root 0 Jun 3 17:02 authorized_keys-rw------- 1 root root 1675 Jun 5 14:17 id_rsa-rw-r--r-- 1 root root 396 Jun 5 14:17 id_rsa.pub-rw-r--r-- 1 root root 395 Dec 14 17:15 known_hosts[root@zhangblog .ssh]# cat id_rsa.pub # 具体的公钥信息ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQD4iDDDDDDDDDDgMMutdH7KdI5P7BrtHbfRG+MYyr1/Gtz45hJgbVHBCTFZaTn2+MekFQcZVkyc2kEU7L7mm4ZGWkStgbXkas+uTFwo3kLlX8ozcUC3jM8rhzbWPv8piq58ezBnrMZ0zNsCgHGXpokUmLqYt1mpLXz5rsOzwGgHHkp+Wlr+6tTQxr/+9T4CiE/RkFKi/mehn01rjOcVluYSkwkVii03EzMlMcoyV3ctnWzwyZIWAQAsvDSN2CQAdRtaUHOJOAoRv8/s4jDiWU1ia0JYmm2D/IWcLl2hxNtGeVHTFk9l1djtUQu47zuoOM4y6ySlUx28HNIAMw14gjIv5 root@zhangblogGitHub 添加 SSH Keys ...

说在前面本地使用macOS，vps系统为debian 8；虽说是跳坑指南，但是这篇文章本意也仅仅自用，总结一下自己遇到的问题和解决方法，仅供参考，如有其他问题请百度(google) 整体思路：本地调试完的hexo项目文件通过git推送给vps，然后直接部署在vps上使用域名来访问，这样一个属于自己的blog就可以完成了 本地环境GitGit是一个免费的开源分布式版本控制系统，旨在快速，高效地处理从小型到大型项目的所有事务。这原是广泛用在代码的版本控制，在hexo建站里面的主要作用是推送渲染好的静态网页文件到部署的仓库。 下载Git与安装因为本来我就有，所以这里就不多介绍；网上其他大佬也有很多教程 node.js下载Node.js与安装同上，本地环境也有； HexoHexo是一个快速、简洁且高效的静态博客框架。安装简单，虽然网上教程一大堆，建议参考官方文档。重要！官方文档有中文 ????。 官方文档https://hexo.io/zh-cn/ 安装hexo首先确保本地安装好git和node.js，在终端中输入npm install -g hexo-cli 创建hexo项目（建站）hexo init <folder> // 初始化项目文件夹；<folder>为自定义hexo项目名称cd <folder> // 打开项目文件夹npm install // 安装依赖完成上述步骤，查看自己的项目文件夹内，目录应为： .├── node_modules //依赖包├── scaffolds // 模版├── source // 文章资源| ├── _drafts //草稿| └── _posts //发布文章├── themes //主题| └── landscape //默认主题├── package.json // npm配置文件（可以不用管它）└── _config.yml //hexo配置文件配置hexo既然生成了博客了，那自然需要自己来配置一下自己的博客的信息，打开_config.yml文件进行配置；具体配置参考官方文档：https://hexo.io/zh-cn/docs/co... 下载主题主题我挑了很久，最后选择综合症的我只有选了好多人推荐的next主题next官方文档：https://github.com/theme-next... 下载根据文档给的方式使用git clonegit clone https://github.com/theme-next/hexo-theme-next themes/next 试了几次，我一直报错 'RPC failed; curl 18 transfer closed with outstanding read data remaining' ...

网上已经有很多NexT主题配置的教程，一搜一大堆；所以我这边就简单说一下我个人（没那么搞）的一些配置,这些配置大部分在主题上已经存在，只需要将其value设为true,或者先下载dependency在设为true基础配置网站图标favicon: small: /images/icon.jpeg apple_touch_icon: /images/icon.jpeg safari_pinned_tab: /images/logo.svg 网站底部小人换成红心形footer: # Specify the date when the site was setup. # If not defined, current year will be used. #since: 2015 #此处可设置网站建站时间 # Icon between year and copyright info. icon: # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/ # heart is recommended with animation in red (#ff0000). name: heart # If you want to animate the icon, set it to true. animated: false # Change the color of icon, using Hex Code. color: “#808080"备案 beian: enable: true icp: 你的备案号 社交网站图标链接(把想要显示的网站前面#去掉，改为自己的网站链接,并将下面的social_icons的enable属性设为true就ok) # 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: https://github.com/dasnnj || github E-Mail: mailto:dasnnj@outlook.com || envelope #Weibo: https://weibo.com/yourname || weibo #Google: https://plus.google.com/yourname || google #Twitter: https://twitter.com/yourname || twitter #FB Page: https://www.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype social_icons: enable: true #设为true icons_only: false transition: false 头像# 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/icon.jpeg # 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: false #设为true则鼠标移到头像上时候，鼠标显示为手 显示摘要 （下面的enable设为true即按照下面设定的高度显示摘要；官方推荐使用<!– more –>自定义摘要长度;read_more_btn设为true显示继续阅读按钮# Automatically Excerpt. Not recommend.# Use <!– more –> 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高级配置打赏功能# Reward# If true, reward would be displayed in every article by default.# And you can show or hide one article specially through add page variable reward: true/false.# 打赏reward: enable: true comment: 坚持原创技术分享，您的支持将鼓励我继续创作！ wechatpay: /images/xxx.png alipay: /images/xxx.jpg # bitcoin: /images/unionpay.jpg 网站访问次数统计busuanzi_count: enable: true total_visitors: true total_visitors_icon: user total_views: true total_views_icon: eye post_views: true post_views_icon: eye 本地搜索(需要npm安装denpendency)# Local search# Dependencies: https://github.com/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 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参考主题提供的github地址https://github.com/theme-next/hexo-generator-searchdb， 在博客根目录下执行npm install hexo-generator-searchdb –save图片弹出效果（鼠标移到图片上显示放大镜效果）请参考：https://github.com/theme-next/theme-next-fancybox3.进入next主题目录下执行git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox 通过配置fancybox，让网站中图片可以放大（注意最终效果是clone到主题下面的source/lib/fancybox里面，而不是项目根目录的source/lib/fancybox）,然后在主题配置的_config.yml中，搜索fancybox，改为fancybox: true# Fancybox. There is support for old version 2 and new version 3.# Choose only any one variant, do not need to install both.# To install 2.x: https://github.com/theme-next/theme-next-fancybox# To install 3.x: https://github.com/theme-next/theme-next-fancybox3#图片展示效果imgfancybox: true压缩代码（我使用的是all_minifier来优化代码）具体请参考：https://github.com/chenzhutian/hexo-all-minifier博客根目录下执行npm install hexo-all-minifier –save在nexT主题的_config.yml中添加 all_minifier：true无需其他操作，便可在执行hexo g生成静态代码时候自动压缩看到很多人用的gulp.js来压缩，但是会报错，而且网上很多人给出的解决方案已经不能用了，我这边解决方案是一月份我使用的，是ok的具体参考其他人的gulp安装；在博客根目录下面新建gulpfile.js,将下面代码复制进去，剩下的压缩操作和其他人的博客是相同的var gulp = require(‘gulp’);//Plugins模块获取var minifycss = require(‘gulp-minify-css’);var uglify = require(‘gulp-uglify’);var htmlmin = require(‘gulp-htmlmin’);var htmlclean = require(‘gulp-htmlclean’);//压缩cssgulp.task(‘minify-css’, function () { return gulp.src(’./public//*.css’) .pipe(minifycss()) .pipe(gulp.dest(’./public’));});//压缩htmlgulp.task(‘minify-html’, function () { return gulp.src(’./public//.html’) .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, minifyJS: true, minifyCSS: true, minifyURLs: true, })) .pipe(gulp.dest(’./public’))});//压缩js 不压缩min.jsgulp.task(‘minify-js’, function () { return gulp.src([’./public/**/.js’, ‘!./public/**/*.min.js’]) .pipe(uglify()) .pipe(gulp.dest(’./public’));});//4.0以前的写法 //gulp.task(‘default’, [ // ‘minify-html’, ‘minify-css’, ‘minify-js’//]);//4.0以后的写法// 执行 gulp 命令时执行的任务gulp.task(‘default’, gulp.parallel(‘minify-html’, ‘minify-css’, ‘minify-js’, function() { // Do something after a, b, and c are finished. return new Promise(function(resolve, reject) { console.log(“gulp finished”); resolve(); } )} )); 感谢http://darryrzhong.site/categories/Hexo搭建博客/https://www.jianshu.com/p/3ff20be8574chttps://www.jianshu.com/p/344cf061598dhttps://www.jianshu.com/p/44e601a7567a ...

EasyHexo???? 轻松使用 Hexo 搭建你的博客EasyHexo GitHub Repo???? EasyHexo/Easy-Hexo本篇作者：yi-yun前言这篇文章并没有划定适宜人群，只是希望你可以通过此篇教程找到适合你的配置，或者通过我的博客找到一些灵感。这就是这篇教程的意义。另外，需要说明的是，我的博客使用的主题是 Next 6.3 版本。学习之前，还希望你能先学一点 Yaml 基础知识 以及 Stylus 基础知识。不会的话多动手也可以做到，并不需要熟练掌握。约定一般提供方法，且按步骤。如果修改方法很多，我会以 • 方式区分仔细看清站点配置文件和主题配置文件博客文件目录为 root 目录，即包括你的 themes/ 、source/ 等文件夹的博客根目录。效果图在每个教程最开头。（大部分都有，逃个性化配置修改打赏文字抖动个人不喜欢这个设计所以改了修改文件 themes\next\source\css_common\components\post\post-reward.styl，将 hover 注释即可可以在 themes\next\source\css_custom\custom.styl 中添加重叠样式（推荐）//二维码不抖动#wechat:hover p, #alipay:hover p { animation: none;}修改打赏按钮在 themes\next\source\css_custom\custom.styl 中添加代码//打赏按钮修改#rewardButton span { height: 35px; width: 35px; //line-height:30px; font-size: 15px; font-family: “PingFang SC”, “Microsoft YaHei”, Georgia, sans-serif; background: #34495e; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: 0.2s ease-out; &:hover { background: #649ab6; -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); -moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }}修改 themes\next\languages\zh-CN.yml 文件，将打赏字样改为reward:donate: <i class=“fa fa-qrcode fa-2x” style=“line-height:35px;"></i>wechatpay: 微信支付alipay: 支付宝PS: 这里语言文件的名字跟不同主题有关系，有可能不是 zh-CN.yml 修改 busuanzi 统计功能主题配置文件中搜索 busuanzi 增加busuanzi_count:enable: truesite_uv: true #total visitorssite_uv_icon: usersite_uv_header: 访问用户：site_uv_footer: 人site_pv: true #total viewssite_pv_icon: eyesite_pv_header: 访问次数：site_pv_footer: 次post_views: truepost_views_icon: eyethemes\next\layout_third-party\analytics\busuanzi-counter 变更为<i class=“fa fa-{{ theme.busuanzi_count.site_uv_icon }}"></i>&nbsp {{ theme.busuanzi_count.site_uv_header }} <span class=“busuanzi-value” id=“busuanzi_value_site_uv”></span> {{ theme.busuanzi_count.site_uv_footer }} <i class=“fa fa-{{ theme.busuanzi_count.site_pv_icon }}"></i>&nbsp {{ theme.busuanzi_count.site_pv_header }} <span class=“busuanzi-value” id=“busuanzi_value_site_pv”></span> {{ theme.busuanzi_count.site_pv_footer }}PS: busuanzi 因为在 2018.10.12 左右七牛云域名过期，导致无法显示人数，如果你的主题是旧版本，请在第二步的文件中更新为 src=”//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"给文章底部加星星（点赞）虽然是异步，但访问速度太慢，经常加载不出来在主题配置文件中搜索 rating 即可点击此链接注册账号，设置站点后，点击左侧设置， site 建议选私人，rate 选择颜色保存即可复制 ID 到配置文件，选择颜色添加代码，搜索 rating，对比代码 {% if theme.rating.enable %} <div class=“wp_rating”>+ <div style=“color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px”>(&gt;看完记得五星好评哦&lt;)</div> <div id=“wpac-rating”></div> </div> {% endif %}修改文章底部留白 添加如下代码：.post-widgets { padding-top: 0px;} .post-nav { margin-top: 30px;}### 侧边栏近期文章原理：去除友链，将友链换成近期文章1. 添加如下代码：{% if theme.recent_posts %} <div class=“links-of-blogroll motion-element {{ “links-of-blogroll-” + theme.recent_posts_layout }}"> <div class=“links-of-blogroll-title”> <i class=“fa fa-history fa-{{ theme.recent_posts_icon | lower }}” aria-hidden=“true”></i> {{ theme.recent_posts_title }} </div> <ul class=“links-of-blogroll-list”> {% set posts = site.posts.sort(’-date’) %} {% for post in posts.slice(‘0’, ‘5’) %} <li> <a href=”{{ url_for(post.path) }}” title=”{{ post.title }}" target="_blank">{{ post.title }}</a> </li> {% endfor %} </ul> </div>{% endif %}```在主题配置文件中配置recent_posts_title: 近期文章recent_posts_layout: blockrecent_posts: true复制文本添加版权信息在 themes\next\source\js\src 新建 copy.js，代码如下：function addLink() { var body_element = document.body; var selection; selection = window.getSelection(); if (window.clipboardData) { // Internet Explorer var pagelink ="\r\n\r\n 原文出自 Yi-Yun博客 \n除特别声明外，均采用CC BY-NC-SA 4.0许可协议\n转载请保留原文链接: “+document.location.href+”"; var copytext = selection + pagelink; window.clipboardData.setData (“Text”, copytext); return false; } else { var pagelink = “<br/>原文出自 Yi-Yun博客 <br/>除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议<br/>转载请保留原文链接: “+document.location.href+””; var copytext = selection + “<br/>"+pagelink; var newdiv = document.createElement(‘div’); newdiv.style.position=‘absolute’; newdiv.style.left=’-99999px’; body_element.appendChild(newdiv); newdiv.innerHTML = copytext; selection.selectAllChildren(newdiv); window.setTimeout(function() { body_element.removeChild(newdiv);},0); } } document.oncopy = addLink;在 next\layout_layout.swig 文件中，添加引用（注：在 swig 文件末尾添加）：<script type=“text/javascript” src="/js/src/copy.js”></script>添加 DaoVioce很多灵感都是逛博客获得的注册首先在 DaoVoice 注册个账号，点击->邀请码是 cbaf2df2。获取 app_id点击左侧应用设置->安装到网站在代码中找到 app_id修改 head.swig在 themes\next\layout_custom\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=1new 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 %}修改主题配置文件文件末尾添加如下代码# Online contactdaovoice: truedaovoice_app_id: # 这里填你刚才获得的 app_id至此，网页的在线联系功能已经完成，hexo s 可查看页面，窗口和位置可自行配置聊天窗口配置我的配置绑定微信在用户界面点击右上角头像即可扫码绑定，即时通信可在微信小程序中添加吉祥物安装依赖npm install –save hexo-helper-live2dnpm install –save live2d-widget-model-wanko站点配置# hexo-helper-live2d配置，参考https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.mdlive2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falsedebug: falsemodel: scale: 1 use: live2d-widget-model-wankodisplay: superSample: 2 # 超采样等级 width: 100 height: 100 position: left # 位置mobile: show: falsereact: opacityDefault: 0.9 # 默认透明度 opacityOnHover: 0.5 # 鼠标移上透明度网页标题崩溃欺骗添加 JavaScript 代码 在 themes\next\source\js\src 文件夹下创建 crash_cheat.js，添加代码：var OriginTitle = document.title;var titleTime;document.addEventListener(‘visibilitychange’, function () { if (document.hidden) { $(’[rel=“icon”]’).attr(‘href’, “/img/TEP.ico”); document.title = ‘╭(°A°`)╮ 页面崩溃啦 ~’; clearTimeout(titleTime); } else { $(’[rel=“icon”]’).attr(‘href’, “/favicon.ico”); document.title = ‘(><) 噫又好了~’ + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); }});引用 在themes\next\layout_layout.swig文件中，添加引用（注：在swig末尾添加）：<script type=“text/javascript” src="/js/src/crash_cheat.js"></script>文末添加结束标记修改 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>修改网页底部的桃心更改主题配置文件中的图标名字即可icon: name: user animated: true color: “#808080"透明找到自己相应的 Scheme 下的相关文件，我的是 Pisces。themes\next\source\css_schemes\Pisces_layout.styl背景.content-wrap- 菜单栏 .header-innerthemes\next\source\css_schemes\Pisces_sidebar.styl侧边栏.sidebar-inner找到 background属性更改为 background: rgba(255,255,255,0.7) 即为透明度30%的白色更改 sidebar 大小找到 themes\next\source\js\src\util.jsfunction updateSidebarHeight(height) { height = height || ‘auto’; $(’.site-overview, .post-toc’).css(‘max-height’, height); }可在 height 后加50底部加上运行时间在 hexo/themes/[your theme]/layout 文件夹下找到你的 footer 文件<span id=“timeDate”>载入天数…</span><span id=“times”>载入时分秒…</span> <script> var now = new Date(); function createtime() { var grt= new Date(“02/14/2018 12:49:00”); //此处修改你的建站时间或者网站上线时间 now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){ hnum = “0” + hnum; } minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ) { mnum = “0” + mnum; } seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = “0” + snum;} document.getElementById(“timeDate”).innerHTML = “本站已安全运行 “+dnum+” 天 “; document.getElementById(“times”).innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒”;} setInterval(“createtime()",250); </script>鼠标爆炸特效下载这个脚本，放在 themes/next/source/js/src修改代码{% 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=”//cdn.bootcss.com/animejs/2.2.0/anime.min.js”></script> <script type=“text/javascript” src="/js/src/fireworks.js”></script>{% endif %}打开主题配置文件，在里面最后写下：fireworks: trueSEO 优化看个人喜好修改，不一定要改的一模一样首页 title 优化更改 index.swig 文件 your-hexo-site\themes\next\layout{% block title %} {{ config.title }} {% endblock %}{% block title %} {{ theme.keywords }} - {{ config.title }}{{ theme.description }} {% endblock %}{% block title %}{{ theme.description }}-{{ title }}{% if theme.index_with_subtitle and subtitle %} – {{ subtitle }}{% endif %}{% endblock %}修改文章链接编辑站点配置文件，修改其中的 permalink 字段改为 permalink: :title.html 即可。添加 “nofollow” 标签修改代码{{ __(‘footer.powered’, ‘<a class=“theme-link” href=“http://hexo.io” rel=“external nofollow”>Hexo</a>’) }}<a class=“theme-link” href=“https://github.com/iissnan/hexo-theme-next" rel=“external nofollow”>同理，sidebar.swig也作如下修改<a href=“http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0” class=“cc-opacity” target="_blank” rel=“external nofollow”><a href=”{{ link }}" target="_blank" rel=“external nofollow”>{{ name }}</a>推荐工具Visual Studio Code - 重新定义代码方式！博客图床解决方案Typora - 所见即所得的 Markdown 编辑器参考链接很久以前的事情了…有些参考链接找不到了，而且找不到原创…打造个性超赞博客 Hexo+NexT+GitHub Pages 的超深度优化Hexo NexT 博客增加知乎豆瓣图标支持好了，本文就到这里。如果对 Hexo 有什么疑问，欢迎在评论区中提问，我会尽力回答。或者你也可以选择更优秀的方式 issue 提问！如果你想学学 Hexo，可以到 EasyHexo 学习。谢谢大家！???????????? ...

一、前言看过很多人，用github创建个人博客，最近抽空也实现的自己的博客，下面就把摸索过程记录下。二、准备安装Node.jsNode.js下载地址：https://nodejs.org/en/download/安装过程一路默认安装即可。详细安装文档参看：http://www.runoob.com/nodejs/…安装Git软件Git软件下载地址：https://git-scm.com/download安装过程一路默认安装即可。关于更多的Git讲解参看：https://www.liaoxuefeng.com/w…安装Hexo什么是 Hexo？Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。Hexo官方网站：https://hexo.io/zh-cn/ ，我用的当前版本是v6.4.0，基本步骤：新建一个blog空文件夹，cmd窗口或vscode终端，输入命令npm install -g hexo-cli全局安装hexo；安装完成后输入hexo -v显示hexo的相关信息说明安装成功；输入命令hexo init初始化hexo项目，安装相关依赖：上一步安装完成，输入命令hexo s或hexo server，开启服务，成功后，在浏览器访问http://localhost:4000生成的默认主题博客。PS：在这里可以npm install hexo-browsersync –save实现热更新，不必每次更改都去刷新浏览器。安装完成后的目录结构 - node_modules // 依赖包 - public // 存放生成的页面 - scaffolds // 生成页模板 - source // 创建的源文章 - themes // 主题 - _config.yml // 博客配置（站点配置） - db.json // 解析source得到的库文件 - package.json // 项目依赖配置 三、修改站点配置_config.yml文件是对整个站点基本信息的配置，比如：# Sitetitle: // 博客名称subtitle: // 副标题description: // 描述 用于seokeywords: // 关键字 用于seoauthor: // 作者 用于seolanguage: // 语言timezone: // 时区四、Github创建一个hexo的代码库和创建其它git仓库一样，只不过名称必须为yourname.github.io这种形式，其中yourname是你github个人账号名，创建好后，找到站点配置文件（blog下的_config.yml文件），找到：# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: type:改成你的 博客git仓库地址和分支：deploy: type: git repo: https://github.com/YourgithubName/YourgithubName.github.io.git branch: master这样，远程仓库配置完成。接下来输入命令hexo generate或hexo g将原markedown文章生成静态页面，放置在生成的public目录下；npm install hexo-deployer-git –save安装hexo的git插件；再输入命令hexo deploy或hexo d将生成的静态页面推送到远程仓库；完成后，在浏览器访问https://yourname.github.io/，就能看到你构建好的个人博客啦！五、写文章hexo支持用markdown写作，在目录blog/source/_posts新建markdown文件，或者使用命令hexo new posts 你的文章标题。小坑：{{}}符号编译出错markdown生成静态页面，{{}}是swig模板符号，属于特殊字符，在编译时解析不了双大括号中间字符串就会报错FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.htmlTemplate render error: (unknown path) [Line 3, Column 8] unexpected token: }}解决方案：用转义字符代替{ -> &#123; — 大括号左边部分Left curly brace} -> &#125; — 大括号右边部分Right curly brace六、配置主题hexo默认主题是landscape，样式可能不是每个人都喜爱的，官方页提供了一些主题，可以按自己的风格安装，只需在站点配置文件_config.yml更改主题名称。Next主题是目前比较流行的主题，文档相对比较成熟。next主题文档安装cd bloggit clone https://github.com/theme-next/hexo-theme-next themes/next更换主题# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next修改Next主题配置文件目录blog/themes/next找到_config.yml文件，其中有很多配置项，下面列举几个常用的。更换头像# 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/avatar.png # 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: false只需将头像的url换成你自己头像的url或者直接覆盖头像图片即可。注意这里的根/的绝对路径是blog/themes/next/source/，以后写文章引用本地图片的话，注意放到这个目录下！代码高亮NexT使用Tomorrow Theme作为代码高亮，共有5款主题供你选择。 NexT默认使用的是白色的normal主题，可选的值有normal，night，night blue， night bright，night eighties。# Code Highlight theme# Available values: normal | night | night eighties | night blue | night bright# https://github.com/chriskempson/tomorrow-themehighlight_theme: normal添加分类页文章可能需要分类，添加分类页cd bloghexo new page categories此时在blog/source目录下就生成了categories/index.md文件：—title: 分类date: 2018-08-28 14:59:48type: categoriescomments: false // 分类页不需要添加评论—然后，放开主题配置文件_config.yml中menu setting对categories注释menu: home: / || home categories: /categories/ || th以后文章的内容头声明的分类就会在分类页有索引了。添加标签页跟添加分类页一样，文章也需要标签cd bloghexo new page tags此时在blog/source目录下就生成了tags/index.md文件：—title: 标签date: 2018-08-28 14:34:22type: tagscomments: false // 标签页不需要评论—然后，放开主题配置文件_config.yml中menu setting对tags注释menu: home: / || home tags: /tags/ || tags以后文章的内容头声明的分类就会在分类页有分类了。404页当访问当前站点，页面找不到，跳转到404页，推荐用腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！使用方法，新建404.html页面，放到主题的source目录下，内容如下：<!DOCTYPE HTML><html><head> <meta http-equiv=“content-type” content=“text/html;charset=utf-8;”/> <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1” /> <meta name=“robots” content=“all” /> <meta name=“robots” content=“index,follow”/> <link rel=“stylesheet” type=“text/css” href=“https://qzone.qq.com/gy/404/style/404style.css"></head><body> <script type=“text/plain” src=“http://www.qq.com/404/search_children.js" charset=“utf-8” homePageUrl=”/” homePageName=“回到我的主页”> </script> <script src=“https://qzone.qq.com/gy/404/data.js" charset=“utf-8”></script> <script src=“https://qzone.qq.com/gy/404/page.js" charset=“utf-8”></script></body></html>站点分析统计对于个人站点，我们需要统计用户访问量，用户分布，跳转率等。Next主题推荐使用的有百度统计、Google分析、腾讯分析了，使用均一样，注册获取站点统计id。百度统计我一直用的百度统计，注册百度统计，管理 > 网站列表 > 新增网站完成后，代码管理 > 代码获取，就能得到统计id。# Baidu Analytics IDbaidu_analytics: 统计id不蒜子统计不蒜子统计可以统计站点以及每个页面的PV、UV和站点总的访问数，以小眼睛的形式展现。编辑主题配置文件中的busuanzi_count的配置项。当enable: true时，代表开启全局开关。若total_visitors、total_views、post_views的值均为false时，不蒜子仅作记录而不会在页面上显示。内容分享服务Next主题还提供了对外提供分享接口，包括百度分享、addthis Share和NeedMoreShare2，要用到哪个，只需把相应enable: true，注册账号获取id即可。评论功能当前版本配置，支持畅言，Disqus，valine，gitment。畅言 - 搜狐提供的评论组件，功能丰富，体验优异，防止注水；但必须进行域名备案。只要域名备过案就可以通过审核。Disqus - 国外使用较多的评论组件。万里长城永不倒，一枝红杏出墙来，你懂的。valine - LeanCloud提供的后端云服务，可用于统计网址访问数据，分为开发版和商用版，只需要注册生成应用App ID和App Key即可使用。Ditment - Gitment 是一款基于GitHub Issues的评论系统。支持在前端直接引入，不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作，同时有完整的Markdown / GFM和代码高亮支持。尤为适合各种基于GitHub Pages的静态博客或项目页面。畅言要备案，对于对于挂靠在GitHub的博客非常的不友好，放弃！Disqus，目前国内网络环境访问不了，放弃！valine在用户没有认证登录可以评论，不能防止恶意注水，放弃！我选择用Gitment，让用户用自己的GitHub账号才能评论，用git的一个仓库来存储评论（评论以该仓库的issue形式展现）。gitment配置Gitment的全部配置项如下，# Gitment# Introduction: https://imsun.net/posts/gitment-introduction/gitment: enable: true mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway count: true # Show comments count in post meta area lazy: false # Comments lazy loading with a button cleanly: true # Hide ‘Powered by …’ on footer, and more language: zh-CN # Force language, or auto switch by theme github_user: xxx # MUST HAVE, Your Github Username github_repo: xxx # MUST HAVE, The name of the repo you use to store Gitment comments client_id: xxx # MUST HAVE, Github client id for the Gitment client_secret: xxx # EITHER this or proxy_gateway, Github access secret token for the Gitment proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled开启enable为true就显示评论框了，不过要真正实现评论可用，需要用自己的github账号注册一个应用许可证书，即OAuth application，注册成功就生成了client_id和client_secret。步骤：你的github首页 > settings > Developer settings > OAuth Apps > New oAuth App。填写好相关信息，其中，Homepage URL和Authorization callback URL都写上你的github博客首页地址，比如https://xxx.github.io/，点击Register application即可完成注册，生成Client ID和Client Secret。这样，用户点击评论框右边登入跳转到github授权，允许授权跳转回来就可以评论啦！小坑：有些文章评论初始化弹出validation failed错误因为GitHub的每个issues有两个lables，一个是gitment，另一个是id，id取的是页面pathname，标签长度限定不超过50个字符，而像一般中文标题文章，转义后字符很容易超过50个字符。目录blog/themes/next/layout/_third-party/comments找到文件gitment.swig，在这里我用文章创建时间戳来当作id，这样长度就不会超过50个字符，成功解决！七、总结构建自己的博客并不难，也不需要什么专业代码基础，需要的是耐心而已（┭┮﹏┭┮都是配置）。PS：我的GitHub博客https://wuwhs.github.io 大佬拍轻点 ...