文章7
标签10
分类4

Hexo - Next 主题个性化

前言

最近闲来无事,便去折腾了一下 Next 主题的个性化


右上角显示Fork me on github

效果:

tholman.com/github-corners 中挑选个自己喜欢的样式,并把代码复制下来

然后打开themes/next/layout/_layout.swig,将代码放在<div class="headhand"></div>的下面,别忘了把href改成自己的 github 地址


修改文章内链接样式

效果:

打开themes/next/source/css/_common/components/post/post.styl,在最末尾添加如下字段:

.post-body p a{
  position: relative;
  color: #ff6eb4;  // 颜色可改
  border-bottom: none;
  line-height: 1.2;
}

.post-body p a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #ff6eb4;  // 颜色可改
  visibility: hidden;
  transform: scaleX(0);
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.post-body p a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

修改文章的 # 号标签

效果:

打开themes/next/layout/_macro/post.swig,找到如下内容

<a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>

#替换为<i class="fa fa-tag"></i>

修改作者头像并旋转

效果:

打开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-width solid $site-author-image-border-color;
  border-radius: 60%;
  transition: 2.5s all;
}

.site-author-image:hover {
    transform: rotate(360deg);
}

// 修改作者名称
.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

// 修改简介
.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

修改小代码样式

效果:

打开themes/next/source/css/_custom/custom.styl并添加如下字串:

code {
  color: #ff6eb4;  // 颜色可以自行修改
  background: #fff;
  border-radius: 3px;
  border: 1px solid #999;
  border-radius: 0.4em;
  font-size: 0.8em;
  margin: 0 1px;
}

为文章添加阴影效果

效果:

打开themes/next/source/css/_custom/custom.styl并添加如下字段:

.post {
  margin-top: 10px;
  margin-bottom: 40px;
  padding: 21px;
  -webkit-box-shadow: 0 0 7px #657b83;
  opacity: 0.9;
  background: #fff
}

网站底部字数统计

效果:

在 hexo 根目录下执行

npm install hexo-wordcount --save

然后打开themes/next/layout/_partials/footer.swig并在最末尾添加如下字段:

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

文章统计功能

效果:

在 hexo 根目录下执行:

npm install hexo-wordcount --save

打开「Next主题配置文件」,修改如下配置:

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

修改主题色

打开themes/next/source/css/_variables/base.styl,找到如下字段:

// Colors
// colors for use across theme.
// --------------------------------------------------

$whitesmoke   = #f5f5f5
$gainsboro    = #eee  // 作者头像外框颜色
$gray-lighter = #ddd  // 图片边框颜色
$grey-light   = #ccc  // 文章分割线/下划线颜色
$grey         = #bbb
$grey-dark    = #999
$grey-dim     = #666  // 侧边栏目录字体颜色
$black-light  = #555  // 文章字体颜色
$black-dim    = #333 
$black-deep   = #222  // 主题颜色
$red          = #ff2a2a
$blue-bright  = #ff9cfb  // 其他(这里是粉色)
$blue         = #0684bd
$blue-deep    = #ff82ab  // 鼠标双击选中颜色(这里是粉色)
$orange       = #ff82ab  // 文章目录选中颜色(这里是粉色)

修改页面滚动条

打开themes/next/source/css/_custom/custom.styl并添加如下字串:

::-webkit-scrollbar {
  width: 5px;  //滚动条宽度
  height: 5px;  //滚动条高度
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: none;  //滚动条背景颜色
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;  //滚动条圆角
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
  background-color: #ff83ab;  //滚动条颜色
}

修改 h2/h3 的样式

效果:

打开themes/next/source/css/_custom/custom.styl并添加如下字串:

.post-body h2 {
  border-left: 5px solid #ff6eb4;  // h2 竖条长度及颜色
  padding-left: 10px;
}

.post-body h3 {
  border-left: 3px solid #ffa8d2;  // h3 竖条长度及颜色
  padding-left: 10px;
}

Next 展现逻辑

为了方便进行深度个性化,就此把 Next 主题的展现逻辑列出

├── .github                     # git信息
├── languages                   # 多语言
|   ├── default.yml             # 默认语言
|   └── zh-Hans.yml             # 简体中文
|   └── zh-tw.yml               # 繁体中文
├── layout                      # 布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
|   ├── _custom                 # 可以自己修改的模板,覆盖原有模板
|   |   ├── _header.swig        # 头部样式
|   |   ├── _sidebar.swig       # 侧边栏样式
|   ├── _macro                  # 可以自己修改的模板,覆盖原有模板
|   |   ├── post.swig           # 文章模板
|   |   ├── reward.swig         # 打赏模板
|   |   ├── sidebar.swig        # 侧边栏模板
|   ├── _partial                # 局部的布局
|   |   ├── head                # 头部模板
|   |   ├── search              # 搜索模板
|   |   ├── share               # 分享模板
|   ├── _script                 # 局部的布局
|   ├── _third-party            # 第三方模板
|   ├── _layout.swig            # 主页面模板
|   ├── index.swig              # 主页面模板
|   ├── page                    # 页面模板
|   └── tag.swig                # tag模板
├── scripts                     # script源码
|   ├── tags                    # tags的script源码
|   ├── marge.js                # 页面模板
├── source                      # 源码
|   ├── css                     # css源码
|   |   ├── _common             # *.styl基础css
|   |   ├── _custom             # *.styl局部css
|   |   └── _mixins             # mixins的css
|   ├── fonts                   # 字体
|   ├── images                  # 图片
|   ├── uploads                 # 添加的文件
|   └── js                      # javascript源代码
├── _config.yml                 # 主题配置文件
└── README.md                   # 用GitHub的都知道

这是我根据 Next 展现逻辑所自己做出的效果:

感谢

本文作者:Little_cow
本文链接:http://blog.mzniuniu.cn/Next-personalise/
许可协议:采用 署名-非商业性使用-相同方式共享 4.0 国际 转载请注明原作者