Hello World

发表于|更新于
|字数总计:1.3k|阅读时长:6分钟|阅读量:

Welcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues).

当前访问用户

  • 在 themes\Butterfly\layout\includes\widget\ 下创建 card_ip.pug 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .card-widget.card-ip
            .card-content
                .item-headline
                    i.fa.fa-user(aria-hidden="true")
                    span= _p('aside.card_ip')
                .ip_content
                    = _p('欢迎来自 ')
                    span(class="p red")= _p('未知区域')
                    = _p(' 的小伙伴')
                    br
                    = _p('访问IP为： ')
                    span(class="p cyan")= _p('未知IP')
                    br
                    = _p('浏览器版本：')
                    span(class="p blue")= _p('未知浏览器')

  • 编辑 Butterfly\layout\includes\widget\index.pug 在合适位置添加

    1
    2
    if theme.aside.card_ip
            !=partial('includes/widget/card_ip', {}, {cache: theme.fragment_cache})

  • 在 themes\Butterfly\languages\zh-CN.yml 文件下找到 aside 添加如下代码：

    1
    card_ip: 当前访问用户

  • 在 source_data\butterfly.yml 文件 aside 下添加：

    1
    card_ip: true

  • 在 themes\Butterfly\source\js 下创建 ip_content.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
    31
    32
    33
    34
    35
    //获取当前IP地址和浏览器标识
    function getBrowserInfo() {
        var agent = navigator.userAgent.toLowerCase();

        var regStr_ie = /msie [\d.]+;/gi;
        var regStr_ff = /firefox\/[\d.]+/gi
        var regStr_chrome = /chrome\/[\d.]+/gi;
        var regStr_saf = /safari\/[\d.]+/gi;

        //IE
        if (agent.indexOf("msie") > 0) {
            return agent.match(regStr_ie);
        }

        //firefox
        if (agent.indexOf("firefox") > 0) {
            return agent.match(regStr_ff);
        }

        //Chrome
        if (agent.indexOf("chrome") > 0) {
            return agent.match(regStr_chrome);
        }

        //Safari
        if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
            return agent.match(regStr_saf);
        }
    }

    var ip_content = document.querySelector(".ip_content");

    if (ip_content != null && typeof (returnCitySN) != undefined) {
        ip_content.innerHTML = '欢迎来自 <span class="p red">' + returnCitySN["cname"] + "</span> 的小伙伴<br>" + "访问IP为： <span class='p cyan'>" + returnCitySN["cip"] + "</span><br>浏览器版本：<span class='p blue'>" + getBrowserInfo() + '</span>';
    }

  • 在 themes\Butterfly\source\js 下创建 ip_content.css 或者在现有的 CSS文件插入代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    span.p.red, p.p.red {
        color: #ff0b00
    }

    span.p.cyan, p.p.cyan {
        color: #ff00bc
    }

    span.p.blue, p.p.blue {
        color: #0014ff
    }

  • 编辑 butterfly.yml 文件，在 inject->bottom 下面添加如下内容：

    1
    2
    3
    - <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
    - <script src="/js/ip_content.js"></script> //pjax写法：<script src="/js/ip_content.js" data-pjax></script>
    - <script src="/js/ip_content.css"></script>

首页头像添加两行按钮

  1. 在 Butterfly\layout\includes\widget\card_author.pug 文件找到如下代码： 
    1
    a#card-info-btn.card-info.button--primary(href=theme.aside.card_author.button.link)
  2. 替换成下面代码： 
    1
    2
    3
    a#card-info-btn.card-info.button--primary.button--animated(href=theme.aside.card_author.button.link)
      i(class=theme.aside.card_author.button.icon)
      span=theme.aside.card_author.button.text
  3. 在下面再添加一条代码： 
    1
    2
    3
    a#card-info-btn1.card-info.button--primary.button--animated(href=theme.aside.card_author1.button.link)
      i(class=theme.aside.card_author1.button.icon)
      span=theme.aside.card_author1.button.text
  4. 在 Butterfly\source\css\_layout\aside.styl 文件找到下面代码： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #card-info-btn
      display: block
      background-color: var(--btn-bg)
      color: var(--btn-color)
      text-align: center
      line-height: 1.6rem

      span
        padding-left: .5rem
  5. 修改为： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #card-info-btn
      display: inline-block
      background-color: #6495ed
      color: var(--card-bg)
      text-align: center
      line-height: 1.3rem
      padding: 0.2rem
      border:6px solid

      span
        padding-left: .2rem
  6. 在文件下面再添加一条代码： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #card-info-btn1
      display: inline-block
      background-color: #f4a460
      color: var(--card-bg)
      text-align: center
      line-height: 1.3rem
      padding: 0.2rem
      border:6px solid

      span
        padding-left: .2rem
  7. 在 Butterfly.yml主题配置文件找到card_author 在下面添加一条代码： 
    1
    2
    3
    4
    5
    6
    7
    card_author1:
      enable: true
      description:
      button:
        icon: fa fa-envelope
        text: 发送邮件
        link: mailto:xxxxx@gmail.com
    • 请勿使用这条代码，此为收藏
      1
      2
      3
      4
      5
      a#bookmark-it.bookmark.button--primary.button--animated(href='mailto:admin@dorcandy.cn')
              span= _p(' ')
              i.fa.fa-envelope(aria-hidden="true")
              span= _p('发送邮件')
              span= _p(' ')

方法二

  • 在 butterfly3.0.1\layout\includes\widget\card_author.pug 找到如下代码：

    1
    2
    3
    a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
      i(class=theme.aside.card_author.button.icon)
      span=theme.aside.card_author.button.text

  • 替换成如下代码：（注意 div 对齐上面的 .card-info-data）

    1
    <div class="card-info-bookmark is-center"><a class="bookmark button--primary button--animated" id="bookmark-it1" href="/go.html?u=aHR0cHM6Ly93cGEucXEuY29tL21zZ3JkP3Y9MyZ1aW49ODczMjI4MzkxJnNpdGU9cXEmbWVudT15ZXM=" target="_blank" rel="external nofollow noopener noreferrer" one-link-mark="yes"><span> </span><i class="fa fa-qq" aria-hidden="true"></i><span>在线聊天</span><span> </span></a><span>   </span><a class="bookmark button--primary button--animated" id="bookmark-it2" href="mailto:admin@dorcandy.cn" target="_blank" rel="noopener" one-link-mark="yes"><span> </span><i class="fa fa-envelope" aria-hidden="true"></i><span>发送邮件</span><span> </span></a></div>

  • 打开 butterfly3.0.1\source\css_layout\aside.styl 文件，找到如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #card-info-btn
      display: block
      background-color: var(--btn-bg)
      color: var(--btn-color)
      text-align: center
      line-height: 1.6rem

      span
        padding-left: .5rem

  • 替换成

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    #bookmark-it1
      position: relative;
      z-index: 1;
      display: inline-block;
      background-color: #6495ed;
      color: #fff;
      text-decoration: none;
      line-height: 1.6rem;

      span
        padding-left: .3rem

    #bookmark-it2
      position: relative;
      z-index: 1;
      display: inline-block;
      background-color: #f4a460;
      color: #fff;
      text-decoration: none;
      line-height: 1.6rem;

      span
        padding-left: .2rem

插入PDF

若文章在你的设备上无法正常显示，请点击此处。

Hello World
https://thefine.github.io/posts/3eeb.html
作者
Sweet
发布于
2020-04-01
更新于
2020-08-21
许可协议
CC BY 4.0