devlopn

Adding Multiple Categories in Posts

Sat, 27 Feb 2021 12:05:23 -0800

Adding Multiple Categories in Posts

To add categories in blog posts all you have to do is add a category key with category values in frontmatter of the post :

---
category: ['jekyll', 'guides', 'sample_category']
---

Then to render this category using link and pages. All we need to do is,

Create a new file with [your_category_name].md inside categories folder.
Copy categories/sample_category.md file and replace the content in [your_category_name].md in that. (Please don’t copy the code below its just sample, since it renders the jekyll syntax dynamically)

---
layout: page
title: Guides
permalink: /blog/categories/your_category_name/
---

<h5> Posts by Category : Adding Multiple Categories in Posts </h5>

<div class="card">

</div>

Using the category, all the posts associated with the category will be listed on http://localhost:4000/blog/categories/your_category_name

Added Multi Author Support

Sat, 24 Oct 2020 13:05:23 -0700

Now Multiple Authors Can Create Articles:

You can now create or collaborate with multiple authors,Especially when you are working with teams. Each author will have a unique page of her written articles also her profile widget in Articles written by his/her.

For this every Author needs to have a unique username (without space) For eg. If Author is John Doe - the username should be johndoe or john-doe (without space).This key will be used by devlopr, to fetch individual author’s profile pages internally.

Configuring Authors :

Under _authors folder create a author details file (username.md) with his/her username (as described above). For eg. johndoe.md.

Then add this frontmatter to describe the author in johndoe.md.

---
name: John Doe # Name of the Author
username: johndoe # Username of the Author
bio: "Hi I a John, a Web Developer and Designer." # Author Bio
site: http://johndoe.com  # Author Website URL
avatar: johndoe.png  # Profile Image (img path will be /assets/img/authors/johndoe.png)
email: mail@johndoe.com  # Author Email address
social:  # Author Social profile links
    - title: "github"
      url: "https://github.com/johndoe"
    - title: "linkedin"
      url: "https://www.linkedin.com/in/johndoe"
    - title: "youtube"
      url: "https://www.youtube.com/channel/UCSfLBFFfNU9r6ihfei6VeJw"
    - title: "facebook"
      url: "https://www.facebook.com/johndoe"
    - title: "twitter"
      url: "https://www.twitter.com/johndoe"
    - title: "behance"
      url: "https://behance.com/johndoe"
    - title: "instagram"
      url: "https://instagram.com/johndoe"
    - title: "medium"
      url: "https://medium.com/johndoe"
    - title: "telegram"
      url: "https://telegram.com/johndoe"
    - title: "dribbble"
      url: "https://dribbble.com/johndoe"
    - title: "flickr"
      url: "https://flickr.com/johndoe"
---

You can create multiple authors similarly under _authors

Next, copy the same frontmatter in _data/authors.yml (under individual author usernames) like this :

# Author 1
johndoe:
   name: John Doe
   username: johndoe
   site: http://johndoe.com
   avatar: johndoe.png
   bio: "Hi I a John, a Web Developer and Designer."
   email: mail@johndoe.com
   social:
      - title: "github"
        url: "https://github.com/johndoe"
      - title: "linkedin"
        url: "https://www.linkedin.com/in/johndoe"
      - title: "youtube"
        url: "https://www.youtube.com/channel/UCSfLBFFfNU9r6ihfei6VeJw"
      - title: "facebook"
        url: "https://www.facebook.com/johndoe"
      - title: "twitter"
        url: "https://www.twitter.com/johndoe"
      - title: "behance"
        url: "https://behance.com/johndoe"
      - title: "instagram"
        url: "https://instagram.com/johndoe"
      - title: "medium"
        url: "https://medium.com/johndoe"
      - title: "telegram"
        url: "https://telegram.com/johndoe"
      - title: "dribbble"
        url: "https://dribbble.com/johndoe"
      - title: "flickr"
        url: "https://flickr.com/johndoe"

# Author 2
janedoe:
   name: Jane Doe
   username: janedoe
   site: https://janedoe.com
   avatar: jane.png
   bio: "Designer"
   email: mail@janedoe.com
   social:
      - title: "github"
        url: "https://github.com/janedoe"
      - title: "linkedin"
        url: "https://www.linkedin.com/janedoe"
      - title: "youtube"
        url: "https://www.youtube.com/channel/UCSfLBFFfNU9r6ihfei6VeJw"
      - title: "facebook"
        url: "https://www.facebook.com/janedoe"

Likewise ! This will be helpful for the widgets. (About Author, Recent Articles).

Adding Author to Post

When creating a new post, just add the author in frontmatter using the username of the author

For eg, In 2020-10-24-demo-article.md

