博客页脚自定义

来源：博客底部运行时间

  1. 打开_config.butterfly.yml文件，更改footer_bg设置。

    1
    footer_bg: transparent

  2. 在/source/css/custom.css文件中插入。

    1
    2
    3
    4
    5
    6
    7
    /*页脚设置*/
    #footer:before {
        content: none !important;
    }
    #footer-wrap {
    	color: #4c4948
    }

    随后，博客页脚与博客主体融为一体，页脚字体清晰，没有之前那种颜色差带来的割裂感。

  3. 页脚底部设置网站运行时间。

    打开_config.butterfly.yml文件，更改custom_text设置。

    1
    custom_text: <div class="footer_custom_text_motto">弃我去者，昨日之日不可留；乱我心者，今日之日多烦忧</div><div id="runtime"></div>

    打开/source/js/custom.js，插入代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    //页脚底部运行时间
    setInterval(() => {
        // let create_time = Math.round(new Date('2023-01-14 22:00:00').getTime() / 1000); //在此行修改建站时间
        // 有苹果用户发现safari浏览器不能正常运行，百度了一下发现是格式化的问题，改成下面这种应该就可以了。感谢反馈。
        let create_time = Math.round(new Date('2023/01/14 22:00:00').getTime() / 1000); //在此行修改建站时间
        let timestamp = Math.round((new Date().getTime()) / 1000);
        let second = timestamp - create_time;
        let time = new Array(0, 0, 0, 0);
        var nol = function(h) {
            return h > 9 ? h : '0' + h;
        }
        if (second >= 24 * 3600) {
            time[0] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[1] = nol(parseInt(second / 3600));
            second %= 3600;
        }
        if (second >= 60) {
            time[2] = nol(parseInt(second / 60));
            second %= 60;
        }
        if (second >= 0) {
            time[3] = nol(second);
        }
        let currentTimeHtml = ""
        currentTimeHtml += ' 本站已安全运行 ' + time[0] + ' 天 ' + time[1] + ' 小时 ' + time[2] + ' 分 ' + time[3] + ' 秒 ';
        document.getElementById("runtime").innerHTML = currentTimeHtml;
    }, 1000);

gitcalender

来源：博客魔改教程总结（一）

  1. 自定义api。

    在github上forkZfour/python_github_calendar_api，根据教程自建api。

    注：github页面已改版，需要修改一下，原作者暂未修改。

  2. 安装插件。

    1
    npm install hexo-filter-gitcalendar --save

  3. 在_config.yml中添加配置文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    # hexo-filter-gitcalendar
    gitcalendar:
      enable: true # 开关
      priority: 5 #过滤器优先权，数值越小，执行越早，默认为10，选填
      enable_page: /about/ # 应用页面,若要应用于所有页面，就填’all’，默认为’/‘
      # butterfly挂载容器
      layout: 
        type: id #挂载容器类型，填写id或class，不填则默认为id
        name: gitcalendar #挂载容器名称
        index: 0 #前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
      user: jianerssr #git用户名
      apiurl: 'https://gitcalendar.heyjian.cn'	# 这是我的API，最好自己弄一个
      minheight:
        pc: 280px #桌面端最小高度
        mibile: 0px #移动端最小高度
      #color: "['#d9e0df', '#c6e0dc', '#a8dcd4', '#9adcd2', '#89ded1', '#77e0d0', '#5fdecb', '#47dcc6', '#39dcc3', '#1fdabe', '#00dab9']" 
      # "['#e4dfd7', '#f9f4dc', '#f7e8aa', '#f7e8aa', '#f8df72', '#fcd217', '#fcc515', '#f28e16', '#fb8b05', '#d85916', '#f43e06']" #橘黄色调
        #color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']" #浅紫色调
      color: "['#ebedf0', '#f0fff4', '#dcffe4', '#bef5cb', '#85e89d', '#34d058', '#28a745', '#22863a', '#176f2c', '#165c26', '#144620']" #翠绿色调
      # color: "['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c']" #天青色调
      container: .recent-post-item(style='width:100%;height:auto;padding:10px;') #父元素容器，需要使用pug语法
      gitcalendar_css: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css
      gitcalendar_js: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js

    gitcalendar默认挂在首页，如果不想挂在首页除需更改enable_page:项为相应页面外，还需在相应页面写入一个div块。

    1
    2
    <!-- GitCalendar容器 -->
    <div id="gitcalendar"></div>

    注：此处id名一定要跟layout.name一致。

