2024年运维最全基于Hexo+Node(2)，2024年最新程序员必学

最全的Linux教程，Linux从入门到精通

======================

1. linux从入门到精通(第2版)

2. Linux系统移植

3. Linux驱动开发入门与实战

4. LINUX 系统移植 第2版

5. Linux开源网络全栈详解 从DPDK到OpenFlow

第一份《Linux从入门到精通》466页

====================

内容简介

====

本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。本书第1版出版后曾经多次印刷，并被51CTO读书频道评为“最受读者喜爱的原创IT技术图书奖”。本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。本书附带1张光盘，内容为本书配套多媒体教学视频。另外,本书还为读者提供了大量的Linux学习资料和Ubuntu安装镜像文件，供读者免费下载。

本书适合广大Linux初中级用户、开源软件爱好者和大专院校的学生阅读，同时也非常适合准备从事Linux平台开发的各类人员。

需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以点击这里获取！

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

@import "mob\_share";

Step7、在next/layout/_scripts/third-party/里添加脚本文件mob_share.swig：

{% if theme.mob\_share.enable %}
<script type="text/javascript">
 //微信二维码点击背景关闭
 $('body').delegate('.-mob-share-weixin-qrcode-bg','click', function(){
 $(".-mob-share-weixin-qrcode-close").trigger("click");
 }); 
</script>
{% endif %}

Step8、在next/layout/_layout.swig的body标签结束前添加：

{% include '\_scripts/third-party/mob\_share.swig' %}

添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件，添加如下代码：

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）

<style>
 .pace .pace-progress {
 background: #ff009e; /\*进度条颜色\*/
 height: 3px;
 }
 .pace .pace-progress-inner {
 box-shadow: 0 0 10px #ff009e, 0 0 5px #ff009e; /\*阴影颜色\*/
 }
 .pace .pace-activity {
 border-top-color: #ff009e; /\*上边框颜色\*/
 border-left-color: #ff009e; /\*左边框颜色\*/
 }
</style>

文章加密访问

打开themes->next->layout->_partials->head.swig文件,插入这样一段代码：

<script>
 (function(){
 if('{{ page.password }}'){
 if (prompt('请输入文章密码') !== '{{ page.password }}'){
 alert('密码错误！');
 history.back();
 }
 }
 })();
</script>

然后在文章上写成类似这样：

---
title: Hello World
date: 2016/7/13 20:46:25
categories:
- Diary
tags:
 - Testing
 - Another Tag
password: 123456
---

博客更换Disqus评论

由于多说即将关闭，本站启用Disqus。
既然Disqus已被墙，那么为了对没有梯子的同学标示友好，我们可以选择点击加载Disqus评论的方式，这个问题貌似也得到了主题作者的关注-> (NexT5.2.0)[https://github.com/iissnan/hexo-theme-next/milestone/7]
具体做法如下：
打开themes/next/layout/_partials/comments.swig，在文件内容 <div id="disqus_thread">前面加入下面内容：

<div style="text-align:center;">
  <button class="btn" id="load-disqus" onclick="disqus.load();">加载 Disqus 评论</button>
</div>

再打开themes/next/layout/_scripts/third-party/comments/disqus.swig，需要替换原本的 Disqus 的加载的内容，如果希望显示评论数量，就保留 run_disqus_script(‘count.js’) 这一行，这样页面载入时还会加载 disqus 的资源：

run_disqus_script('count.js');
{% if page.comments %}
  run_disqus_script('embed.js');
{% endif %}

替换为下面的内容：

var disqus = {
  load : function disqus(){
      if(typeof DISQUS !== 'object') {
        (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        }());
        $('#load-disqus').html("评论加载中，请确保你有梯子，若评论长时间未加载则你可能翻墙失败...").fadeOut(9000); //加载后移除按钮
      }
  }
}

前面的 function run_disqus_script(disqus_script){}这一段，不打算显示评论数量的话，可以一起删掉，不显示评论数量的话，那么点击加载按钮之前，网页是不会加载来自 Disqus 的资源的。

NexT启用Disqus-Proxy 不翻墙也能使用Disqus

多说于2017.06.01停止了服务，不得不选择其他的第三方评论服务，试了一下国内的服务发现不是麻烦（例如需要备案）就是不靠谱或者界面不炫酷（装X嫌疑…）