---
layout: post
title: "Demo Article"
author: janedoe
---
This is Jane Doe's Article

Now there will be Authors widget in Blog Sidebar, showing all authors like this :

Also a Author Profile Page will be created for Jane Doe to showcase her written articles.

Also, below this article you can see the Author Profile Card , who has written the article too ! ;)

Cheers ! Hope You enjoy this new feature. :D

Added Latex Support

Fri, 23 Oct 2020 22:05:23 -0700

You can now use LaTex to write equations :

In the frontmatter of the article add this :

usemathjax: true

After that, simply wrap the math symbols of your article with two double-dollar sign $$:

For Example :

use this $$E=mc^2$$

You should be able to see it in your post as: $E=mc^2$

use $$mean = \frac{\displaystyle\sum_{i=1}^{n} x_{i}}{n}$$ to write :

\[mean = \frac{\displaystyle\sum_{i=1}^{n} x_{i}}{n}\]

Use k_{n+1} = n^2 + k_n^2 - k_{n-1} to write

\[k_{n+1} = n^2 + k_n^2 - k_{n-1}\]

Netlify CMS created this Article

Sat, 23 May 2020 02:52:20 -0700

Hello World

This page is a demo that shows everything you can do inside blog posts. Hi !

We’ve included everything you need to create engaging posts about your work, and show off your case studies in a beautiful way.

Obviously,we’ve styled up all the basic text formatting options available in markdown.

You can create lists:

Simple bulleted lists
Like this one
Are cool

And:

Numbered lists
Like this other one
Are great too

You can also add blockquotes, which are shown at a larger width to help break up the layout and draw attention to key parts of your content:

“Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.”

Welcome to devlopr-jekyll !

Wed, 22 May 2019 02:05:23 -0700

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')

var a = 1;
var b = 2;
function sum (num1,num2){
  return num1+num2;
}
var result = sum(a,b);

jekyll

Adding Multiple Categories in Posts

Added Multi Author Support

Added Latex Support

Netlify CMS created this Article

Welcome to devlopr-jekyll !

guides

Adding Multiple Categories in Posts

sample_category

Adding Multiple Categories in Posts

Guides

Posts by Category : {{ page.title }}

{% for post in site.categories.guides %}

{% endfor %}

Get Started

## Getting Started - How to use “devlopr-jekyll” theme ## What's Jekyll ? If you aren’t familiar with Jekyll yet, you should know that it is a static site generator. It will transform your plain text into static websites and blogs. No more databases, slow loading websites, risk of being hacked…just your content. And not only that, with Jekyll you get free hosting with GitHub Pages! If you are a beginner we recommend you start with [Jekyll’s Docs](https://jekyllrb.com/docs/installation/). Now, if you know how to use Jekyll, let’s move on to using this theme in Jekyll: ## Watch Tutorial ### Steps to create your blog using devlopr-jekyll and Host using Github Pages : > **Step 1.** Fork the repo - [click here](https://github.com/sujaykundu777/devlopr-jekyll/fork) ![Devlopr Jekyll Repo](/assets/img/posts/fork1.PNG){:class="img-fluid"} > **Step 2.** Use **your-github-username.github.io** as the new repo ( Replace your-github-username with yours). Remember if you use the name other than your-github-username.github.io , your blog will be built using gh-pages branch. ![Devlopr Jekyll Repo](/assets/img/posts/fork2.PNG){:class="img-fluid"} ![Devlopr Jekyll Repo](/assets/img/posts/fork3.PNG){:class="img-fluid"} > **Step 3.** Clone the new repo locally to make changes : ![Devlopr Jekyll Repo](/assets/img/posts/fork31.PNG){:class="img-fluid"} ![Devlopr Jekyll Repo](/assets/img/posts/fork32.PNG){:class="img-fluid"} ![Devlopr Jekyll Repo](/assets/img/posts/fork33.PNG){:class="img-fluid"} ```bash $ git clone https://github.com/yourusername/yourusername.github.io $ cd yourusername.github.io $ code . ``` > **Step 4.** Open the files using VSCode and edit _config.yml and edit with your details: - _config.yml file - replace with your own details - _posts - Add your blog posts here - _includes - You can replace the contents of the files with your data. (contains widgets) - _assets/img - Add all your images here ![Devlopr Jekyll Repo](/assets/img/posts/fork34.PNG){:class="img-fluid"} > **Step 5** - Install the development requirements: ### Set up local development environment 1. [Git](https://git-scm.com/) 2. [Ruby](https://www.ruby-lang.org/) and [Bundler](https://bundler.io/) 3. [VSCode](https://code.visualstudio.com/download) We need ruby and bundler to build our site locally. After installation check if its working: For ruby : ```bash $ ruby -v ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu] ``` For bundler : ```bash $ gem install bundler $ bundler -v Bundler version 2.2.29 ``` Add jekyll : ```bash $ bundle update $ bundle add jekyll ``` This command will add the Jekyll gem to our Gemfile and install it to the ./vendor/bundle/ folder. You can check the jekyll version ``` $ bundle exec jekyll -v jekyll 4.2.0 ``` > **Step 6.** Install the gem dependencies by running the following command ```bash $ bundle update $ bundle install ``` > **Step 7.** Serve the site locally by running the following command below: ```bash $ bundle exec jekyll serve --watch ``` or you can also serve using : ```bash $ jekyll serve ``` Visit [http://localhost:4000](http://localhost:4000) for development server ![Devlopr Jekyll Repo](/assets/img/posts/fork41.PNG){:class="img-fluid"} ### Adding Content Start populating your blog by adding your .md files in _posts. devlopr-jekyll already has a few examples. #### YAML Post Example: ```yml --- layout: post title: Sample Post author: Sujay Kundu date: '2019-05-21 14:35:23 +0530' category: - jekyll summary: This is the summary for the sample post thumbnail: sample.png --- Hi ! This is sample post. ``` #### YAML Page Example: ```yml --- layout: page title: Sample Page permalink: /sample-page/ --- Hi ! This is sample page. ``` #### Editing stylesheet You’ll only work with a single file to edit/add theme style: assets/css/main.scss. ### Deploy your Changes Once happy with your blog changes. Push your changes to master branch. > **Step 8.** Push Your Local Changes ```bash $ git add . $ git commit -m "my new blog using devlopr-jekyll" $ git push origin master ``` Visit your Github Repo settings ! Enable master branch as Github Pages Branch : ![Devlopr Jekyll Repo](/assets/img/posts/fork6.PNG){:class="img-fluid"} > **Step 9.** Deploy your Blog : ![Devlopr Jekyll Repo](/assets/img/posts/fork7.PNG){:class="img-fluid"} > Congrats ! On your new shining Blog ! You can visit the blog using [http://your-github-username.github.io](http://your-github-username.github.io).

