Hexo博客搭建之配置文件详解(Melody)

柔光的暖阳◎ 2023-06-15 11:24 9阅读 0赞

### 前言 ###

之前有2篇关于`Hexo`博客搭建的文章. 有人给我留言要我使用的配置文件.  
我们今天就简单聊聊这个配置文件. 其实, 在前篇[Hexo博客搭建之主题构建(melody)][Hexo_melody], 以及[作者官方文档][Link 1]内以及有着比较详尽的说明, 本篇作为补充, 简单说明下需要注意的配置.

对于之前的部署和安装不太了解的, 可以看下前篇.

--------------------

### 环境准备 ###

*  操作系统: Mac OS
 *  NodeJS & NPM
 *  Hexo
 *  Hexo - melody 主题

--------------------

### 配置文件 - 总览 ###

关于配置文件, 主要有2个: `hexo配置文件 _config.yml` 和 `hexo-melody主题配置文件 melody.yml`.

其中, `_config.yml`放置在根目录下, `hexo`安装完毕后即可生效. `melody.yml`是主题的配置文件, 放置在`<hexo-home>/source/_data/melody.yml`. 
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

--------------------

### Hexo配置文件 \_config.yml ###

本节主要聊聊`Hexo`官方自带的配置文件`_config.yml`. 其中在[Hexo博客搭建之基础构建(Mac)][Hexo_Mac]有简单的聊过. 本章本着事无巨细的原则, 重新聊聊.

# _config.yml
    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site
    title: Hello's blog
    subtitle: 'HelloWorld.'
    description: ''
    keywords:
    author: Hello
    language: zh-Hans
    timezone: ''
    
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    #url: http://yoursite.com
    url: https://hello.github.io/
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    pretty_urls:
      trailing_index: true # Set to false to remove trailing index.html from permalinks
    
    # Directory
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:
    
    # Writing
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link:
      enable: true # Open external links in new tab
      field: site # Apply to the whole site
      exclude: ''
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight:
      enable: true
      line_number: true
      auto_detect: false
      tab_replace: ''
    
    # Home page setting
    # path: Root path for your blogs index page. (default = '')
    # per_page: Posts displayed per page. (0 = disable pagination)
    # order_by: Posts order. (Order by date descending by default)
    index_generator:
      path: ''
      per_page: 10
      order_by: -date
    
    # Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:
    
    # Metadata elements
    ## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
    meta_generator: true
    
    # Date / Time format
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss
    ## Use post's date for updated date unless set in front-matter
    use_date_for_updated: false
    
    # Pagination
    ## Set per_page to 0 to disable pagination
    per_page: 10
    pagination_dir: page
    
    # Include / Exclude file(s)
    ## include:/exclude: options only apply to the 'source/' folder
    include:
    exclude:
    ignore:
    
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    #theme: landscape
    theme: melody
    
    
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: https://github.com/hello/hello.github.io.git
      branch: github-blog-dev
    #deploy:
      #type: ''
    
    # search
    search:
      path: search.xml
      field: all
      #field: post
      content: true

值得注意的配置:

*  title: 标题 / Hello’s blog
 *  subtitle: 副标题 / ‘HelloWorld.’
 *  author: 作者 / hello
 *  language: 语言 / zh-Hans
 *  url: 博客地址 / https://www.hello.io/
 *  theme: hexo博客主题 / landscape
 *  deploy模块
 *  search模块

--------------------

### Hexo-melody配置文件 melody.yml ###

先给出配置文件主体:

# language
 # 语言
 language: zh-Hans
 
 author: SeanYanxml
 
 # ---------------
 # Theme color for customize
 # Notice: color value must in double quotes like "#000" or may cause error!
 # ---------------
 # 主题颜色
 theme_color:
 enable: true
 main: "#49B1F5"
 paginator: "#00C4B6"
 button_hover: "#FF7242"
 text_selection: "#00C4B6"
 link_color: "#858585"
 # hr_color: "#000"
 hr_color: "#A4D8FA"
 tag_start_color: "#A4D8FA"
 tag_end_color: "#1B9EF3"
 
 # 代码高亮主题
 # Highlight theme
 # ---------------
 highlight_theme: default
 
 
 # 代码换行
 # code_word_wrap: true or false
 
 
 # 社交图标 - 使用V4 直接运行
 # 使用 V5 需要将CSS样式的地址导入CDN (CDN地址的配置见末尾)
 # Nav settings
 # see the icon_name in fontawesome website.
 # And you need to add the `fa` or `fab` prefix by your self.
 # ---------------
 #social:
 #icon_name fa: url
 #icon_name fab: url
 # Connect Links
 social:
 github fab: https://github.com/SeanYanxml
 rss fas: https://blog.csdn.net/u010416101
 # 页面头栏目
 # Main menu navigation
 menu:
 # Home: /
 主页: /
 归档: /archives
 分类: /categories
 标签: /tags
 运营历史: /history
 关于作者: /about
 # Search: /search
 #XXX: /xxx
 
 # 自动节选功能
 # Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/theme-config?id=auto-excerpt
 # auto_excerpt:
 # enable: false
 # length: 150
 
 # 顶部图案
 #top_img: true # false or url of img
 top_img: https://blog-1251750343.cos.ap-beijing.myqcloud.com/blog/blog-bg.jpg
 
 
 # Favicon
 # ---------------
 favicon: /melody-favicon.ico
 
 # PWA
 # See https://github.com/JLHwung/hexo-offline
 # ---------------
 pwa:
 enable: false
 manifest: /manifest.json
 # If you don't want to trouble, just ignore the following things
 # See https://realfavicongenerator.net/
 # theme_color: "#49B1F5"
 # apple_touch_icon: /apple-touch-icon.png
 # favicon_32_32: /favicon-32x32.png
 # favicon_16_16: /favicon-16x16.png
 # mask_icon: /safari-pinned-tab.svg
 
 
 
 
 # Algolia search
 # ---------------
 #algolia_search:
 # enable: true # or false
 # hits:
 # per_page: 10 # the number of search results per page
 # labels:
 # input_placeholder: Search for Posts
 # hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
 # hits_stats: "${hits} results found in ${time} ms"
 
 #default
 algolia_search:
 enable: false
 hits:
 per_page: 10
 
 # Local search
 # Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/third-party-support?id=local-search
 # ---------------
 local_search:
 enable: true
 
 #local_search:
 # enable: false
 
 # MathJax
 # Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/third-party-support?id=mathjax
 # ---------------
 mathjax:
 enable: false
 cdn: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
 
 # KaTeX
 # ---------------
 katex:
 enable: false
 cdn:
 css: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css
 
 # Toggle fireworks (IE >= 10)
 # ---------------
 fireworks: false
 
 # Analysis
 # ---------------
 baidu_analytics:
 
 google_analytics:
 
 # Tencent_analytics ID
 tencent_analytics:
 
 # stylesheets loaded in the <head>
 # ---------------
 stylesheets:
 - /css/index.css
 # scripts loaded in the end of the body
 # ---------------
 scripts:
 - /js/utils.js
 - /js/fancybox.js
 - /js/sidebar.js
 - /js/copy.js
 - /js/fireworks.js
 - /js/transition.js
 - /js/scroll.js
 - /js/head.js
 
 # cdn for third-party library
 # ---------------
 cdn:
 css:
 fontawesome: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
 fontawesomeV5: https://use.fontawesome.com/releases/v5.3.1/css/all.css
 js:
 anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js
 jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
 fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
 velocity: https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js
 velocity-ui: https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js
 
 # 文章相关项目
 post_meta:
 date_type: created # created or updated
 categories: true
 tags: true
 
 # 文章版权
 post_copyright:
 enable: true
 license: CC BY-NC-SA 4.0
 license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
 
 # 文章二维码
 # QR_code:
 # - itemlist:
 # img:
 # text:
 
 # 文章末广告
 # adv:
 # enable: false
 # info:
 
 # 文章分享系统
 # Share System
 # ---------------
 
 #addThis:
 #enable: true
 #pubid: <key-id>
 addThis:
 enable: false
 pubid:
 
 # sharejs:
 # enable: false
 # disabled_sites:
 
 ### 侧栏设置
 
 # 侧栏头像
 # Post info settings
 # ---------------
 avatar: https://secure.gravatar.com/avatar/dcc38a5a0d37cb7348d4f72d8f6a2de0
 
 # 侧栏-跟随我-follow me
 follow:
 enable: true
 url: 'https://github.com/SeanYanxml'
 text: 'Follow Me'
 
 # 侧栏-友情链接
 # other links
 links_title: 友情链接-Links # 配置友链的标题文字
 links:
 MY-CSDN: https://blog.csdn.net/u010416101
 
 
 # 侧栏-文章段落(章节)
 # paragraph
 toc:
 enable: true # or false
 number: false # or false. 版本v1.5.6新增
 
 
 # Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/additional-package-support?id=word-counting
 wordcount:
 enable: true
 
 #wordcount:
 # enable: false
 
 
 
 
 # slide
 # For reveal.js config, see https://github.com/hakimel/reveal.js#configuration
 slide:
 separator: ---
 separator_vertical: --
 charset: utf-8
 theme: black
 # optional
 mouseWheel: false
 transition: slide
 transitionSpeed: default
 parallaxBackgroundImage: ''
 parallaxBackgroundSize: ''
 parallaxBackgroundHorizontal: null
 parallaxBackgroundVertical: null
 
 
 
 # Comments System
 # ---------------
 # 注意这个注释不能关闭
 disqus:
 enable: false
 #shortname:
 #count:
 
 # laibili:
 # enable: false
 # uid:
 
 # gitment
 # enable: false
 # owner:
 # repo:
 # client_id:
 # client_secret:
 
 #gitalk settings
 #gitalk:
 # enable: true #用来做启用判断可以不用
 # owner: #Github 用户名,
 # repo: #储存评论issue的github仓库名
 # admin: #Github 用户名,
 # clientID: #`Github Application clientID`
 # clientSecret: #`Github Application clientSecret`
 
 
 #gitalk:
 #enable: true
 #client_id: <client-id>
 #client_secret: <client-secret>
 #repo: <xxx.github.io>
 #owner: SeanYanxml
 #admin: SeanYanxml
 
 #gitalk:
 #enable: false
 # client_id:
 # client_secret:
 # repo:
 # owner:
 # admin:
 
 # valine comment system. https://valine.js.org
 # valine:
 # enable: false # if you want use valine,please set this value is ture
 # appId: # leancloud application app id
 # appKey: # leancloud application app key
 # notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
 # verify: false # valine verify code (true/false)
 # pageSize: 10 # comment list page size
 # avatar: mm # gravatar style https://valine.js.org/#/avatar
 # lang: zh-cn # i18n: zh-cn/en
 # placeholder: Just go go # valine comment input placeholder(like: Please leave your footprints )
 # guest_info: nick,mail,link #valine comment header inf
 
 
 ICP:
 enable: false
 #text:
 
 # busuanzi count for PV / UV in site
 busuanzi:
 # count values only if the other configs are false
 enable: true
 # custom uv span for the whole site
 site_uv: true
 site_uv_header: 
 site_uv_footer:
 # custom pv span for the whole site
 site_pv: true
 site_pv_header: 
 site_pv_footer:
 # custom pv span for one page only
 page_pv: true
 page_pv_header: 
 page_pv_footer:
 
 # Sidebar Settings
 # ---------------
 #links_title: Links
 #links:
 #Name: url
 
 # Follow Me Button
 # follow:
 # enable: true
 # url: ''
 # text: ''
 
 # Ads
 # ---------------
 # Google Adsense
 google_adsense:
 enable: false
 js: //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
 client: ca-pub-...........
 enable_page_level_ads: true
 
 # Footer Settings
 # ---------------
 
 #since
 since: 2019
 
 # footer_custom_text:
 footer_custom_text: <a href="http://beian.miit.gov.cn "> ICP备案号:苏ICP备<xxx>号 </a>
 
 # Live2D
 live2d:
 # enable: true
 enable: false
 # scriptFrom: local # 默认
 # pluginRootPath: live2dw/ # 插件在站点上的根目录
 # pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
 # pluginModelPath: assets/ # 模型文件相对与插件根目录路径
 # model: 
 # use: live2d-widget-model-nico
 #use: live2d-widget-model-tororo # 下载的动画模型名称
 # display:
 # superSample: 2
 # width: 210
 # height: 420
 # position: left # 模型显示在网页上的位置
 # hOffset: 0
 # vOffset: -20

