Orchard에서 모듈을 개발할 때, 해당 모듈에 특화된 스타일이나 스크립트를 추가할 수 있습니다. 웹 페이지 최적화 관점에서 보면, 우리는 종종 페이지 상단(<head>라벨 부분)에 스타일을 추가해야 하는 반면, 스크립트는 페이지 하단(라벨 근처)에 추가해야</body> 합니다. 하지만 우리가 개발한 모듈에 해당하는 뷰 파일은 사실 PartialView이며, 뷰에 스타일이나 스크립트 참조 태그를 직접 추가하면 원하는 효과를 얻지 못할 것입니다. 그렇다면 오차드에서는 이 기능이 어떻게 처리되나요?
MVC 뷰 엔진의 WebViewPage 클래스는 Orchard 프레임워크로 재작성되었으며, scrip{filter}t와 Style 속성이 추가되어 스타일과 스크립트를 도입했습니다. 이 덕분에 뷰에서 이 두 속성을 직접 사용하여 해당 메서드를 호출할 수 있습니다.
뷰에서 내부 스타일과 스크립트를 사용하세요
스타일 정의나 스크립트 정의를 페이지에 직접 써야 한다면, 그다음 Orchard 테마에 따라 특정 영역에 스타일과 스크립트를 쓸 수 있습니다. 예를 들어, 다음 방법을 사용하여 페이지 하단에 스크립트를 작성할 수 있습니다:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
함수 JsSub() {
대본은 여기에서 작성할 수 있습니다
}
</scrip{filter}t>
}
Orchard에서는 Style 속성에 Head 메서드가 없어서, 아마도 Orchard가 내부 스타일을 사용하지 않길 원할 수도 있습니다. 그래서 스타일을 외부 스타일 파일에 넣어 참고해봅시다.
뷰에서 외부 스타일과 스크립트를 사용하세요
모듈에서 스타일과 스크립트를 호출하고 싶다면, 그 다음에는 scrip{filter}t와 Style 속성의 Include 메서드를 사용할 수 있습니다. 예를 들면:
@{
스타일.포함("xxx.css");
scrip{filter}t.Include("xxx.js");
}
이렇게 하면 페이지를 렌더링할 때 Orchard가 이 모듈의 Styles 디렉터리에서 해당 스타일 파일을 자동으로 찾아 페이지 상단에 쓸 스타일 참조 태그를 생성합니다. 또한 scrip{filter}ts 디렉터리에서 해당 스크립트 파일을 찾아 페이지 하단에 작성된 스크립트 참조 태그를 생성합니다.
리소스 파일 사용
위에서 설명한 두 가지 방법 외에도, Orchard는 리소스 파일 매니페스트 기능도 제공합니다. 모듈 루트 디렉터리에 ResourceManifest.cs 파일을 만들고 IResourceManifestProvider 인터페이스를 구현하기만 하면 됩니다. 이 리소스 매니페스트 파일에서는 스타일과 스크립트 파일을 참조하는 기능을 더 풍부하게 할 수 있습니다.
예를 들어, 스크립트 파일에 대한 참조를 정의하는 것은 다음과 같이 사용할 수 있습니다:
public void BuildManifests(ResourceManifestBuilder builder) {
건축가. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
이렇게 하면 뷰를 참조할 때 다음을 사용할 수 있습니다:
@{
scrip{filter}t.Require("jQuery");
}
더불어, 정의 후 다른 모듈들도 이 자원을 사용할 수 있으며, 한 페이지에 이 리소스를 참조하는 여러 뷰 파일이 있을 경우 중복 참조가 없고, Orchard는 이 스크립트를 참조하는 태그만 생성합니다.
스타일을 정의하는 것도 마찬가지입니다:
건축가. Add(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
사용 시:
@{
스타일. 요구("jQueryUI_Orchard");
}
리소스 파일 목록에는 의존성 설정 기능도 있습니다. 스크립트 리소스가 다른 스크립트 리소스에 의존해야 할 경우, 다음과 같은 정의를 사용할 수 있습니다:
건축가. Add(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
이렇게 하면 뷰jQueryUI_Core 스크립트만 사용하고, 의존하는 jquery 스크립트도 자동으로 불러옵니다.
여러 스크립트를 동시에 사용하는 경우, 여러 의존 자원을 구분하기 위해 쉼표를 사용할 수 있습니다. 예를 들면:
건축가. Add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
하지만 Orchard는 아직 스타일 리소스에 의존하는 스크립트 리소스 기능을 지원하지 않는데, 이는 다소 아쉬운 점입니다. 사실 jQueryUI 플러그인처럼 일부 js는 스타일 파일과 동시에 사용해야 합니다.
또한, 리소스 인벤토리 파일은 디버그 모드와 릴리스 모드에 맞는 스크립트 파일을 설정할 수 있으며, 다음과 같은 해당 리소스 버전을 정의할 수도 있습니다:
건축가. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js")). SetVersion("1.5.2");
Orchard와 함께 제공되는 Orchard.jQuery 모듈이 jQueryUI 플러그인을 정의하는 모듈 중 하나입니다. 이 플러그인을 사용해야 한다면, 이 매니페스트 파일에 정의된 js 플러그인을 보고 자체 모듈에서 참조할 수 있습니다. 하지만 Orchard.jQuery 모듈의 콘텐츠를 참조해야 할 경우, 모듈 매니페스트(module) 매니페스트(manifest) 파일에 의존성 Orchard.jQuery 모듈을 설정해야 합니다. 그래야 모듈이 활성화되면 Orchard.jQuery 모듈이 동기적으로 활성화되어 참조하는 리소스가 정상적으로 호출될 수 있도록 합니다.
jquery는 scrip{filter}t.Require("jQuery")를 사용하여 참조됩니다. AtHead();
|
게시됨 2016. 7. 28. 오후 4:21:53
|
|
|
