Mac下配置NexT主题

博客搭建

更新日期: 2020-08-19

文章字数: 593

阅读时长: 2 分

阅读次数:

详细内容请看 NexT官网文档

<blog name>/_config.yml：站点配置文件
themes/next/_config.yml：主题配置文件

安装

注意⚠️：查看NexT的Github仓库 hexo-themes-next 确定NexT主题的克隆地址是否正确。

* **使用Git安装** 将NexT主题克隆到themes/next中

$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next

修改站点配置文件 注意next内容前面需要使用空格隔开，hexo可能会识别不到

theme: next

设置更多精彩样式请看 CodeHeap-快速使用Hexo搭建个人博客

启动项目

$ hexo s

查看 localhost:4000

NexT主题优化

设置背景

在主题配置文件中搜索custom_file_path，在source/_data下创建styles.styl。添加以下代码

// 添加背景图片
body {
      background: url(/images/images.jpeg);//自己喜欢的图片地址
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 50%;
}

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.85;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.85;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.85);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.85;
}

.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
}

设置头像

在主题配置文件中搜索avatar

avatar:
  url: /images/avatar.gif
  rounded: false    # 如果为true，则图片为正方形，头像将显示为圆形。为长方形，头像显示椭圆
  rotated: false    # 如果为true，则头像将随着光标旋转。

配置评论

配置Hexo NexT Utteranc 详细内容请查看 Hexo NexT Utteranc配置

$ npm install theme-next/hexo-next-utteranc

安装成功后，在主题配置文件中配置，根据username/username.github.io配置repo，其他可按默认配置

# Demo: https://utteranc.es/ http://trumandu.github.io/about/ 
utteranc: 
  enable: true 
  repo: #Github repo such as :TrumanDu/comments #根据username/username/github.io配置 
  pathname: pathname # theme: github-light,github-dark,github-dark-orange 
  theme: github-light 
  cdn: https://utteranc.es/client.js 
  # If you want to modify priority, please config in **hexo** 
  #priority: