天道酬勤

坚持，努力，让好事发生

0%

Next主题

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 6.6k 阅读时长 ≈ 6 分钟

Hexo博客 Next主题

(1) Next主题

Next主题有多个版本

next 版本 仓库地址 对应官网
iissnan/hexo-theme-next 0.1.0 ~ 5.1.4 https://github.com/iissnan/hexo-theme-next -
theme-next/hexo-theme-next 6.0.0 ~ 7.8.0 https://github.com/theme-next/hexo-theme-next https://theme-next.org/index.html
next-theme/hexo-theme-next 8.0.0 ~ https://github.com/next-theme/hexo-theme-next https://theme-next.js.org/

(1.1) Next主题配置文件

Next主题 6.x 7.x 8.x的配置在 blog/_config.next.yml，目的是为了和next主题的_config.yml解耦，同时解决每次merge合并代码冲突的烦恼。


(2) 主题通用配置

配置文件使用 blog/_config.next.yml

(2.1) 主题风格

NexT主题 风格为 Muse

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

(2.2) 侧边栏标题配置

# 侧边栏中的目录(标题)配置
toc:
  enable: true
  # 自动将列表(标题)编号添加到目录中。
  number: false
  # 如果为 true，则当标题宽度长于侧边栏宽度时，所有单词都将放置在下一行。
  wrap: false
  # 如果为 true，则将显示帖子中所有级别的目录，而不是其中激活的部分。
  expand_all: false
  # 生成目录(标题)的最大深度。  最多支持6级标题 ###### 
  max_depth: 6

(3) 个性化设置

修改blog的 $blog/_config.next.yml 文件
修改后如下

# filepath: blog/_config.next.yml

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

v6.x v7.x v8.x 都支持上面这种方法

Next主题个性化文件

Hexo + NexT8主题配置透明背景过程踩坑小记


(3.1) style配置

(3.1.1) 设置背景

修改 blog/source/_data/styles.styl 文件，添加以下配置

// source/_data/styles.styl

// background
body {
  background-image:url(../images/background.jpg);
  height:100%;
  width:100%;
  background-repeat:repeat-x;
  background-attachment:fixed; //不滚动
  background-size:100% 100%;  //填充
}

(3.1.2) 设置透明度

修改 blog/source/_data/styles.styl 文件，添加以下配置


//###### 博客内容透明化 ######

//文章内容的透明度设置
//文章内容的透明度设置+文章边框设置
.post-block {
  margin-top: 60px;    // 内容
  margin-bottom: 60px;
  padding: 35px;       // 内容边框
  background: rgba(255,255,255,0.9) none repeat scroll !important; // 内容不透明
}

//分页(主页最下面的那一小块)
.pagination {
  background: rgba(255,255,255,0.9);
}

//菜单栏背景
.header-inner {
  background: rgba(255,255,255,0.9);
}

//侧边框的透明度设置
.sidebar-inner {
  background: rgba(255,255,255,0.9) none repeat scroll !important;
}

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

//评论区
.comments {
  background: rgba(255,255,255,0.9);
}

(3.2) variables配置

(3.2.1) 设置页面内容宽度

next主题默认配置在 blog/themes/next/source/css/_variables/base.styl

// Layout sizes
// --------------------------------------------------
$content-desktop                = 700px;
$content-desktop-large          = 800px;
$content-desktop-largest        = 900px;

$content-desktop-padding        = 40px;
$content-tablet-padding         = 10px;
$content-mobile-padding         = 8px;

需要添加自定义配置 source/_data/variables.styl

$content-desktop         = 80%
$content-desktop-large   = 85%
$content-desktop-largest = 90%

并且修改配置文件，blog的 blog/_config.next.yml
把 variable: source/_data/variables.styl 前面的#去掉

Hexo Next 主题优化
How-to-Change-Content-Width


(4) Next插件

(4.1) Next主题添加Valine评论系统

# ---------------------------------------------------------------
# Comments Settings
# See: https://theme-next.js.org/docs/third-party-services/comments
# ---------------------------------------------------------------


# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
  active: valine
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any naves, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appId: xxxx
  appKey: xxxx
  placeholder: 期待您的评论 # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  meta: # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-cn # Language, available values: en, zh-cn
  visitor: true # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: true # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  notify: true # Mail notifier
  verify: false # Verification code  
  #post_meta_order: 0


# ---------------------------------------------------------------
# CDN Settings
# See: https://theme-next.js.org/docs/advanced-settings/vendors
# ---------------------------------------------------------------

vendors:
  # The CDN provider of NexT internal scripts.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Warning: If you are using the latest master branch of NexT, please set `internal: local`
  internal: local
  # The default CDN provider of third-party plugins.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Dependencies for `plugins: local`: https://github.com/next-theme/plugins
  plugins: unpkg
  # Custom CDN URL
  # For example:
  # custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}
  # custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
  custom_cdn_url:
  # Valine
  # valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
  # valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.10/Valine.min.js
  valine: //cdn.jsdelivr.net/npm/valine@1.5.1/dist/Valine.min.js

Hexo Next 主题添加 Valine 评论系统

https://github.com/theme-next/hexo-theme-next/pull/345

https://github.com/xCss/Valine/issues/172
https://github.com/iissnan/hexo-theme-next/blob/620b1e829eb8b6fd72426f3009866b79d8ee2e7b/layout/_third-party/comments/valine.swig#L1-L3

Valine评论邮件提醒


(4.2) Next主题添加3d小地球实时访客统计工具

Revolver Maps 是一个交互式的网站访客地图。每一个浏览者的位置都会实时在由 Canvas 渲染的地球上标记出来。
官网 https://www.revolvermaps.com/

改动点：

在 $blog/themes/next/ 的 layout/_partials/sidebar/site-overview.swig 文件尾部添加以下代码

<script type="text/javascript" src="//rf.revolvermaps.com/0/0/6.js?i=5rcgvdncuwu&amp;m=7&amp;c=e63100&amp;cr1=ffffff&amp;f=arial&amp;l=0&amp;bv=90&amp;lx=-420&amp;ly=420&amp;hi=20&amp;he=7&amp;hc=a8ddff&amp;rs=80" async="async"></script>

参考文章
一行代码为你的网站添加一个3d小地球实时访客统计工具
Hexo5-在博客主页侧边栏添加网易云音乐外链&访问者地图
个人博客网站搭建与优化


参考资料

[1] Next主题自定义文件
[2] hexo-next主题优化
[3] Hexo之Next主题美化代码

[4] Hexo Next 主题优化
[5] How-to-Change-Content-Width

[6] 一行代码为你的网站添加一个3d小地球实时访客统计工具
[7] Hexo5-在博客主页侧边栏添加网易云音乐外链&访问者地图
[8] 个人博客网站搭建与优化

相关文章