页面样式调节

来源：博客魔改教程总结（二）

  1. 在/source/css/custom.css中插入。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    /*页面样式调节*/
    :root {
      --trans-light: rgba(255, 255, 255, 0.88);
      --trans-dark: rgba(25, 25, 25, 0.88);
      --border-style: 1px solid rgb(169, 169, 169);
      --backdrop-filter: blur(5px) saturate(150%);
    }
    /* 首页文章卡片 */
    #recent-posts > .recent-post-item {
      background: var(--trans-light);
      backdrop-filter: var(--backdrop-filter);
      border-radius: 25px;
      border: var(--border-style);
    }
    /* 首页侧栏卡片 */
    #aside-content .card-widget {
      background: var(--trans-light);
      backdrop-filter: var(--backdrop-filter);
      border-radius: 18px;
      border: var(--border-style);
    }
    /* 文章页、归档页、普通页面 */
    div#post,
    div#page,
    div#archive {
      background: var(--trans-light);
      backdrop-filter: var(--backdrop-filter);
      border: var(--border-style);
      border-radius: 20px;
    }
    /* 导航栏 */
    #page-header.nav-fixed #nav {
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: var(--backdrop-filter);
    }

    [data-theme="dark"] #page-header.nav-fixed #nav {
      background: rgba(0, 0, 0, 0.7) !important;
    }
    /* 夜间模式遮罩 */
    [data-theme="dark"] #recent-posts > .recent-post-item,
    [data-theme="dark"] #aside-content .card-widget,
    [data-theme="dark"] div#post,
    [data-theme="dark"] div#archive,
    [data-theme="dark"] div#page {
      background: var(--trans-dark);
    }
    /* 夜间模式页脚页头遮罩透明 */
    [data-theme="dark"] #footer::before {
      background: transparent !important;
    }
    [data-theme="dark"] #page-header::before {
      background: transparent !important;
    }
    /* 阅读模式 */
    .read-mode #aside-content .card-widget {
      background: rgba(158, 204, 171, 0.5) !important;
    }
    .read-mode div#post {
      background: rgba(158, 204, 171, 0.5) !important;
    }
    /* 夜间模式下的阅读模式 */
    [data-theme="dark"] .read-mode #aside-content .card-widget {
      background: rgba(25, 25, 25, 0.9) !important;
      color: #ffffff;
    }
    [data-theme="dark"] .read-mode div#post {
      background: rgba(25, 25, 25, 0.9) !important;
      color: #ffffff;
    }

  2. 备注。

    -trans-light:日间模式背景色
    --trans-dark: 夜间模式背景色
    --border-style: 边框样式
    --backdrop-filter:b背景过滤器

    懒得改了，就这个样式了。

导航栏美化

