欢迎访问我的 hexo 博客：https://guoshizhan.github.io

前言：本教程使用的是 Windows 操作系统，所使用的编辑软件是 notepad++，不要使用记事本或者 Editplus 等编辑软件，会导致乱码从而报错。本博客使用的主题是 icarus，所以主要针对这个主题进行美化。先学会配置这一个主题，然后你再自己去配置自己喜欢的主题。代码顶部左边是代码所处文件的位置，代码的右上角有个小图标，点击即可复制。后期我会把博客版本打包分享给大家，或者推送到 GitHub 分享。

第一阶段：Blog 的环境搭建

下载 NodeJs 软件

访问官网：www.nodejs.org 选择 LTS 版本即可，如下图所示：

安装 NodeJs

安装后 cmd 查看版本，如下图所示:

//查看node版本node -v
//查看npm版本npm -v

安装淘宝镜像

回到命令行下，把以下代码复制到命令行中即可安装淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后，查看 cnpm 版本,截图如下：

cnpm -v

安装 hexo 并验证

安装 hexo 命令如下：

cnpm install -g hexo-cli

验证 hexo 是否安装成功,截图如下：

hexo -v

创建 Blog 目录

在自己的任何一个盘符上创建一个文件夹，名字随意，建议为 Blog，这个目录必须为空，不要安装或者添加其他的文件，否则会报错。在以后的操作中，都是基于这个目录操作的。如果其间出现问题，都可以把这个目录下的所有文件删除掉，再重新来过。至此，第一阶段结束。以下是我的 Blog 目录演示：

到此为止，博客的环境搭建就完成了。接下来请阅读：第二阶段：Blog 的初始化和 Git 部署。

第二阶段：初始化和 Git 部署

Git 的下载安装

访问官网：www.git-scm.com/download/ 选择相应操作系统下载安装即可。安装完成之后，点击鼠标右键会出现 Git GUI Here 和 Git Bash Here，如下图所示：

打开 Git 窗口

进入到 Blog 目录，点击鼠标右键，选择 Git Bash Here，如下图所示：

初始化博客

初始化命令如下：

# 初始化命令
hexo init

初始化完成之后截图如下：

启动博客

初始化完成之后就可以启动博客了，启动命令为 “hexo s” ，默认访问地址是:localhost:4000/，如下图所示：

以下是博客的默认主题 landscape，界面如下：

Github 注册

填写完用户名、邮箱和密码之后，然后验证，再点击蓝色的创建按钮即可，如下图：

注册完成后，下图选择左边的 0 元

后面有一些题目，跳过即可，然后你的邮箱会收到 GitHub 的验证消息，然后验证，你就有了Github 账号。示例如下：

创建 Github 仓库

新建一个 GitHub 仓库，点击右上角“+”号，然后 New repository，如下图：

非常非常重要的一点，仓库的名字是固定的。格式必须为：GitHub昵称.github.io，填完仓库名点击绿色按钮即可，示例如下：

安装 GitHub 部署插件

这一步要先进入到 Blog 目录下，然后点击鼠标右键 Git Bash Here，然后使用以下命令安装插件：

cnpm install --save hexo-deployer-git

完成之后如下图所示：

配置关键信息，使用 notepad++ 打开 Blog 目录下的 _config.yml 配置文件，按以下配置进行修改：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:type: gitrepo: https://github.com/guoshizhangsz/guoshizhangsz.github.io.gitbranch: master

上面的 repo 地址就是你的 GitHub 仓库的地址，打开 GitHub，进入到你的博客仓库，选择 HTTPS，如下图所示：

修改完成之后，保存即可。

把博客部署到 GitHub

此时确保在 Blog 目录下，然后使用以下命令：

hexo d

【期间可能遇到填写邮箱和用户名或者密码等问题】此时要输入 GitHub 账号，如下图所示；

然后输入 GitHub 密码：如下图所示：

部署到 GitHub 成功的标志，如下图：

访问自己的博客

在浏览器地址栏中输入 Github昵称.github.io 即可访问，示例如下图：

到此为止，整个博客的搭建以及部署已经完成了。如果需要更换自己的博客主题，或者添加各种插件美化自己的博客，那就请往下阅读：第三阶段：Blog 的基本美化。

第三阶段：Blog 的基本美化

配置 icarus 主题

第一步，在 Blog 目录下打开 Git Bash Here,然后复制以下命令，粘贴到 Git 窗口：

git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

完成之后，如下图所示：

