【网站维护】一些简单满意的调整


闲来无事,在家看着视频逛着博客,看到很多博客分享代码的时候代码高亮的样式都很不错,想起来自己还没弄呢。

代码高亮

就随便找了一个 prism.js ,选了一些常用的语言,css+js一共约34kb。想找个js库的cdn来着,没找到合适的,所以决定就这样用吧。将下载的两个文件放入对应的目录,就可以引用了,下面给新手一个引用的简单指引:

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="css/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="js/prism.js"></script>
</body>
</html>

以上就是引用的方法和效果展示🙂。

页面上需要下面的代码,才会被高亮。

<pre><code class="language-css">p { color: red }</code></pre>

markdown编辑器Typora只需要在编辑代码的时候选择语言就没有问题。其它编辑器环境没有测试。

VPS内存占用过高

最近VPS出现很多次内存占用高的情况,前次通过修改Nginx的配置得以解决,最近一次直接内存超高服务器卡死了。不得不重启后查看内存占用情况,我使用的内存占用查看方法,Xshell连上VPS:

yum install htop -y && htop

经过观察是MySQL占用比较高导致的,Google了一下配置方法,做了一些调整并观察了一段时间,基本解决问题。不同的环境配置不一定一样所以这里就不分享配置参数了,有需要的可以Google相关。

制作加载评论按钮

代码高亮也做了,反正是折腾,于是顺便给首页添加一个加载评论按钮。

半路出家的选手,玩代码水平差的自己都看不下去,制作过程一波三折总是不完美。最后看到底部的友情链接样式于是就直接拿来修改了😭

css

.anniu li {
  float: left
}

.anniu li a {
  background: SeaGreen;
  border: 1px solid SeaGreen;
  display: block;
  text-align: center;
  margin-left: 15px;
  margin-bottom: 5px;
  padding: 0 4px;
  border-radius: 2px;
  width: 300px;
  color: #fff;
  line-height: 35px;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  font-size: 14px
}

.anniu li a:hover {
  color: #fff;
  background: LightPink;
  border: 1px solid LightPink;
}

页面引入

<div align="center">
    <table border="0" align="center">
      <tr>
        <td>
          <ul style="padding: 12px 13px 10px 0px;list-style-type:none;" class="anniu">
            <li>
                <b>
                    <a href="{{ .Permalink }}#comment" style="font-family:Microsoft YaHei; serif;">加 载 评 论</a>
                </b>
            </li>
          </ul>
        </td>
      </tr>
    </table>
  </div>

仅供参考,不保证任何环境都能完美实现。

本来width准备设置到700px的,想法是越宽越能方便用户点击,发现手机端不合适,于是设置了300px,有问题欢迎报错和交流😏

调整页脚友情链接样式

以上按钮比较满意,那就再顺手把友情链接表格样式一起调整一下,去掉了超链接的下划线,通过修改表格背景和边框颜色实现了无边框😭,没办法,弱鸡只会这么玩哈哈。欢迎交换首页链接,要求必须首页,必须是页脚位置且醒目😏,网站类型原则上不限制,但看我心情🐶。有专用的内页博客友链,对于首页友链符合要求的可以申请首页友链。最后再说一句,欢迎随便交换友情链接😁


点击评论框“加入讨论”会显示名字邮箱网址选项,不一定需要登陆哦🙂
VULTR充值赠送活动请点这里注册  👈
© 2019 1078503.ORG · RSS订阅 · 站点地图 ·