来源：关于butterfly的导航栏的一些教程

  1. 分离搜索栏与菜单栏。

    打开/themes/butterfly/layout/includes/header/nav.pug

    原代码为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    - const isFixedClass = theme.nav.fixed ? 'fixed' : ''
    nav#nav(class=isFixedClass)
      span#blog-info
        a(href=url_for('/') title=config.title)
          if theme.nav.logo
            img.site-icon(src=url_for(theme.nav.logo))
          if theme.nav.display_title
            span.site-name=config.title
        
      #menus
        if (theme.algolia_search.enable || theme.local_search.enable)
          #search-button
            a.site-page.social-icon.search(href="javascript:void(0);")
              i.fas.fa-search.fa-fw
              span=' '+_p('search.title')
        !=partial('includes/header/menu_item', {}, {cache: true})

        #toggle-menu
          a.site-page(href="javascript:void(0);")
            i.fas.fa-bars.fa-fw

    改为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    - const isFixedClass = theme.nav.fixed ? 'fixed' : ''
    nav#nav(class=isFixedClass)
      span#blog-info
        a#site-name(href=url_for('/'))
          if theme.nav.logo
            img.site-icon(src=url_for(theme.nav.logo))
          if theme.nav.display_title
            span.sitename=config.title
       
      #menus
      !=partial('includes/header/menu_item', {}, {cache: true})

      #nav-right
        if (theme.algolia_search.enable || theme.local_search.enable)
          #search-button
            a.site-page.social-icon.search
              i.fas.fa-search.fa-fw

          #toggle-menu
            a.site-page
              i.fas.fa-bars.fa-fw

  2. 导航栏居中。

    在/sourcr/cs/custom.css中添加：

    1
    2
    3
    4
    5
    6
    7
    #nav-right{
        flex:1 1 auto;
        justify-content: flex-end;
        margin-left: auto;
        display: flex;
        flex-wrap:nowrap;
    }

  3. 去掉导航栏项目底下的蓝色长条。

    在自定义css文件中添加：

    1
    2
    3
    #nav *::after{
        background-color: transparent!important;
    }

  4. 子菜单栏横向布局。

    同上文件中，添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .menus_item_child li:not(#sidebar-menus li){
        float: left;
        border-radius: 6px!important;
        -webkit-border-radius: 6px!important;
        -moz-border-radius: 6px!important;
        -ms-border-radius: 6px!important;
        -o-border-radius: 6px!important;
    }
    .menus_item_child:not(#sidebar-menus ul){
      /*
        left:calc(-150%)!important;这是估算值，为了保持元素居中的，如果不合适可以自己调
      改为：*/
      left:50%;
      translate:-50%;
    }

  5. 网站标题的增强版。

    即鼠标悬浮在左上角的网站名时，显示主页图标。

    同上文件夹，添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    /*左上角标题移动*/
    #site-name{
    	left:25px;
    }
    #site-name::before{
        opacity: 0;
        background-color: #3366ff!important;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        position:absolute;
        top:0!important;
        right:0!important;
        width:100%;
        height:100%;
        content: "\f015";
        box-shadow: 0 0 5px #3366ff;
        font-family: FontAwesome;
        text-align: center;
        color:white;
        line-height:34px;/*如果有溢出或者垂直不居中的现象微调一下这个参数*/
        font-size: 18px;/*根据个人喜好*/
    }
    #site-name:hover::before{
        opacity: 1;
        scale:1.05;
    }
    #site-name{
        position: relative;
        font-size: 24px; /*一定要把字体调大点，否则效果惨不忍睹！*/
    }

    注：此处有个bug，原文 font-family:为 "Font Awesome 6 Free";，但这样主页图标乱码，我改成 FontAwesome;就好了，真神奇。

  6. 显示标题。

    同样打开/themes/butterfly/layout/includes/header/nav.pug文件，在!=partial('includes/header/menu_item', {}, {cache: true})下添加代码。

    1
    2
    3
    !=partial('includes/header/menu_item', {}, {cache: true})
      center(id="name-container")
        a(id="page-name" href="javascript:scrollToTop()") PAGE_NAME

    打开自定义js文件，添加代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    //js有一个小问题：就是只要鼠标滚动不论哪里都会响应，即便你滚动的是子元素
    //2022.9.11 已修复，需要jq，请自行引入
    document.getElementById("name-container").setAttribute("style", "display:none");
    var position = $(window).scrollTop();
    $(window).scroll(function () {
      var scroll = $(window).scrollTop();
      if (scroll > position) {
        document.getElementById("name-container").setAttribute("style", "");
        document.getElementsByClassName("menus_items")[1].setAttribute("style", "display:none!important");
      } else {
        document.getElementsByClassName("menus_items")[1].setAttribute("style", "");
        document.getElementById("name-container").setAttribute("style", "display:none");
      }
      position = scroll;
    });
    function scrollToTop(){
        document.getElementsByClassName("menus_items")[1].setAttribute("style","");
        document.getElementById("name-container").setAttribute("style","display:none");
        btf.scrollToDest(0, 500);
    }
    //修复没有弄右键菜单的童鞋无法回顶部的问题
    document.getElementById("page-name").innerText = document.title.split(" | jianerssr的个人小屋")[0];

    打开自定义文件夹，添加代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    #page-name::before{
        font-size:18px;
        position: absolute;
        width:100%;
        height:100%;
        border-radius: 8px;
        color:white!important;
        top:0;
        left:0;
        content:'回到顶部';
        background-color: #3366ff;
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        opacity: 0;
        box-shadow: 0 0 3px #3366ff;
        line-height: 45px; /*如果垂直位置不居中可以微调此值，也可以删了*/
    }
    #page-name:hover:before{
        opacity: 1;
    }
    @media screen and (max-width:900px){
        #page-name,#menus{
          display:none!important;
        }
    }
    #name-container{
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
    #name-container:hover{
        scale:1.03
    }
    #page-name{
        position: relative;
        padding:10px 30px/*如果文字间隔不合理可以微调修改，第二个是水平方向的padding，第一个是垂直的*/
    }
    #nav{
        padding: 0 20px;
    }

