• Stars
    star
    291
  • Rank 142,563 (Top 3 %)
  • Language
    CSS
  • License
    MIT License
  • Created almost 9 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🎨 A Simple And Elegant Ghost Theme Derive From Default Theme Casper

Kaldorei

A Simple And Elegant Ghost Theme Derive From Default Theme Casper.

Ghost 3.x Kaldorei 3.0.0

English | 简体中文

Preview

img

Features

  • Blog main theme is set to be fresh green

  • The post's font color is ink blue

  • Back To Top

  • Code Highlight

  • Side Bar

    • Tag Cloud

    • Table of Content

    • Site Info

    • Author Info

  • Post Page

    • Author Info
  • Loading Posts Animation

  • Responsive Design

  • Archives

  • Image LightBox

  • Blog Global Search

  • Color & Fonts

  • Dark mode

Config Reference

🌐 Language ^2.x

Ghost2.x version supports set the language of your site, Kaldorei also supports Chinese/English switching, the default value is en.

Configure:ghost admin > General > Publication Language Enter zh

🏷️ Tag Statistics ^2.x

In Ghost2.x version, Kaldorei uses the ghost api for statistics. so you need to enable the Public API function in the Ghost Labs.

Configure:ghost admin > Labs > Enable Beta Features > Checked Public API

🌄 Lightbox ^2.x

Kaldorei integrates fancyBox 3,supports picture lightbox effect, slide show carousel, full screen preview, thumbnail preview and other fancy features. Preview & usage Preview_Usage

💬 Disqus ^2.x

Kaldorei supports Disqus plugins,only need a short code snippet in the ghost admin code injection.

Configure:ghost admin > Code Injection > Blog Header

<script>
    var disqus_shortname = 'your_disqus_shortname';
</script>

🗂 Archives ^2.x

Kaldorei provides simple archives features, using ghost api to generate site archives. PreviewBlog Archives

Ghost 3.x Configure:ghost admin

  1. Pages -> New Page -> Enter the title "Archives", At this time, the page url is archives by default.
  2. Design > Create an archive navigation,URL:http://your_blog_url/archives;
  3. Done! Go to your site find your archives page. Have fun.

Ghost 2.x Configure:ghost admin

  1. New Post > Enter the title "Archives", At this time, the page url is archives by default.
  2. Post Settings > Checked Turn this post into a page,Then Publish;
  3. Navigation > Create an archive navigation,URL:http://your_blog_url/archives;
  4. Done! Go to your site find your archives page. Have fun.

🎨 Code Highlighting Theme ^2.x

Kaldorei uses highlight.js to achieve code highlight,the default theme is: monokai-sublime

Configuration:ghost admin > Code Injection > Blog Header

<!-- use solarized-light style -->
<link rel="stylesheet" type="text/css" href="/assets/plugins/highlight-latest/styles/solarized-light.css" />

Fully Themes List

🔢 Show code line number ^3.x

New feature in Version 3.x

Kaldorei supports config the line number of code snippets,show line numbers to the left of each code blocks, it's closed by default,also support dark / light mode

Configuration:ghost admin > Code Injection > Blog Header

<script>
  var hljsSettings = {
    // Optional value: flase / true, default: false
    lineNumber: true,
    // Optional value: dark / light,default: 'dark'
    mode: 'light'
  };
</script>

Not only the line number can be configured, but also the background color of the line number can be customized. The default line number background color is as follows:

<style>
:root {
  --linenumber-dark-bg: #282c34;
  --linenumber-light-bg: #c5d2d9;
}
</style>

🔍 Global Search ^2.x

Search engine supports search by blog title by default,This feature need the ghost version >= 2.10.x

Configure by two steps:

1、Create Custom Integrations

Configure:ghost admin > Integrations > Add custom integration

img

2、Configure Variables

Configure:ghost admin > Code Injection > Blog Header

// 
<script>
  var searchSettings = {
    key: '__CONTENT__API__KEY__',  // Your custom integration Content API Key
    host: '__API__URL__',  // Your custom integration API URL
  };
</script>

🌈 Custom Color & Fonts ^2.x

Starting from kaldorei v2.1.0 version, users can customize the color and font of your site.

banner_colors

Configure:ghost admin > Code Injection > Blog Header

<style>
:root {
  --primary-color: #4af;
  --primary-light-hover: #4cf;
  --primary-dark-hover: #49f;
}
</style>

Fully replaceable variables

🔖 Bookmark card ^3.x

Starting from Ghost v3.x version, It provides a new bookmark card feature, it can show the page title、excerpt、author、publisher and even a preview image. Like this:

bookmark

Kaldorei supports bookmark card feature in the 3.x version, How to Configure, Checkout official website

Credits

License

MIT © xiaoluoboding

More Repositories

1

vue-sonner

🔔 An opinionated toast component for Vue.
Vue
763
star
2

vue-command-palette

⌨️ A fast, composable, unstyled command palette interface for Vue.
Vue
519
star
3

bookmark.style

🪄 Turn any link into a stylish visual web bookmark, one-click to copy the beautiful web bookmark image.
Vue
310
star
4

vue-demo-collection

A collection of Vue.js demos
Vue
268
star
5

vue-smart-widget

