# 1.10 hexo网页定制

## 摘要

本文记录了1.10 hexo网页定制，要知道原作官方提供的hexo yeele网站的手机页面和电脑页面css布局和java页面交互的文本进行个性定制。第一部分，设置手机页面的 mobile-slider.styl 等文件， 里面的css文件。

第二部分是java交互界面的文件设置。

* [x] Edit By Porter, 积水成渊,蛟龙生焉。

文章同步于: [我的gitbook](https://porter.gitbook.io/)

## 一、样式定制之css样式文件定制

* 使用之前删掉里面的注释

  **1.1 mobile-slider.styl**

```css
#viewer{
    position: fixed;
    z-index: 1000000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
//mune bar setting
#viewer-box{
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
//设置浮窗的左边距
    left:30px;
    color: #0f0;
    -webkit-transform: translate3d(-100%, 0, 0 );
    -webkit-transition: -webkit-transform .25s ease-in-out;
//设置悬浮的弹窗页面
    .viewer-box-l{
        background: rgba(20,20,20,1);
        width: 80%;
        height: auto;
        flex-grow: 0;
        min-width: 8em;
        max-width: 23em;
        .viewer-box-wrap{
        //revise the moble menu
            margin: 20px 10px 10px 0px;
        }
        //frends links menu
        .viewer-title{
            line-height: 32px;
        //black
        background: rgba(0,0,0,1);
            &:before{
                content: "";
                width: 6px;
                height: 6px;
                //border: 1px solid #999;
        border: 1px solid #006699;
                -webkit-border-radius: 10px;
                border-radius: 10px;
        //background is tabar of list content
                background: #0000cc;
                display: inline-block;
                margin-right: 10px;
            }
        }
        //div Underline, dash
        .viewer-div{
        //setting div 黄色背景幕布
        background: rgba(255,255,153,0.85);
        //蓝色圆点
            border-bottom: 1px dotted #0000cc;
            padding-bottom: 13px;
            line-height: 20px;
            &:last-child{
        //设置标签背景白色透明，不继承上面的白色
                border-bottom: none;
        background: rgba(229,229,255,0.01);
            }
            .switch-friends-link{
                line-height: 20px;
            }
        }
    }
    //black
    .viewer-box-r{
        flex-grow: 1
        width: auto
        height: auto
        background: rgba(0,0,0,1)
        &:hover {
            cursor: w-resize
        }
    }
}
#viewer-box.anm-swipe{
    -webkit-transform:  translate3d(0, 0, 0);
    .viewer-box-r{
        background: rgba(0,0,0,1);
    }
}
.hide{
    display: none;
}
#viewer-box .viewer-list{
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
```

### 1.1 mobile.styl

```css
.left-col {
    display: none;
}
.mid-col {
    left: 0;
}
#header{
    .header-nav{
        position: relative;
    }
    .header-menu {
        line-height: 1.3
        min-height 3rem
    }
}
.header-author{
    &.fixed{
        position: fixed;
        top: -8px;
        width: 100%;
        color: #ddd;
        a {
          color: white;
        }
    }
}
.overlay{
    .slider-trigger{
        position: absolute;
/*设置手机页面滑动图标置于最上层显示*/
        z-index: 999;
        bottom: 0;
        left: 0;
        width: 42px;
        height: 42px;
        &:hover{
            background: #3399;
        /*background: #444;*/
        }
        &:before{
        /*background: #ff3399;*/
            color: #ddd;
            content: "\f00b";
            font: 16px FontAwesome;
            width: 16px;
            height: 16px;
            margin-left: 9px;
            margin-top: 14px;
            display: block;
        }
    }
}
.article-header{
    border-left: none;
    padding: 0;
    border-bottom: 1px dotted #ddd;
    h1{
        margin-bottom: 2px;
    }
}
#header .header-subtitle{
    padding: 0 3em;
    font-size: 1em;
}

.article-info-index.article-info{
  padding-top: 10px;
  margin: 0;
  border-top: 1px solid #ddd;
}
.article-info-post.article-info{
    margin: 0;
    padding-top: 10px;
    border: none;
}

#viewer-box .viewer-box-l{
    font-size: 14px;
}
.article{
    margin: (10/16)rem 10px;
    .article-entry{
        padding-left: 0;
        padding-right: 0;
        .highlight {
            padding .35em .6em
        }
    }
    .article-title{
        display: block;
        margin: 0;
        font-size 1.5rem
        font-weight bold
    }
    .article-meta{
        display: none;
    }
}

.article-inner {
  padding: 12px;
}

.archive-article-inner .article-meta {
    top: 0;
    margin-top: .5em;
}

.archives {
    .archive-article {
    padding: 0;
    }
    .archive-article-date {
        margin-right: 0;
    }
    .article-info {
    display: none;
    }
}

.archive-article-inner .article-meta .archive-article-date

.share{
    padding: 3px 10px;
}
.duoshuo {
    padding: 0 13px;
}
#disqus_thread {
    padding: 0 13px;
}

#mobile-nav{
    display: block;
}

#page-nav .extend{
    opacity: 1;
}

#page-nav {
    margin-top: 1em;
    .page-number {
        margin-bottom: 1.5em;
    }
}

.instagram .open-ins{
    left: 2px;
    top: -30px;
    color: #aaa;
}
.info-on-right{
    float: initial;
}
.archives-wrap{
    margin: 10px 10px 0px;
    padding: 10px;
    padding-right: 0;
    .archive-year-wrap{
        position: relative;
        padding: 0 0 0 0;
        a{
            padding: 0 0 0 0;
        }
    }
    h1 {
        font-size: 1.2em;
        margin-bottom: .3em;
    }
}
.archives{
    .archive-article{
        padding: 10px 0;
        margin-left: 0;
    }
}

#footer {
    .footer-left{
        float: initial;
        margin-bottom: .5em;
    }
    .footer-right{
        float: initial;
        margin-bottom: 1em;
    }
    .visit {
        margin: 0;
    }
}

.article-category::before{
    display: none;
}
.article-tag::before {
     display: none;
}
.article-meta time:before {
    display: none;
}
.visit {
    margin-top: 1em;
}

#tocButton {
    z-index: 100;
    position: fixed;
    left: .5em;
    top: auto; /*In order to cover style in article.styl*/
    bottom: 10px;
    padding: .2em .4em;
    border-radius: 6px;
    border-style : outset;
    background: rgba(255, 255, 255, .7);
    font-size: 1em;
    font-weight: bold;
    color: gray;
    &:hover {
        color: #88acdb;
        font-size: 1em;
    }
}

.toc-article {
    display: none;
    z-index: 99
    left: 0;
    top: 38%;
    bottom: 1em;
    height: auto;
    max-height: 58%;
    width: none;
    width: auto;
    min-width: 7em;
    max-width: 61.8%;
    overflow: auto;
    margin-left: 0;
    padding: 10px;
    padding-left: 0;
    border-radius: 2.8%;
    background: none;
    font-size: 1em;
    line-height: 1.25em;
    .toc-title {
        display: none;
        padding: .3em;
        color: white;
        background: lightgray;
        border-radius 3px
    }
    .toc {
        padding: 0.5em;
    }
    ol {
        margin: 0;
        padding: 0.5em;
        border-radius: 5px;
        background: rgba(255, 255, 255, .85);
        ol {
            padding: 0.1em 0;
            padding-left: 1.2em;
        }
    }
    a {
        color: #767676;
    }
}

if toc-nowrap
    li.toc-item
        line-height: 1.2

.copyright {
    width: 90%;
    padding: .5em .8em;
}

.scroll {
    right: 1.2em;
    li {
        font-size: 1.7em;
    }
}

.hide-labels {
    z-index: 100;
    position: fixed;
    left: .5em;
    top: auto; 
    bottom: 10px;
    padding: .2em .4em;
    border-radius: 6px;
    border-style : outset;
    opacity: .9;
    background: rgba(255, 255, 255, .8);
    font-weight: bold;
    color: gray;
}

#post-nav-button {
    display: none;
}

.post-list {
    visibility: hidden;
}

/*多说 UA*/
.ua {
    display: none !important;
}

if hexo-config("github_widget")
    .github-text
        display none

.copyright
    font-size 16px
    .copy-path
        display none

// Tags Cloud Page
.tags a
    line-height 45px
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://porter.gitbook.io/deep-learning-series/index/1.10-hexo-wang-ye-ding-zhi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.