还是使用***Disqus吧…But，这个早就被GWF隔离了，虽然自己可以闪现过墙=.=，但游客不一定都会这个技能…
那么问题来了，怎么做一个公共的梯子实现人人翻墙？
在Gayhub全球最大同性交友网中发现，早就有大神做了这样一个服务，并选择了ciqulover(在此感谢大神的鼎力相助)的**Disque-Proxy***项目作为梯子。
当然也还有其他的Disqus-Proxy -> fooleap、 jiananshi

Flow

流程就没什么好说的了，如上图，在前端页面上测试 disqus 加载是否成功，如果成功则显示 disqus 的评论框，反之加载独立的评论框…
具体请看***https://ycwalker.com/2017/06/01/about-diqus-proxy/***

Get Api-secret

api-secret 需要你在 Disqus Api 的官方网站上开启 API 权限，申请成功后会得到这个秘钥。

并且需要在后台的 Settings => Community 里开启访客评论：

Deploy Disqus-Proxy

首先你得有一台可以访问Disqus的VPS… 博主用的是Linode**

Docker方式启动：

docker run -d --name disqus-proxy --restart=always -p 5509:5509 \
-e API_SECRECT=your_serect \
-e SHORT_NAME=your_short_name \
ycwalker/disqus-proxy-server 

更多方式请移步到 https://github.com/ciqulover/disqus-proxy-server

NexT Configuration

Copy Static File

将disqus-proxy项目中/build/static文件复制到博客../next/source/下。
static文件中应该包含main.0d0338ae.js和main.0603c539.css。

_config.yml

在主题配置文件中添加：

disqus\_proxy:
  enable: true
  # 如果 disqus 账号名没设置 那么 disqus\_proxy 也不会生效
  username: ookamiantd
  # 下面两项你需要更改为自己服务器的域名和端口
  server: disqus-proxy.yangbingdong.com 
  port: 5509  # 端口号需要与后端设置一致
  # 头像路径设置
  defaultAvatar: /images/avatar/avatar-default.jpg
  adminAvatar: /images/avatar/avatar-admin.jpg
  # 脚本和 css 路径
  js: /static/js/main.0d0338ae.js
  css: /static/css/main.0603c539.css

comment.swig

修改/next/layout/_partial/comment.swig，在最后一个</div>钱加上：

<div id="disqus\_proxy\_thread"></div>
 <div id="disqus\_thread"></div>
 {% if theme.disqus\_proxy.enable %}
 <script type="text/javascript">
 window.disqusProxy = {
 username: '{{ theme.disqus\_proxy.username }}',
 server: '{{ theme.disqus\_proxy.server }}',
 port: '{{ theme.disqus\_proxy.port }}',
 defaultAvatar: '{{ theme.disqus\_proxy.defaultAvatar }}',
 adminAvatar: '{{ theme.disqus\_proxy.adminAvatar }}',
 identifier: '{{ page.path }}'
 };
 window.disqus\_config = function () {
 this.page.url = '{{ page.permalink }}';
 this.page.identifier = '{{ page.path }}';
 };
 window.onload=function(){
 var s = document.createElement('script');
 s.src = "{{ theme.disqus\_proxy.js }}";
 s.async = true;
 document.body.appendChild(s);
 }
 </script>
 <link rel="stylesheet" href="{{ theme.disqus\_proxy.css }}">
 {% endif %}

渲染效果：

<div id="disqus\_proxy\_thread"></div>
<div id="disqus\_thread"></div>
<script type="text/javascript">
 window.disqusProxy = {
 username: 'ookamiantd',
 server: 'disqus-proxy.yangbingdong.com',
 port: '5509',
 defaultAvatar: '/images/avatar/avatar-default.jpg',
 adminAvatar: '/images/avatar/avatar-admin.jpg',
 identifier: '2017/disqus-proxy/'
 };
 window.disqus\_config = function () {
 this.page.url = 'http://ookamiantd.top/2017/disqus-proxy/';
 this.page.identifier = '2017/disqus-proxy/';
 };
 window.onload = function () {
 var s = document.createElement('script');
 s.src = "/static/js/main.0d0338ae.js";
 s.async = true;
 document.body.appendChild(s);
 }