##### 资源加载 #####

*  scripts: js导入.
 *  cdn/js: 远程导入的CDN资源链接和JS资源链接.
 *  fireworks: 未知
 *  stylesheets: 前端样式.
 *  slide: 滑动框？

##### 基本配置 #####

*  language: 语言.(default(en)/en/zh-Hans)
 *  author: 配置文件作者.(hello)
 *  theme\_color: 主题配色.(一般不要修改, 可以根据需要修改.)
 *  favicon: 图标(网页tab上方的图标).

##### 主页配置 #####

*  social: 首页的图标链接.
 *  auto\_excerpt: 自动节选(首页摘要多少字. 会截断文章或代码, 不推荐.)
 *  top\_image: 顶部图案, 也就是bannner(壁纸网站选个高清图即可).

##### 侧栏配置 #####

*  avatar: 侧栏头像.
 *  follow: 侧栏-跟随我.
 *  links: 友情链接.
 *  toc: 侧栏-文章段落.(章节)

##### 顶端配置 #####

*  menu: 顶方的栏目.(配置新栏目需要`hexo new page`, 否则指引的页面为空. 详细配置操作看前章.)

##### 底端配置 #####

*  since: 末尾(时间).
 *  footer\_custom\_text: 自定义链接.(一般用来写备案号)

