next主题配置文件解读

最新推荐文章于 2024-09-05 17:26:43 发布

宁静_致远_

最新推荐文章于 2024-09-05 17:26:43 发布

阅读量1.7k

点赞数

分类专栏：前端开发文章标签： css css3 html hexo

本文链接：https://blog.csdn.net/tiantianzs/article/details/122754498

版权

前端开发专栏收录该内容

25 篇文章 3 订阅

订阅专栏

title: next主题配置文件解读
tags: HEXO
category: 个人博客

首发网址：https://tiansztiansz.github.io/2022/01/29/next主题配置文件解读/

打开blog\themes\next\_config.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.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl   # 在该路径中加入个性设置

我的配置如下：

// 网站背景图片设置
body {
    background:url(/images/background.png);
    background-repeat: no-repeat;
    background-attachment: fixed; //不重复
    background-size: cover;       //填充
    background-position: 30% 30%; //缩放设置，百分比越小则图片被放大
}

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

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

//``的代码样式，这里是黑底紫字
code {
    color: #b294bb;
    background: #1d1f21;
    margin: 2px;
}

背景图片取自：https://www.bilibili.com/read/cv1822705?from=search&spm_id_from=333.337.0.0

建站时间设置

# Specify the date when the site was setup. If not defined, current year will be used.
since: 2022   # 建站时间设置

网站底部的爱心设置

  # 网站底部的爱心设置
  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart   # 设置图案为爱心
    # If you want to animate the icon, set it to true.
    animated: true      # 爱心跳动动画
    # Change the color of icon, using Hex Code.
    color: "#ff0000"    # 颜色设置

去除了底部的"由 Hexo & NexT 强力驱动"

  # Powered by Hexo & NexT
  powered: false

网站备案设置

  # 网站备案设置
  # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn
  beian:
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:

创建版权申明

# 创建转载许可证明
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  #开启状态，注意要将站点配置文件中的url改为自己的网址
  language:

next主题选择

# next主题选择
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

是否开启深色模式

# 是否开启深色模式
# Dark Mode
darkmode: false

菜单设置

# 菜单设置，“fa fa-home”样式为图案，需要更改的话可以访问：http://www.fontawesome.com.cn/icons/street-view/
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

添加了新的菜单后，需要到打开git bush输入如下命令：

cd /d/blog

hexo new page "categories"  #新的菜单名，以键值为准

然后打开blog/source/categories/index.md，然后添加如下代码：

type: "categories"

参考文献：https://www.jianshu.com/p/a2fe56d11c4f
https://blog.csdn.net/mqdxiaoxiao/article/details/93644533

侧边栏位置设置

  # Sidebar Position.
  position: left
  #position: right

侧边栏显示设置

  # 侧边栏显示设置。“always”则为一直显示
  # 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: always

个人头像设置

# 个人头像设置
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif   #头像图片的地址
  # If true, the avatar will be dispalyed in circle.
  rounded: true #显示为圆形
  # If true, the avatar will be rotated with the cursor.
  rotated: true # 鼠标放在头像上则头像会一直旋转

社交联系方式设置

# 社交联系方式设置，“fab fa-github”为显示的图案,也可以不显示图案，但“||”不能去掉，否则会报错
# 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/tiansztiansz ||
  CSDN: https://blog.csdn.net/tiantianzs ||
  Gitee: https://gitee.com/a1866 ||
  bilibili: https://space.bilibili.com/28606893 ||
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
  enable: true
  icons_only: false # 只显示社交的图案
  transition: true

设置推荐链接

# 设置推荐链接
links:
  #Title: http://yoursite.com   # 链接的网页地址

添加交流方式

# 聊天工具
# A button to open designated chat widget in sidebar.
# Firstly, you need enable the chat service you want to activate its sidebar button.
chat:
  enable: false
  #service: chatra
  #service: tidio
  icon: fa fa-comment # Icon name in Font Awesome, set false to disable icon.
  text: Chat # Button text, change it as you wish.

开启阅读更多按钮

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

捐献设置

# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: true
  comment: 原创技术分享，您的支持将鼓励我继续创作

reward:
  wechatpay: /images/wechatpay.png  #微信收款码图案
  alipay: /images/alipay.png        #支付宝收款图案
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

代码块设置

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night    #设置代码块样式为黑色
  # Add copy button on codeblock
  copy_button:
    enable: true        #设置代码块复制按钮
    # Show text copy result.
    show_result: true   #设置复制后的反馈
    # Available values: default | flat | mac
    style: mac          #设置代码块复制主题为苹果样式

参考文献：https://www.itdaan.com/blog/2018/03/02/179c69687ad322dee48efc17146593eb.html

返回页面顶部按钮

# 返回页面顶部按钮
back2top:
  enable: true
  # 将返回顶部按钮放置在侧边栏
  sidebar: false
  # 显示阅读进度
  scrollpercent: true

