美文网首页
使用Hexo开源博客系统,轻松搭建你的个人博客(2)- 配置篇

使用Hexo开源博客系统,轻松搭建你的个人博客(2)- 配置篇

作者: 俺是大龄程序员 | 来源:发表于2019-05-01 23:15 被阅读0次

    上一章节,我们介绍了Hexo的基础搭建,搭建完大家一定发现,是英文版本的,并且页面有点丑陋。这一章节,就来跟大家介绍Hexo的配置和主题的设置。
    原文链接:查看

    站点信息

    上一章有跟大家提到过_config.yml这个文件,这个我们先称之为站点全局的配置文件,后续我们说到主题的时候,也会有一个这样的文件,暂时称它主题配置文件。
    我们先来看一下全局配置文件主要有哪些内容:

    # Site 站点主配置
    title: Hexo  # 网站标题
    subtitle:    # 网站副标题
    description:   # 网站描述
    keywords:      # 可以不填写保持默认
    author: John Doe  # 网站拥有者昵称
    language:    # 网站语言设置,一般根据依赖的主题而定
    timezone:    # 网站时区设置,一般不填写保持默认
    
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url:   # 网站url设置
    root:  # 网站根目录链接
    permalink: :year/:month/:title.html  # 文章链接,默认是按照 /年/月/日/文章标题 设置的链接
    permalink_defaults:  # 默认链接形式
    ......
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme:  #主题
    

    这些可根据需要设置,其余默认即可,git配置和站点地图配置后续用到再介绍。
    信息配置完记得执行hexo g && hexo s,刷新浏览器查看效果。

    安装Next主题

    主题大家可以在官网下载(https://hexo.io/themes)也可以到GitHub搜索,我推荐使用Next主题,该主题几乎占领了Hexo博客的半壁江山。
    Next主题下载地址:https://github.com/theme-next/hexo-theme-next.git
    这边介绍的版本是Next6,在Next6版本上其实增加了很多Next5需要手动配置的东西,并且Next5已经停止维护了,所以建议使用Next6版本。

    下载Next主题

    两种方式:
    1.使用git clone命令将Next仓库克隆到hexo目录下的themes/next,需要在根目录下执行,命令为:git clone https://github.com/theme-next/hexo-theme-next.git themes/next
    2.直接在Github页面上选择绿色的按钮Clone or Download下载压缩包,然后解压到themes目录下,名字可自行修改。

    设置为Next主题

    打开全局配置文件_config.yml,找到theme,设置如下:

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: hexo-theme-next   #此处填入你在themes目录下的next主题目录名
    

    测试Next主题

    在Git Bash中执行如下命令:

    hexo clean && hexo g && hexo s
    

    命令执行完成后在浏览器中输入http://localhost:4000即可查看安装好的Next主题。

    配置Next主题

    在主题目录下面,也有一个_config.yml的配置文件,我们就叫它主题配置文件,下面我们开始配置。

    网站图标设置

    打开_config.yml,找到favicon的位置,如下所示:

    favicon:
      small: /images/favicon-16x16-next.png
      medium: /images/favicon-32x32-next.png
      apple_touch_icon: /images/apple-touch-icon-next.png
      safari_pinned_tab: /images/logo.svg
      #android_manifest: /images/manifest.json
      #ms_browserconfig: /images/browserconfig.xml
    

    将图片放到你的next主题下面的source/images目录下面,然后在主题配置文件中设置即可。

    关闭底部由hexo强力驱动

    在footer中,将powered和theme下的属性全部设置为false

    footer:
      ...
      powered:
        # Hexo link (Powered by Hexo).
        enable: false
        # Version info of Hexo after Hexo link (vX.X.X).
        version: false
    
      theme:
        # Theme & scheme info link (Theme - NexT.scheme).
        enable: false
        # Version info of NexT after scheme info (vX.X.X).
        version: false
    

    菜单栏设置

    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
    
    # Enable / Disable menu icons / item badges.
    menu_settings:
      enable: true  #表示是否显示菜单图标icons
      badges: false  # 显示每个菜单下面有多少个内容
    

    ||后面是fontawesome中的图标名称,如果想要修改图标,可以去FontAwesome官网找自己喜欢的图标样式。

    主题风格设置

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

    默认是Muse,我是使用Gemini,大家可以每个都试看看,看喜欢哪个。

    社交链接设置

    social:
      GitHub: https://github.com/codernice || github
      #E-Mail: mailto:yourname@gmail.com || envelope
      #Weibo: https://weibo.com/yourname || weibo
      #Google: https://plus.google.com/yourname || 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
    

    yourname改成你自己在对应网站的ID,前面的#注释去掉即可。

    友情链接设置

    # Blog rolls
    links_icon: link
    links_title: Links
    links_layout: block
    #links_layout: inline
    links:
      #Title: http://example.com
    

    #Title: http://example.com换成对于网站名称和链接即可

    开启阅读更多按钮

    auto_excerpt:
      enable: true
      length: 150
    

    默认是false,首页上会显示整篇文章,设置为true开启阅读更多按钮。

    文章元数据设置

    post_meta:
      item_text: true
      created_at: true
      updated_at:
        enable: false
        another_day: true
      categories: true
    

    显示在home页的文章创建于、更新于、阅读次数之类的数据

    文章字数统计设置

    # Post wordcount display settings
    # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
    symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: false
      awl: 4
      wpm: 275
    

    该设置必须要添加hexo-symbols-count-time模块依赖,在hexo站点根目录下使用npm install hexo-symbols-count-time --save命令安装模块。

    侧边栏头像设置

    # Sidebar Avatar
    avatar:
      # In theme directory (source/images): /images/avatar.gif
      # In site directory (source/uploads): /uploads/avatar.gif
      # You can also use other linking images.
      url: 你的头像地址
      # If true, the avatar would be dispalyed in circle.
      rounded: true # 设置头像是否为圆形
      # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
      opacity: 1 # 设置不透明度,1为完全不透明,0为完全透明
      # If true, the avatar would be rotated with the cursor.
      rotated: true # 设置鼠标放到头像上是否旋转
    

    代码块设置

    codeblock:
      # Manual define the border radius in codeblock, leave it blank for the default value: 1
      border_radius: 7   # 按钮圆滑度
      # Add copy button on codeblock
      copy_button:
        enable: true # 设置是否开启代码块复制按钮
        # Show text copy result
        show_result: true # 是否显示复制成功信息
    

    开启文章打赏按钮

    # Reward (Donate)
    reward_settings:
      # If true, reward would be displayed in every article by default.
      # You can show or hide reward in a specific article throuth `reward: true | false` in Front Matter.
      enable: true #开启打赏功能
      animation: false
      #comment: Donate comment here
    
    reward:
      wechatpay: # 微信收款图片地址
      alipay: # 支付宝收款图片地址
      #bitcoin: /images/bitcoin.png
    

    开启相关文章推荐功能

    related_posts:
      enable: true #开启
      title: # custom header, leave empty to use the default one
      display_in_home: false #显示在首页
      params:
        maxCount: 5
        #PPMixingRate: 0.0
        #isDate: false
        #isImage: false
        #isExcerpt: false
    

    需要安装hexo-related-popular-posts模块,在hexo站点根目录下执行npm install hexo-related-popular-posts --save安装模块。

    代码块风格设置

    # Code Highlight theme
    # Available values: normal | night | night eighties | night blue | night bright
    # https://github.com/chriskempson/tomorrow-theme
    highlight_theme: normal
    

    有normal 、night 、 night eighties 、 night blue 、night bright这几种风格,大家可以都试看看。

    添加valine评论系统

    # Valine
    # You can get your appid and appkey from https://leancloud.cn
    # More info available at https://valine.js.org
    valine:
      enable: true # 开启valine评论
      appid: # your leancloud application appid
      appkey: # your leancloud application appkey
      notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
      verify: false # Verification code
      placeholder:  # comment box placeholder
      avatar: monsterid # gravatar style
      guest_info: nick,mail,link # custom comment header
      pageSize: 10 # pagination size
      language: # language, available values: en, zh-cn
      visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
      comment_count: true # if false, comment count will only be displayed in post page, not in home page
    

    valine是第三方插件,需要到https://leancloud.cn注册账号,获取到appid和appkey后放到这里即可。avatar是设置默认头像,可以到https://valine.js.org/avatar选择默认头像,然后在这里设置名字即可。

    开启百度分享

    # Baidu Share
    # Available values: button | slide
    # Warning: Baidu Share does not support https.
    baidushare:
      type: button  # 设置分享按钮的风格,有button何slide形式
    

    开启needmoreshare分享

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

    needmoreshare2依赖theme-next-needmoreshare2模块,要开启的朋友可以到https://github.com/theme-next/theme-next-needmoreshare2 找到方法。

    设置文章阅读量

    leancloud_visitors:
      enable: true
      app_id: 
      app_key: 
      # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
      # If you don't care about security in leancloud counter and just want to use it directly
      # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
      security: false
      betterPerformance: true
    

    appid和appkey跟上面开启valine评论使用的leanCloud是一样的。如果发现文章阅读量不显示,可以到leanCloud后台的存储菜单下,创建Class,命名为Counter.

    开启不蒜子统计功能

    busuanzi_count:
      enable: true
      total_visitors: true #开启总访客(uv)
      total_visitors_icon: user
      total_views: true #开启总访问数(pv)
      total_views_icon: eye
      post_views: false
      post_views_icon: eye
    

    这边的post_views和上面的leanCloud_visitors冲突,两者都是显示文章阅读量,只开启一个就可以了。

    开启本地博客搜索功能

    local_search:
      enable: false
      # 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: false
    

    该功能依赖hexo-generator-searchdb插件,使用命令npm install hexo-generator-searchdb --save来进行安装,然后在全局配置文件的末尾,加入以下代码即可。

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

    总结

    以上就是hexo博客常用的基本配置以及基于Next主题的一些设置,更多功能大家可在使用中逐摸索,欢迎讨论交流。

    需要安装的模块依赖

    1.字数统计:npm install hexo-symbols-count-time --save
    2.相关文章推荐:npm install hexo-related-popular-posts --save
    3.本地博客搜索功能:npm install hexo-generator-searchdb --save,然后在全局配置文件末尾加入代码

    第三方插件

    1.valine评论系统:需要到https://leancloud.cn注册账号,获取到appid和appkey
    2.文章阅读量:同样需要用到leancloud的appid和appkey

    相关文章

      网友评论

          本文标题:使用Hexo开源博客系统,轻松搭建你的个人博客(2)- 配置篇

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