Dragon Add - 欢迎使用代理访问本站 - Hexo

我的常用Hexo指令

2021-07-26T22:36:00+08:00

既然是基于Hexo搭建的博客，那么就必须要用到Hexo的指令啦！以下是分享我认识的以及我常用的指令hexo 命令： hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成静态页面至public目录 hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server） hexo deploy #部署到GitHub hexo help # 查看帮助 hexo version #查看Hexo的版本缩写：hexo n = hexo new hexo g = hexo generate hexo s = hexo server hexo d = hexo deploy在Hexo里面：复制，ctrl+ins粘贴，shift+ins我的常用Hexo指令新开文章：hexo new "我的常用Hexo指令"一般发布文章或者修改博客后需要这些操作：清除缓存>生成静态文件>启动服务器，测试没问题后再部署。因此我们可以输入以下命令：hexo clean && hexo g && hexo s最后部署到GitHub:hexo d 最后，还有一个指令也用得很多，我懒得打都是直接复制，那就是在Next主题下，给文章添加"阅读全文"的指令：把它插入你文章指定的位置，那么指令前面的文字就会显示在文章预览那里，可以起到前言的作用，读者点阅读全文进入文章主页就可以对整篇文章进行阅读了。————

关于原博客next主题的优化与定制(不再更新)

2021-07-26T22:16:00+08:00

[scode type="red"]注意，此文适合版本8.0以上Next主题，不再更新，博主已弃坑，由 Hexo 转为 Typcho[/scode]这篇文章并不是教程分享向的博文，写得不是很详细，文字排版也没有完全美化、没有参考图片。对于找到这里的你，我要说声抱歉。本文纯是博主对于自己博客美化所作的步骤顺序，出发点是为了在优化过程中若出现错误可以撤销上一步的操作。博主自己每做一步就hexo clean && hexo g && hexo s本地预览一下，如果没有出现错误就上传，否则就撤销操作。所以我做了什么？1.我做了tag ，我创建了关于，分类.2.我修改了社交打开主题配置文件，找到social字段，修改3.添加了本地搜索首先输入指令下载：npm install hexo-generator-searchdb --save修改站点配置文件，添加代码：search: path: search.xml field: post format: html limit: 10000然后打开主题配置文件，搜索 local_search，修改 enable 为 true4. 添加红心特效如何创建一个JS文件(建立一个txt文件更改后缀名为js，建立完成.)，用记事本打开.swig文件。(OS:记事本真是永远的神)。修改了，好像没有作用。（我学会了，我懒得改序号了，教程见第28点5. 显示busuanzi博客访客/访问次数统计/Github标识Github标识：在 GitHub Corners 选择自己喜欢的按钮样式并复制代码，将https://your-url换成自己的链接，将改好的代码粘贴到themes/next/layout/_layout.swig文件中下面一行。（OS:但我在文件中没有找到我的GitHub，我之前用了其他方法，这个方法是后来总结。）6. 隐藏网页底部 powered By Hexo / 强力驱动打开 themes/next/layout/_partials/footer.swig，找到：div class="powered-by，把这段代码首尾分别加上：，或者直接删除.(后续我了解到，最新版next可以在next文件中的其他文件打开开关就行)7. 显示当前浏览进度打开主题配置文件，找到back2top:，把 scrollpercent: 的false 改为 true相关代码解释：back2top: enable: true # 开启 back to top 按钮 # Back to top in sidebar. sidebar: true # true 表示在侧边栏显示，false则在侧下角 # Scroll percent label in b2t button. scrollpercent: true # 开启进度百分比8. 打开阅读进度条打开主题配置文件，找到reading_progress:，把false 改为 true相关代码解释：# Reading progress bar reading_progress: enable: true # 开启进度条 # Available values: top | bottom position: bottom # 设置位置可以为 top | bottom color: "#37c6c0" # 进度条颜色 16进制RGB height: 3px # 高度9. 文章置顶功能1. 卸载原插件和安装置顶插件，执行下面两行命令：npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top –save2. 然后在需要置顶的文章的Front-matter中加上top: true3. 设置置顶标志：打开：/themes/next/layout/_macro目录下的post.swig文件，定位到

