MENU

博客成长记

• April 14, 2020 • Read: 980 • 博客

写在前面

　　这篇文章用于记录对本博客的设置修改等信息。

2020年4月6日

2020年4月12日

  • 启用Mirages主题
  • 增加必要配置项 关于 和 归档 的独立页面
  • 设置Gravatar头像
  • 修改登录页面

2020年4月14日

2020年4月15日

2020年4月15日

2020年4月19日

2020年4月22日

  • 在萌信部申请了备案，拿到了靓号3014159

2020年4月24日

  • 宝塔nginx配置HTTPS HSTS：
    进入宝塔在网站的配置文件中加入下面这句
    add_header Strict-Transport-Security "max-age=31536000;includeSubdomains;preload" always;

  • 对footer.php备案代码进行了修改：

    <?php
//    $copyright = 'Copyright &copy; '. date('Y') .' <a href="'. Mirages::$options->siteUrl .'">'. Mirages::$options->title .'</a>'; if (!Device::isPhone()) {$theme = "";}$theme = (Device::isPhone() ? '': 'Powered by <a href="http://typecho.org" target="_blank">Typecho</a> • ') . 'Theme <a href="https://get233.com/archives/mirages-intro.html" target="_blank">Mirages</a>';
  $copyright = 'Copyright &copy; '. date('Y') .' <a href="'. Mirages::$options->siteUrl .'">'. Mirages::$options->title .'</a>'; if (!Device::isPhone()) {$theme = "";}$theme = (Device::isPhone() ? '':'') . 'Theme <a href="https://get233.com/archives/mirages-intro.html" target="_blank">Mirages</a>';
  if (Utils::hasValue(Mirages::$options->beian)) {
//        $beiAn = "<a href=\"http://beian.miit.gov.cn\" target='_blank'> ".Mirages::$options->beian . "</a>";
      $beiAn =  "<a href=\"https://icp.gov.moe\" target='_blank'> "."萌ICP备" . "</a>"."<a href=\"https://icp.gov.moe/?keyword=3014159.xyz\" target='_blank'> ".Mirages::$options->beian . "</a>";
      $copyright = "<p>{$copyright}</p><p>{$beiAn} • {$theme}</p>";
  } else {
      $copyright = "<p>{$copyright} • {$theme}</p>";
  }
?>
  • 调整了页脚字号：
    在<footer id="footer" role="contentinfo">中加入style="font-size:15px"

  • 添加myssl认证：
    在footer.php的

    下方加入div块：

    <div id="cc-myssl-id" align="center">
  <a href="https://icp.gov.moe" target="_blank"><img src="https://icp.gov.moe/images/ico64.png" alt="" style="max-height:40px;display:inline-block;margin:0 auto"></a>
  <a href="https://myssl.com/blog.3014159.xyz?from=mysslid" target="_blank"><img src="https://static.myssl.com/res/images/myssl-id2.png" alt="" style="max-height:40px;display:inline-block;margin:0 auto"></a>
</div>

  • 给代码块添加复制按钮：
    将以下代码添加到主题 header.php 中的 标签前，或前往 控制台 - 设置外观 - 主题自定义扩展，将它添加到 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后)。如果开启了 PJAX，则需单独加入回调函数。对于Mirages主题，依次进入 控制台 - 外观 - 设置外观 - PJAX(BETA) - PJAX RELOAD，将 initCodeCopyButton(); 添加进入即可。

    代码块复制 

    <script>
  // 在代码块右上角添加复制按钮
  document.addEventListener('DOMContentLoaded', initCodeCopyButton);
  function initCodeCopyButton() {
      function initCSS(callback) {
          const css = `
              .btn-code-copy {
                  position: absolute;
                  line-height: .6em;
                  top: .2em;
                  right: .2em;
                  color: rgb(87, 87, 87);
              }
              .btn-code-copy:hover {
                  color: rgb(145, 145, 145);
                  cursor: pointer;
              }
              `;
          const styleId = btoa('btn-code-copy').replace(/[=+\/]/g, '');
          const head = document.getElementsByTagName('head')[0];
          if (!head.querySelector('#' + styleId)) {
              const style = document.createElement('style');
              style.id = styleId;
              if (style.styleSheet) {
                  style.styleSheet.cssText = css;
              } else {
                  style.appendChild(document.createTextNode(css));
              }
              head.appendChild(style);
          }
          callback();
      };
      function copyTextContent(source) {
          let result = false;
          const target = document.createElement('pre');
          target.style.opacity = '0';
          target.textContent = source.textContent;
          document.body.appendChild(target);
          try {
              const range = document.createRange();
              range.selectNode(target);
              window.getSelection().removeAllRanges();
              window.getSelection().addRange(range);
              document.execCommand('copy');
              window.getSelection().removeAllRanges();
              result = true;
          } catch (e) { console.log('copy failed.'); }
          document.body.removeChild(target);
          return result;
      };
      function initButton(pre) {
          const code = pre.querySelector('code');
          if (code) {
              const preParent = pre.parentElement;
              const newPreParent = document.createElement('div');
              newPreParent.style = 'position: relative';
              preParent.insertBefore(newPreParent, pre);
              const copyBtn = document.createElement('div');
              copyBtn.innerHTML = 'copy';
              copyBtn.className = 'btn-code-copy';
              copyBtn.addEventListener('click', () => {
                  copyBtn.innerHTML = copyTextContent(code) ? 'success' : 'failure';
                  setTimeout(() => copyBtn.innerHTML = 'copy', 250);
              });
              newPreParent.appendChild(copyBtn);
              newPreParent.appendChild(pre);
          }
      };
      const pres = document.querySelectorAll('pre');
      if (pres.length !== 0) {
          initCSS(() => pres.forEach(pre => initButton(pre)));
      }
  };
