Git Product home page Git Product logo

hexo-theme-buck's Introduction

Buck - A Hexo Theme

Buck is a hexo theme designed under Material Design 1 Guidelines.

Getting started

You need to build the theme resource before using this theme in hexo. Navgative to this theme root:

  1. pnpm i Install all dependencies.
  2. pnpm build Build the resource.

Note about tables

Tables in buck is responsive with special treatment: they need an additional element with table-responsive css class wraps them. Like:

<div class="table-responsive">
  <table>...</table>
</div>

This preprocessing already comes with buck if you use those renderers:

  • hexo-renderer-marked: modify the table rendering in a marked:renderer hook.

If the files are not preprocessed with certain steps. The script comes with buck will try it again on the user agent.

Confirm if the tables are preprocessed

Open any article with any table, find the table element in your user agent's "Developer tools".

Check if it has a parent with css class table-responsive:

  • No: the file is not preprocessed, and the script is failed to modify it on the user agent.
  • Yes: Contine

Check if the parent have attribute data-buck-backed="true":

  • No: the file is not preprocessed
  • Yes: the file is preprocessed
<div class="table-responsive" data-buck-baked="true">
  <table>...</table>
</div>

Development

ESBuild manages the resource of this theme. In the root:

  • The config.ts is the esbuild config.
  • build.ts is the build script, watch.ts is the incremental build script.

Use pnpm dev to start incremental building. For deployment, please remove source before build the resource.

Roadmap

  • Tags for articles
  • Fullscreen pictures & Gallery layout
  • Categories
  • Video player

hexo-theme-buck's People

Contributors

thislight avatar

Watchers

 avatar  avatar

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.