hexo 自定义

一、 分类文章数量

文件路径: themes\next\layout\_partials\header\menu-item.njk

<!--分类文章数量-->
    {%- set menuBadge = '' %}
    {%- if theme.menu_settings.badges %}
      {%- set badges = {
        archives    : site.posts.length,
        categories  : site.categories.length,
        tags        : site.tags.length,
        Linux       : site.categories.findOne({name: 'Linux'}).length,
        NetWork     : site.categories.findOne({name: 'NetWork'}).length,
        Database    : site.categories.findOne({name: 'Database'}).length,
      'CI/CD'       : site.categories.findOne({name: 'CI/CD'}).length,
        Monitor     : site.categories.findOne({name: 'Monitor'}).length,
        K8S         : site.categories.findOne({name: 'K8S'}).length,
        Docker      : site.categories.findOne({name: 'Docker'}).length,
        OpenWrt     : site.categories.findOne({name: 'OpenWrt'}).length
        }
      %}
      {%- for menu, count in badges %}
        {%- if node.name == menu %}
          {%- set menuBadge = '<span class="badge">' + count + '</span>' %}
        {%- endif %}
      {%- endfor %}
    {%- endif %}

二、 单行代码颜色

文件路径: \themes\next\source\css\_common\scaffolding\highlight\index.styl

// Placeholder: $code-inline $code-block
$code-inline {
  //background: var(--highlight-background);
  //color: var(--highlight-foreground);
  color: #c7254e;
  background: #f9f2f4;
}

$code-block {
  //@extend $code-inline;
  background: var(--highlight-background);
  color: var(--highlight-foreground);
  line-height: $line-height-code-block;
  margin: 0 auto 20px;
}

三、 关于搜索功能

hexo配置文件: /_config

search:
#  path: ./node_modules/hexo-generator-searchdb/templates/search.xml
  path: search.json
  field: post
  content: true
  format: html
  limit: 1000

四、 背景图片

主题配置文件: /themes/next/_config.yml

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

创建文件: /blog/source/_data/styles.styl

body {
     background:url(/images/background.jpg);
     background-repeat: no-repeat;
     background-attachment:fixed;
     background-position:100% 100%;
}

五、 页面圆角

主题配置文件: /themes/next/_config.yml

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

创建文件: /blog/source/_data/variables.styl

// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

六、 字数统计和阅读时长

npm install hexo-symbols-count-time --save

hexo配置文件: /blog/_config.yml

symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

主题配置文件: /theme/next/_config.yml

symbols_count_time:
  separated_meta: true  # 是否换行显示 字数统计 及 阅读时长
  item_text_post: true  # 文章 字数统计 阅读时长 使用图标 还是 文本表示
  item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
  awl: 4
  wpm: 275

七、 推荐文章

npm install hexo-recommended-posts --save

hexo配置文件: /blog/_config.yml

recommended_posts:
  #server: https://api.truelaurel.com #后端推荐服务器地址
  timeoutInMillis: 10000 #服务时长，超过此时长，则使用离线推荐模式
  internalLinks: 3 #内部文章数量
  externalLinks: 1 #外部文章数量
  fixedNumber: false
  autoDisplay: true #自动在文章底部显示推荐文章
  excludePattern: []
  titleHtml: <h1>推荐文章<span style="font-size:0.45em; color:gray">（由<a href="https://github.com/huiwang/hexo-recommended-posts">hexo文章推荐插件</a>驱动）</span></h1> #自定义标题

八、 置顶文章

Next版本: 8.15

npm uninstall --save hexo-generator-index
npm install --save hexo-generator-index-pin-top

编辑文件: next/layout/_macro/post.njk, 添加如下代码

{% if post.top %}
    <i class="fa fa-thumb-tack" style="color: #EB6D39"></i>
    <font color=#FFFF00 >置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

推荐文章（由hexo文章推荐插件驱动）

• hexo 部署