Git Product home page Git Product logo

Gem Version license Travis

TeXt Theme

TeXt Theme Details

Demo | English (Beta)

TeXt is a succinct theme for blogging. Similar to iOS 11 style, it has large and prominent titles, round buttons and cards.

Features

  • Responsive
  • Paginate (jekyll-paginate)
  • Table of contents
  • Tag
  • Search
  • Page views (LeanCloud)
  • Emoji (Jemoji)
  • Comment (Disqus)
  • Google Analytics
  • Contact information (Email, Facebook, Twitter, Linkedin, Weibo, Zhihu, etc)
  • Semantic HTML
  • Icon automation tool (gulp-svg2png, gulp-to-ico)
  • Color Theme
  • Mathematical formula (MathJax)
  • Flowchart, Sequence diagram, Gantt diagram (mermaid)
  • Line Chart, Bar Chart, Radar Chart, Pie Chart (chartjs)
  • RSS(jekyll-feed)
  • Multi-language support(English | Simplified Chinese | Traditional Chinese)

How To Use

The easiest way is making a fork of the repository and rename it to <username>.github.io, then you can clone it to local, commit your changes and push.

And also, you can get the source code of the theme at the release page.

Configuration

Add your information in the ./_config.yml file, such as your name, contact, title of the site and so on.

Write your brief introduction in the ./about.md file.

Writing Posts

To create a new post, all you need to do is create a file in the ./_posts directory. the blog post files need to be named as the format YEAR-MONTH-DAY-title.MARKUP, for example 2011-12-31-new-years-eve-is-awesome.md. You can find more info at Jekyll: Writing Posts.

Excerpt

There are two excerpt types: TEXT type and HTML type. You can change it by setting the value of excerpt_type in the ./_config.yml file.

excerpt_type type description
text TEXT the excerpt are plain text that filters out all non-text elements (such as title, link, list, table, picture, etc.) and only show 350 characters most.
html HTML the excerpt are HTML document just like the content of the article, This will show all the content by default, except adding <!--more--> in the article Markdown file, You can find more info at Jekyll: Post#post-excerpts.

Installation Development Environment (not Necessary)

Find more info at Jekyll: Installation.

Development Server (not Necessary)

if you Installed Node.js, you can start a development server by running npm run dev at the root path of the repository.

if not, just run:

bundle exec jekyll serve -H 0.0.0.0

after the command finished, you can visit http://localhost:4000/ to see the page.

You can find more info at Jekyll: Usage.

Advanced

Color Theme

default dark forest
default dark forest
ocean chocolate orange
ocean chocolate orange

Icons

This theme comes with a "ginkgo leaf" icon, you can replace it with your own icon. The site's icons are located in the ./favicon.ico and ./assets/images/logo directories. You can see the logo directory has a lot of png files and a svg vector file. Those png images are actually images of different sizes generated from svg vector images that may used in some scenes, such as pinned to the screen in OS and Android and tiles in Windows 10.

This theme provides an automated script for automatically generating favicon and png files from svg vector graphics. What you have to do is:

  1. Install Node.js

  2. Run npm i command at the root directory.

  3. Replacing the logo.svg file in the ./assets/images/logo directory.

  4. Run npm run artwork command. after it finished, the favicon and png files will be replaced by the new logo.svg generated files.

Comment

Reading Quantity

Google Analytics

Front Matter Enhancement

In addition to Jekyll's front matters, the theme adds some unique front matters.

variable option values description
key
picture_frame shadow
modify_date
comment true/false
mathjax true/false
mermaid true/false
chart true/false

Other Resource

Examples

sjs2109's Projects

sjs2109 doesn’t have any public repositories yet.

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.