</script>
<link rel="stylesheet" href="/static/css/main.0603c539.css">

custom.styl

可能由于改过样式还是本来就不兼容，评论框一开始显示不出来，*ciqulover*大神帮我加了个样式之后就好了。

在/next/source/css/_custom/custom.styl中添加：

#disqus\_proxy\_thread .post{
 opacity: 1 !important;
 box-shadow: none !important;
 -webkit-box-shadow: none !important;
}

博主也对评论框乱入了一些样式例如头像旋转…具体请看***main.0603c539.css***

Problem

博主使用了hexo-all-minifier进行静态文件压缩，不明原因导致那两个评论框的js和css压缩之后会报错，所以对压缩选项作设置，在站点配置文件中添加：

html_minifier:
  enable: true
  exclude: 

css_minifier:
  enable: true
  exclude: 
    - '/home/ybd/GitRepo/blog/themes/next/source/static/css/main.0603c539.css'

js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude: 
    - '/home/ybd/GitRepo/blog/themes/next/source/static/js/\*.\*.js'

image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

Show

这是翻墙状态：

这是disqus_proxy：

修改文章页宽

打开themes/next/source/css/_variables/base.styl，找到以下字段并修改为合适的宽度：

$content-desktop-large = 1000px

修改小型代码块颜色

修改\themes\next\source\css\ _variables\base.styl文件，加入自定义颜色：

$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
$blue-deep    = #262a30
$orange       = #fc6423
// 下面是我自定义的颜色
$my-code-foreground = #dd0055  // 用``围出的代码块字体颜色
$my-code-background = #eee  // 用``围出的代码块背景颜色

修改$code-background和$code-foreground的值：

// Code & Code Blocks // 用``围出的代码块 // -------------------------------------------------- 
$code-font-family               = $font-family-monospace 
$code-font-size                 = 15px 
$code-background                = $my-code-background 
$code-foreground                = $my-code-foreground 
$code-border-radius             = 4px

文章末尾追加版权信息

找到themes/next/layout/_macro/post.swig，在footer之前添加如下代码(添加之前确保已添加***样式***)：

<div>
 <p id="div-border-left-red">
 <b>本文基于<a target="\_blank" title="Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)" href="http://creativecommons.org/licenses/by-sa/4.0/"> 知识共享署名-相同方式共享 4.0 </a>国际许可协议发布</b><br/>
 <span>
 <b>本文地址：</b><a href="{{ url\_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><br/><b>转载请注明出处，谢谢！</b>
 </span>
 </p>
</div>

添加文章结束标记

同样在themes/next/layout/_macro/post.swig中，在wechat-subscriber.swig之前添加如下代码：

<div style="text-align:center;color: #ccc;font-size:14px;">---------------- The End ----------------</div>

添加热度

在/themes/hexo-theme-next/layout/_macro/post.swig里面的下面的位置加上如下代码：

{% if post.categories and post.categories.length %}
 <span class="post-category" >
 </span>
 {% endif %}

 <!-- 在下面的位置加上如下代码 -->
 <span id="busuanzi\_container\_page\_pv">
 &nbsp; | &nbsp; 热度&nbsp; <span id="busuanzi\_value\_page\_pv"></span>°C
 </span>
 <!-- 在上面的位置加上如上代码 --> 

 {% if post.comments %}
 {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo\_shortname %}
 <span class="post-comments-count">
 &nbsp; | &nbsp;
 <a href="{{ url\_for(post.path) }}#comments" itemprop="discussionUrl">
 <span class="post-comments-count ds-thread-count" data-thread-key="{{ post.path }}" itemprop="commentsCount"></span>
 </a>
 </span> 

但是这有一个缺陷。就是我们会发现在主页时显示的热度和进入博客后的热度不一样，那是因为在主页时他显示的是主页这个页面的阅读量，而不是博客的阅读量，所以我们需要改变一些：

我们在/themes/hexo-theme-next/layout/_macro/目录下新建post-article.swig,把这些post.swig中的内容复制过去，而且加上上面的统计代码，然后在/themes/hexo-theme-next/layout/post.swig上面% import '_macro/post.swig' as post_template %中的post.swig改成post-article.swig，这样子就解决啦。就是在主页上的博客名字下面不会有阅读人数，进入博客才能看见

