npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hexo-theme-candelas

v1.1.0

Published

the next generation of hexo theme landscape

Downloads

10

Readme

Candelas

Candelas is the next generation of the hexo default theme Landscape. The goal of this project is to add more features and customization to the Landscape theme.

Candelas demo site can be found here, which is built up with Hexo Theme Unit Test as the source.

the mockup of Candelas

Features

  • add random banner
  • add post toc widget
  • add like post widget
  • add support for category page
  • add copyright statement for each post
  • add support for gitalk
  • add profile widget
  • new page layout
  • new tag cloud widget
  • other UI enhancements

Installation

If you're using Hexo 5.0 or later, the simplest way to install is through npm:

$ cd hexo-site
$ npm install hexo-theme-candelas

Or you can clone the entire repository:

$ cd hexo-site
$ git clone https://github.com/DukeLuo/hexo-theme-candelas themes/candelas

After the installation, open Hexo config file _config.yml and set the theme variable to candelas.

theme: candelas

Upgrade

If your Candelas is installed by npm, you can use the following command to upgrade:

$ npm install hexo-theme-candelas@latest

Or If you're using Candelas by cloning the entire repository, you can do the following step to get the latest version:

$ cd hexo-site/themes/candelas
$ git pull -r

Setup

If you're using Hexo 5.0 or later, the recommended way is to create a configuration file _config.candelas.yml for the Candelas theme under the root of the hexo blog.

Or you can modify the default configuration file _config.yml under the themes/candelas folder directly.

Random banner

The Candelas theme can display a random banner on the home page. You only need to provide the URL you want to show as follows:

banner:
  - 'https://files.shaiwang.life/banner/banner-1.jpg'
  - 'https://files.shaiwang.life/banner/banner-2.jpg'
  - 'https://files.shaiwang.life/banner/banner-3.jpg'

Like post widget

The like post widget is used to give the blog post a like. It uses fingerprint.js to generate a unique id for each reader, and the data is stored on the github gist. The count of like can only be increased.

If you want to enable the like post widget, you should set the enabled field as true. To use the github gist api to store the data, you will need to create a personal access token firstly. Be sure to check the gist(create a gists) check box and do not check the check boxes for other permissions. The github official link may give you a hand.

Due to the security risk, pushing the code with the personal access token to github is not allowed. Here I used a fool-style workaround to avoid this problem, encoding the token as base64 string and decoding the string in the code.

For example, the personal access token generated by github is xxxx, then using F12 to open the console and input window.btoa('xxxx'), then you get the base64 string 'eHh4eA==', so you should configure like post widget as follows:

like:
  enabled: true
  gistBase64Token: 'eHh4eA=='

Profile widget

The profile widget is used to display a personal profile.

If you would like to enable the RSS, the hexo-generator-feed plugin is also required.

The configuration looks like the following:

profile:
  enableBalloon: true
  metto: 'Talk is cheap. Show me the code.'
  source: 'Linus Torvalds'
  name: 'DukeLuo'
  location: 'Wuhan'
  github: DukeLuo             # the username of GitHub
  stackoverflow: 12814009     # the user ID of Stack Overflow
  email: [email protected]
  rss: /atom.xml

Gitalk

Gitalk is a comment component based on github issue. You can follow the gitalk official tour guide to set up the gitalk.

Gitalk is disabled in Candelas by default, if you want to use the gitalk, you should set the enabled field as true, and the configuration looks like the following:

gitalk:
  enabled: true
  owner: 'DukeLuo'                 # the owner of the repo stored the comment
  repo: 'DukeLuo.github.io'        # the name of the repo stored the comment
  admin: 'DukeLuo'                 # the user who has the permission to initialize github issues
  clientID: 'xxxx'                 # the client id generated by github
  clientSecret: 'xxxx'             # the client secret generated by github
  labels: ['Gitalk', 'Candelas']   # the label for the relative issue

Category page

  1. use hexo new page categories to create a categories page.
  2. modify the content of the generated file index.md under the source/categories as the following:
---
title: categories
layout: categories
---