aplayer+emoji+pjax

🐴在前面

先记录一下,差点被版本劝退,pjax不知道能不能搬上来
吸底模式还有点混乱,哎 😥

站点配置

aplayer:
  asset_inject: false # 
  enable: true 
  meting: true
  js: 
  - https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js
  - https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
  css: 
  - https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css
  id: 7491214966 #歌单编号
  server: tencent  #qq音乐
  type: playlist  
  fixed: true  #吸底模式
  order: random
  preload: none  

代码

因为打算全局使用,所以我直接贴在layout里

if theme.aplayer.enable
  .aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-order=theme.aplayer.order data-preload=theme.aplayer.preload)
  each item in theme.aplayer.css
    link(rel='stylesheet', href=item)
  each item in theme.aplayer.js
    script(src=item)

aplayer+meting+pjax

pjax

pjax的工作原理是通过ajax从服务器端获取HTML,在页面中用获取到的HTML替换指定容器元素中的内容。然后使用pushState技术更新浏览器地址栏中的当前地址。

markdown+twemoji

指令就下面三条

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
npm install markdown-it-emoji --save

站点配置

直接搬运的,有空再看看详细配置
文档写的有些简略,google到了部分:

All headers above level will then have an id attribute with a slug of their content.level can also be an array of headers levels to apply the anchor, like [2, 3] to have an anchor on only level 2 and 3 headers.

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-footnote
    - markdown-it-sup #字体上方标注
    - markdown-it-sub  
    - markdown-it-abbr
    - markdown-it-emoji  #emoji
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

表情查找emoji

引用

https://blog.sonicshield.cn/hexo-markdown-emoji.html
pjax文档

Site construction by John Doe usinghexo blog framework.
Home