添加最近访客

多说评论关闭

添加Fork me on GitHub

去网址*https://github.com/blog/273-github-ribbons*挑选自己喜欢的样式，并复制代码，添加到themes\next\layout\_layout.swig的body标签之内即可
记得把里面的url换成自己的!

把侧边栏头像变成圆形，并且鼠标停留在上面发生旋转效果

修改themes\next\source\css\_common\components\sidebar\sidebar-author.styl：

.site-author-image {

 display: block;
 margin: 0 auto;
 padding: $site-author-image-padding;
 max-width: $site-author-image-width;
 height: $site-author-image-height;
 border: site-author-image-border-color;

 /\* start\*/
 border-radius: 50%
 webkit-transition: 1.4s all;
 moz-transition: 1.4s all;
 ms-transition: 1.4s all;
 transition: 1.4s all;
 /\* end \*/

}

/\* start \*/
.site-author-image:hover {

 background-color: #55DAE1;
 webkit-transform: rotate(360deg) scale(1.1);
 moz-transform: rotate(360deg) scale(1.1);
 ms-transform: rotate(360deg) scale(1.1);
 transform: rotate(360deg) scale(1.1);
}
/\* end \*/

修改链接文字样式

打开themes\next\source\css\_common\components\post\post.styl添加以下代码：

.post-body p a{

 color: #0593d3;
 border-bottom: none;
 &:hover {
   color: #ff106c;
   text-decoration: underline;
 }

}

themes/next/source/css/_common/components/post/post-title.styl修改为：