</script>

    　　原文链接：LOGI

2020年8月2日

  • 为网站启用favicon。
    将favicon.ico上传到主题目录下。修改主题的head.php，在19行添加

    <link rel="shortcut icon" href="/usr/themes/Mirages/favicon.ico"type="image/x-icon" />

2020年8月3日

  • 修改正文内容宽度。Mirages主题的默认正文宽度实在是太窄，只用了屏幕一半不到的宽度，信息密度太低，也不甚美观，就改了一下主题的css。方法是修改网站博客主题路径Mirages/css/7.10.1下的mirages.min.css，修改.container后面的一段内容如下：

正文宽度调整 

.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
    max-width: 710px
}

.row {
    margin-right: -0.625rem;
    margin-left: -0.625rem
}

@media (max-width: 767px) {
    .container {
        padding-left: 1.563rem;
        padding-right: 1.563rem
    }
}

@media screen and (min-width: 641px) and (max-width: 896px) {
    .inner .container {
        padding-left: 3.75rem;
        padding-right: 3.75rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1250px) {
    .container {
        max-width: 710px
    }

    .inner .container {
        max-width: 816px
    }
}

@media screen and (min-width: 1251px) and (max-width: 1599px) {
    .container {
        max-width: 1100px
    }

    .inner .container {
        max-width: 1350px
    }
}

@media screen and (min-width: 1600px) and (max-width: 1799px) {
    .container {
        max-width: 1300px
    }

    .inner .container {
        max-width: 1550px
    }
}

@media screen and (min-width: 1800px) and (max-width: 1919px) {
    .container {
        max-width: 1500px
    }

    .inner .container {
        max-width: 1800px
    }
}

@media screen and (min-width: 1920px) and (max-width: 2399px) {
    .container {
        max-width: 1600px
    }

    .inner .container {
        max-width: 1850px
    }

    .container .post-content {
        font-size: 1.0625rem
    }

    .container .post-content pre {
        font-size: .875rem
    }
}

@media screen and (min-width: 2400px) {
    .container {
        max-width: 2100px
    }

    .inner .container {
        max-width: 2400px
    }

    .container .post-content {
        font-size: 1.125rem
    }

    .container .post-content pre {
        font-size: .875rem
    }
}

@media screen and (min-width: 768px) and (max-width: 1301px) {
    body.serif-fonts .container,body.content-lang-en .container {
        max-width: 850px
    }
}

@media screen and (min-width: 1600px) {
    body.serif-fonts #post .post-content {
        font-size: 1.125rem
    }
}

由于本人实际并不会css，也并不懂UI设计，只是根据相关代码按照自己的猜测和在自己设备上的效果调整的相关内容，是否正确也并不确定，是否在所有类型的屏幕设备上能正确显示也无法验证。此外，在高分辨率下字体大小的调整也没能找到修改方法，因此会导致在高分辨率下字显得很小，需要读者手动调整右上角的字号设置。
参考：文章一，文章二

  • 限制图片大小。上一步调整正文宽度后带来另外一个问题，那就是图片会因此变大，需要进行限制。方法是打开网站根目录下的/var/HyperDown.php，搜索

    "<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">"

    改为

    "<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\" style=\"max-width:800px;max-height:600px\" >"

    再搜索

    "<img src=\"{$self->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\">"

    改为

    "<img src=\"{$self->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\" style=\"max-width:800px;max-height:600px\" >"

    参考：typecho限制文章图片高度宽度默认大小方法，给Typecho限制文章图片默认大小

2020年12月12日

启用剪贴板格式化 Markdown 插件Clipboard2markdown

本站未做转载声明的文章均为原创，版权归https://blog.3014159.xyz所有， 转载文章均会在文内声明转载信息并标明来源。 本文作者为圆周驴，原文链接为https://blog.3014159.xyz/blog/2020/04/14/7.html，转载需注明原文链接。谢谢!

博客
Last Modified: December 12, 2020
Leave a Comment