Coder Social home page Coder Social logo

hexo-theme-snail

View Live Super Snail Blog →

Light theme preview

hexo-theme-snail

Dark theme preview

hexo-theme-snail

Star theme preview

hexo-theme-snail

Hexo-theme-snail is a succinct hexo theme. It has two colors, light and star, that can be set according to your own preferences in the settings, and also has the functions of sharing and commenting. More features are under development.

Features

  • light color theme and star theme
  • diversified comment system
  • notice tips
  • sharing to other platforms (under development)
  • picture sharing (under development)

Quick Start

Install Hexo

$ npm install hexo-cli -g

Setup your blog

$ hexo init blog

Installation Theme

$ cd blog
$ rm -rf source
$ rm -rf scaffolds
$ rm _config.yml package.json README.md LICENSE
$ git clone https://github.com/dusign/hexo-theme-snail.git
$ mv ./hexo-theme-snail/snail ./themes
$ mv ./hexo-theme-snail/* ./
$ npm install

Install Mathjax

To install Mathjax, please click https://www.dusign.net/2019/10/14/Hexo-Configuration/ for a detailed tutorial.

Install WordCount

npm install hexo-wordcount --save

See https://github.com/willin/hexo-wordcount for detailed configuration method.

Set Theme

Modify the value of theme: in _config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: snail

Start the Server

$ hexo generate
$ hexo server

Configuration

Site

Replace the following information with your own.

# Site
title: 
subtitle: At the bottom of the well, it is destined to see only the sky at the wellhead. 
          However, the starting point only affects the process of reaching your peak and does not determine the height you reach.
author: Dusign
language: en
timezone:

Site Settings

Put customized pictures in img directory.

# Site settings
SEOTitle: Hexo-theme-snail
email: [email protected]
description: "A hexo theme"
keyword: "dusign, hexo-theme-snail"
header-img: img/header_img/home-bg-1-dark.jpg
signature: true #show signature
signature-img: img/signature/dusign.png

SNS Settings

If you don't want to display it, you can delete it directly.

# SNS settings
github_username:    dusign
twitter_username:   dusignr
facebook_username:  Gang Du
zhihu_username: dusignr

Sidebar Settings

# Sidebar Settings
sidebar: true                      # whether or not using Sidebar.
sidebar-about-description: "Welcome to visit, I'm Dusign!"
sidebar-avatar: img/ironman-draw.png      # use absolute URL, seeing it's used in both `/` and `/about/`
widgets:
- search
- featured-tags
- short-about
- visitor
- recent-posts
- friends-blog
- archive
- category

# widget behavior
## Archive
archive_type: 'monthly'
show_count: true


## Featured Tags
featured-tags: true                     # whether or not using Feature-Tags
featured-condition-size: 1              # A tag will be featured if the size of it is more than this condition value


## Friends
friends: [
    {
        title: "Dusign's Blog",
        href: "https://blog.csdn.net/d_Nail"
    },{
        title: "Dusign's Web",
        href: "#"
    },{
        title: "Dusign's Github",
        href: "https://github.com/dusign"
    },{
        title: "Other",
        href: "#"
    }
]

Theme

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: snail

Deployment

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
      github: github.repository.address
      coding: coding.repository.address
  branch: master

Share

## Share
share: true

Comment

See https://github.com/imsun/gitment for detailed configuration method.

# Comment
## This comment system is gitment
## gitment url: https://github.com/imsun/gitment
comment:
  gitment:
    enable: false
    owner:
    repo:
    client_id:
    client_secret:
  livere:
    enable: false
  disqus:
    enable: false
    username:

Tip

# Tip
tip:
  enable: true
  copyright: This is copyright.
  content: false

Background effects

Set the enable value of the desired color sheme to true. If the value of bg_effects.star.enable is true, please modify the value of highlight_theme in ./themes/snail/_config.yml to night.

# Background effects
## If there is no effect after modification, please empty the cache and try again.
## ⚠️ The following special effects will take up a lot of cpu resorces, please open it carefully.
bg_effects:
  enable: true
  line:
    enable: false
    color: 129,200,61
    pointColor: 129,200,61
    opacity: 0.7
    zIndex: -9
    count: 99
  mouse_click:
    enable: true
    content: '"🌱","just do it","🍀"'
    color: '"rgb(121,93,179)"
          ,"rgb(76,180,231)"
          ,"rgb(184,90,154)"'
  wave:
    enable: true

Visitor statistics

# Visitor statistics
visitor:
  enable: true
  type: 

Color Theme

# Color Theme
## light , dark or star
## If you set the value of the `color_theme` to `dark`, set the value of the `highlight_theme` to `night` in `/theme/snail/config.yml`
## `mouse_control` is only valid for star themes
color_theme: light
mouse_control: false

Search

run $ npm install hexo-generator-search --save then add the follow configure to _config.yml

## Search
search:
  enable: true
  path: search.xml
  field: post
  content: true
  • path - file path. By default is search.xml . If the file extension is .json, the output format will be JSON. Otherwise XML format file will be exported.
  • field - the search scope you want to search, you can chose:
    • post (Default) - will only covers all the posts of your blog.
    • page - will only covers all the pages of your blog.
    • all - will covers all the posts and pages of your blog.
  • content - whether contains the whole content of each article. If false, the generated results only cover title and other meta info without mainbody. By default is true.

Error and Solutions

  • run hexo deploy with "ERROR Deployer not found: git" solution: npm install --save hexo-deployer-git

Top

Hexo-theme-snail has added the article top function, just add the following content in the article head.

top: true

Music Player

## music
### netease; qqkg;
### if your `library` is `qqkg`, please set `music` as the song url
music:
  enable: true
  library: netease
  music: https://kg.qq.com/node/play?s=7deFpz7Z26Jmv7di&g_f=share_html

Releases

v1.4

  • hide sidebar when toc is empty
  • change the music library to NetEase music library
  • add a function that can stop toc automatic numbering
  • increase music library

v1.3

  • fix category jump path issue in sidebar
  • add a default image for new articles
  • add photography (under development)
  • fix top and page conflict

v1.2

  • fix the bug
  • add search within site
  • add top
  • image wave effect
  • add share
  • add dark theme

v1.1

  • change title font-family
  • add wordcount
  • add visitor statistics
  • fix the bug (categories not display)
  • replacing mathjax with marked

v1.0

  • fix the bugs
  • add comment system
  • add notice tips
  • add star theme
  • add line theme (background effect)
  • add mouse-click effect

License

Apache License 2.0 Copyright(c) 2018-2020 dusign
hexo-theme-snail is derived from hexo-theme-beantech ,thanks YenYuHsuan.

Jason's Projects

arthas icon arthas

Alibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas

cs-base icon cs-base

图解计算机网络、操作系统、计算机组成、数据库,共 1000 张图 + 50 万字,破除晦涩难懂的计算机基础知识,让天下没有难懂的八股文!🚀 在线阅读:https://xiaolincoding.com

guava icon guava

Google core libraries for Java

java icon java

All Algorithms implemented in Java

mall icon mall

mall项目是一套电商系统,包括前台商城系统及后台管理系统,基于SpringBoot+MyBatis实现,采用Docker容器化部署。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。

mall-learning icon mall-learning

mall学习教程,架构、业务、技术要点全方位解析。mall项目(40k+star)是一套电商系统,使用现阶段主流技术实现。涵盖了SpringBoot 2.3.0、MyBatis 3.4.6、Elasticsearch 7.6.2、RabbitMQ 3.7.15、Redis 5.0、MongoDB 4.2.5、Mysql5.7等技术,采用Docker容器化部署。

spring-boot-examples icon spring-boot-examples

about learning Spring Boot via examples. Spring Boot 教程、技术栈示例代码,快速简单上手教程。

spring-boot-projects icon spring-boot-projects

该仓库中主要是 Spring Boot 的入门学习教程以及一些常用的 Spring Boot 实战项目教程,包括 Spring Boot 使用的各种示例代码,同时也包括一些实战项目的项目源码和效果展示,实战项目包括基本的 web 开发以及目前大家普遍使用的线上博客项目/企业大型商城系统/前后端分离实践项目等,摆脱各种 hello world 入门案例的束缚,真正的掌握 Spring Boot 开发。

springall icon springall

循序渐进,学习Spring Boot、Spring Boot & Shiro、Spring Batch、Spring Cloud、Spring Cloud Alibaba、Spring Security & Spring Security OAuth2,博客Spring系列源码:https://mrbird.cc

springbootcodegenerator icon springbootcodegenerator

又名大狼狗代码生成器,基于SpringBoot2+Freemarker的JAVA代码生成器,以释放双手为目的,支持mysql/oracle/pgsql三大数据库, 用DDL-SQL语句生成JPA/JdbcTemplate/Mybatis/MybatisPlus/BeetlSQL等相关代码.

tutorials icon tutorials

Just Announced - "Learn Spring Security OAuth":

weixin-java-mp-demo icon weixin-java-mp-demo

基于Spring Boot 和 WxJava 实现的微信公众号Java后端Demo,支持多公众号

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.