.posts-expand .post-title-link {

  display: inline-block;
  border-bottom: none;
  line-height: 1.2;
  vertical-align: top;

  &::before {
  ......

为next主题的主页文章添加阴影效果

打开themes/next/source/css/_custom/custom.styl文件添加：

 .post {
 margin-top: 60px;
 margin-bottom: 60px;
 padding: 25px;
 -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
 -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
 }

为next主题添加nest背景特效

背景的几何线条是采用的nest效果，一个基于html5 canvas绘制的网页背景效果，非常赞！来自github的开源项目canvas-nest

特性

• 不依赖任何框架或者内库，比如不依赖jQuery，使用原生的javascript。
• 非常小，只有1.66kb，如果开启gzip，可以更小。
• 非常容易实现，配置简单，即使你不是web开发者，也能简单搞定。

使用非常简单

• color: 线条颜色, 默认: ‘0,0,0’ ；三个数字分别为(R,G,B)，注意用,分割
• opacity: 线条透明度（0~1）, 默认: 0.5
• count: 线条的总数量, 默认: 150
• zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

eg :

<script type="text/javascript" color="255,132,0" opacity='0.6' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

不足: CPU占用过高

如何添加?

修改代码

打开next/layout/_layout.swig，在</body>之前添加如下代码：

{% if theme.canvas\_nest %}

<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

{% endif %}

修改主题配置文件

打开/next/_config.yml，添加以下代码：

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

至此，大功告成，运行hexo clean 和 hexo g hexo s之后就可以看到效果了

多说评论优化以及美化

update：由于多说即将关闭，此博客将使用Disqus作为评论系统

添加音乐

去往*网易云音乐*搜索喜欢的音乐，点击生成外链播放器，复制代码直接放到博文末尾即可，height设为0可隐藏播放器，但仍然可以播放音乐，auto设成0可手动播放，默认是1自动播放，可把代码放到themes/next/layout/_custom/sidebar.swig文件里，播放器会显示在站点预览中

添加注脚

安装插件：

npm install hexo-reference --save

用法如下：

this is a basic footnote[/^1] ##用的时候把/去掉

在文章末尾添加：

[/^1]: basic footnote content ##用的时候把/去掉

eg:this is a basic footnote[^1]

自定义页面

执行hexo new page "guestbook"之后，那怎么在博客中加进去呢？
找到\next\_config.yml下的memu，把guestbook加进去：

menu:
 home: /
 categories: /categories
 #about: /about
 archives: /archives
 tags: /tags
 guestbook: /guestbook

图标网站：http://fontawesome.io/icons/

在/themes/hexo-theme-next/languages/zh-Hans.yml的目录下（这里默认你使用的是简体中文，若是其他语言更改相应的yml就行），在memu下加一句即可：

guestbook: 留言

添加字数统计和阅读时间

安装插件

npm install hexo-wordcount --save

通过以上安装后，你可以在你的模板文件后者.md文件加入以下相关的标签实现本插件的功能
字数统计:WordCount
阅读时长预计:Min2Read
总字数统计: TotalCount

修改post.swig模板

找到themes\next\layout\_macro\post.swig并打开插入以下代码：

{# LeanCould PageView #}
 {% if theme.leancloud\_visitors.enable %}
 <span id="{{ url\_for(post.path) }}" class="leancloud\_visitors" data-flag-title="{{ post.title }}">
 &nbsp; | &nbsp;
 <span class="post-meta-item-icon">
 <i class="fa fa-eye"></i>
 </span>
 <span class="post-meta-item-text">{{\_\_('post.visitors')}} </span>
 <span class="leancloud-visitors-count"></span>
 </span>
 {% endif %}


#以下部分为：字数统计、阅读时长插入代码
 <span class="post-time">
 &nbsp; | &nbsp;
 <span class="post-meta-item-icon">
 <i class="fa fa-calendar-o"></i>
 </span>
 <span class="post-meta-item-text">字数统计:</span>
 <span class="post-count">{{ wordcount(post.content) }}(字)</span>

 </span>

 <span class="post-time">
 &nbsp; | &nbsp;
 <span class="post-meta-item-icon">
 <i class="fa fa-calendar-o"></i>
 </span>
 <span class="post-meta-item-text">阅读时长:</span>
 <span class="post-count">{{ min2read(post.content) }}(分)</span>

 </span>
#以上部分为：字数统计、阅读时长插入代码

修改footer

修改之后的样子大概是这样的：

1、找到 \themes\next\layout\partials\下面的footer.swig文件，打开会发现，如下图的语句：

• 第一个框 是下面侧栏的“日期❤ XXX”
  如果想像我一样加东西，一定要在双大括号外面写。如：xxx{{config.author}},当然你要是想改彻底可以变量都删掉，看个人意愿。
• 第二个，是图一当中 “由Hexo驱动” 的Hexo链接，先给删掉防止跳转，如果想跳转当然也可以自己写地址，至于中文一会处理。注意删除的时候格式不能错，只把<a>...</a>标签这部分删除即可，留着两个单引号”,否则会出错哦。
• 第三个框也是最后一个了，这个就是更改图一后半部分“主题-Next.XX”,这个比较爽直接将…都删掉，同样中文“主题”一会处理，删掉之后在上一行 ‘-’后面可以随意加上你想显示的东西，不要显示敏感信息哟，请自重。

2、接下来，处理剩余的中文信息。找到这个地方\themes\next\languages\ 下面的语言文件zh-Hans.yml（这里以中文为例，有的习惯用英文的配置文件，道理一样，找对应位置即可）
打开之后，如图：

看到了吧，这个就是传值传过去的，你想显示什么就在这里面大肆的去改动吧。其实在第二个框中，就可以把值都改掉，不用接受传值的方式，完全自己可以重写。不过我不建议那样做，因为传值这样只要是后续页面需要这几个值那么就都会通过取值去传过去，要是在刚才footer文件中直接写死，后续不一定哪个页面需要传值，但是值为空了或者还是原来的，可就尴尬了。所以还是这样改动吧。

元素微调自定义篇

那么如何把字体、页宽、按钮大小等等一些细节的东西调到自己喜欢的样式呢？
那就是通过浏览器元素定位，调到自己喜欢的样式，然后加到themes/next/source/css/_custom/custom.styl文件下面。

定位元素

用谷歌或者火狐浏览器打开博客页面，按下F12进入调试
先点击定位按钮，然后选择元素，然后在定位出来的样式进行修改，调到自己喜欢的样子，就像这样↓

添加到样式文件

打开themes/next/source/css/_custom/custom.styl，把调试好的样式加进去，保存后Ctrl+F5就能看到效果了，前提是在本地运行的，下面列出博主的一些自定义样式：

// Custom styles.
// 页面头部背景
.header {  background:url(http://ojoba1c98.bkt.clouddn.com/img/header/header\_background.jpg);}

// 子标题
.site-subtitle{ font-size: 15px; color: white; }

// 标题
.site-title {
    font-size: 40px;
    font-weight: bold;
}

// 标题背景
.brand{
    background: transparent;
}

// 菜单栏
.menu {
    margin-top: 20px;
    padding-left: 0;
    text-align: center;
    background: rgba(240, 240, 240, 0.5);
    margin-left: auto;
    margin-right: auto;
    width: 530px;
    border-radius: initial;
}

// 菜单图表链接 以及 超链接样式
a {
    color: rgba(0,0,0,0.8);
}
a:hover {
    color: #ff106c;
    border-bottom-color: #ff106c;
}

// 菜单字体大小
.menu .menu-item a {
    font-size: 14px;
}
.menu .menu-item a:hover {
    border-bottom-color: #ff106c;
}


// 文章背景框框
.post {
    margin-top: 10px;
    margin-bottom: 40px;
    padding: 18px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, 0.8);
   }

// 站点描述
.site-description {
    font-size: 16px;

}

// 头部inner
.header-inner {
    padding: 45px 0 25px;
    width: 700px;
}

// 作者名
.site-author-name {
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 20px;
}

// 文章之间的分割线
.posts-expand .post-eof {
    margin: 40px auto 40px;
    background: white;
}

// 按钮样式
.btn {
    margin-top: 20px;
}

// ``代码块样式
code {
    color: #E6006B;
    background: white;
    border-radius: 3px;
}


body {
    color: #444;
    font-size: 16px;
}

但并不是所有的样式都能调，像页宽，多说评论的样式在custom.styl文件是无效的。

好玩的样式

先在themes/next/source/css/_custom/custom.styl中添加以下样式：

// 下载样式
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}
/ /颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
// 左侧边框红色块级
p#div-border-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #df3e3e;
}
// 左侧边框黄色块级
p#div-border-left-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #f0ad4e;
}
// 左侧边框绿色块级
p#div-border-left-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #5cb85c;
}
// 左侧边框蓝色块级
p#div-border-left-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #2780e3;
}
// 左侧边框紫色块级
p#div-border-left-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #9954bb;
}
// 右侧边框红色块级
p#div-border-right-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #df3e3e;
}
// 右侧边框黄色块级
p#div-border-right-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #f0ad4e;
}
// 右侧边框绿色块级
p#div-border-right-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #5cb85c;
}
// 右侧边框蓝色块级
p#div-border-right-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #2780e3;
}
// 右侧边框紫色块级
p#div-border-right-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #9954bb;
}
// 上侧边框红色
p#div-border-top-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #df3e3e;
}
// 上侧边框黄色
p#div-border-top-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #f0ad4e;
}
// 上侧边框绿色
p#div-border-top-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #5cb85c;
}
// 上侧边框蓝色
p#div-border-top-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #2780e3;
}
// 上侧边框紫色
p#div-border-top-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #9954bb;
}

