I'm new to jekyll, I read the infos from their website and did the basic stuff and all worked ok. Now, I'm trying to learn more by doing a theme to it. The idea is I got a html template and I'm trying to make it to jekyll. The repo is at prologue-like-jekyll-theme.
I have a _config.yml with some info:
# Site settings
title: Personal Jekyll theme based on Prologue by HTML5 UP.
description: "Write your site description here."
baseurl: ""
url: ""
avatar: images/avatar.png
email: your-email#yourdomain.com
copyright_name: Your/Project/Corporate Name
I did a default.html layout:
<!DOCTYPE HTML>
<html>
<head>
<title>{{ site.title }}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
</head>
<body>
<!-- Header -->
{% include header.html %}
<!-- Main -->
<div id="main">
{{ content }}
</div>
<!-- Footer -->
{% include footer.html %}
</body>
</html>
I execute jekyll server, it runs but the site.title is not loading. The funny thing is if I change to site.time it works. Don't know why this is happen, any clue?
The _config.yml file is in _layouts folder, it should be in the root folder.
Related
Dear Excellent developes.
I'm trying to duild static web site with Hugo (Netlify CMS).
I wanna build from scratch, if I can;-) ( I designed the site by myself. SO I wanna write sass from scratch).
But, sass files aren't read successflly.
Do you solve the problem?
I checked there pages to solve it , But I couldn't
https://gohugo.io/hugo-pipes/scss-sass/
https://discourse.gohugo.io/t/custom-css-throws-type-nil-not-supported-in-resource-transformations/19942
the structure of this Web site
Basically, there are not many changes from Hugo install.
layouts/index.html // I write there the following code.
resources/_gen/assets/sass/main.scss // I wrote simple css to this file → html {background: yellow;}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
{{ $sassTemplate := resources.Get "sass/main.scss" }}
{{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.relURL }}">
</head>
<body>
<h1>Nice. It's looking good already.</h1>
<ul>
{{ range (where .Pages "Section" "blog") }}
<li>
<a href="{{ .RelPermalink }}">
{{ .Title }}
</a>
</li>
{{ end }}
</ul>
</body>
</html>
Error messages
Rebuild failed:
Failed to render pages: render of "home" failed: "/Users/RPOISITORY-NAME/layouts/index.html:11:40": execute of template failed: template: index.html:11:40: executing "index.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations
↓
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
{{ $sassTemplate := resources.Get "sass/main.scss" }}
{{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS }}
<link rel="stylesheet" href="{{ $style.relURL }}">
</head>
hugo v0.81.0+extended darwin/amd64 BuildDate=unknown
Thanks in advance.
Your .scss files must be in the assets folder at the root of your project, and not in the sub-folder resources/_gen/assets.
I wrote a post in french on the topic, maybe you can grab some hints / use a translator
I have a Laravel app that uses a tiny bit of Vue code in the blade templates. There's a problem navigating from view to view, almost every time there's a brief delay before the CSS is loaded where the raw text of the page shows without any formatting. It shows for about 1/2 a second and then the CSS kicks in and it looks correct. I can't find any reason for this, I tried changing the mix('css/app.css') etc so that it's not having to reload every time, but I can't figure out how to fix it.
I'm not sure if Vue is somehow delaying the css from loading? Any ideas what it could be? I'll paste the top section of the blade template below. I just upgraded to Laravel 8 but the same was happening with Laravel 7.
Thanks for your help!
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="title" content="Pono Admin">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Admin</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link href="{{ mix('css/admin.css') }}" rel="stylesheet">
#hasSection('style')
#yield('style')
#endif
<!-- Scripts -->
#hasSection('script')
#yield('script')
#else
<script>
var vmMixinsAdmin = '';
</script>
#endif
<script src="{{ mix('/js/app.js') }}" defer></script>
<script>
var vmMixinsApp = '';
let vroundedBtn = false;
let vunreadNotificationCount = {{ auth()->user()->unreadNotifications()->count() }};
</script>
</head>
<body>
<div id="vm">
<main id="app-main" class="container-fluid px-0">
etc
Someone had something similar and decided to show an overlay on foreground and hide it after the page has loaded. I'm not sure that it's the best solution but it could help:
Force browsers to load CSS before showing the page
Here is my code for Layout Blade
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/aos.css') }}" rel="stylesheet">
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.min.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
#yield('content')
</main>
<div class="col-sm-3">
<div class="partners">
<img src="imgs/logo_footer.png" alt="" class="img-responsive">
<img src="imgs/logo_footer2.png" alt="" class="img-responsive" style="max-height:35px;">
<img src="imgs/logo_footer3.png" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
And it works fine.
With result "imgs/logo_footer.png"
But in the content, using the same way, the result is "http://127.0.0.1:8000/imgs/beatriz02062020.png"
I tryed with asset().
I think you'll need to dd(asset($pathToYourImage)); somewhere in the view to be sure of the path. Than comment below to show me the result
You can use the following line for displaying image:
<img src="{{URL::to('/').'/imgs/logo_footer.png'}}" alt="" class="img-responsive">
for regular images in public folder like public/assets/images/img.png you can try
<img src="{{url('assets/images/img.png')}}">
or
<img src="{{assets('assets/images/img.png')}}">
also if you online you should consider change APP_URL in your .env file
as url() or assets() get the APP_URL value and use it in url
do not forget to run
php artisan config:clear
after any change in online version of .env file
if your image is uploaded image form a form read the these down.
the point is that the upload path is relevant to storage folder in your laravel project. so if you do every thing by the book, you should try the following,
first thing check files in storage/app/public folder , you should found your files there
also check your settings in config/filesystem.php in your project.
if you found the files in storage/app/public/{any-folder-name}
and the project configuration in config/filesystem.php is public
do the following
run command
php artisan storage:link
this will make a symlink (a shortcut)
then use this piece of code to get your images
Storage::url($image_path)
I am probably missing something very simple but, when I link my style sheet I get:
<link media="all" type="text/css" rel="stylesheet" href="http://laravel.dev:8000/public/css/masterCss.css">
showing on the webpage rather then linking to my css file.
My Html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Nub Life</title>
{{ Html::style('/public/css/masterCss.css') }}
</head>
<body>
#yield('content')
</body>
</html>
Why is this happening and how can I fix it?
the stylesheet href url, should not contain the word public. this is how you can generate url for your css asset files
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/masterCss.css') }}">
Suppose you have a .css file in your public/your_project_name/css/style.css
Simply write
<link href="{{ URL::asset('your_project_name/css/style.css') }}" rel="stylesheet">
I have a blade template that I created and I want to add css files depending on the page that it is called to.
The file below is the main file called ._head.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="">
<title>{{ 'Login' }}</title>
<!--Core CSS -->
{{ HTML::style('asset/bs3/css/bootstrap.min.css') }}
{{ HTML::style('asset/css/bootstrap-reset.css') }}
{{ HTML::style('asset/assets/font-awesome/css/font-awesome.css') }}
{{ HTML::style('asset/bs3/css/bootstrap.min.css') }}
<!-- Custom styles for this template -->
#yield('addcss')
<!-- Ends Here -->
{{ HTML::style('asset/css/style.css') }}
{{ HTML::style( 'asset/css/style-responsive.css') }}
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]>{{ HTML::script('asset/js/ie8/ie8-responsive-file-warning.js') }}<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
I tried to add css to the above template using
#extends('layouts._head')
#section('addcss')
{{ HTML::style('asset/assets/bootstrap-datepicker/css/datepicker.css') }}
{{ HTML::style('asset/assets/bootstrap-daterangepicker/daterangepicker-bs3.css') }}
{{ HTML::style('asset/assets/bootstrap-datetimepicker/css/datetimepicker.css') }}
#stop
#include('layouts._header')
But the contents of the #section and the _head are now showing up inside the body tag after the contents of _header template are displayed. What am I doing wrong here ? Thanks in advance.
You cant "include" something on the same file you "extend" without wrapping it in a section. You should do this:
#extends('layouts._head')
#section('addcss')
{{ HTML::style('asset/assets/bootstrap-datepicker/css/datepicker.css') }}
{{ HTML::style('asset/assets/bootstrap-daterangepicker/daterangepicker-bs3.css') }}
{{ HTML::style('asset/assets/bootstrap-datetimepicker/css/datetimepicker.css') }}
#stop
#section('header')
#include('layouts._header')
#stop
then in your .heads file put the yield of 'header' at the very bottom (or wherever you want it)
....
#yield('header')
</html>
Or if the file remains the same in all views - just do this in .heads
....
#include('layouts._header')
</html>