This is my repository: https://github.com/attilay/jeky
How my website should look like and the repository of theme: http://themes.jekyllrc.org/linear/
My website doesn't load any styling, just plain HTML. Why?
First, in _layouts/default.html, include {{ site.baseurl }} in the relative paths to assets in your head (as David Jacquel suggests):
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/skel-noscript.css" />
and
<script src="{{ site.baseurl }}/assets/js/init.js"></script>
In addition, in /assets/js/init.js change:
prefix: '/assets/css/style',
to
prefix: '{{site.baseurl}}/assets/css/style',
and, finally, in order for Jekyll to process init.js and insert the baseurl, add
---
---
at the top of the file as empty YML frontmatter.
In your _layouts/default.html, You must call your assets with :
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/skel-noscript.css" />
or
<script src="{{ site.baseurl }}/assets/js/init.js"></script>
Related
In laravel app, I have kept my css and js is asset folder inside public folder and I call these css my blade using
<link rel="stylesheet" href="{!! asset('assets/front-end/assets/css/owl.theme.default.min.css') !!}">
but when Execute page in browser , this css file is not executing so I tried to access this url directly through browser url 'http://127.0.0.1:8000/assets/front-end/assets/css/owl.theme.default.min.css'
then the result shows like 'This page is not working'.
my pblic folder css accessing tree is
public/assets/front-end/assets/css
Please advise
change it:
href="{!! asset('assets/front-end/assets/css/owl.theme.default.min.css') !!}"
to:
href="{{ asset('assets/front-end/assets/css/owl.theme.default.min.css') }}"
{!! !!} is for rendering tags in text
Firstly you check your public folder, css file location.
Change it -
<link rel="stylesheet" href="{!! asset('assets/front-end/assets/css/owl.theme.default.min.css') !!}">
Right - <link rel="stylesheet" href="{{ asset('assets/front-end/assets/css/owl.theme.default.min.css') }}">
or
<link rel="stylesheet" href="{{ asset('/') }}assets/front-end/assets/css/owl.theme.default.min.css">
I hope this is help for you!
to access a resource in Laravel you need to use the {{ }} syntax and call the URL::asset() method:
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/assets/front-end/assets/css/owl.theme.default.min.css') }}">
more details about accessing resources in laravel: how to access file in public folder
I have been trying to figure out how to get assetic working with my CSS sources but am having no luck. Two articles I've been tyring to cross-reference are combining and minimising ccs files and assetic asset management. However, the hybrid I've ended up with is the below which isn't working:
{% stylesheets filter="scssphp" output="css/my.css"
"http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
"bundles/app/css/*"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
However, when I try running (in Dev) I get an error saying:
Unexpected token "name" of value "rel" in base.html.twig at line 19
PS I have installed leafo and jsqueeze (I have javascripts to do figure out next) with:
$ composer require leafo/scssphp
$ composer require patchwork/jsqueeze:"~1.0"
You have here an error in your code:
{% stylesheets filter="scssphp" output="css/my.css"
"http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
"bundles/app/css/*"
%}
in every line you have a file that should be rendered. In the second line you have added rel and type. you have to delete that both parameters otherwise its an option for stylesheets. If you delete them it should work.
Maybe I don't understand it. My main template is: app/Resources/view... But where should be css/js/img ? In my opinion in: app/Resources/view/public/... Because it isn't files bundles and all project in production environment. In my case "frontend page".
Of course, when the files(css/js/img) belongs to bundle is in appropriate bundle.
Now I have:
{% stylesheets '../app/Resources/views/public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
Assetic Add file located in app/Resources/js
But don't see images files.
How according to the standard symony2, I should store and manage "main" template files?
I would like to safely and well. I learn the symfony2.
All "web assets resources" should be place into web folder (that is made for all files "reachable" from the www).
You only need to run php app/consolle assets:install(*) to let symfony place all of your assets in the right place
When you want to use them simply use
<link href="{{ asset('bundles/yourbundlename/css/style.css') }}" type="text/css" rel="stylesheet">
(or whatever you have called your files)
(*) you can choose even the --symlink option to avoid file copies
All the images CSS js file should be kept in /web folder and can be used
{% stylesheets '/css/*' %}
<link href="/abc.css" type="text/css" rel="stylesheet" />
{% endstylesheets %}
or should be kept in bundle and you have to assetic dump them.
{% javascripts '#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
kindly refer the below link for the same:
http://symfony.com/doc/current/cookbook/assetic/apply_to_option.html
I am working on a Symfony2 application. I am customising the layout.html.twig file from the FOSUserBundle.
Any HTML changes I make within the file are immediately obvious when I reload the page in the browser.
I am using assetic to link to my CSS and JS files. They appear to have linked successfully, the files contents load when I click on their paths from within the source of the web page.
However the CSS classes I have specified on the elements of the page don't seem to be appearing with their styles applied. I can't figure out why this is.
Here is the syntax I've used to link to the JS and CSS:
{% javascripts
'bundles/sysdevpunctuality/js/jquery-2.1.1.min.js'
'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/js/bootstrap.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<!-- Bootstrap -->
{% stylesheets 'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css' filter='cssrewrite' %}
<link rel="stylesheets" href="{{ asset_url }}" media="screen" />
{% endstylesheets %}
Appreciate any tips on how I can go about debugging this issue.
I had the same problem, try this syntax:
{% block stylesheets %}
<link href="{{ asset('bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
Of course don't forget to install assets:
php app/console assets:install web --symlink
i cant comment but my suggestion is check the page source of the generated webpage, then you can check the directory where symfony is looking for the resources.
I normally place my JS and CSS Assetic assets inside a DefaultBundle, but I suppose the best place to put them would be in the app/Resources/public/(js|css) folders.
Also, to reference assets we use:
{% javascripts filter="" output="js/core.js" debug=true
"#DefaultBundle/Resources/public/js/jquery-1.6.2.js" %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
How do I go about referencing shared assets like jQuery and my CSS reset stylesheets in app/Resources/public/...?
You could also use this:
{% stylesheets '../app/Resources/public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
Yes it's a good choice to not put libraries inside a Bundle
see here : http://symfony.com/doc/current/cookbook/bundles/best_practices.html#vendors
A bundle should not embed third-party libraries written in JavaScript, CSS, or any other language.
What i suggest you, is to put you jquery and reset files under something like: app/Resources/public/js/jquery.min.js and to change your code with something like:
{% javascripts filter="" output="js/core.js" debug=true
"../app/Resources/public/js/jquery-1.6.2.js" %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
I hope this will work for you.
EDIT: Edited answer to be like https://stackoverflow.com/a/9237004/505836, thanks David.
My solution is almost the same as David's, but using %kernel.root_dir% instead of hard-coding the app folder (although, I doubt many change this folder's name), e.g.:
{%- javascripts output='compiled/main.js'
'%kernel.root_dir%/Resources/public/js/jquery-1.10.2.min.js'
'%kernel.root_dir%/Resources/public/js/underscore-1.5.2.min.js'
'#MyOwnBundle/Resources/public/js/default.js'
-%}
<script src='{{ asset_url }}'></script>
{%- endjavascripts %}
If the third party libraries reference their own assets (e.g. typically images in a img sub-folder, referenced from .css files), it's usually sufficient to create the corresponding symlinks on the server, e.g. ln -s .../app/Resources/public/img .../web/img or something similar. Or use the cssrewrite filter, of course - but beware of its caveats.
(Also, note that I don't use the type="<mime-type>" attribute, as the files' content-type is supplied in the HTTP headers anyway.)
You can replace ../app/Resources/public/css/ by public/css/. The same for Javascript folder.
{% stylesheets filter='less' output='css/core' 'public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
{% javascripts "public/js/*" %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
Here all the files of /web/public folder are automatically loaded.