通过GitHub Actions自动化部署hexo博客（已弃用）

猛然发现，使用Github Actions后，更新日期全部刷新。因此，我又重新看了一下下述代码，发现每次git push提交后，工作流都会在public文件夹下重新生成一次仓库，再覆盖jianerssr.github.io原有仓库，除非每篇文章自定义updated，不然博客仓库相当于一直都是新仓库，没想到解决办法，遂弃用。
而hexo为什么可以保持更新记录呢？我理解是因为输入hexo g指令后，生成publi文件夹，与此同时，public文件夹下的内容复制到.deploy_git文件夹下。该文件夹有个.git文件夹，可以推断，这个仓库是jianerssr.github.io的本地仓库，hexo代替我们执行了git指令。

来源：使用Github Action实现全自动部署

  1. 获取Token。

    记得勾选repo以及workflows项，Token有效期设为永久。

  2. github上创建私有仓库。

    防止Token泄露。

  3. 配置Github Action

    打开.github文件夹，新建workflows文件夹，并在该文件夹下新建autodeploy.yml。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    # 当有改动推送到master分支时，启动Action
    name: 自动部署

    on:
      push:
        branches:
          - main #2020年10月后github新建仓库默认分支改为main，注意更改

      release:
        types:
          - published

    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
        - name: 检查分支
          uses: actions/checkout@v2
          with:
            ref: main #2020年10月后github新建仓库默认分支改为main，注意更改

        - name: 安装 Node
          uses: actions/setup-node@v1
          with:
            node-version: "14.17.6" #action使用的node版本，建议大版本和本地保持一致。可以在本地用node -v查询版本号。

        - name: 安装 Hexo
          run: |
            export TZ='Asia/Shanghai'
            npm install hexo-cli -g

        - name: 缓存 Hexo
          uses: actions/cache@v1
          id: cache
          with:
            path: node_modules
            key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

        - name: 安装依赖
          if: steps.cache.outputs.cache-hit != 'true'
          run: |
            npm install --save

        - name: 生成静态文件
          run: |
            hexo clean
            hexo generate

        - name: 部署 #此处master:master 指从本地的master分支提交到远程仓库的master分支，若远程仓库没有对应分支则新建一个。如有其他需要，可以根据自己的需求更改。
          run: |
            cd ./public
            git init
            git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
            git config --global user.email '${{ secrets.GITHUBEMAIL }}'
            git add .
            git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated By Github Actions"
            git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" master:main
            #git push --force --quiet "https://${{ secrets.TOKENUSER }}:${{ secrets.CODINGTOKEN }}@e.coding.net/${{ secrets.CODINGUSERNAME }}/${{  secrets.CODINGBLOGREPO }}.git" master:master #coding部署写法，需要的自行取消注释
            #git push --force --quiet "https://${{ secrets.GITEEUSERNAME }}:${{ secrets.GITEETOKEN }}@gitee.com/${{ secrets.GITEEUSERNAME }}/${{ secrets.GITEEUSERNAME }}.git" master:master #gitee部署写法，需要的自行取消注释

    最后一行的master:main 指从工作流使用git创建的仓库master分支(该分支是默认的，不是电脑本地的仓库，是工作流系统中再次创立的仓库)提交到jianerssr.github.io的main分支。

  4. 在私有源代码仓库添加环境变量。

    Setting->Secrets->actions

    根据autodeploy.yml配置文件添加。

  5. 提交代码。

    删除/themes/butterfly/.git文件夹。

    执行下述指令：

    1
    2
    3
    git init
    git remote add origin git@私有仓库地址
    git branch -M main

    打开.gitignore文件添加屏蔽项，减少文件提交量，加快速度。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    .deploy_git*/
    .idea
    themes/butterfly/.git

    最后：

    1
    2
    3
    4
    git add .
    git commit -m "随便"
    git push
    git push -u origin main