🗃️Smart widget is a flexible and extensible content container component for Vue2.x / Vue3.x in Next branch.
JavaScript
186
star
6

vue-stroll

📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.
Vue
157
star
7

chrome-ext-starter

⚡️ Modernized Chrome Extension Manifest V3 Vite Starter Template
TypeScript
140
star
8

xiaoluoboding

My GitHub Profile. Before Fork it, Star it, Please. 😂
131
star
9

nuxt3-starter

💚 A Better Nuxt 3 Starter Template,generate by nuxi.
Vue
125
star
10

monthly

📖 聚焦前端,记录过去一个月看到的优秀的文章、工具,丰富前端技术栈。每月28日更新。你可以 Watch 它,相当于订阅。
Shell
105
star
11

repository-tree

🌲Pretty display directory tree view of a GitHub repository.
Vue
71
star
12

self-hosted-app-starter

🪄 A starter for the self-hosted app, help you to build your next full-stack project. https://sha-starter.onrender.com
Go
70
star
13

svg-animation-booklet

《SVG 动画开发实战》小册
Shell
60
star
14

vue-color-wheel

🎨 A color wheel picker for Vue
Vue
49
star
15

awesome-starless

A curated list of awesome repositories with few stargazers but has a huge users.
JavaScript
45
star
16

vercel-metafy

Easily scrape metadata from websites as a service using Vercel.
TypeScript
44
star
17

vue-sfc-sandbox

Vue SFC Sandbox, Sandbox as a Vue 3 component.
Vue
42
star
18

chrome-web-bookmark

One-click turn any link into a visual web bookmark, and it looks Like Twitter cards or Notion web bookmark.
Vue
42
star
19

tech-stack.tools

🗡️ Discover our curated list of creative tools to supercharge your next project.
CSS
39
star
20

skylines

My GitHub story in 3D. View a 3D model of your GitHub contribution graph.
Vue
34
star
21

vue-sfc2esm

Transpiled Vue SFC File to ES modules.
TypeScript
28
star
22

coolshapes-vue

100+ abstract shapes with gradient for design & dev project for Vue
Vue
20
star
23

vue3-starter

🖖 A Better Vue 3 Starter Template,generate by create-vue.
Vue
16
star
24

vuepress-tailwind-theme-starter

A starter of build VuePress Theme with TailwindCss.
Stylus
15
star
25

sql-repl

🔍 Just a SQL REPL for web.
Vue
14
star
26

vuex-stateshot

💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+.
JavaScript
13
star
27

metafy-svg

Easily crawl a website's metadata and generate SVG as a service.
TypeScript
13
star
28

tailwind-pre-processor

An implementation of tailwindcss using less / stylus / Sass/SCSS.
CSS
11
star
29

vscode-folder-size

📁 Shows the current file | folder size in the status bar for Visual Studio Code
TypeScript
8
star
30

element-demi

An adapter for using Element UI with Vue 2 / 3.
JavaScript
7
star
31

vue-library-starter

My minimal Vue library starter, built on top of Vite & Vue 3
Vue
7
star
32

yii2-guide-cn

Yii2.0 中文指南,Yii2.0 权威指南,Yii2.0 开发教程。
PHP
5
star
33

vue-digit-animation

A digit animation component with wheel/slide effect for Vue 3.
Vue
5
star
34

vue-dashboard

Build A Vue Dashboard Using Cube.js.
Vue
4
star
35

bugshot

团队内部使用,一款可以提交Bug附带截图功能到Redmine的Chrome插件。
JavaScript
4
star
36

algo-data-structures-patterns

📖 Learn data structures、algorithms、patterns using JavaScript.
JavaScript
3
star
37

vue-number-spinner

Number spinner component for Vue.js.
JavaScript
3
star
38

my-first-web3-demo

[WIP] Just for learning Web 3 Tech Stack.
Vue
2
star
39

netlify-metafy

Easily scrape metadata from websites as a service using Netlify.
JavaScript
2
star
40

vuepress-plugin-svg-sprite

🔌SVG Sprite plugin for Vuepress generate with svg-sprite-loader and optimised with svgo-loader
JavaScript
2
star
41

transpile-vue-sfc-to-es-modules

Transpile Vue SFC To ES Modules Slides, Built On Top Of Slidev.
CSS
2
star
42

t-to-g

1
star
43

marketing-website-demo

TypeScript
1
star
44

vue-i18n-practice

A Vue 3 demo for taking some practice use vue-i18n.
Vue
1
star
45

vite-vue2-template

⚡️ Starter template with Vite + Vue2, also support `<script setup>` style.
Vue
1
star
46

taro-echarts-sample

基于Taro使用ECharts示例
JavaScript
1
star
47

wepy-douban-demo

Just another douban weapp demo.
Vue
1
star
48

effective-javascript

68 Specific ways to harness the power of javascript.
1
star
49

image-hub-2021

My personal image hub for 2021.
1
star
50

vuepress-plugin-hero-pattern

🌠A Hero Patterns achievement for VuePress
Vue
1
star
51

astrolabe

Manage your GitHub Stars with One App
Vue
1
star
52

csspen

An interactive CSS demo with live editor and preview. build with Vue.js.
1
star