2014-12-17 5 views
0

Я создал шаблон сайта для сайта Typo3 Neos. Однако в шаблоне мне нужно определить порядок javascript, потому что файлы CSS должны быть включены перед файлами javascript. Теперь у меня есть эти файлы:Заказ в Typo3 Neos template

default.html:

{namespace neos=TYPO3\Neos\ViewHelpers} 
 
{namespace ts=TYPO3\TypoScript\ViewHelpers} 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <f:section name="meta"> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
     <meta name="description" content=""> 
 
     <meta name="author" content=""> 
 
    </f:section> 
 

 
    <f:section name="stylesheets"> 
 
     <!-- Bootstrap CSS --> 
 
     <link href="{f:uri.resource(path: 'css/bootstrap.css', package: 'MyApp')}" rel="stylesheet"> 
 
     <link href="{f:uri.resource(path: 'css/responsive.css', package: 'MyApp')}" rel="stylesheet"> 
 

 
     <!-- Plugins --> 
 
     <link href="{f:uri.resource(path: 'plugins/flexslider/flexslider.css', package: 'MyApp')}" rel="stylesheet"> 
 

 
     <!-- Theme style --> 
 
     <link href="{f:uri.resource(path: 'css/theme-style.css', package: 'MyApp')}" rel="stylesheet"> 
 
    </f:section> 
 

 
    <f:section name="headScripts"> 
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
 
     <!--[if lt IE 9]> 
 
     <script src="{f:uri.resource(path: 'js/html5.js', package: 'MyApp')}"></script> 
 
     <![endif]--> 
 

 
     <!--Retina.js plugin - @see: http://retinajs.com/--> 
 
     <script src="{f:uri.resource(path: 'plugins/retina/retina.js', package: 'MyApp')}"></script> 
 
    </f:section> 
 
</head>

И Root.ts2:

page = Page { 
head { 

    meta = TYPO3.TypoScript:Template { 
     templatePath = 'resource://MyApp/Private/Templates/Page/Default.html' 
     sectionName = 'meta' 
     title = ${q(node).property('title')} 
    } 

    stylesheets.site = TYPO3.TypoScript:Template { 
     templatePath = 'resource://MyApp/Private/Templates/Page/Default.html' 
     sectionName = 'stylesheets' 
    } 

    javascripts.site = TYPO3.TypoScript:Template { 
     templatePath = 'resource://MyApp/Private/Templates/Page/Default.html' 
     sectionName = 'headScripts' 
    } 
} 

body { 
    templatePath = 'resource://MyApp/Private/Templates/Page/Default.html' 
    sectionName = 'body' 
    parts { 
     menu = Menu 
     breadcrumb = Breadcrumb 
    } 
    // These are your content areas, you can define as many as you want, just name them and the nodePath. 
    content { 
     // The default content section 
     main = PrimaryContent { 
      nodePath = 'main' 
     } 
    } 

    javascripts.site = TYPO3.TypoScript:Template { 
     templatePath = 'resource://MyApp/Private/Templates/Page/Default.html' 
     sectionName = 'bodyScripts' 
    } 
} 
} 

Результат в HTML является:

<!DOCTYPE html><html><!-- 
 
\t This website is powered by TYPO3 Neos, the next generation CMS, a free Open 
 
\t Source Enterprise Content Management System licensed under the GNU/GPL. 
 

 
\t TYPO3 Neos is based on Flow, a powerful PHP application framework licensed under the GNU/LGPL. 
 

 
\t More information and contribution opportunities at http://neos.typo3.org and http://flow.typo3.org 
 
--><head> 
 
     <meta charset="UTF-8" /> 
 
     <title>Home</title> 
 
    
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
 
     <!--[if lt IE 9]> 
 
     <script src="http://app.local/_Resources/Static/Packages/MyApp/js/html5.js"></script> 
 
     <![endif]--> 
 

 
     <!--Retina.js plugin - @see: http://retinajs.com/--> 
 
     <script src="http://app.local/_Resources/Static/Packages/MyApp/plugins/retina/retina.js"></script> 
 

 
     <!-- Bootstrap CSS --> 
 
     <link href="http://app.local/_Resources/Static/Packages/MyApp/css/bootstrap.css" rel="stylesheet"> 
 
     <link href="http://app.local/_Resources/Static/Packages/MyApp/css/responsive.css" rel="stylesheet"> 
 

 
     <!-- Plugins --> 
 
     <link href="http://app.local/_Resources/Static/Packages/MyApp/plugins/flexslider/flexslider.css" rel="stylesheet"> 
 

 
     <!-- Theme style --> 
 
     <link href="http://app.local/_Resources/Static/Packages/MyApp/css/theme-style.css" rel="stylesheet"> 
 

 
    
 

 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
     <meta name="description" content=""> 
 
     <meta name="author" content=""> 
 
    
 

 
    </head><body>

Однако я хочу метаинформацию в верхней части, то таблицы стилей и, наконец, JavaScript-файлы, которые будут включены. Можно ли определить упорядочение отображаемых элементов? Я ожидаю, что будет использоваться порядок Default.html, но, похоже, это не так.

ответ

1

В описании шрифта есть @position, который вы можете использовать для изменения порядка. Чтобы увидеть в действии, отметьте TYPO3.Neos/Resources/Private/TypoScript/Prototypes/Page.ts2. В вашем случае это должно работать:

[email protected] = 'start 5' 
[email protected] = 'start 10' 
[email protected] = 'start 15' 

или вы можете поместить его непосредственно в определение:

meta = TYPO3.TypoScript:Template { 
    @position = 'start 5' 

Вы можете также использовать как 'after headTag' н или 'before stylesheets'.

Относительно TypoScript - TypoScript 2 Pocket Reference стоит проверить :)

Смежные вопросы