GithubHelp home page GithubHelp logo

yunyoujun / hexo-widget-tree Goto Github PK

View Code? Open in Web Editor NEW
7.0 3.0 2.0 34 KB

🌲 Tree preview widget for hexo.

Home Page: https://hexo-theme-yun.yunyoujun.cn/posts/widget-tree/

License: MIT License

JavaScript 53.58% SCSS 46.42%
hexo hexo-plugin

hexo-widget-tree's Introduction

hexo-widget-tree

npm

中文文档

Demo

Tree preview widget for hexo.

(If your theme supports ajax, it can achieve refreshless browsing)

Usage

npm install hexo-widget-tree
# yarn add hexo-widget-tree

Click the middle button on the left of the page to expand the "tree" menu.

Click the folder with the + icon to expand the menu. By clicking the folder name, you will be redirect to category page.

Options

  • cdn: true, default jsdelivr CDN.
  • hide: false, automatically hides unless you move the mouse to the middle of the left part of the page.
  • layout: Which page will code snippets being injected. More info see Injector | hexo.
  • showCount: Show number of posts in category.
  • toc: More info here.
    • enable: false, display toc for post
# You don't have to configure them.
widget_tree:
  cdn: false
  hide: false
  layout: default
  # layout:
  #   - home
  #   - page
  showCount: true
  toc:
    enable: false
    # max_depth:
    # min_depth:
    # list_number:

Features

  • Adapt for dark mode

You need data-user-color-scheme="dark" in parent node.

Dev

git clone https://github.com/YunYouJun/hexo-widget-tree

cd hexo-widget-tree
# install dependencies
npm install
npm link

# watch sass to compile
npm run dev

# start your hexo
cd your-hexo-blog
npm link hexo-widget-tree
hexo s
# We have to reload hexo server when plugin is modified.

hexo-widget-tree's People

Contributors

brannua avatar ddindex avatar yunyoujun avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

hexo-widget-tree's Issues

关于深色模式适配的问题

目前来讲按钮在深色模式几乎就是纯白,展开后也不用说了,希望能自适应深色模式浅色模式切换

关于配置项,那个目录满吸引我的,开启了pjax虽然能做到无刷新页面,但是通过点击页面获取到的目录展开的文章不对的(或者说是不会变),只有通过这个侧边栏才能正常显示,除非刷新(或者说是关闭pjax)

Demo in README just shows a 404

Describe the bug

The readme contains a link to a demo site, yet the page just displays a 404 page, not showcasing any widget-tree example.

Reproduction

Live in the USA maybe?

System Info

N/A

Used Package Manager

n/a

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.

[ bug report ] 亮暗模式的问题

插件版本为最新

首先站点的 mode 设置成了 auto,本地启动 hexo 博客服务后进行站点预览,此时将博客整体的亮暗开关调至亮色,然后将 _data/yun.yml 中的 mode 设置为 dark,重启服务,插件并没有随之改成暗色,但站点确实已经是暗色

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.