头部样式
<head>
<meta charset="UTF-8">
<title>NIS KBR</title>
<link rel="icon" href="static/img/favicon.ico" type="image/x-icon">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<!-- Theme: Simple Dark -->
<link rel="stylesheet" href="static/css/vue.css">
<link rel="stylesheet" href="static/css/sidebar.min.css">
<link rel="stylesheet" href="static/css/blog_style.css">
<style type="text/css">.medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}</style><style type="text/css">.docsify-pagination-container{display:flex;flex-wrap:wrap;justify-content:space-between;overflow:hidden;margin:5em 0 1em;border-top:1px solid rgba(0,0,0,.0)}.pagination-item{margin-top:2.5em}.pagination-item a,.pagination-item a:hover{text-decoration:none}.pagination-item a{color:currentColor}.pagination-item a:hover .pagination-item-title{text-decoration:underline}.pagination-item:not(:last-child) a .pagination-item-label,.pagination-item:not(:last-child) a .pagination-item-subtitle,.pagination-item:not(:last-child) a .pagination-item-title{opacity:.3;transition:all .2s}.pagination-item:last-child .pagination-item-label,.pagination-item:not(:last-child) a:hover .pagination-item-label{opacity:.6}.pagination-item:not(:last-child) a:hover .pagination-item-title{opacity:1}.pagination-item-label{font-size:.8em}.pagination-item-label>*{line-height:1;vertical-align:middle}.pagination-item-label svg{height:.8em;width:auto;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}.pagination-item--next{margin-left:auto;text-align:right}.pagination-item--next svg{margin-left:.5em}.pagination-item--previous svg{margin-right:.5em}.pagination-item-title{font-size:1.6em}.pagination-item-subtitle{text-transform:uppercase;opacity:.3}</style><style type="text/css">.alert{display:block;position:relative;word-wrap:break-word;word-break:break-word;padding:.75rem 1.25rem!important;margin-bottom:1rem!important}.alert>*{max-width:100%}.alert>:first-child{margin-top:0}.alert>:last-child{margin-bottom:0}.alert:before{content:unset!important}.alert+.alert{margin-top:-.25rem!important}.alert p{margin-top:.5rem;margin-bottom:.5rem}.alert .title{display:flex;align-items:center;flex-wrap:wrap;font-weight:600;margin:0}.icon{display:inline-block;width:16px;height:16px;background-repeat:no-repeat;margin-right:.5rem}.alert.callout{border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem;background:var(--background)}.alert.callout.note{border-left-color:#17a2b8!important}.alert.callout.note .title{color:#17a2b8}.alert.callout.note .icon-note{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%2317a2b8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 108 0a8 8 0 000 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 100-2 1 1 0 000 2z'/%3E%3C/svg%3E")}.alert.callout.tip{border-left-color:#28a745!important}.alert.callout.tip .title{color:#28a745}.alert.callout.tip .icon-tip{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 352 512' fill='%2328a745' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z'/%3E%3C/svg%3E")}.alert.callout.warning{border-left-color:#f0ad4e!important}.alert.callout.warning .title{color:#f0ad4e}.alert.callout.warning .icon-warning{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 17 16' fill='%23f0ad4e' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8.982 1.566a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 00-.9.995l.35 3.507a.552.552 0 001.1 0l.35-3.507A.905.905 0 008 5zm.002 6a1 1 0 100 2 1 1 0 000-2z'/%3E%3C/svg%3E")}.alert.callout.attention{border-left-color:#dc3545!important}.alert.callout.attention .title{color:#dc3545}.alert.callout.attention .icon-attention{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%23dc3545' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z'/%3E%3Cpath fill-rule='evenodd' d='M11.354 4.646a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708l6-6a.5.5 0 01.708 0z'/%3E%3C/svg%3E")}.alert.flat{border-radius:.125rem;color:#383d41;background-color:#e2e3e5;border:1px solid #d6d8db}.alert.flat.note{color:#02587f;background-color:#cdeefd;border-color:#b4e6fc}.alert.flat.note .title{color:#01354d}.alert.flat.note .icon-note{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%2301354d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 108 0a8 8 0 000 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 100-2 1 1 0 000 2z'/%3E%3C/svg%3E")}.alert.flat.tip{color:#285b2a;background-color:#dbefdc;border-color:#c9e7cb}.alert.flat.tip .title{color:#18381a}.alert.flat.tip .icon-tip{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 352 512' fill='%2318381a' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z'/%3E%3C/svg%3E")}.alert.flat.warning{color:#852d12;background-color:#ffddd3;border-color:#ffc9ba}.alert.flat.warning .title{color:#581e0c}.alert.flat.warning .icon-warning{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 17 16' fill='%23581e0c' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8.982 1.566a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 00-.9.995l.35 3.507a.552.552 0 001.1 0l.35-3.507A.905.905 0 008 5zm.002 6a1 1 0 100 2 1 1 0 000-2z'/%3E%3C/svg%3E")}.alert.flat.attention{color:#7f231c;background-color:#fdd9d7;border-color:#fcc2bf}.alert.flat.attention .title{color:#551713}.alert.flat.attention .icon-attention{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%23551713' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z'/%3E%3Cpath fill-rule='evenodd' d='M11.354 4.646a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708l6-6a.5.5 0 01.708 0z'/%3E%3C/svg%3E")}</style><style type="text/css">.docsify-copy-code-button,.docsify-copy-code-button span{cursor:pointer;transition:all .25s ease}.docsify-copy-code-button{position:absolute;z-index:1;top:0;right:0;overflow:visible;padding:.65em .8em;border:0;border-radius:0;outline:0;font-size:1em;background:grey;background:var(--theme-color,grey);color:#fff;opacity:0}.docsify-copy-code-button span{border-radius:3px;background:inherit;pointer-events:none}.docsify-copy-code-button .error,.docsify-copy-code-button .success{position:absolute;z-index:-100;top:50%;right:0;padding:.5em .65em;font-size:.825em;opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.docsify-copy-code-button.error .error,.docsify-copy-code-button.success .success{right:100%;opacity:1;-webkit-transform:translate(-115%,-50%);transform:translate(-115%,-50%)}.docsify-copy-code-button:focus,pre:hover .docsify-copy-code-button{opacity:1}</style><style type="text/css">.sidebar-nav > ul > li ul {
display: none;
}
.app-sub-sidebar {
display: none;
}
.app-sub-sidebar.open {
display: block;
}
.sidebar-nav .open > ul:not(.app-sub-sidebar),
.sidebar-nav .active:not(.collapse) > ul {
display: block;
}
/* 抖动 */
.sidebar-nav li.open:not(.collapse) > ul {
display: block;
}
.active + ul.app-sub-sidebar {
display: block;
}
</style><style type="text/css">@media screen and (max-width: 768px) {
/* 移动端适配 */
.markdown-section {
max-width: none;
padding: 16px;
}
/* 改变原来按钮热区大小 */
.sidebar-toggle {
padding: 0 0 10px 10px;
}
/* my pin */
.sidebar-pin {
appearance: none;
outline: none;
position: fixed;
bottom: 0;
border: none;
width: 40px;
height: 40px;
background: transparent;
}
}
</style><style>
.sidebar {
padding-top: 0;
}
.search {
margin-bottom: 20px;
padding: 6px;
border-bottom: 1px solid #eee;
}
.search .input-wrap {
display: flex;
align-items: center;
}
.search .results-panel {
display: none;
}
.search .results-panel.show {
display: block;
}
.search input {
outline: none;
border: none;
width: 100%;
padding: 0 7px;
line-height: 36px;
font-size: 14px;
border: 1px solid transparent;
}
.search input:focus {
box-shadow: 0 0 5px var(--theme-color, #42b983);
border: 1px solid var(--theme-color, #42b983);
}
.search input::-webkit-search-decoration,
.search input::-webkit-search-cancel-button,
.search input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search .clear-button {
cursor: pointer;
width: 36px;
text-align: right;
display: none;
}
.search .clear-button.show {
display: block;
}
.search .clear-button svg {
transform: scale(.5);
}
.search h2 {
font-size: 17px;
margin: 10px 0;
}
.search a {
text-decoration: none;
color: inherit;
}
.search .matching-post {
border-bottom: 1px solid #eee;
}
.search .matching-post:last-child {
border-bottom: 0;
}
.search p {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.search p.empty {
text-align: center;
}
.app-name.hide, .sidebar-nav.hide {
display: none;
}</style></head>
blog_style.css
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f6f7;
}
.cover-main p a:hover {
background-color: #42b983;
color: #ffffff !important;
font-size: 20px;
font-weight: 400;
}
/*搜索栏默认样式*/
.sidebar .search .input-wrap input {
border: 1px solid #c6ccd2;
border-radius: 3px;
margin: 10px 0;
}
.sidebar .search .results-panel p {
text-align: center;
color: #fe4e37;
font-weight: 700;
line-height: 50px;
}
.markdown-section {
font-size: 16px;
line-height: 20px;
max-width: 80%;
min-height: 80%;
margin: 10px auto;
padding: 50px;
background-color: #ffffff;
border-collapse: collapse;
border-radius: 5px;
letter-spacing: 1px;
}
.markdown-section h1 {
letter-spacing: 5px;
text-align: center;
padding-bottom: 20px;
border-bottom: 2px solid #00c0a5;
}
.markdown-section h1:before {
content: "『 ";
}
.markdown-section h1:after {
content: " 』";
}
.markdown-section h1 span {
font-size: 30px;
}
.markdown-section h2 {
border-bottom: 1px solid #f0f0f0;
padding-bottom: 10px;
font-size: 25px;
letter-spacing: 4px;
}
.markdown-section h2:before {
content: § ";
color: #0366d6;
line-height: 100%;
font-size: 1.2em;
}
.markdown-section h3 {
margin-left: 5px;
font-size: 20px;
padding-bottom: 10px;
letter-spacing: 2px;
}
.markdown-section h3:before {
content: "➤ ";
line-height: 100%;
font-size: 0.8em;
}
.markdown-section h4, .markdown-section h5, .markdown-section h6 {
margin-left: 10px;
margin-bottom: 2px;
font-size: 18px;
padding: 3px 0 5px 0;
}
/*文章引用内容样式设置*/
.markdown-section blockquote {
color: rgba(0, 0, 0, .5);
border: 1px solid #f0f0f0;
border-left: 15px solid #42c0b6;
border-radius: 5px;
background-color: #f0f0f0;
margin: 10px 30px 10px 10px;
padding: 3px 10px 3px 10px;
}
.markdown-section blockquote:hover {
color: #34495e;
border: 1px solid #42c0b6;
border-left: 15px solid #42c0b6;
border-radius: 5px;
}
.markdown-section ul {
margin-left: 20px;
}
.markdown-section > p {
margin-left: 12px;
margin-right: 30px;
}
.markdown-section strong {
font-weight: 700;
color: #0366d6;
}
.markdown-section em {
font-style: normal;
font-weight: 700;
color: #f04b3d;
}
/*图片默认圆角+阴影效果*/
img {
display: block;
border-radius: 3px;
box-shadow: 0 0 10px #2c3e50;
margin: 30px auto;
text-align: center;
max-width: 75%;
}
a:hover {
text-decoration: none !important;
}
pre {
display: block;
margin: 10px 30px 10px 10px !important;
border-radius: 5px;
}
/*侧边栏设置*/
.sidebar {
display: block;
background-color: #f4fffc;
}
.app-name-link {
text-shadow: 3px 0 10px rgba(0, 0, 0, .2);
display: block;
margin: 30px 0;
font-weight: 600;
font-size: 23px;
padding-bottom: 20px;
border-bottom: 1px solid #eeeeee;
border-radius: 15px;
}
.app-name-link:hover {
color: #4e6ef2;
}
.sidebar-nav ul {
padding-left: 10px;
}
.sidebar-nav ul li {
padding-left: 5px;
font-weight: 800;
font-size: 16px;
letter-spacing: 2px;
border-radius: 5px;
color: #5f5750;
line-height: 30px;
}
.sidebar-nav ul li:hover {
color: #ff6700;
}
.sidebar-nav ul li a {
font-weight: 600;
color: #34495e;
}
.sidebar-nav ul li a:hover {
font-weight: 600;
color: #42b983;
border-bottom: 1px solid #42b983;
}
.pagination-item-title {
font-size: 1.2em;
margin: 0.5em 0 1em 0;
}
/*底部版权声明内容样式*/
.blog_footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background-color: #eee;
z-index: 9999;
line-height: 50px;
font-size: 15px;
font-weight: 600;
}
头部html
<section class="cover show" style="background: rgb(245, 246, 247);"><div class="mask"></div><div class="cover-main"><h1 id="『-nis运维知识管理平台-』欢迎来访"><a href="http://nissre.gts.huawei.com/#/?id=%e3%80%8e-nis%e8%bf%90%e7%bb%b4%e7%9f%a5%e8%af%86%e7%ae%a1%e7%90%86%e5%b9%b3%e5%8f%b0-%e3%80%8f%e6%ac%a2%e8%bf%8e%e6%9d%a5%e8%ae%bf" data-id="『-nis运维知识管理平台-』欢迎来访" class="anchor"><span>『 NIS运维知识管理平台 』<br>欢迎来访<br></span></a></h1><p><span id="sitetime"> 🎮 已运行 43 天 10 小时 3 分钟 </span></p><p><a href="https://gdemate.gts.huawei.com/context/version/251495576/reqList?paramsPath=cloudreq-obp/productSpace/pi/2012326462" target="_blank" rel="noopener">需求看板</a>
index.html设置
<!-- Docsify v4 -->
<!--<!– docsify的js依赖 –>-->
<!--<script src="static/js/disqus.min.js"></script>-->
<!-- emoji表情支持 -->
<script src="./NIS KBR_files/emoji.min.js.下载"></script>
<!-- 图片放大缩小支持 -->
<script src="./NIS KBR_files/zoom-image.min.js.下载"></script>
<!-- 搜索功能支持 -->
<script src="./NIS KBR_files/search.min.js.下载"></script>
<!--分页导航插件-->
<script src="./NIS KBR_files/docsify-pagination.min.js.下载"></script>
<!-- 面包屑提示 -->
<script src="./NIS KBR_files/docsify-plugin-flexible-alerts.min.js.下载"></script>
<!-- 添加版权信息 -->
<script src="./NIS KBR_files/docsify-footer-enh.min.js.下载"></script>
<!--<!– mouse click –>-->
<!--<script src="static/js/click_heart.js"></script>-->
<script src="./NIS KBR_files/click_words.js.下载"></script>
<!-- 复制提醒 -->
<script src="./NIS KBR_files/sweetalert.min.js.下载"></script>
<!-- alert 样式 -->
<link rel="stylesheet" href="./NIS KBR_files/sweetalert.min.css" type="text/css" media="all">
<script>
document.body.oncopy = function () {
swal("复制成功 🎉",
"NIS运维团队,推动高效运维解决方案. 😊",
"success");
};
</script>
<!-- 运行时间统计-->
<span id="sitetime"> 🎮 已运行 37 天 9 小时 3 分钟 </span>
<script language="javascript">
function siteTime() {
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth() + 1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
/* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
year - 作为date对象的年份，为4位年份值
month - 0-11之间的整数，做为date对象的月份
day - 1-31之间的整数，做为date对象的天数
hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
minutes - 0-59之间的整数，做为date对象的分钟数
seconds - 0-59之间的整数，做为date对象的秒数
microseconds - 0-999之间的整数，做为date对象的毫秒数 */
var t1 = Date.UTC(2021, 1, 1, 0, 0, 0); //北京时间2020-02-10 00:00:00
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
var diff = t2 - t1;
var diffYears = Math.floor(diff / years);
var diffDays = Math.floor((diff / days) - diffYears * 365);
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
document.getElementById("sitetime").innerHTML = " 🎮 已运行 " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 ";
}
siteTime();
</script>
