Git Product home page Git Product logo

jekflix-template's Introduction

Jekflix Template

Jekflix Template Cover Image

See the demo here.

What is it?

A theme for Jekyll inspired by Netflix panel for who loves movies and series and would like to have a blog with this cool appearance.

Jekflix Screenshot Image

Features

SEO

  • Google Analytics
  • Meta tags
  • JSON-LD
  • Sitemap.xml
  • Social Media ready

Quick Install

In the case you're installing to existing Jekyll project, add this line to your project's Gemfile:

gem "jekflix"

Add this line to your project's _config.yml:

theme: jekflix

And then run:

$ bundle

Or install it yourself as:

$ gem install jekflix

Theme Colors

Create the file /assets/css/styles.scss and add:

---
---

$themeColor: #ff0a16;
$primaryDark: #141414;
$accentDark: #ffffff;
$lightGray: #f2f2f2;
$texts: #333333;

@import "jekflix";

Modify the variables above to change your theme colors.

Site configuration

Below are some properties you can change in your project _config.yml, check the documentation for more details.

# Site Settings
name: Jekflix
title: Jekflix | A blog theme for Jekyll
description: Jekflix is a template for Jekyll inspired by Netflix and made by Thiago Rossener.
tags:
  - blog
  - template
  - jekyll
  - theme
  - netlify
email: [email protected]
disqus_username: disqus_username
show_hero: true
menu:
  - title: Home
    url: /
  - title: About
    url: /about
  - title: Contact
    url: /contact
  - title: Feed
    url: /feed.xml

# Social Media Settings
# Remove the item if you don't need it
github_username: github_username
facebook_username: facebook_username
twitter_username: twitter_username
instagram_username: instagram_username
linkedin_username: linkedin_username
medium_username: medium_username

# Posts Settings
show_time_bar: true
show_modal_on_exit: false
show_modal_on_finish_post: true
two_columns_layout: true

# Advanced Settings
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site
google_analytics: "UA-XXXXXXXX-X"
language: "en"
categories_folder: category
sent_message_url: "/contact/message-sent/"

# Build settings
markdown: kramdown
highlighter: rouge
permalink: /:title/
collections:
  authors:
    output: true
paginate_path: "/page/:num/"
show_get_theme_btn: true
use_logo: false

# Content paginator
paginate_content:
  enabled: true
  debug: false
  collections:
    - posts
  auto: false
  separator: "--page-break--"
  permalink: "/:num/"
  seo_canonical: true
  properties:
    part:
      is_generated: true
    last:
      is_generated: true
    single:
      is_generated: true

# SASS
sass:
  style: compressed

# Plugins
plugins:
  - jekyll-paginate
  - jekyll-paginate-content

Setup

In the case you're cloning this repo, follow those instructions:

Customization

See the settings documentation to customize layout, titles, social media and more.

Theme

You can easily change the theme colors by changing the file src/yml/theme.yml, then running gulp build in your terminal.

GitHub pages

It's a known issue that you can't run Gulp when deploying the website into GitHub pages. So, you must change the theme colors and run gulp build locally, then push the changes into your repo, there is no other way.

To see how your website is going to look like when you deploy it, run bundle exec jekyll serve locally and access http://127.0.0.1:4000/.

Posts

Use the Front Matter properties to create posts.

Note: In the case you're cloning this repo, you can use the available script to generate posts automatically.

Questions?

File a GitHub issue please.

Author

Thiago Rossener

Do you like my work? Buy me a coffee!

Buy Me A Coffee

License

Jekflix Template is available under the MIT license. See the LICENSE file for more info.

jekflix-template's People

Contributors

ajpalok avatar chashm-e-afreen avatar chkir avatar cwksc avatar dependabot[bot] avatar diegofornalha avatar fasih avatar jb7959 avatar mastercoks avatar siclemx avatar strongsoda avatar thiagorossener avatar vimal-krishna avatar worming004 avatar xieguochao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jekflix-template's Issues