##### 文章配置 #####

*  highlight\_theme: 代码高亮主题.(可就是代码块的格式, 作者提供了4种可以选择)
 *  code\_word\_wrap: 代码换行.
 *  post\_meta: 每篇文章的头部自定义？
 *  post\_copyright: 文章版权声明.
 *  QR\_code: 文章底部二维码.
 *  adv: 文章末广告.
 *  addThis/sharejs: 文章分享系统.
 *  wordcount: 字数统计.

##### 第三方配置 #####

*  pwa: pwa配置.(沉浸式体验配置-未使用)
 *  algolia\_search: (algolia\_search 搜索)
 *  local\_search: (local\_seach搜索 想使用需要安装\`\`, 并对`_config.yml`文件进行配置.)
 *  katex: 科学公式(不需要可以不配置)
 *  baidu\_analytics/google\_analytics/tencent\_analytics: (百度/谷歌/腾讯)统计.
 *  addThis/sharejs: 文章分享系统.
 *  disqus/laibili/gitment/gitalk: 评论系统.
 *  busuanzi: 卜算子统计.
 *  google\_adsense: 谷歌广告.
 *  live2d: live2D配置.

##### 注意 #####

*  在上述的配置文件中, 我将比较私密的内容隐藏了. 读者可以根据上篇的配置教程自行配置. (隐藏内容包括`addThis`/`gittalk`)
 *  此外, 部分第三方插件需要安装各自的包.
    
     *  主题基础: `npm install hexo-renderer-jade hexo-renderer-stylus --save` .
     *  localsearch: `npm install hexo-generator-search --save`.
     *  gittalk: `npm i --save gitalk`.
     *  wordcount: `npm i --save hexo-wordcount`.
     *  live2d: `npm install live2d-widget-model-z16`. (live2d参考教程)

--------------------

### 效果 ###

配置完成后, 依次运行`hexo clean`/ `hexo g` / `hexo s`. 访问 localhost:4000 即可看到如下页面.

## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1] ##

### 附注 ###

*  所用的配置文件, 你可以拷贝创建. 也可以从CSDN资源链接下载(稍后上传).
 *  后续预计发布docker版, 使其更方便使用. 最好开箱即用.

[Hexo_melody]: https://blog.csdn.net/u010416101/article/details/102986439
[Link 1]: https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122130738169.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[Hexo_Mac]: https://blog.csdn.net/u010416101/article/details/102984991
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191122154310143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70