使用 notepad++，把 Blog 目录下的配置文件 _config.yml 打开，然后划到此文件最底部，找到 theme 这个单词，把它的值改为 icarus 即可，如下图命令所示：（以后你换其他的主题，都是这样。）

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: icarus
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:type: gitrepo: https://github.com/guoshizhangsz/guoshizhangsz.github.io.gitbranch: master

第二步，修改完成后保存，回到 Git 窗口按顺序执行以下三个命令：

# 把原先编译的文件清理
hexo clean
# 把配置的信息内容生成
hexo g
# 启动hexo
hexo s

打开浏览器访问 4000 端口，如看到以下界面，则代表主题配置成功。

设置主题语言为中文

打开 blog 目录下的配置文件 _config.yml，在最顶部 language 那里，把 en 修改为 zh-CN 即可，如下命令所示：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/# Site
title: Guo-Blog
subtitle: ''
description: '这是我的hexo博客'
keywords:
author: guoshizhangsz
language: zh-CN
timezone: ''

修改完成之后保存，hexo g,hexo s 即可。若看到以下蓝色框部分是中文，那么语言修改成功了。如图所示：

第二步，修改顶部红色框标记的那些英文。进入到 Blog 目录，然后进入 themes 目录，然后进入 icarus 目录，打开配置文件 _config.yml，找到 navbar，修改如下所示：

navbar:# Navigation bar menu linksmenu:主页: /归档: /archives分类: /categories标签: /tags关于: /about# Navigation bar links to be shown on the rightlinks:Download on GitHub:icon: fab fa-githuburl: 'https://github.com/ppoffice/hexo-theme-icarus'
# Footer section link settings

修改完成之后保存，hexo g,hexo s即可。若结果和下图一样，那么修改成功！

第三步，修改下图的左侧部分：

仍然打开 themes / icarus 下的配置文件，修改如下：

widgets:-# Widget nametype: profile# Where should the widget be placed, left or rightposition: left# Author name to be shown in the profile widgetauthor: 情迷法兰西# Title of the author to be shown in the profile widgetauthor_title: 何以得世间大自在# Author's current location to be shown in the profile widgetlocation: 普罗旺斯# Path or URL to the avatar to be shown in the profile widgetavatar: # Email address for the Gravatar to be shown in the profile widgetgravatar: # Whether to show avatar image rounded or squareavatar_rounded: true# Path or URL for the follow buttonfollow_link: 'https://github.com/guoshizhangsz'# Links to be shown on the bottom of the profile widget

把自己的名字、标题和位置修改就行了。还有一项，把这个配置文件的115行和120行修改为 true。建议把它修改为 true。不修改的话，左右两边侧栏会随着页面的滚动而滚动。到这里为止，icarus 主题的基本美化就搞定了。最终效果如下图：

设置网站底部

第一步，在网站底部配置运行时间和总访问量。打开 footer.ejs 这个文件，把里面的内容清空，再把以下代码复制进去。

