美文网首页程序员
hexo博客优化--Next主题

hexo博客优化--Next主题

作者: marshal704 | 来源:发表于2018-10-17 15:19 被阅读89次

    搭建完hexo博客后,需要针对博客进行优化,具体如下:
    注意1:每次做变更后,均需要使用hexo g和hexo s。
    注意2:在更改类似于theme: next时,next前需要添加空格,否则编译报错。

    1、下载next主题

    git clone https://github.com/iissnan/hexo-theme-next.git
    mv hexo-theme-next next
    

    blog/_config.yml文件,搜索heme: landscape改为theme: next

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next
    

    git bash输入

    hexo g
    hexo s
    

    2、更换主题布局:

    blog/themes/next/_config.yml文件,搜索Scheme Settings,修改如下:

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

    git bash输入

    hexo g
    hexo s
    

    3、修改菜单

    blog/themes/next/_config.yml文件,搜索Menu Settings,修改如下:

    menu:
      home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
    

    git bash下输入命令,添加tags、categories

    $ hexo n page tags
    $ hexo n page categories
    

    blog/source/categories/创建index.md,并添加如下内容:

    ---
    title: 分类
    date: 2018-10-17 14:39:31
    type: categories
    ---
    

    blog/source/tags/创建index.md,并添加如下内容:

    ---
    title: 标签
    date: 2018-09-14 14:39:31
    type: tags
    ---
    

    git bash输入

    hexo g
    hexo s
    

    4、修改博客语言

    blog/_config.yml文件,搜索language,修改以下:

    language: zh-Hans
    

    git bash输入

    hexo g
    hexo s
    

    5、设置头像

    blog/themes/next/source/images目录中,放入logo.jpg 最好是正方形
    blog/themes/next/_config.yml文件。搜索avatar,修改如下:

    avatar: /images/logo.jpg
    

    git bash输入

    hexo g
    hexo s
    

    6、修改作者名和链接

    blog/_config.yml文件,搜索Site,修改如下:

    # Site
    title: XXX's Blog
    subtitle:
    description:
    keywords:
    author: Marshal
    language: zh-Hans
    timezone:
    

    git bash输入

    hexo g
    hexo s
    

    7、开启侧边栏社交链接

    blog/themes/next/_config.yml文件,搜索Social

    social:
      GitHub: https://github.com/justforui  || github
      E-Mail: mailto:justforui @qq.com || envelope
      weibo: https://weibo.com/u/justforui || weibo
      Google: https://plus.google.com/justforui || google
      #Twitter: https://twitter.com/yourname || twitter
      #FB Page: https://www.facebook.com/yourname || facebook
      #VK Group: https://vk.com/yourname || vk
      #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
    

    8、开启友情链接

    blog/themes/next/_config.yml文件,搜索Blog rolls,方法同上。

    9、首页文章缩略设置

    blog/themes/next/_config.yml文件,搜索auto_excerpt,修改如下:

    auto_excerpt:
      enable: true
      length: 10
    

    10、设置动态背景

    blog/themes/next/_config.yml文件,搜索canvas,修改如下:

    #Canvas-nest
    # Dependencies: https://github.com/theme-next/theme-next-canvas-nest
    canvas_nest: true
    
    # JavaScript 3D library.
    # Dependencies: https://github.com/theme-next/theme-next-three
    # three_waves
    three_waves: false
    # canvas_lines
    canvas_lines: false
    # canvas_sphere
    canvas_sphere: false
    

    11、设置动态背景增加搜索功能

    $ npm install hexo-generator-searchdb --save
    

    blog/_config.yml文件,添加如下:

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

    blog/themes/next/_config.ym文件,搜索local_search,修改如下:

    local_search:
      enable: true
    

    12、隐藏底部的“强力驱动”内容

    blog/themes/next/layout/_partials/footer.swig,注入如下代码块:

    <!--
    {% if theme.footer.powered %}
      <div class="powered-by">{#
      #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
    #}</div>
    {% endif %}
    
    {% if theme.footer.powered and theme.footer.theme.enable %}
      <span class="post-meta-divider">|</span>
    {% endif %}
    
    {% if theme.footer.theme.enable %}
      <div class="theme-info">{#
      #}{{ __('footer.theme') }} &mdash; {#
      #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
        #}NexT.{{ theme.scheme }}{#
      #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
    #}</div>
    {% endif %}
    -->
    

    13、增加分享功能

    git bash输入:

    $ rm -rf themes/next/source/lib/needsharebutton
    $ git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton
    

    blog/themes/next/_config.yml,搜索needmoreshare2,修改如下:

    needmoreshare2:
      enable: true
      postbottom:
        enable: true
        options:
          iconStyle: box
          boxForm: horizontal
          position: bottomCenter
          networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
      float:
        enable: true
        options:
          iconStyle: box
          boxForm: horizontal
          position: middleRight
          networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
    

    14、添加页面加载效果

    blog/themes/next/_config.yml文件,搜索pace_theme修改如下:

    # Progress bar in the top during page loading.
    pace: true
    # Themes list:
    #pace-theme-big-counter
    #pace-theme-bounce
    #pace-theme-barber-shop
    #pace-theme-center-atom
    #pace-theme-center-circle
    #pace-theme-center-radar
    #pace-theme-center-simple
    #pace-theme-corner-indicator
    #pace-theme-fill-left
    #pace-theme-flash
    #pace-theme-loading-bar
    #pace-theme-mac-osx
    #pace-theme-minimal
    # For example
    # pace_theme: pace-theme-center-simple
    pace_theme: pace-theme-minimal
    

    15、压缩页面静态资源

    $ npm install hexo-neat --save
    

    打开blog/_config.yml全局配置文件添加如下配置:

    #静态资源压缩优化
    # hexo-neat
    neat_enable: true # 启用neat
    
    # 对html优化
    neat_html:          
      enable: true
      exclude:
      
    # 对css优化
    neat_css:
      enable: true
      exclude:
        - '*.min.css'
    
    # 对js优化
    neat_js:
      enable: true
      mangle: true
      output:
      compress:
      exclude:
        - '*.min.js'
    

    16、删除博文目录自动生成的序数

    blog/themes/next/_config.yml,搜索toc,修改如下:

    toc:
      enable: true
    
      # Automatically add list number to toc.
      number: false
    
      # If true, all words will placed on next lines if header width longer then sidebar width.
      wrap: false
    

    相关文章

      网友评论

        本文标题:hexo博客优化--Next主题

        本文链接:https://www.haomeiwen.com/subject/ccfrzftx.html