Gather ye rosebuds while ye may

对主题的修改


我说过了我要改悬浮header还有字体的,今天都改好了。
现在完成了,但是移动端还有一点点小小的遗憾没有解决。


改文件

还是改这个文件:
/hexo/themes/next/source/css/_schemes/Mist/index.styl
先把悬浮功能做出来,然后居中,加颜色,位置微调了很多
然后发信啊手机端看上去很恶心。。。改了半天
可惜原来点击site-nav-toggle之后的动画没有了
找了一下并不是我设置z-index的缘由
实在没有办法改成了有颜色遮蔽的,还好能看
不知道现在看起来和原作者的是不是有很多不一样了

//
// Mist scheme 
// gaoryrt changed
// =================================================

.test { border: 10px; }

// Tags
// --------------------------------------------------
h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px 0px; }

// 正文的偏移
// --------------------------------------------------
p { margin: 0 0 20px 0px; 
  letter-spacing: .6px
    word-spacing: 0px;
}

// 链接下划线的颜色
// --------------------------------------------------
a { border-bottom-color: $grey-light; 
  //background-color: gray
}

// 这个是分割线的设置
// --------------------------------------------------
hr {
  margin: 10px -20px 40px -20px;
  height: 2px;

}

// 列表的样式(尚未尝试有可能不是这个)
// --------------------------------------------------
ul li { list-style: circle; }


// Components  阅读全文
// --------------------------------------------------
.btn {
  padding: 0 10px;
  border-width: 2px;
  border-radius: 0;

}

.headband { //display: none; 
    background-color: white;
    padding: 0px 0px 40px 0px;
    
    +mobile() {
    display: none; 
  }
}


// Header 头·顶栏
// --------------------------------------------------
.header { 
    z-index:8;
    position: fixed;
    height: 40px;
    width:100%;
    margin-top: -43px;
    
    background: rgb(245,245,245)
    border-bottom: 2px solid rgb(234,234,234);
    
+mobile() {
    height: 40px;
    position: relative;
    margin-top: 30px;
    
  }

}
.header-inner {
    
    margin-top: -30px;
    
    height: 40px;
    padding: 30px 0;
    
    clearfix();               //清晰修正

  +mobile() {
    padding-top: 0px;
    margin-bottom: 0px;
    
  }
}

.site-nav{
  background-color: rgb(234,234,234);
}


// 博客名
// --------------------------------------------------
.site-meta {
    
  float: left;
  margin-left: -17px;
  
  +mobile() {
    margin-left: 8px;
    padding-top: 1px;
  }

  .brand {
    padding: 2px 1px;
    color: $black-deep;
    background: none;

    +mobile() { display: block; }
  }

  .logo { display: none; }

  .site-title {
    font-size: 26px;
    font-family: "PingFang", Verdana, sans-serif;
    font-weight: bold;
    letter-spacing: -2px
    word-spacing: -4px;
    
    +mobile() { 

    line-height: 34px; 
    font-size: 24px;
    }
  }
}

// 博客名字上下的两条线
// ------------------------------------------
.logo-line-before,
.logo-line-after {
  display: block;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;

  +mobile() { display: none; }

  i {
    position: relative;
    display: block;
    height: 0px;                        //这个改成0就没有上下两行了
    background: $black-deep;
    +mobile() { height: 3px; }
  }
}

.use-motion {
  .logo-line-before i { left: -100%; }
  .logo-line-after i { right: -100%; }
}



// Menu  顶栏右边的导航
// --------------------------------------------------
.site-nav-toggle {
  padding-top: 2px;
  position: static;
  float: right;

}


