原创

    Hexo 搭建博客系统,一篇就够了!

    前言:本教程使用的是 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 注册

    登录 Github 官网,点击右上角 Sign up,然后出现如下注册界面:

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

    注册完成后,下图选择左边的 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: git
      repo: https://github.com/guoshizhangsz/guoshizhangsz.github.io.git
      branch: 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: git
      repo: https://github.com/guoshizhangsz/guoshizhangsz.github.io.git
      branch: 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 links
        menu:
            主页: /
            归档: /archives
            分类: /categories
            标签: /tags
            关于: /about
        # Navigation bar links to be shown on the right
        links:
            Download on GitHub:
                icon: fab fa-github
                url: 'https://github.com/ppoffice/hexo-theme-icarus'
    # Footer section link settings
    

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

    第三步,修改下图的左侧部分:

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

    widgets:
        -
            # Widget name
            type: profile
            # Where should the widget be placed, left or right
            position: left
            # Author name to be shown in the profile widget
            author: 情迷法兰西
            # Title of the author to be shown in the profile widget
            author_title: 何以得世间大自在
            # Author's current location to be shown in the profile widget
            location: 普罗旺斯
            # Path or URL to the avatar to be shown in the profile widget
            avatar: 
            # Email address for the Gravatar to be shown in the profile widget
            gravatar: 
            # Whether to show avatar image rounded or square
            avatar_rounded: true
            # Path or URL for the follow button
            follow_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 &#10084; 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 文件,照着以下修改;

    body
        background-image:url(/images/background01.jpg)
        //设置背景图不随网页的滚动而滚动
        background-attachment:fixed
        background-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
    

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

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

    阅读全文配置

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

    <!--more-->
    

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

    auto_excerpt:
        enable: true
        length: 150
    

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

    添加音乐插件

    博客如果只有文字和图片,是不是太单调了点呀,那么就来点 Music 吧。至于怎么添加音乐插件以及如何去使用音乐插件,这里就不过多介绍了。按这个链接照做就是了。https://blog.csdn.net/hushhw/article/details/88092728 ,成功后如本博客一样。在这里顺便提一下如何设置页面字体。就是打开 themes/icarus/source/css/style.styl 文件,复制以下代码,把原来的替换即可。

    body, button, input, select, textarea
        font-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: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      log: false
      model:
        use: live2d-widget-model-z16
      display:
        position: left
        width: 150
        height: 300
      mobile:
        show: true
    

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

    cnpm install live2d-widget-model-z16
    

    如图所示:

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

    配置打赏功能

    在没有设置打赏之前,页面是这样的:

    设置之后是这样的:

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

    donate:
        -
            # Donation entry name
            type: alipay
            # Qrcode image URL
            qrcode: '/images/wechat.png'
        -
            # Donation entry name
            type: wechat
            # Qrcode image URL
            qrcode: '/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 plugin
        type: valine
        app_id: UNAzhXrv3JomW84YwQoP0rPM-gzGzoHsz
        app_key: p4TeNM70w95O5YbrAsz381v7
        shortname: 不能为空
        notify: true
        verify: false
        palceholder: Say something...
        guest_info: nick,mail,link
        pagesize: 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 .container
            max-width: screen-desktop - 2 * gap
            width: 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/

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

    Hexo
    • 文章作者:GuoShiZhan
    • 创建时间:2021-08-16 13:57:23
    • 更新时间:2021-08-16 13:58:55
    • 版权声明:本文为博主原创文章,未经博主允许不得转载!
    请 在 评 论 区 留 言 哦 ~~~
    1024