关于界面

来源：安知鱼。

虽然安知鱼有其关于界面的设置教程，但我需要的部分也只是其中一点点，因此直接F12从安知鱼关于界面扒了源码，理解相对方便一些。

  1. 新建关于页面。

    1
    hexo new page about

  2. 编辑html。

    打开/source/about/index.md，直接在md文档里编辑html。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    ---
    title: 关于
    date: 2023-01-16 12:44:15
    aside: false
    comments: false
    top_img: false
    ---
    <div id="about-page">
        <div class="author-box">
            <div class="author-img">
                <img class="no-lightbox " src="https://img.heyjian.cn/1.jpg">
            </div>
            <div class="image-dot"></div>
        </div>
        <p class="p center logo large">个人简介</p> 
        <p class="p center small">我这么可爱，怎么可能没有个人简介呢(●'◡'●)</p>
        <div class="author-content">
            <div class="author-content-item myInfoAndSayHello">
                <div class=author-content-item-tips>我的基本信息</div>
                <div class="title1">大家好</div>
                <div class="title2">我是 
                    <span class="inline-word">jianerssr</span>
                </div>
                <div class="title1">是一名 环境工程专业研究生、 新人博主、 十级懒癌患者、职业摸鱼选手
                </div>
            </div>
            <div class="aboutsiteTips author-content-item">
                <div class="author-content-item-tips">人生追求</div>
                <h2>
                    忍常人所不能忍
                    <br>
                    及常人所不能及
                    <div class="mask"> 
                        <span class="first-tips">吃</span>
                        <span>喝</span>
                        <span>玩</span>
                        <span data-up>乐</span>
                        <span data-show>然后尽情</span>
                    </div>
                </h2>
            </div>
        </div>
        <div class="author-content">
            <div class="author-content-item-group column mapAndInfo">
                <div class="author-content-item selfInfo single">
                    <div>
                        <span class="selfInfo-title">生于</span>
                        <span class="selfInfo-content" id="selfInfo-content-year" style="color:#43a6c6">2000</span>
                    </div>
                    <div>
                        <span class="selfInfo-title">本科·湘潭大学</span>
                        <span class="selfInfo-content" style="color:#c69043">环保设备工程</span>
                    </div>
                    <div>
                        <span class="selfInfo-title">硕士·西南大学</span>
                        <span class="selfInfo-content" style="color:#8a7cfb">环境工程</span>
                    </div>
                    <div>
                        <span class="selfInfo-title">现在职业</span>  
                        <span class="selfInfo-content" style="color:#b04fe6">研究生👨‍🎓</span>
                    </div>
                </div>
                <div class="author-content-item map single">
                     <span class="map-title">我现在住在 <b>中国，湖南省，邵阳市</b></span>
                </div>
            </div>
            <div class="author-content-item personalities">
                <div class="author-content-item-tips">部分个人爱好</div>
                <div class="author-content-item-title">网络小说</div>
                <div class="checkbox blue checked">
                    <input type="checkbox" checked></input>
                    <p>绍宋</p>
                </div>
                <div class="checkbox blue checked">
                    <input type="checkbox" checked></input>
                    <p>诡秘之主</p>
                </div>
                <div class="checkbox blue checked">
                    <input type="checkbox" checked></input>
                    <p>夏天、烟火和我的尸体</p>
                </div>
                <div class="title2" style="color:#ac899c">游戏</div>
                <div class="checkbox blue checked">
                    <input type="checkbox" checked></input>
                    <p>CS:GO</p>
                </div>
                <div class="checkbox blue checked">
                    <input type="checkbox" checked></input>
                    <p>巫师3</p>
                </div>
                <div class="checkbox blue checked">
                    <input type="checkbox" checked></input>
                    <p>GTAⅤ</p>
                </div>
                <div class="post-tips">超小声嘀咕：体育运动，什么是体育运动，我这辈子都与体育运动无缘</div>
            </div>
        </div>
        <br>
        <p class="p center logo large">网站统计</p>  
        <div id="gitcalendar_total">
            <!-- GitCalendar容器 -->
            <div id="gitcalendar_name">github贡献日历</div>
            <div id="gitcalendar"></div>
        </div>
        <div id="charts_total">
            <!-- 文章发布时间统计图 -->
            <div id="posts-chart" data-start="2023-01" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
            <!-- 文章标签统计图 -->
            <div id="tags-chart" data-length="10" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
            <!-- 文章分类统计图 -->
            <div id="categories-chart" data-parent="true" style="border-radius: 8px; height: 300px; padding: 10px;"></div>
        </div>
        <br>
        <p class="p center logo large">版权声明</p>
        <div class="author-content">
            <div class="create-site-post author-content-item single">
                <div class="author-content-item-tips">From jianerssr</div>
                <div class="checkbox blue checked">
                    <input type="checkbox" checked></input>
                    <p>博主在本站发布的原创文章，版权均归博主本人所有。博主保留追究法律责任的权力。</p>
                </div>
                <div class="checkbox blue checked">
                    <input type="checkbox" checked></input>
                    <p>除特别声明外，本站所有文章均采用署名-非商业性使用-相同方式共享4.0(<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>)许可协议，如需转载，请联系博主，并注明出处。</p>
                </div>
                <div class="checkbox blue checked">
                    <input type="checkbox" checked></input>
                    <p>本站转载内容均已声明来源，如果您认为本网站转载内容侵及您的权益，同样请发邮件至<a href="mailto:me@heyjian.cn">me@heyjian.cn</a>联系博主，博主看到后会第一时间处置。</p>
                </div>
                <div class="checkbox blue checked">
                    <input type="checkbox" checked></input>
                    <p>本站为非商业性网站，网站内容仅限个人交流学习。本站字体、图片等资源可能参考至网络，如本站资源侵权请版权方大大发邮件至<a href="mailto:me@heyjian.cn">me@heyjian.cn</a>联系博主，博主会第一时间删除。</p>
                </div>
                <div class="checkbox times red checked">
                    <input type="checkbox" checked></input>
                    <p>未经许可，直接“借”用。</p>
                </div>
            </div>
        </div>
    </div>

  3. 编辑css。

    打开自定义css文件，插入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    /*关于界面*/
    #gitcalendar_name{
      text-align:center;
      font-size:19px;
      font-weight:bold;
    }
    #page:has(#about-page) {
      border: 0;
      box-shadow: none !important;
      padding: 0 !important;
      background: transparent !important;
    }
    #page:has(#about-page) .page-title {
      display: none;
    }
    #about-page .author-box {
      position: relative;
    }
    #about-page .author-box .author-img {
      margin: auto;
      border-radius: 50%;
      overflow: hidden;
      width: 180px;
      height: 180px;
    }
    #about-page .author-box .author-img img {
      border-radius: 50%;
      overflow: hidden;
      width: 180px;
      height: 180px;
    }
    #about-page .author-box .image-dot {
      width: 45px;
      height: 45px;
      background: #6bdf8f;
      position: absolute;
      border-radius: 50%;
      border: 6px solid #ffffff;
      top: 50%;
      left: 50%;
      transform: translate(35px, 45px);
    }
    p.p.large,p.p.small{
      margin: 0;
      padding: 0;
    }
    p.p.large{
      font-size: 2.5rem;
      line-height: 1.4;
    }
    p.p.center{
      display: block;
      text-align: center;
    }
    p.p.small{
      font-size: 17px;
    }
    .author-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      margin-top: 1rem;
    }
    #about-page .myInfoAndSayHello {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #fff;
      background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);
      background-size: 200%;
      animation: gradient 15s ease infinite;
      width: 59%;
    }
    .author-content-item {
      width: 49%;
      border-radius: 24px;
      background: #fff;
      border: 1px solid #e3e8f7;
      box-shadow: 0 8px 16px -4px #2c2d300c;
      position: relative;
      padding: 1rem 2rem;
      overflow: hidden;
    }
    #about-page .myInfoAndSayHello .title1 {
      opacity: 0.8;
      line-height: 1.3;
    }
    #about-page .myInfoAndSayHello .title2 {
      font-size: 36px;
      font-weight: 700;
      line-height: 1.1;
      margin: 0.5rem 0;
    }
    .inline-word {
      word-break: keep-all;
      white-space: nowrap;
    }
    .author-content-item .author-content-item-tips {
      opacity: .8;
      font-size: .6rem;
      margin-bottom: .5rem;
    }
    .author-content-item.aboutsiteTips {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      width: 39%;
    }
    .aboutsiteTips h2 {
      margin-right: auto;
      font-size: 36px;
      font-family: Helvetica;
      line-height: 1.06;
      letter-spacing: -0.02em;
      color: #4c4948;
      margin-top: 0;
    }
    .aboutsiteTips .mask {
      height: 36px;
      position: relative;
      overflow: hidden;
      margin-top: 4px;
    }
    .aboutsiteTips .mask span {
      display: block;
      box-sizing: border-box;
      position: absolute;
      top: 36px;
      padding-bottom: var(--offset);
      background-size: 100% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      background-repeat: no-repeat;
    }
    .aboutsiteTips .mask span[data-show] {
      transform: translateY(-100%);
      transition: 0.5s transform ease-in-out;
    }
    .aboutsiteTips .mask span[data-up] {
      transform: translateY(-200%);
      transition: 0.5s transform ease-in-out;
    }
    .aboutsiteTips .mask span:nth-child(1) {
      background-image: linear-gradient(45deg, #ff33cc 50%, #ff3366);
    }
    .aboutsiteTips .mask span:nth-child(2) {
      background-image: linear-gradient(45deg, #18e198 50%, #0ec15d);
    }
    .aboutsiteTips .mask span:nth-child(3) {
      background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c);
    }
    .aboutsiteTips .mask span:nth-child(4) {
      background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f);
    }
    .aboutsiteTips .mask span:nth-child(5) {
      background-image: linear-gradient(45deg, #33ccff 50%, #3366ff);
    }
    .author-content-item-group.column.mapAndInfo {
      width: 59%;
    }
    .author-content-item-group.column {
      display: flex;
      flex-direction: column;
      width: 49%;
      justify-content: space-between;
    }
    .author-content-item.single {
      width: 100%;
    }
    .author-content-item.map {
      background: url(/img/2023020401.jpg) no-repeat center;
      min-height: 200px;
      max-height: 400px;
      position: relative;
      overflow: hidden;
      height: 60%;
      background-size: 100%;
      transition: 1s ease-in-out;
    }
    [data-theme="dark"] .author-content-item.map {
      background: url(/img/2023020401.jpg) no-repeat center;
      background-size: 100%;
    }
    .author-content-item.map .map-title {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(255,255,255,0.6);
      padding: .5rem 2rem;
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: 1s ease-in-out;
      font-size: 20px;
    }
    .author-content-item.selfInfo {
      display: flex;
      min-height: 100px;
      max-height: 400px;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      height: -webkit-fill-available;
      height: 40%;
      margin-bottom: 0.5rem;
    }
    .author-content-item.selfInfo div {
      display: flex;
      flex-direction: column;
      margin: .5rem 2rem .5rem 0;
    }
    .author-content-item.selfInfo .selfInfo-title {
      opacity: .8;
      font-size: .6rem;
      line-height: 1;
      margin-bottom: 8px;
    }
    .author-content-item.selfInfo .selfInfo-content {
      font-weight: 700;
      font-size: 22.5px;
      line-height: 1;
    }
    .author-content-item.map:hover {
      background-size: 120%;
      transition: 4s ease-in-out;
      background-position-x: 0;
      background-position-y: 36%;
    }
    .author-content-item.map:hover .map-title {
      bottom: -100%;
    }
    .author-content-item.personalities {
      position: relative;
      width: 39%;
      min-height:380px;

    }
    .author-content-item .author-content-item-title {
      font-size: 36px;
      font-weight: 700;
      line-height: 1;
    }
    .author-content-item.personalities .title2 {
      font-size: 36px;
      font-weight: 700;
      line-height: 1.1;
    }
    .post-tips {
      color: #999999;
      font-size: 14px;
      position: absolute;
      bottom: 1rem;
      left: 2rem;
    }
    /*方框里面一个蓝底白色的勾*/
    .checkbox {
      display: flex;
      align-items: center;
    }
    .checkbox.blue input[type=checkbox]:checked {
      background: #2196f3;
    }
    .checkbox input[type=checkbox]:checked {
      background: #2196f3;
    }
    .checkbox p {
      display: inline-block;
      margin-top: 2px!important;
      margin-bottom: 0!important;
    }
    .checkbox.blue input {
      border-color: #2196f3;
    }
    .checkbox input {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      position: relative;
      height: 16px;
      width: 16px;
      transition: all .15s ease-out 0s;
      cursor: pointer;
      display: inline-block;
      outline: 0;
      border-radius: 2px;
      flex-shrink: 0;
      margin-right: 8px;
      border: 2px solid #2196f3;
      pointer-events: none;
    }
    .checkbox input[type=checkbox]:checked:before {
      left: 0;
      top: 7px;
      width: 6px;
      height: 2px;
    }
    .checkbox input[type=checkbox]:after, .checkbox input[type=checkbox]:before {
      position: absolute;
      content: "";
      background: #fff;
    }
    .checkbox input[type=checkbox]:before {
      left: 1px;
      top: 5px;
      width: 0;
      height: 2px;
      transition: all .2s ease-in;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
    }
    .checkbox input[type=checkbox]:checked:after {
      right: 3px;
      bottom: 1px;
      width: 2px;
      height: 10px;
    }
    .checkbox input[type=checkbox]:after, .checkbox input[type=checkbox]:before {
      position: absolute;
      content: "";
      background: #fff;
    }
    .checkbox input[type=checkbox]:after {
      right: 7px;
      bottom: 3px;
      width: 2px;
      height: 0;
      transition: all .2s ease-out;
      transform: rotate(40deg);
      -webkit-transform: rotate(40deg);
      -moz-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      -o-transform: rotate(40deg);
      transition-delay: .25s;
    }
    /*方框里面一个红底白色的差*/
    .checkbox.red input[type=checkbox]:checked {
      background: #fe5f58;
    }
    .checkbox.red input {
      border-color: #fe5f58;
    }
    .checkbox.times input[type=checkbox]:checked:before {
      left: 1px;
      top: 5px;
      width: 10px;
      height: 2px;
    }
    .checkbox.times input[type=checkbox]:before {
      transform: rotate(45deg);
      left: 3px;
      top: 1px;
      width: 0;
      height: 2px;
    }
    .checkbox.times input[type=checkbox]:checked:after {
      right: 1px;
      top: 5px;
      width: 10px;
      height: 2px;
    }
    .checkbox.times input[type=checkbox]:after {
      transform: rotate(135deg);
      right: 3px;
      top: 1px;
      width: 0;
      height: 2px;
    }
    @media screen and (max-width: 768px){
      .author-content-item {
          width: 100%!important;
          margin-top: 1rem;
          padding: 1rem;
        }
      .author-content {
          margin-top: 0;}
      .author-content-item-group.column {
          width: 100%!important;}
      #selfInfo-content-year {
          width: 90px;}
      .author-content-item.selfInfo {
          height: 95%;}
      .author-content-item.map {
          margin-bottom: 0;}
      .post-tips {
          left: auto;}
    }

  4. 自定义js。

    打开自定义js文件，插入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //关于界面吃喝玩乐
    setInterval(function () {
        const show = document.querySelector('span[data-show]')
        const next = show.nextElementSibling || document.querySelector('.first-tips')
        const up = document.querySelector('span[data-up]')

        if (up) {
          up.removeAttribute('data-up')
        }

        show.removeAttribute('data-show')
        show.setAttribute('data-up', '')

        next.setAttribute('data-show', '')
      }, 2000)

Hexo-Admin

通过Hexo-Admin插件，可以在本地生成一个后台管理系统。当我们执行完hexo s指令后，进入网页后台(http://localhost:4000/admin/)就可以管理hexo博客，方便写文章。

  1. 安装

    1
    npm install --save hexo-admin

  2. 启动

    hexo s后，浏览器访问localhost:4000/admin即可进入后台管理系统。

  3. 设置密码

    点击settings->Setup authentification here，设置usename、passwd、secret。

    将上述信息添加到_config.yml文件。

    1
    2
    3
    4
    admin:
      username: ***** #为了防止信息泄露，使用*代替原文。
      password_hash: *******
      secret: *******