.menu {
  float: right;
  margin: 0px -24px 0 0px;
  padding: 0 0px 0px 0px;
  font-size: 21px;

    font-weight: bold;
    font-family: "PingFang", Verdana, sans-serif;
  +mobile() {
    
    margin: 0;
    padding-bottom: 10px;
    font-weight: 400;
  }

  br { display: none; }

  .menu-item {
    margin-left: 0;
    +mobile() { display: block; }
  }

  .menu-item a {
    padding: 5px 10px;
    background: none;
    border: none;
    transition-property: background;

    +mobile() {
      text-align: left;
    }

    &:hover { background: #e1e1e1; }       //指针指到的时候背景色
  }

  a::before {
      display: none;

      +mobile() { display: block; }
    }

  +mobile() { float: none; }
}

.menu-left {
  float: left;
  +mobile() { float: none; }
}

.menu-item-icon { display: none; }



// Search 搜索栏
// --------------------------------------------------
.site-search {
  float: right;
  margin-top: 8px;

  +mobile() {
    float: none;
    padding: 0 10px;
  }

  input {
    padding: 3px;
    border: none;
    padding-left: 18px;
    border-radius: 0;
    width: 140px;
    background: url($search-icon) no-repeat 0 50%;
    background-size: 12px 12px;
    outline: none;
    border-bottom: 1px solid $grey-dark;
    opacity: 0.5;
    &:focus { opacity: 1; }
  }
}


// Post Expanded  文章
// --------------------------------------------------
.posts-expand {
  padding-top: 0;

  .post-title,
  .post-meta {

    text-align: $site-meta-text-align;
    +mobile() { text-align: $site-meta-text-align; }
  }
  .post-eof { display: none; }

  .post { margin-top: 80px; }
  .post:first-child { margin-top: 0; }

  .post-meta {                       //预览部分偏移量
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .post-title {                      //文章标题 
    font-size: 26px;

    font-weight: bolder;
  }

  .post-body img { margin: 0; }

  .post-tags {
    text-align: left;
    a {
      padding: 1px 5px;
      background: $whitesmoke;        //tags
      //border-bottom: none;        
    }
    a:hover { background: $grey-light; }
  }
  .post-nav { margin-top: 10px; }     //tag 与下方分隔栏的距离
}

//阅读更多 按钮
//----------------------------------------------------
.post-more-link {
  margin-top: 0px;
  text-align: left;

  a {
    padding: 0px 0px 0px 0px;
    font-size: 14px;
    color: $grey-dim;
    background: none;
    border: none;
    border-bottom: 1px solid $grey-dim;
    transition-property: border;

    &:hover { border-bottom-color: black; }
  }
}


// Page - Post details    单独文章页 标题
// --------------------------------------------------
.page-post-detail {
  .post-title,
  .post-meta { text-align: center; }
  
  .post-meta { margin-bottom: 60px; }
}


// Pagination       主页 页数栏
// --------------------------------------------------
.pagination {
  margin: 40px 0px 0px -20px;
  text-align: left;
  //background: $white;

  +mobile() {
    margin: 20px 0px 0px 10px;
    text-align: left;
  }
}

// Footer           页脚
// --------------------------------------------------
.footer {
  margin-top: 80px;
  padding: 20px 0;
  background: $white;
  color: $grey-dim;
}
.footer-inner {
  margin: 0 auto;
  text-align: centerr;

  +mobile() { text-align: center; }
}

// Helpers
// --------------------------------------------------
.full-image.full-image.full-image {
  max-width: 100%;
  width: auto;
  margin: 0;
}

以上是我的index.styl文件,直接拖到你自己的位置就能用,相当于是另一个主题了。。。
其实可以联系 next 作者的。。。
但是我的代码确实写得很渣

字体

这个原作者说过了,就是改
/hexo/themes/next/source/css/_variables/custom.styl
添加几行就行了,我的是这样的:

$content-desktop = 740px
$font-family-base = "PingFang", Verdana, sans-serif // 修改成你期望的字体族
.highlight {
  -webkit-overflow-scrolling: touch;
}

对了,我还在上面的index.styl文件中调整了文字的间距


以上


抱歉,评论已关闭。
欲参与讨论,请寄 [email protected]