阅读进度条

# 阅读进度条
reading_progress:
  enable: true
  #  top为顶部 | bottom为底部进度条
  position: bottom
  color: "#37c6c0"
  height: 3px

网站标题字体样式

  # 网站标题字体样式
  title:
    external: true
    family: youyuan
    size:

SEO站点推送

# If true, site-subtitle will be added to index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
# 站点地图设置
index_with_subtitle: true

# Automatically add external URL with Base64 encrypt & decrypt.
# 自动添加外部标签
exturl: true

# 允许百度推送
baidu_push: true

参考文献：https://blog.csdn.net/qq_41518277/article/details/101766036

图片缩放

# 图片缩放开关
# For more information: https://fancyapps.com/fancybox
fancybox: true

添加Gitalk评论系统

# Gitalk
# For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
gitalk:
  enable: true
  github_id: tiansztiansz
  repo: tiansztiansz.github.io
  client_id: 你的客户端id
  client_secret: 你的客户端密码
  admin_user: tiansztiansz
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN   # 评论块中的显示语言

参考文献：https://blog.csdn.net/lzw2016/article/details/83244906
https://blog.csdn.net/qq_36537546/article/details/90730412

在文章末尾加入分隔线

在blog/themes/next/layout/_macro文件夹中新建passage-end-tag.swig文件，添加如下代码：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:24px;">---------------------------------------------------------</div>
    {% endif %}
</div>

接着打开blog/themes/next/layout/_macro/post.swig文件，在END POST BODY下添加如下代码：

    {#####################}
    {### END POST BODY ###}
    {#####################}
     {% if not is_index and theme.passage_end_tag.enabled %}
   <div>
     {% include 'passage-end-tag.swig' %}
   </div>
 {% endif %}

最后在主题配置文件_config.yml添加如下代码：

passage_end_tag:
  enabled: true

设置网页加载样式

# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: big-counter

设置超链接为蓝色

打开blog/themes/next/source/css/_common/components/post/post.styl文件，添加如下代码：

.post-body p a{
     color: #0593d3;
     border-bottom: none;
     &:hover {
       color: #0477ab;
       text-decoration: underline;
     }
   }

添加访问量统计

打开blog/themes/next/_config.yml，找到busuanzi_count，改为true：

busuanzi_count:
  enable: true

打开blog/themes/next/layout/_partials/footer.swig,在{{- next_inject('footer') }}前面加上如下代码：

{% if theme.busuanzi_count.enable %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">总访客数<span id="busuanzi_value_site_uv"></span>人</span>
    
<!-- 不蒜子计数初始值纠正 -->
<script>
$(document).ready(function() {

    var int = setInterval(fixCount, 50);  // 50ms周期检测函数
    var countOffset = 20000;  // 初始化首次数据

    function fixCount() {            
       if (document.getElementById("busuanzi_container_site_pv").style.display != "none")
        {
            $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset); 
            clearInterval(int);
        }                  
        if ($("#busuanzi_container_site_pv").css("display") != "none")
        {
            $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据 
            clearInterval(int); // 停止检测
        }  
    }
       	
});
</script> 
{%- endif %}


<!-- 在上面插入代码 -->
{{- next_inject('footer') }}

显示上方菜单中的内容数

# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: true  #显示上方菜单中的内容数

添加网易云音乐歌单

先在网易云音乐中创建blog专属歌单，注意歌曲要支持生成外链。然后用手机将歌单转发到电脑，用电脑的浏览器打开，即可看到生成外链按钮，注意选择310×90的大小，取消勾选自动播放，否则加载网页会比较卡。复制HTML代码，添加到blog\themes\next\layout\_macro\sidebar.swig

     <div class="music163player">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=7261872754&auto=0&height=90"></iframe>
      </div>

<!-- 添加上面的代码，注意要添加<div>块标记 -->
      {%- if theme.back2top.enable and theme.back2top.sidebar %}
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
      {%- endif %}

参考文献https://blog.csdn.net/sunshine940326/article/details/69933696

网址logo

打开https://iconmonstr.com/

选择自己喜欢的logo，下载.png格式的图片，然后打开如下网址：

https://tool.lu/favicon/

将.png图片转换为32×32的.ico图案，将其命名为favicon.ico，然后将图案放置在blog\themes\next\source\images文件夹中

设置文章内容搜索

打开git bush，输入如下命令

cd /d/blog

npm install hexo-generator-searchdb --save

然后在blog/_config.yml文件中加入如下代码：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

最后在blog\themes\next\_config.yml文件中修改如下代码：

# HEXO文章搜索
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: true
  # Preload the search data when the page loads.
  preload: true

参考文献https://blog.csdn.net/linzhiqiang0316/article/details/89338110