With Symfony 3, I'm using Assetic filters to process my .less files, and I simply want to know how to move them outside the /web directory, for example from /web/css to /app/Resources/less.
Indeed, in twig templates I don't know how to give the right location.
I'm using a basic Assetic config:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
less:
node: /usr/bin/node
node_paths: ['/usr/local/bin/node_modules']
Let's say I have this simple Less file, currently located at /web/css/test.less:
#color : orange;
body {
background-color : #color;
}
Then, if I want to generate the link to the processed stylesheet, I'm doing like this in an HTML template:
<!doctype html>
<html>
<head>
[ ... ]
{% stylesheets 'css/test.less' filter="less" output='css/test.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
</head>
<body> </body>
</html>
So, if I move /web/css/test.less to /app/Resources/less/test.less, what should I give instead the ##### below ?
{% stylesheets '#####' filter="less" output='css/test.css' %}
Have you tried this (2nd edit):
{% stylesheets '#Resources/*' filter="less" output='less/test.less' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Then place your files under Resources like this:
Resources/less/test.less
Where Resources is the path 'src/AppBundle/Resources'.
Related
<!DOCTYPE html>
<html lang="en">
{{ partial:head }}
<body class="font-sans antialiased">
{{ yield:after_body }}
<div id="main" #dragover.prevent #drop.prevent>
<the-header
:transparent="Boolean({{ alternate_header }})"
{{ if show_notice }}
:notice="{text: '{{ notice | smartypants }}', target: '{{ notice_target }}', color: '{{ notice_color }}'}"
{{ /if }}
>
It is in a VUE project, that got compiled with laravel-mix and webpack.
I have /templates /layout /partials folders containing HTML like this.
I would like to add <body><noscript><h1>Please enable your javascript<h1></noscript></body> in the developer mode.
I tried to configure it in the nuxt.config.js file but it didn't worked.
If you want to setup a noscript tag, you need to create an app.html in the root directory of your project as explained in the documentation.
Like this
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
<noscript>Your browser does not support JavaScript!</noscript>
{{ APP }}
</body>
</html>
Keep in mind that if you're using ssr: true, you will still get some content even if the JS is disabled because the content will be generated on the server for some parts.
I'm generating static page templates using Vue/Nuxt and I can't figure out if there's any way to add a really specific tag into the of each page that is generated. It isn't a meta, script, style or link - and it seems the only default ways in nuxt.config.js are for scripts, links or meta tags. These are the tags that need to be injected in:
<v65:metaTags></v65:metaTags>
<v65:customFile file="/v65html/_headassets.htm"></v65:customFile>
Those tags are generated from the CMS system and unfortunately need to be on every page. Thanks.
In nuxt you can overwrite the default .nuxt/views/app.template.html.
You need to create app.html file in the root of the project. Then put the below code inside this file:
app.html
<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Then you can put any tag you want in head tag.
<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
<v65:metaTags></v65:metaTags>
<v65:customFile file="/v65html/_headassets.htm"></v65:customFile>
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Sorry if this is asked, just not sure what to search for. Is there a way to change the template that's used to generate the index.html file when building a Nuxt app in spa mode?
For overwriting the .nuxt/views/app.template.html, you need to create app.html file at the root of the project. You can then, copy-paste the general content from app.template.html and start modifying things.
For eg - I have to add the lang attribute to the html tag, so I have updated the code a bit in my app.html
app.html
<!DOCTYPE html>
<html lang="en" {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Like #Ohgodwhy said There is no index.html with nuxt.
Nuxt 3 :
You can use defineNuxtConfig to fill the head for your whole application
Or you can use useHead in your pages to define programmatically the head of you page and those values can also be reactive.
Nuxt 2 :
You can change everything that you want with vue-meta that is used by default in nuxt see more : https://nuxtjs.org/api/pages-head/
I'm developing an application using the PhalconPHP framework, as my application grows larger and larger my views folder is becoming rather messy.
Currently my views folder looks like this:
views_layouts
|_index_..
|_blog_..
|_news_..
|_etc_..
Is there any way to move my controller related folder to a seperate folder named pages so my directory structure looks like this?
views_layouts_index.volt
| |_blog.volt
| |_news.volt
| |_etc.volt
|
|_pages_index_..
|_blog_..
|_news_..
|_etc_..
I think you can just change your folder structure into something like this.
layouts
| controller_name.volt
| other_controller.volt
controller_name
| action_name.volt
| other_action.volt
other_controller
| action_name.volt
| other_action.volt
In the files in the layout folder you can put something like this
{% extends "templates/base.volt" %}
{% block title %}Title{% endblock %}{% block content %}
{{ content () }}{% endblock %}
And in the templates/base.volt file you can put something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>{% block title %}{% endblock %}</title>
</head>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
All this should be in the views folder
I was able to fix this myself by editing the ControllerBase class.
// Change the default views directory to /app/views/pages/
$moduleName = $this->dispatcher->getControllerName(); // Eg: blog
$actionName = $this->dispatcher->getActionName(); // Eg: index
$this->view->pick("pages/$moduleName/$actionName"); // Result: "pages/blog/index"
You can even call pick() multiple times to override any view in your controllers.