用法如下：

文字增加背景色块

站点配置文件 ，主题配置文件

<span id="inline-blue">站点配置文件</span>， 
<span id="inline-purple">主题配置文件</span>

引用边框变色

如果没有安装成功，那可能就是墙的原因。建议下载 Node.js 直接安装。

关于更多基本操作和基础知识，请查阅 Hexo 与 NexT 官方文档.

<p id="div-border-left-red">如果没有安装成功，那可能就是墙的原因。建议下载 `Node.js` 直接安装。</p>
<p id="div-border-top-blue">关于更多基本操作和基础知识，请查阅 [Hexo]( ) 与 [NexT]( ) 官方文档.</p>

在文档中增加图标

• 支持Markdown
  Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
• 一件部署
  只需一条指令即可部署到Github Pages，或其他网站
• 丰富的插件
  Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。

- <i class="fa fa-pencil"></i>支持Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。</i>
- <i class="fa fa-cloud-upload"></i>一件部署
<i>只需一条指令即可部署到Github Pages，或其他网站</i>
- <i class="fa fa-cog"></i>丰富的插件
<i>Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。</i>


为了做好运维面试路上的助攻手，特整理了上百道 **【运维技术栈面试题集锦】** ，让你面试不慌心不跳，高薪offer怀里抱！

这次整理的面试题，**小到shell、MySQL，大到K8s等云原生技术栈，不仅适合运维新人入行面试需要，还适用于想提升进阶跳槽加薪的运维朋友。**