标签下，插入如下代码：{% if post.top %} 置顶 | {% endif %}3.1 如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：title: a top: 110. 文章字数统计和阅读时长估计根目录输入指令下载插件：npm install hexo-symbols-count-time 11. 头像放左右Pisces或Gemini方案，打开themes/next/下的_config.yml，查找sidebar，将想要的方案打开。（在这里出现了一些问题。不知所以然就改好了。但是我被惊出了一身汗，因为我没有备份配置文件就立刻改了，而且我还是在改了12点后预览才发现无法配置。于是我在11、12两点反复改动。我下次改一次之前必备份一次，并且只改一点，绝不多改。太可怕了。后果很严重，严重到关站大吉。）12. 显示版权信息打开themes/next/下的_config.yml，查找creative_commons，将post的false改为true即可显示版权信息13. 为博客加上看板娘Git输入下方代码：npm install -save hexo-helper-live2d然后在根目录的配置文件 _config.yml中添加参数：live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false log: false model: use: live2d-widget-model-<你喜欢的模型名字> display: position: right width: 150 height: 300 mobile: show: true（预览图）在站点目录下建文件夹live2d_models，再在live2d_models下建文件夹<你喜欢的模型名字>,再在<你喜欢的模型名字>下建json文件，文件名为：<你喜欢的模型名字>.model.json安装模型。在命令行（即Git Bash）运行以下命令即可：npm install --save live2d-widget-model-<你喜欢的模型名字>OS:1. 在写名字的时候，记得把<>删掉想看预览图来这里看：https://blog.csdn.net/as480133937/article/details/100138838 (自己找到那个为博客添加妹子的位置。)14. 使博客底部的爱心跳动打开主题配置文件，搜索animated:，把false改为true15. tag 样式# 改为带图标打开主题配置文件，找到tag_icon:，把false改为true16. 文章结束语标语打开 themes/next/layout/_macro/post.swig 文件，找到文章结束语标语END POST BODY位置，复制以下代码，将其插入。

{% if not is_index %}

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

{% endif %}