<footer class="footer"><div class="container"><div class="level"><div class="level-start has-text-centered-mobile"><a class="footer-logo is-block has-mb-6" href="<%- url_for('/') %>"><% if (has_config('logo.text') && get_config('logo.text')) { %><%= get_config('logo.text') %><% } else { %><img src="<%- url_for(get_config('logo')) %>" alt="<%= get_config('title') %>" height="28"><% } %></a><p class="is-size-7">&copy; <%= date(new Date(), 'YYYY') %> <%= get_config('author') || get_config('title') %>&nbsp;Powered ❤ ShiZhan·Guo</p></div><script>(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script>      <div class="level-end"><% if (has_config('footer.links')) { %><div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle"><% let links = get_config('footer.links'); %><% for (let name in links) {let link = links[name]; %><p class="control"><a class="button is-white <%= typeof(link) !== 'string' ? 'is-large' : '' %>" target="_blank" title="<%= name %>" href="<%= url_for(typeof(link) === 'string' ? link : link.url) %>"><% if (typeof(link) === 'string') { %><%= name %><% } else { %><i class="<%= link.icon %>"></i><% } %></a></p><% } %></div><% } %></div><div align="center"><span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span><script>var now = new Date(); function createtime() { var grt= new Date("12/17/2019 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><div align="center"><span id="busuanzi_container_site_pv" class="theme-info">本站总访问量- <span id="busuanzi_value_site_pv"></span> -次</span><span id="busuanzi_container_site_uv" class="theme-info">您是第- <span id="busuanzi_value_site_uv"></span> -位小伙伴</span><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></div><span><script type="text/javascript" src="//rf.revolvermaps.com/0/0/2.js?i=0xetp0d4rdh&amp;m=7&amp;s=100&amp;c=ff0000&amp;t=1" async="async"></script></span><script>(function(){var bp = document.createElement('script');bp.src = '//push.zhanzhang.baidu.com/push.js';var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script></div></div><script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>
</footer>

复制完成之后保存，回到 git 窗口，使用 pwd 目录查看当前所处的目录，如果不是在 Blog 目录下，请切换到这个目录，然后 hexo g,hexo s。最终效果如图：

动态背景和点击特效

把以下代码复制到 icarus / layout / layout.ejs 里面 </body> 上一行即可。

<!--落花的特效--><script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/sakura.js"></script><!--鼠标点击效果--><canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> <script type="text/javascript" src="/js/fireworks.js"></script>

然后去 js 文件夹下建一个 fireworks.js 文件，名字必须是 fireworks.js。点击右上角复制代码，粘贴到 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)};

然后 hexo clean,hexo g,hexo s 即可。若具有点击效果和落花背景，那么你已经成功了。如下图：

背景图和头像

打开 style.styl 文件，照着以下修改；

bodybackground-image:url(/images/background01.jpg)//设置背景图不随网页的滚动而滚动background-attachment:fixedbackground-repeat: no-repeat

background01.jpg是themes/icarus/source/images文件夹下的图片，自己在这个文件夹添加自己的背景图片即可，图片名字随意。然后把avatar.png图片删掉，换一个你自己喜欢的头像，但名字仍然要是avatar.png,这样就修改好了博客头像。当然可以去其他地方进行配置，这就自己去研究了。然后hexo clean,hexo g,hexo s。最终效果如下图：

最后顺便说一下，这只是 hexo 里面的一个主题而已，如果你想要配置其他主题，那么请访问 hexo 的官网自行进行选择：https://hexo.io/themes/，配置可能不一样，但也相似。到这里，Blog 的基本美化就结束了。如需更高级配置，请阅读第四阶段：blog 高级美化，添加评论插件，看板娘配置，网易云音乐配置，分享配置，打赏配置等！

第四阶段：Blog 的高级美化

新建文章

在 blog 目录下打开 Git 窗口，使用以下命令新建文章：

hexo n "My-First-Blog"

如下图所示：

文章目录在Blog/source/_posts下，这个时候只有一个My-First-Blog.md文件，如下图：

编辑这个文件，使用 markdown 语法即可。写完之后就是你的第一篇博客文章了。

安装文章插件

文章插件的作用就是生成文章的同时还带有一个文件夹，把图片放在这个文件夹里，这样保证在浏览博客文章时图片不显示的问题。安装命令如下：

cnpm install https://github.com/CodeFalling/hexo-asset-image --save

如图所示：

如果使用以下命令安装，那么可能报错或者没有效果。如图所示：

npm install https://github.com/CodeFalling/hexo-asset-image --save

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9ndW9zaGl6aGFuLmNsdWIvSU1HLVRFTVAvSW5zdGl0dXRpb24vYmxvZy9ibG9nLWFydGljbGU1MC5wbmc?x-oss-process=image/format,png

安装完成之后去blog目录下的配置文件中修改 post_asset_folder，把它的值改为 true，然后保存。回到 Git 窗口，重新使用新建文章命令，如图所示：

然后到Blog/source/_posts目录下，你可以看到有一个和文章同名的文件夹生成，如图所示：

阅读全文配置

写博客时想把文章的多少内容显示出来，就在那个地方加以下代码：

<!--more-->

或者在主题配置文件最后加入以下代码：

auto_excerpt:enable: truelength: 150

接下来的就是自己写博客发博客了。至于怎么写博客，这里就不在多赘述了。有问题在评论区留言哦！

添加音乐插件

博客如果只有文字和图片是不是太单调了，那么就来点音乐吧。至于怎么添加音乐，这里就不介绍了。按这个链接照做就是了。https://blog.csdn.net/hushhw/article/details/88092728 成功后的图片如下：

在这里顺便提一下如何设置页面字体。打开themes/icarus/source/css/style.styl文件，复制以下代码，把原来的替换即可。

body, button, input, select, textareafont-family: "SimHei", "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", "sans-serif","family-sans"

添加看板娘插件

在 blog 目录下打开 Git 窗口，输入以下命令：

cnpm install --save hexo-helper-live2d

如图所示：

然后到 Blog 下的配置文件 _config.yml 中末尾加入以下代码：

# 看板娘插件
live2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falselog: falsemodel:use: live2d-widget-model-hibikidisplay:position: leftwidth: 150height: 300mobile:show: true

如下图所示：

然后保存。回到 Git 窗口，这里要注意：上图橙色框部分要和下面 install 后面的模型要一致，否则没有效果。现在使用以下命令来安装看板娘模型：

cnpm install live2d-widget-model-z16

如图所示：

最后生成启动 hexo g,hexo s。安装成功后，如下图所示：

配置打赏功能

在没有设置打赏之前，页面是这样的：

设置之后是这样的：

其实设置特别简单。打开 themes/icarus/_config.yml 文件，按以下方式进行修改：

donate:-# Donation entry nametype: alipay# Qrcode image URLqrcode: '/images/wechat.png'-# Donation entry nametype: wechat# Qrcode image URLqrcode: '/images/wechat.png'
#    -# Donation entry name#type: paypal# Paypal business ID or email address#business: ''# Currency code#currency_code: USD
#    -# Donation entry name#type: patreon# URL to the Patreon page#url: ''e

就是把你的微信或支付宝收款码放到 icarus/source/images 目录下，上述图片路径就是这个路径。其他的打赏方式注释或者删除掉就可以了。若要保留，给它们配置图片即可。好了，打赏功能就配置好了。

配置评论功能

评论功能和打赏功能是一样的。把以下代码覆盖 themes/icarus/_config.yml 文件下的 comment 那一部分即可：

comment:# Name of the comment plugintype: valineapp_id: UNAzhXrv3JomW84YwQoP0rPM-gzGzoHszapp_key: p4TeNM70w95O5YbrAsz381v7shortname: 不能为空notify: trueverify: falsepalceholder: Say something...guest_info: nick,mail,linkpagesize: 10

这里要说明一下，app_id 和 app_key 是需要自己去注册获取的，我这个应用 ID 可能以后会删除。这是注册应用的地址：https://leancloud.cn/dashboard/login.html#/signin ,具体的使用方法就自己百度一下了，我就不在这里过多的阐述。

然后保存，运行之后的效果如下图：

双栏布局

首页有左右侧边栏，其他页面只有左边侧边栏，这样可以在阅读文章的时候更舒服。

+++ includes / helpers / layout.js
hexo.extend.helper.register('column_count', function () {let columns = 1;
+       if (this.page.__post === true || this.page.__page === true) {
+           return 2;
+       }const hasColumn = hexo.extend.helper.get('has_column').bind(this);columns += hasColumn('left') ? 1 : 0;columns += hasColumn('right') ? 1 : 0;return columns;});+++ layout / common / widget.ejs
<div class="column <%= side_column_class() %> <%= visibility_class() %> <%= order_class() %> column-<%= position %> <%= sticky_class(position) %>"><% get_widgets(position).forEach(widget => {%><%- _partial('widget/' + widget.type, { widget }) %><% }) %><% if (position === 'left') { %>
-       <div class="column-right-shadow is-hidden-widescreen <%= sticky_class('right') %>">
+       <div class="column-right-shadow <%= (page.__page !== true && page.__post !== true) ? 'is-hidden-widescreen' : '' %> <%= sticky_class('right') %>"><% get_widgets('right').forEach(widget => {%><%- _partial('widget/' + widget.type, { widget }) %><% }) %></div><% } %>
</div>
<% } %>+++ b/layout/layout.ejs<section class="section"><div class="container"><div class="columns"><div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div><%- _partial('common/widget', { position: 'left' }) %>
+               <% if (page.__page !== true && page.__post !== true) { %><%- partial('common/widget', { position: 'right' }) %>
+               <% } %></div></div></section>

文章区域放宽：这个文章内容区域是 12 格布局，可以修改 source / css / style.styl 文件中的 @media screen 样式如下：

+++ css / style.styl
@media screen and (min-width: screen-widescreen).is-1-column .container.is-2-column .container
-       max-width: screen-desktop - 2 * gap
+       max-width: screen-widescreen - 2 * gap
-       width: screen-desktop - 2 * gap
+       width: screen-widescreen - 2 * gap
@media screen and (min-width: screen-fullhd).is-2-column .container
-       max-width: screen-widescreen - 2 * gap
+       max-width: screen-fullhd - 2 * gap
-       width: screen-widescreen - 2 * gap
+       width: screen-fullhd - 2 * gap.is-1-column .containermax-width: screen-desktop - 2 * gapwidth: screen-desktop - 2 * gap

再修改 layout / layout.ejs 和 layout / common / widget.ejs 的文件内容如下：

+++ layout / layout.ejs<% function main_column_class() {switch (column_count()) {case 1:return 'is-12';case 2:return 'is-8-tablet is-9-desktop is-9-widescreen';case 3:return 'is-8-tablet is-8-desktop is-6-widescreen'}return '';} %>+++ layout / common / widget.ejs
<% function side_column_class() {switch (column_count()) {case 2:return 'is-4-tablet is-3-desktop is-3-widescreen';case 3:return 'is-4-tablet is-4-desktop is-3-widescreen';}return '';
} %>

实现之后的效果就如本博客所示了，首页三栏展示，文章和菜单页两栏展示。以下是我参考的两篇文章：
推荐文章地址01：https://dp2px.com/2019/06/04/icarus-theme/
推荐文章地址02：https://www.alphalxy.com/2019/03/customize-icarus/

到这里，博客的基本效果就有了，基本功能也实现了。如果还需要更加高级的配置，可以在评论区留言一起探讨，欢迎大家在评论区留言哦！

从 0 开始搭建 Hexo 博客相关推荐

使用 Debian 从 0 开始搭建 hexo 博客
Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. Hexo 产生的静态文件只要放到任何支持 html ...
搭建hexo博客历程二- Gitee版（主要解决404和样式丢失）
前期的GitHub版搭建hexo博客前期的node .hexo等等都已经配置完成,只需要在Gitee上建库,以及修改一些配置.继续依葫芦画瓢,在Gitee上画出来.例如 https://gitee. ...
阿里云Serverless 极速搭建Hexo博客
阿里云Serverless 极速搭建Hexo博客阿里云Serverless 极速搭建Hexo博客地址开通函数计算服务安装Serverless Devs命令行工具安装Node.js环境. 解压 ...
腾讯云搭建hexo博客
title: 腾讯云搭建hexo博客 tags: hexo,腾讯云文章目录 title: 腾讯云搭建hexo博客 tags: hexo,腾讯云 @[toc] 1. 腾讯云学生认证购买重置密码和网 ...
史上最详细“截图”搭建Hexo博客——For Windows
http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...
python公众号留言功能_搭建hexo博客给公众号制作留言功能
大家都知道,18年3月份后注册的公众号都不给留言功能了,作为主要以技术文章为主的公众号,没有留言功能真是不方便.周末这两天我就一直在折腾这个留言功能,借助博客的留言功能,放在阅读原文里.昨天晚上终于折 ...
搭建hexo博客给公众号制作留言功能
此文首发于公众号「Python知识圈」,欢迎直接去公众号观看. 阅读文本大概需要 5 分钟. 大家都知道,今年注册的公号都不给留言功能了,作为主要以技术文章为主的公众号,没有留言功能真是不方便.上周 ...
centos7搭建hexo博客步骤
安装插件 1.nodejs wget https://nodejs.org/dist/v14.17.4/node-v14.17.4-linux-x64.tar.xz tar -xvf node-v14 ...
Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置
根据下面的教程搭建的博客见这里前言马上要进入研究生了,不能再过浑浑噩噩的日子了,搭建一个小网站,用于记录自己所学的东西.其实,之前在腾讯云1元乞丐版上也搭建过博客,但是呢,只用来扯淡了.这次使用 ...

从 0 开始搭建 Hexo 博客

第一阶段：Blog 的环境搭建

下载 NodeJs 软件

安装 NodeJs

安装淘宝镜像

安装 hexo 并验证

创建 Blog 目录

第二阶段：初始化和 Git 部署

Git 的下载安装

打开 Git 窗口

初始化博客

启动博客

Github 注册

创建 Github 仓库

安装 GitHub 部署插件

把博客部署到 GitHub

访问自己的博客

第三阶段：Blog 的基本美化

配置 icarus 主题

设置主题语言为中文

设置网站底部

动态背景和点击特效

背景图和头像

第四阶段：Blog 的高级美化

新建文章

安装文章插件

阅读全文配置

添加音乐插件

添加看板娘插件

配置打赏功能

配置评论功能

双栏布局

从 0 开始搭建 Hexo 博客相关推荐

最新文章

热门文章