五、Orchard Core入门:从零开始自定义一个主题样式

前面我们已经创建了MyTheme主题模板,如何添加自定义的内容呢?
先下载个免费的模版,我们一步步将它改造成Orchard Core CMS主题样式

一. 改造MyTheme文件夹:创建wwwroot和Recipes文件夹

二. 下载的免费的模版样式,解压缩将必须的文件拷贝至MyTheme文件夹下。

下载地址:startbootstrap-creative

wwwroot存放css、js、img,index.html放入Views

三. 改造Layout.liquid

将index.html改名为Layout.liquid

orchard core可以使用Liquid模版语言替代 Razor 视图
Liquid语法指南
vs2019中默认不支持Liquid语法的高亮显示
可以安装igorfle.VSLiquidSyntax扩展,支持2017和2019

编译站点项目,将MyTheme设置为默认主题,这时内容以经加载出来了,但是css、js文件没有正确被调用
打开Layout.liquid修改资源文件的路径
//比如all.min.css的路径地址
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
//在路径头部加入MyTheme/
//orchardCore会默认你的项目名称在独立的area区域
<link href="MyTheme/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

按照这个方式将css、js、img的调用地址一次修改,保存并刷新页面,你的页面现在以经可以正常显示了。


继续完善Layout.liquid
{% comment %} 根据你的当前文化返回语言编码 {% endcomment %}
<html lang="{{ Culture.Name }}">
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,748评论 1 45
  • 这个主题的目标和测试是基于Orchard 1.8 版本的 展示了Orchard提供的特性,提供 step-by-s...
    彭飞阅读 2,245评论 0 3
  • 1. 新建一个文件夹,命名为 webpack-cli , webpack-cli 就是你的项目名,项目名建议使用小...
    鲁大师666阅读 1,515评论 1 3
  • 主题使得Orchard用户可以按照他们的需要和设计目标自定义渲染网站。模板可以通过Orchard模块执行重写样式表...
    彭飞阅读 530评论 0 1
  • 早上6点多睿宝就起来了,我在隔壁房间敷药听,一边听广生老师讲课。快七点时,睿宝跟我说想看王芳老师的拼音课,我跟她说...
    娟娟_52c0阅读 92评论 0 0