17. 主题样式调色，打开\themes\next\source\css\_variables\base.styl，找到colors for use across theme.，可以参考以下一位博主的修改，该主题为紫色。// Colors // colors for use across theme. // -------------------------------------------------- $whitesmoke = #daa5ff; // 菜单栏当前菜单，归档线条 $gainsboro = #e3c6f0; // 菜单栏头像边框，分割线。单行代码块 $gray-lighter = #cccedd; // 菜单栏子标题 $grey-light = #ab2acc; // 菜单栏文章计数器 $grey = #6a2dbb; // 时间节点 $grey-dark = #67439a; // 菜单栏博主卡片区文字【描述|日志|分类|标签】 $grey-dim = #9059bf; $black-light = #3d155a; // 文章正文颜色 $black-dim = #5b2293; $black-deep = #6947bb; // 菜单栏背景补充: 以上#数字字母为RGB的16进制18. 背景动画，Canvas-nest风格、JavaScript 3D library风格、Canvas-ribbon风格。我终于知道这是怎么弄的！！网上很多教程都没有更新。我走了很多弯路。原来我所用的next版本都没有下载这些动画包。需要自己下载。链接就在注释中``# Dependencies 项后面。例如我下载第一种，即选择Canvas-nest风格，在主目录执行：git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest然后打开themes/next/下的_config.yml文件，搜索Canvas-nest，将canvas_nest的中enable值改为true即可。如果没有这段代码，需要自行添加：# 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同理，其他两种动画包也要自行下载，下载指令为：Git clone 动画链接 themes/next/source/lib/(动画链接后面next-后面的名称)请自行领悟参考我下载Canvas-nest风格的指令(至2021.7.17，我的博客用了两个动画，nest和ribbon19. 去掉文章目录标题的自动编号。我们自己写文章的时候一般都会自己带上标题编号，但是默认的主题会给我们带上编号，很是别扭，如何去掉呢？在主题配置文件中找到toc属性，将其中的number属性设置成false，如下：toc: enable: true number: false wrap: false20. 加头像把你要加的头像复制粘贴到\themes\next\source\images文件下，名称为avatar.gif（后缀可为jpg，自己变通），在主题配置文件_config.yml里面找到avatar，以下：avatar: url: /images/avatar.jpg # 设置头像资源的位置 rounded: true # 开启圆形头像 opacity: 1 # 不透明的比例：0就是完全透明 rotated: false # 不开启旋转 21. 不蒜子统计与live2D看板娘冲突问题使用next新的主题时，在hexo中添加live2D看板娘后next原生自带的不蒜子统计会失效，解决方法：1). 卸载live2d可以解决问题：npm uninstall --save hexo-helper-live2d2). 看板娘怎么可以卸载？？？？？绝对不能接受！！！a. 关闭next原生不蒜子打开主题配置文件，搜索busuanzi_count:，把false改为trueb. 修复主页总数统计在Hexo根目录/themes/next/layout/_partials/文件夹中修改 footer.swig，在最后一行前加入代码：
总访客人 | 访问总量次 {{- next_inject('footer') }}c. 修复文章统计开启主题配置文件 - valine 评论中的 visitor 开关来替代不蒜子的统计功能。22. 修改文字模板在根目录下，找到scaffolds/post.md，将其修改为你需要的模式，新建文章就是模板的形式了,可以参考我的:title: {{ title }} date: {{ date }} categories: tags: top: 23. 增加赞赏功能在微信、支付宝中拿到赞赏码、付款码图片，放入themes/next/source/images文件夹中。比如我的是 wechatpay.jpg和alipay.jpg，修改主题配置文件，找到reward_settings:，打开enbale，填写comment，在下面的reward:，填写图片路径。如果你不喜欢Donate、 Wechat Pay 和 Alipay这样的字眼，可以在 themes/next/languages/zh-CN.yml 中自行翻译。24. 啊啊啊啊啊，我终于搞定圆角和阴影了1) 圆角首先把主题配置文件，取消 variables.styl 的注释（即去掉#），然后在根目录source创立_data文件夹，然后创建记事本variables.styl，在里面输入以下代码：// 圆角设置 $border-radius-inner = 20px 20px 20px 20px; $border-radius = 20px;2) 阴影在根目录source的 _data文件夹创建记事本style.styl，在里面输入以下代码： // 主页文章添加阴影效果 .post { margin-top: 60px; padding: 20px; margin-bottom: 60px; -webkit-box-shadow: 0 0 5px rgba(120, 128, 114, 1.5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); }25. 添加背景图片把想设置的背景放入/themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下的_data/styles.styl，输入以下代码：body { background:url(/images/background.jpg); background-repeat: no-repeat; background-attachment:fixed; background-position:100% 100%; }(记得在主题_config.yml文件中打开styles.styl的注释。26. 博客内容透明化在根目录的source文件夹下的_data/styles.styl，输入以下代码：//博客内容透明化 //文章内容的透明度设置 .content-wrap { opacity: 0.9; } //侧边框的透明度设置 .sidebar { opacity: 0.9; } //菜单栏的透明度设置 .header-inner { background: rgba(255,255,255,0.9); } //搜索框（local-search）的透明度设置 .popup { opacity: 0.9; }27. 修改文章链接样式为蓝色高亮显示找到文件 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; } }28. 啊啊啊啊我终于学会了添加鼠标点击特效了！！1) 第一个是烟花特效：a. 首先创建文件，写代码在themes/next/source/js/src (如果没有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 {% endif %}c. 最后打开开关打开主题配置文件，在里面最后写下：# Fireworks fireworks: true2) 另外一个爱心特效：a. 首先创建文件，写代码在/themes/next/source/js/src下新建文件 clicklove.js ，接着把下面的代码拷贝粘贴到 clicklove.js 文件中：!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e OS: 记住！！！这两种特效可以同时选，如果要只选爱心，要把烟花fireworks的true改为false。(目前没有做过如何把爱心关掉)29. 侧边栏推荐阅读打开主题配置文件修改成这样就行了 (links 里面写你想要的链接)：（参考我的）# Blog rolls links_settings: icon: fa fa-link title: 推荐阅读 # Available values: block | inline layout: block links: 提问的智慧: https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md31. 关于主页分页问题等到我文章足够多的时候来看看：https://blog.csdn.net/weixin_43941364/article/details/10416696732. 优化文章永久链接为数字编号1) 在博客根目录（执行hexo命令的地方）安装插件：npm install hexo-abbrlink –save2) 打开博客根目录下的站点配置文件_config.yml，修改如下配置：#permalink: :year/:month/:day/:title/ #permalink_defaults: permalink: posts/:abbrlink/ abbrlink: alg: crc32 #support crc16(default) and crc32 rep: dec #support dec(default) and hex不同算法和进制生成不同的格式，以下为说明：crc16 & hex https://post.zz173.com/posts/66c8.html crc16 & dec https://post.zz173.com/posts/65535.html crc32 & hex https://post.zz173.com/posts/8ddf18fb.html crc32 & dec https://post.zz173.com/posts/1690090958.html3) 使用hexo clean && hexo g重新生成博客，该插件会在每篇文章的开头增加内容：abbrlink: （随机生成你选择的格式）这个字符串就是这篇文章的唯一标识，无论修改标题还是发布文章都不会改变。33. 主动被谷歌搜索引擎收录我终于搞定了。在我拥有自己的域名后。看篇文章吧。这位博主写得真的太棒了。《Hexo 博客主流搜索引擎收录详细指南》1) 首先安装插件：npm install hexo-generator-sitemap --save安装插件以后，执行 hexo g 命令，即可在 public 文件夹下找到新生成的 sitemap.xml 文件。2) 验证域名登陆 Google Search Console 可以看到有两种资源类型，因为现在我已经有自己的域名了，是没有任何前缀的裸域名，所以我选择「网域验证」。（还没有自己的域名的，很抱歉，建议继续谷歌其他的教程。进行「网域验证」，则需要通过 DNS 记录来验证域名所有权。复制这一步中出现的 TXT 记录值，然后进到域名解析服务商的管理界面，比如我的是阿里云云解析DNS/域名解析/解析设置，添加记录—记录类型为TXT，主机记录为@，解析线路为境外。添加解析成功后，回到Google Search Console，点击「验证」按钮，即可完成验证。3) 提交站点地图验证域名所有权之后，进入 GSC 后台管理界面，输入 sitemap 地址并点击提交即可（参考我的https://自己的域名/sitemap.xml）。谷歌的收录是比较快速的，两天左右就能够在谷歌通过 site:博客网址的方式检索到收录结果了。34. 我成功把博客部署到 Coding上，可以不用买域名。35. ...(未完待续)99. 警醒自己“博客的意义还是在于不断创作内容，而不是折腾博客框架与配置。”那些我在学习过程中遇到的开拓者Yiwei Zhang的博客小丁的博客Han' s BlogConstOwn的博客小沃博客vic博客林杉博客............

