docisfy样式

原创
2021/02/11 09:32
阅读数 57

头部样式

<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 -->
<!--&lt;!&ndash; docsify的js依赖 &ndash;&gt;-->
<!--<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>
<!--&lt;!&ndash; mouse click &ndash;&gt;-->
<!--<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>
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部