hexo-cake-moon-menu

This plugin from hexo-theme-inside, thank ike-c.

If you've come here from my post, check out the 1.x branch code.

Preview

How to use

yarn add hexo-cake-moon-menu

If you are using NexT theme version 7.8 or earlier, install version 2.1.2

yarn add hexo-cake-moon-menu@2.1.2

Config

In hexo _config.yml (here is default config, if don't change it, nothing need to append)

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

Custom

It's easy to add new button in moon-menu. And here's an example about add gitter sidecar.

1. Add config

moon_menu:
  chat:
    icon: fa fa-comments

2. In ${hexo-dir}/scripts/any.js, Add custom head

const path = require('path');
const injector = require('hexo-extend-injector2')(hexo);
injector.register('body-end', `<script>
((window.gitter = {}).chat = {}).options = {
  room: 'your-room-name',
  activationElement: false
};
</script>`);
injector.register('body-end', '<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>');
injector.register('js', path.resolve(hexo.base_dir, 'any/gitter.js'));

3. In ${hexo-dir}/any/gitter.js, create custom function

document.addEventListener('gitter-sidecar-instance-started', e => {
  // every button has it's id such as #moon-menu-item-<key>
  document.querySelector('#moon-menu-item-chat').addEventListener('click', () => {
    e.detail.chat.toggleChat(true);
  });
});

Other themes

If you're not a user of the NexT or Cake theme, don't worry, you can still use this plug-in, just add fontawesome to your blog. We provide three scheme that you can choose.

Scheme one

yarn add hexo-fontawesome

In ${hexo-or-theme-dir}/scripts/any.js

const { dom } = require('@fortawesome/fontawesome-svg-core');
const injector = require('hexo-extend-injector2')(hexo);
injector.register('style', dom.css());

Scheme two

In ${hexo-or-theme-dir}/scripts/any.js

const injector = require('hexo-extend-injector2')(hexo);
// add fontawesome
injector.register('head-end', {
  value: '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css" crossorigin="anonymous">'
});

Scheme three

Add fontawesome.css in your theme layout