博客使用指南

2020-微师-FE

基本功能

文章内容

markdown

代码块

1	console.log('Hello world!');

图片资源相关

{% asset_img hello.png This is an example image %}
<!-- 下面两种方式不会在首页显示 -->
<img src='./hello.png' style="display:block; margin: 0 auto;">

![](./hello.png)

特定功能

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为站点配置文件，后者称为主题配置文件。

目前hexo支持在站点文件中配置，而不用修改主题文件，mark

站内搜索

hexo-generator-searchdb

在站点配置文件_config.yml 中添加以下代码:

# 站内搜索
search:
  path: search.xml
  field: post
  content: true
  format: html

压缩生成文件内容

hexo-neat

# 博文压缩
neat_enable: true
# 压缩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'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

压缩前：

压缩后：

字数和时间阅读插件(与next主题)

hexo-symbols-count-time

在站点配置文件_config.yml 中添加以下代码

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

此插件集成在 NexT 中，需修改主题配置文件_config.yml：

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

选用的valine, 基于leancloud
需配置主题配置文件_config.yml

valine:
  enable: true
  appid: rXRJj5CsjMRd2zHVjcnnc78v-gzGzoHsz # Your leancloud application appid
  appkey: CK2ozyVif4spIJPwUpi03Pyl # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: 请在此输入您的留言  # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

文章阅读次数统计

基于leancloud统计

同样是基于leancloud，需配置主题配置文件_config.yml

leancloud_visitors:
  enable: true
  app_id: rXRJj5CsjMRd2zHVjcnnc78v-gzGzoHsz
  app_key: CK2ozyVif4spIJPwUpi03Pyl
  # Required for apps from CN region
  server_url: # <your server url>
  # 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: true

不蒜子

配置主题文件 _config.yml

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

hexo-cake-moon-menu

站点配置：

moon_menu:
  back2top:
    enable: true
    icon: fas fa-chevron-up
    func: back2top
    order: -1
  back2bottom:
    enable: true
    icon: fas fa-chevron-down
    func: back2bottom
    order: -2

实时预览

hexo-browsersync

站点配置：

browsersync:
  logLevel: "warn"
  ghostMode:
    scroll: true
  instanceName: "uniqueString"

再执行 hexo server 即可实时预览。

Talk is cheap, show me the code!
Linux 的创始人 Linus Torvalds

优化相关：
TODO

其他主题推荐：

matery
fluid

参考

乘风破浪的FE