Jekyll

Posts by Category : {{ page.title }}

{% for post in site.categories.jekyll %}

{% endfor %}

Guides

Posts by Category : {{ page.title }}

{% for post in site.categories.sample_category %}

{% endfor %}

Our Sponsors

Thanks to all the amazing contributors and our Backers for the support. - [Dirish Mohan](https://dirishmohan.com)

Styleguide

### devlopr - Styleguide

Lets try the different text styles Bold , Strong , Emphasis , Italic

Now, lets try different heading styles :

Hello in h1 !

Hello in h2 !

Hello in h3 !

Hello in h4 !

Hello in h5 !

Hello in h6 !

Unordered List

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

Ordered List

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

This is a Block Quote, It can Expand Multiple Lines

You can use the mark tag to highlight text.

~~This line of text is meant to be deleted text~~

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

attr

HTML

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Instagram Embed

View this post on Instagram

A post shared by Sujay (@sujaykundu777)

Twitter Embed

I just published “Deploying a blog using Jekyll and Github Pages with SSL certificate for Free” https://t.co/B3T3IQVU93
— Sujay Kundu (@SujayKundu777) June 29, 2018

YouTube Responsive Embed

Vimeo Responsive Embed

TED Responsive Embed

Twitch Responsive Embed

SoundCloud Embed

CodePen Embed

Syntax Highlighting

'use strict';
var markdown = require('markdown').markdown;
function Editor(input, preview) {
  this.update = function() {
    preview.innerHTML = markdown.toHTML(input.value);
  };
  input.editor = this;
  this.update();
}

You can add inline code just like this, E.g. .code { color: #fff; }

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

devlopn

Adding Multiple Categories in Posts

Adding Multiple Categories in Posts

Added Multi Author Support

Now Multiple Authors Can Create Articles:

Configuring Authors :

Adding Author to Post

Added Latex Support

You can now use LaTex to write equations :

Netlify CMS created this Article

Hello World

Welcome to devlopr-jekyll !

Guides

Posts by Category : {{ page.title }}

Get Started

Jekyll

Posts by Category : {{ page.title }}

Guides

Posts by Category : {{ page.title }}

Our Sponsors

Styleguide

Hello in h1 !

Hello in h2 !

Hello in h3 !

Hello in h4 !

Hello in h5 !

Hello in h6 !

Instagram Embed

Twitter Embed

YouTube Responsive Embed

Vimeo Responsive Embed

TED Responsive Embed

Twitch Responsive Embed

SoundCloud Embed

CodePen Embed

Syntax Highlighting

GitHub gist Embed

Input Style