Can't start with gulp

Application can't load assets with 'sudo gulp' command.
screenshot

Works fine with 'bundle exec jekyll serve' but to refresh assets you need to run 'sudo gulp'

code syntax highlighting problem

Hi.

I have a problem when code syntax highlighting

source code - 1

```js
// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// > 8
```

result - 1

Screenshot 2019-09-22 15 36 04

source code - 2

``` js
const errorMsg = 'the # is not even';
for (let number = 2; number <= 5; number += 1) {
    console.log('the # is ' + number);
    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
    // or, using ES2015 object property shorthand:
    // console.assert(number % 2 === 0, {number, errorMsg});
}
```

result - 2

Screenshot 2019-09-22 15 41 30

Maybe the fenced code block is the problem.

If you do the liquid tag, it works fine.

Is there a solution?

Error about setting GitHub Pages

I see this error message on the repository's Settings page.
I wonder what's the problem.

Your site is having problems building: The tag toc on line 30 in /_layouts/post.html is not a recognized Liquid tag. For more information, see https://help.github.com/en/articles/troubleshooting-jekyll-build-errors-for-github-pages-sites#unknown-tag-error.

Posts made with Netlify not showing up

Trying out Netlify and have made some test posts with their CMS, but they don't show up most of the time.

I've tried entering data in all data fields, subtitle, description, etc.

Just now I did a test when only two of four posts were being displayed, and I removed the subtitle for one of the posts that was being displayed, and suddenly the two remaining ones showed up too.

All posts are in the _/posts folder in my repo.

The posts are published, and the latest update is published in Netlify.

I'm not seeing any obvious differences between what's in my repo now, and what I've seen when running Jekyll on my own server.

NOVO ARTIGO

Olá ótimo tópico, eu tenho uma pergunta. Como alterar o texto de "novo ARTIGO"?
Eu pesquisei e não consigo encontrar onde. Eu vejo em _include a seção "new-post-tag", mas só vemos que diz "{% assign isnewpost = true%}.

Hola gran tema, tengo una pregunta. ¿Cómo cambiar el texto de "nuevo post" ?
He buscado y no encuentro donde. Veo en _include la seccion "new-post-tag" pero ahi solo se veo que dice "{% assign isnewpost = true %}.

Hello great topic, I have a question. How to change the text of "new post"?
I have searched and can not find where. I see in _include the section "new-post-tag" but there we only see that it says "{% assign isnewpost = true%}.

Support Latex rendering?

I wonder if it is possible to support Latex rendering with the syntax $something formular$, which would be very beneficial!

New Post tag in Firefox appears in wrong place

When viewed in Firefox, the new post icon appears to stick out behind the top-left corner of the image, not overlaid on the image near the bottom-left. I'm not sufficiently clued-up on CSS to know why this is. Thanks.

Code Highlighter Failure?

Hi.
Thank you for make awesome templete.

Code Highlighter doesn't seems work well on C#.

(triple backtick)C#
string tt="ùşŊŖĻŊűüĸ\u0099ĝ\u0090Ŋńūĝ¥Ŗş\u0099ĝť\u0093\u009FĬ\u0090Ňĝ\u0093\u009FĝఏŊĝŁŊ\u0090ť\u0093Ŋĵĝū\u0090şĝŁŊ\u0090ťĝŊ\u0090Ŝĸ\u0093Ŋĵŷ````";
(triple backtick)

produce this

<code class="language-C#">
string tt="ùşŊŖĻŊűüĸ\u0099ĝ\u0090Ŋńūĝ¥Ŗş\u0099ĝť\u0093\u009FĬ\u0090Ňĝ\u0093\u009FĝఏŊĝŁŊ\u0090ť\u0093Ŋĵĝū\u0090şĝŁŊ\u0090ťĝŊ\u0090Ŝĸ\u0093Ŋĵŷ````";
</code>