![](https://img-blog.csdnimg.cn/img_convert/74d8eeff58adbd84aa9187ebf914ef39.png)

本份面试集锦涵盖了

*   **174 道运维工程师面试题**
*   **128道k8s面试题**
*   **108道shell脚本面试题**
*   **200道Linux面试题**
*   **51道docker面试题**
*   **35道Jenkis面试题**
*   **78道MongoDB面试题**
*   **17道ansible面试题**
*   **60道dubbo面试题**
*   **53道kafka面试**
*   **18道mysql面试题**
*   **40道nginx面试题**
*   **77道redis面试题**
*   **28道zookeeper**

**总计 1000+ 道面试题， 内容 又全含金量又高**

*   **174道运维工程师面试题**

> 1、什么是运维?

> 2、在工作中，运维人员经常需要跟运营人员打交道，请问运营人员是做什么工作的?

> 3、现在给你三百台服务器，你怎么对他们进行管理?

> 4、简述raid0 raid1raid5二种工作模式的工作原理及特点

> 5、LVS、Nginx、HAproxy有什么区别?工作中你怎么选择?

> 6、Squid、Varinsh和Nginx有什么区别，工作中你怎么选择?

> 7、Tomcat和Resin有什么区别，工作中你怎么选择?

> 8、什么是中间件?什么是jdk?

> 9、讲述一下Tomcat8005、8009、8080三个端口的含义？

> 10、什么叫CDN?

> 11、什么叫网站灰度发布?

> 12、简述DNS进行域名解析的过程?

> 13、RabbitMQ是什么东西?

> 14、讲一下Keepalived的工作原理?

> 15、讲述一下LVS三种模式的工作过程?

> 16、mysql的innodb如何定位锁问题，mysql如何减少主从复制延迟?

> 17、如何重置mysql root密码?

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以点击这里获取！](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**


为了做好运维面试路上的助攻手，特整理了上百道 **【运维技术栈面试题集锦】** ，让你面试不慌心不跳，高薪offer怀里抱！

这次整理的面试题，**小到shell、MySQL，大到K8s等云原生技术栈，不仅适合运维新人入行面试需要，还适用于想提升进阶跳槽加薪的运维朋友。**

[外链图片转存中...(img-DWktLukZ-1715272449611)]

本份面试集锦涵盖了

*   **174 道运维工程师面试题**
*   **128道k8s面试题**
*   **108道shell脚本面试题**
*   **200道Linux面试题**
*   **51道docker面试题**
*   **35道Jenkis面试题**
*   **78道MongoDB面试题**
*   **17道ansible面试题**
*   **60道dubbo面试题**
*   **53道kafka面试**
*   **18道mysql面试题**
*   **40道nginx面试题**
*   **77道redis面试题**
*   **28道zookeeper**

**总计 1000+ 道面试题， 内容 又全含金量又高**

*   **174道运维工程师面试题**

> 1、什么是运维?

> 2、在工作中，运维人员经常需要跟运营人员打交道，请问运营人员是做什么工作的?

> 3、现在给你三百台服务器，你怎么对他们进行管理?

> 4、简述raid0 raid1raid5二种工作模式的工作原理及特点

> 5、LVS、Nginx、HAproxy有什么区别?工作中你怎么选择?

> 6、Squid、Varinsh和Nginx有什么区别，工作中你怎么选择?

> 7、Tomcat和Resin有什么区别，工作中你怎么选择?

> 8、什么是中间件?什么是jdk?

> 9、讲述一下Tomcat8005、8009、8080三个端口的含义？

> 10、什么叫CDN?

> 11、什么叫网站灰度发布?

> 12、简述DNS进行域名解析的过程?

> 13、RabbitMQ是什么东西?

> 14、讲一下Keepalived的工作原理?

> 15、讲述一下LVS三种模式的工作过程?

> 16、mysql的innodb如何定位锁问题，mysql如何减少主从复制延迟?

> 17、如何重置mysql root密码?

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以点击这里获取！](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**