算法攻城狮

0%

Next主题个性化配置

发表于 分类于 ， ， 阅读次数：
本文字数： 4.4k 阅读时长 ≈ 4 分钟

说在前面的话

NexT是Hexo上最有名的主题之一，大量的文字留白、简洁的配置项以及清爽的布局使得它的文字阅读体验非常好，接下来小编会向大家介绍Next主题常用的配置方法

主题样式

Next主题共有四种样式，小编最喜欢清爽简约型的Pisces，这也是我最开始想要搭建博客的最主要原因，这个样式我真的好喜欢❤️。在在themes/next/_config.yml中找到Schemes字段，然后将启用的样式方案取消注释，并将其他三种方案注释掉即可

# Schemes
# 修改博客样式的时候冒号后面一定要有空格！！！
#scheme: Muse
#scheme: Mist
scheme: Pisces   # 个人喜欢的博客样式
#scheme: Gemini

修改后Next主题的样式就变成了👇

首页配置

文章添加阴影

配置themes\next\source\css_common\components\post\post.styl中的.post_block字段

.use-motion {
	...
  if (hexo-config('motion.transition.post_block')) {
    //文章增加阴影效果
    .post-block{
     opacity: 0;
     margin-top: 60px;
     margin-bottom: 60px;
     padding: 25px;
     -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
     -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
     }
    .pagination, .comments {
      opacity: 0;
    }
  }
  ...
}

修改后的效果

文章间距&分割线

将/themes/next/source/css/_common/components/post/post-eof.styl修改成

.posts-expand {
  // 文章之间分割线格式格式的配置
  .post-eof {
    display: block;
    margin: 60px auto 50px; //首页文章间距
    width: 30%;             //首页文章分割线长度
    height: 1px;            //首页文章分割线高度
    background: $grey-light;
    text-align: center;
  }
}

侧边栏

显示位置

在/themes/next/_config.yml中找到sidebar字段

# 设置侧边栏的位置
sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false

菜单

themes/next/_config.yml，修改menu字段

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# ...
# 设置侧边栏菜单
# 菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标
menu:
  home: / || home                     # 首页
  categories: /categories/ || th      # 分类
  about: /about/ || user              # 关于
# sitemap: /sitemap.xml || sitemap    # 站点地图
# tags: /tags/ || tags                # 标签
# archives: /archives/ || archive     # 归档
# schedule: /schedule/ || calendar    # 日程表
# commonweal: /404/ || heartbeat      # 公益404

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

关于我

Step1 新建一个about页面

hexo new page "about"

这时候在站点的source下会新生成一个新的文件夹about，在该文件夹下会有一个index.md文件

Step2 在 themes/next/_config.yml 中将menu中about前面的注释去掉

# 设置侧边栏菜单
# 菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标
menu:
  home: / || home                     # 首页
  categories: /categories/ || th      # 分类
  about: /about/ || user              # 关于
# sitemap: /sitemap.xml || sitemap    # 站点地图
# tags: /tags/ || tags                # 标签
# archives: /archives/ || archive     # 归档
# schedule: /schedule/ || calendar    # 日程表
# commonweal: /404/ || heartbeat      # 公益404

头像

编辑主题的themes/next/_config.yml，新增字段 avatar

# Sidebar Avatar
avatar:
  url: /images/云南山间自拍.jpg  # 设置头像
  rounded: true # true表示头像设为圆形
  rotated: true # true表示头像可以旋转

其中，URL可以是完整的互联网 URL，也可以是本地图片存储路径source/images/

社交链接

编辑主题的themes/next/_config.yml，新增字段 social，然后添加社交站点名称与地址

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/HuangNing616 || github
  E-Mail: mailto:nnkawayi@qq.com || envelope
  # 知乎: https://www.zhihu.com/people/demons-28-75-48 || weibo
  # 牛客网: https://www.nowcoder.com/ta/coding-interviews || google
  # Weibo: https://weibo.com/yourname || weibo
  # Google: https://plus.google.com/yourname || google
  # witter: https://twitter.com/yourname || twitter
  # FB Page: https://www.facebook.com/yourname || facebook
  # StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  # YouTube: https://youtube.com/yourname || youtube
  # Instagram: https://instagram.com/yourname || instagram
  # Skype: skype:yourname?call|chat || skype
  # RSS: /atom.xml || rss

social_icons:
  enable: true      # 显示社交图标
  icons_only: false # 只显示社交图标
  transition: false # 是否设置跳转

配置成功后就会有

看板娘

  1. 在博客目录下安装依赖

    npm install --save hexo-helper-live2d

  2. 编辑站点下的_config.yml，新增字段live2d

  3. 使用其他的模型，需要先安装模型，在修改配置信息中的use

  4. 安装模型

    npm install 模型的包名

  5. 取消看板娘

    npm uninstall 模型的包名

    并且去掉站点下的_config.yml下的相关看板娘配置信息即可

  • 增加 Github Corner

    1) 到GitHub Corners选择自己喜欢的图标，然后copy相应的代码

    2) 将刚才复制的代码粘贴到themes/next/layout/_layout.swig中<div class="headband"></div>的下面

    3) 把代码中的href后面的值替换成要跳转的地址，比如你的GitHub主页

  • 增加 LiveRe评论系统

    1. 注册账号
      打开来必力官网：https://livere.com

    2. 安装
      点击上方的安装，选择免费的city版本，并点击现在安装，复制出现的uid字段

    3. 打开主题目录下的blog/themes/next/_config.yml配置文件，定位到livere_uid字段，粘贴上刚刚复制的uid

    效果展示

天气预报

  1. 登录https://www.seniverse.com 登录注册的账号
  2. 获取天气插件代码
  3. 将代码插入到 /themes/next/layout/_layout.swig 文件的</body>标签之前
  4. 重新部署网站，就可以在首页看到心知天气的插件

统计访问指标

  1. 访问 Enter your website address 添加自己的网站地址

  2. 登录之后选择自己喜欢的插件格式

  3. 将代码插入到 /themes/next/layout/_macro/sidebar.swig 文件的

  4. 重新部署网站，就可以实时在首页看到访客来源图