but i think this should be one which is converted

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="language-C#">
string tt="ùşŊŖĻŊűüĸ\u0099ĝ\u0090Ŋńūĝ¥Ŗş\u0099ĝť\u0093\u009FĬ\u0090Ňĝ\u0093\u009FĝఏŊĝŁŊ\u0090ť\u0093Ŋĵĝū\u0090şĝŁŊ\u0090ťĝŊ\u0090Ŝĸ\u0093Ŋĵŷ````";
</code></pre></div></div>

sorry for my bad english

Link para a imagem off.jpg incorreto

Nos arquivos abaixo a imagem off.jpg está sendo linkada para off.png. Tentei abrir um PR mas acho que não tenho permissão.

_includes/modal.html
_includes/recommendation.html
_layouts/post.html

assets/img/off.jpg

Articles not displayed in category pages after building

Website link: https://en.hackdown.tech/
Category page link: https://en.hackdown.tech/category/web/
Category page screenshot: ![image](https://user-images.githubusercontent.com/31606786/75604649-c3cb8000-5b26-11ea-9bfa-c63685d92a82.png
Website source code: https://github.com/hackdown-org/en.hackdown.tech

I recently forked your theme and added some new category configs. The articles are not displayed on the category pages after building.

It works fine on your website, but not on mine? Any ideas why?

Any help would be appreciated!

Question about post creation

Hi,

I have a simple question about creating a new post. I changed the blog url in the initpost script with mine but I did not succeed to add a new post when I run:

sh initpost.sh -c Introduction to multi agent systems

The error is about a bad substitution. Do you have any idea from where this issue might come from ?

Thank you!

Disqus not loading comments section

I created a disqus account and changed my username as instructed but I am getting this error
"We were unable to load Disqus. If you are a moderator please see our troubleshooting guide."

Anyone knows how to fix this issue?

3 min reading for all posts

Could you make a js script that gives different reading time lengths for all articles instead of having 3 min for each?

No render over gitlab pages

what did I do

  1. select you theme from the web
  2. clone the same and push in my gitlab HERE
  3. test the theme over jekyll y local machine and all OK and render nice over localhost:4000
  4. rename remote origin by old-origin and add my new origin remote
  5. add .gitlab-ci.yml see the same HERE (generate continous deploy over gitlab pages), the same task executed success see HERE

image

  1. gitlab pages generate url of blog: https://jekyll-bim.gitlab.io/jekyll_test_00

what happened

  • i go to url and the site not render correctely

what did i expect

if run correctaly in local the same behaivor over gitlab-page

Feed XML file does not have style info

When you go into Feed section in website, it gives this error:

This XML file does not appear to have any style information associated with it. The document tree is shown below.

And it just shows the website code instead of an actual page.

This is also the case in my own site I created using your template.

Error about time zone

Hi thiagorossener, thanks for your nice work.

I found a small bug about time zone, maybe you could fix it:
Any post whose date time is earlier than central time zone will not be shown on the website.

The month name "Mark"?

Hi! Thanks for the template, it is super cool. Can you give advice on how do I change the month name Mark to March for the post?

Cheers,

Mario

Bug with the top Navbar

When you close up the sidebar by clicking outside of it, it reduces the original size of the top navbar.

After sending contact message it brings up 404 page.

Hello, everything is working fine with your template and it's probably the most well made blog template I've seen, but an issue comes up when somebody tries to contact me. When they click on the "Send" button, my 404 page comes up. The contact works and I get the email, but there is no content, just my 404 page. It seems it is trying to reach /contact/message-sent on my main site, not the blogs.

When you click send it goes to which results in a 404, because nothing is there.

Also I have a question. Is there a way to change what appears in the site preview? When I link the site, it pulls up
Is there a way to change it to a photo of my choosing?

Thanks

help needed

hello,
i want to thank you for the great fast beautiful jekyll template you created, it's marvelous. i've looked everywhere in the web but found nothing like what you have made .. not for jekyll, thank you again. i would love to buy you a beer (the link on the readme doesn't work) but i want to ask you something if it's possible.. i want to have a sidebar on the post page it would be fantastic that way how can customize it to have a side bar ??

thank you .. about the beer ... i'm serious i really wanna buy u a beer 😄

can't build with gulp

events.js:174
throw er; // Unhandled 'error' event
^

Error: spawn bundle ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
at onErrorNT (internal/child_process.js:415:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)
at onErrorNT (internal/child_process.js:415:16)
at process._tickCallback (internal/process/next_tick.js:63:19)

  • npm install
  • npm install -g gulp gulp-cli
  • gulp

step by step but that error message show
os: mac os mojave
node: v10.15.3

i search google long time but cant solve this problem
i try to killall -9 node and node version change lot things..

Como alterar o texto de "novo ARTIGO"?

Olá ótimo tópico, eu tenho uma pergunta. Como alterar o texto de "novo ARTIGO"?
Eu pesquisei e não consigo encontrar onde. Eu vejo em _include a seção "new-post-tag", mas só vemos que diz "{% assign isnewpost = true%}.

Hola gran tema, tengo una pregunta. ¿Cómo cambiar el texto de "nuevo post" ?
He buscado y no encuentro donde. Veo en _include la seccion "new-post-tag" pero ahi solo se veo que dice "{% assign isnewpost = true %}.

Hello great topic, I have a question. How to change the text of "new post"?
I have searched and can not find where. I see in _include the section "new-post-tag" but there we only see that it says "{% assign isnewpost = true%}.

gulp step 'bundle exec jekyll serve' is failling

Hello,

I am trying to build the application using the gulp file.
But by running gulp command, I got an error for jekyll step.
image

By doing directly bundle exec jekyll build, I have no issues

versions:
node v10.16.3
gulp Local version 4.0.2 (as package-json)
gulp CLI version 2.2.0
gem v2.7.6.2
windows 10 pro version 1903

sass gem deprecation

Post-install message from sass:

Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
  http://sass.logdown.com/posts/7081811

Also see https://sass-lang.com/ruby-sass

Category page says 404

Hi,

I observed this issue where clicking on a post category on homepage redirects to the 404 page. Is this a known issue?

Thanks,
Venil

Disqus doesn't work

I set up a Disqus account & enter the username but it doesn't work on the template.

This same error is displayed in all of the Posts in your template website.

ThemeColor not reflected

I changed themeColor to some orange. Ok some buttons were changed but this page breaker thing have the red color hardcoded:

image

image

it seems the tag page also keep the red:

image

I removed _site, re bundle build and then gulp but the red stays.

Its is also hardcoded in SVG:

./src/img/star.svg:<path style="fill:#ff0a16;" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/>                                                               

I also changed it in ./admin/config.yml but all keeps red in admin panel.

Usability without Javascript?

Hi,

And thank you for making jekflix. I was trying to browse a website that uses your theme when i realized list templates don't display any article when Javascript is disabled.

There's many good reasons both for the client to disable Javascript (slow connection, security concerns) and for the webmaster to provide nice and accessible HTML/CSS. Here's a nice presentation about such issues :)

In my personal opinion, Javascript should never be involved in presenting static content. Anyway, simply removing the opacity property from .flex-grid article in the CSS makes everything readable although it's probably not displayed right as it's supposed to.

I hope you find time and energy to make your theme more accessible and more lightweight with less client-side scripting. Have a great day!

Q: Scaling of blog post

Hi @thiagorossener,

I love the template, and was wondering if you could help me out. I'm only starting to learn Markdown and Jekyll so I don't know where to look.

Currently if you only have one blog post published it scales to the full width of the page in the browser, is it possible to remove this functionality so that it leaves the post at a size similar to if you have 4 or 8 blog posts like https://lambda.sx/Yuy.png ?

Thanks for your time.

Gulp 4

Hi!

Since gulp 4 has major changes you have to update gulpfile.js in order to build jekflix correctly.

Could you update that file please?

I've made those changes if you don't mind a PR.

Regards!

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.