基于Hexo + Github Pages 免费搭建博客

2021-07-26T12:09:00+08:00

title: 基于Hexo + Github Pages 免费搭建博客category: 博客tags:Hexo博客abbrlink: 4022353000date: 2021-07-19 13:42:57"当你不知道该写什么的时候就写如何搭建博客"前言：博客有非常多的第三方平台，比较早的有博客园、CSDN，现有简书、掘金、知乎专栏以及微信公众号等等。我们可以直接在上面发表内容，交互人性化，能够被搜索引擎检索到。但是这总归是别人的平台，写作内容或多或少会受限，这时候就希望能有自己的博客。于是鄙人经过不停谷歌，最终采用了 Hexo + Github Pages 的方式搭建自己的博客。此方法全过程需要有一定的动手能力与时间、耐心，工具仅仅需要一台能够科学上网的电脑即可。Github Page 是 Github 提供的一种免费的静态网页托管服务可以用来托管博客、项目官网等静态网页。参考大佬：【效率为王】超详细 Hexo + Github Pages 博客搭建教程超详细Hexo+Github Page搭建技术博客教程：hexo搭建个人博客Windows下，Hexo+GitHub搭建博客从零开始搭建个人博客（超详细）韦阳的博客技术拆解官总结注意！！此总结并不是教程分享向的博文，写得不是很详细，文字排版也没有完全美化、没有参考图片。强烈建议你参考推荐的大佬链接一. 先注册一个GitHub账号，并且按照格式要求创建你的仓库。确保你的仓库是public。仓库名一定要是：用户名.github.io二. 下载git。参考：https://www.huaweicloud.com/articles/a309afc2a9bcf498763ab43770993587.html三. 配置git与其他工作。1. 桌面右键打开 Git Bash，分别输入以下指令，将git与GitHub账号绑定。git config --global user.name "github 用户名" git config --global user.email "github 注册邮箱" 2. 接着继续输入以下指令，从而生成 ssh 密钥文件，输入如下命令后直接三次回车即可。ssh-keygen -t rsa -C "github 注册邮箱" 3. 在完成2后会在C盘用户路径生成.ssh的文件，里面有id_rsa和id_rsa.pub两个文件，前者是我们私有的，而后者则是对外开放的。用记事本或其他合适的软件打开id_rsa.pub文件，复制里面的密钥。4. 然后打开GitHub——头像——Settings——SSH and GPG Keys页面创建一个新的 SSH key，填写Title和Key，Title可以随意，而Key的内容则是我们刚才复制的id_rsa.pub中的内容，最后点击Add SSH key即可；5. 去官网下载最新的稳定版Node.JS.6. 鼠标右键任意地方，选择Git Bash，使用以下命令安装hexo.npm install hexo-cli -g npm install hexo-deployer-git --save7. 找一个磁盘新建一个文件夹用于存放你的博客，然后进入该文件夹，鼠标右键选择“Git Bash”，分别输入以下命令。hexo init npm install hexo g hexo s此时会在本地开启一个http服务，监听4000端口，我们可以在浏览器访问http://127.0.0.1:4000可以通过键盘快捷键 Ctrl+C 停止服务。(说一下：笔记本的insert键为粘贴，方向键向上为上一段指令，向下为下一段指令，继续向下为虚无.8. 在完成第4步的基础上.首次使用还需要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You've successfully authenticated, but GitHub does not provide shell access. 内容，则证明添加成功任意位置右键打开Git Bash，输入以下命令，使用私人密钥与GitHub进行认证和通信。ssh -T git@github.com9. 打开第7步你创建的博客文件找到根目录的_config.yml这个文件，用合适的编辑器打开它（记事本等），拉到最后，输入以下格式内容后，保存退出。type: git repository: git@github.com:*********/*********.github.io.git branch: master备注：(1)hexo的配置文件中任何一个“：”后面都是带一个空格的。(2)repository后面的内容是你第一步创建库的时候生成的SSH地址。10. 最后,在你的博客文件位置右键打开Git Bash，输入以下指令。hexo g hexo d大功告成。这时可以登陆Github查看代码是否已经上传到你对应的Repository，在浏览器访问：用户名.github.io就能看到自己的博客了。第一次访问地址可能访问不了，您可以在几分钟后进行访问，一般不超过10分钟。11. 博客主题美化基于Hexo搭建的博客有着非常多的主题，在此博主搭配的是Next主题。在这里分享几个大佬教程。羽毛工作室教程超详细，超全面(两万字)hexo史上最全搭建教程从零开始搭建个人博客（超详细）不才陈某技术博客（下一篇会总结自己博客主题美化过程。）博客真正的意义在于不断创作内容，而不是折腾博客框架与配置。开始发表你的第一篇博文吧！答疑在认真学习网上很多教程的时候，应用在自己的网站上总会出现一些问题。以下是遇到的一些问题。1. 选择博客Next四个主题那里出现的问题。（在后续主题美化时候我会总结出来）2. 标题：解决hexo本地与部署不一致问题。hexo博客在本地可以正常预览,部署到github上后为什么无法显示样式,只有内容呢？请修改_config.yml的url的值为你的网站主URL（如：https://xxx.github.io）。如何不在家，也能隨時隨地寫文章？ Hexo 博客备份与恢复在Github上备份Hexo博客那些在学习过程中遇到的开拓者认识我的hexo易百教程苦心孤诣十佳评测万书涛的个人博客青山绿水幼稚园园长GitHub 汉化插件......