导航

Site - 让前端更优雅

为notebook app提供 site app支持

  • 名词解释

    site: 比base提供的更强大的前端, 目前用做ecstore的前端展示提供模板机制, 站点管理, 菜单管理, sitemap, seo优化, sitemap, url路由, 提示信息, 友情链接等. 是自由建站的利器！

  • 在app目录下引入site软件包
     [http://app.ec-os.net/svn/site/trunk]
  • 修改: app/notebook/app.xml,使notebook依附于site。
            ...
	<depends>
		...
		<app>site</app>
	</depends>
	...
  • 重新安装 notebook
    bryant@forsky /Users/bryant/codes/notebook/app/base %> sudo ./cmd install -r notebook
Creating table sdb_image_image
Creating table sdb_image_image_attach
Installing service desktop_finder.image_mdl_image
image "en-us" language resource stored
image "zh-cn" language resource stored
Installing Cache_Expires DB:IMAGE_IMAGE
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:IMAGE_IMAGE_ATTACH
UPDATE CACHE EXPIRES KV DATA
Installing permission image
Installing panelgroup images
Installing adminpanel admin_manage:index
Installing adminpanel admin_manage:imageset
Initial image
Application image installed... ok.
Creating table sdb_site_explorers
Creating table sdb_site_link
Creating table sdb_site_menus
Creating table sdb_site_modules
Creating table sdb_site_route_statics
Creating table sdb_site_seo
Creating table sdb_site_themes
Creating table sdb_site_themes_tmpl
Creating table sdb_site_widgets
Creating table sdb_site_widgets_instance
Creating table sdb_site_widgets_proinstance
Installing service desktop_finder.site_mdl_explorers
Installing service desktop_finder.site_mdl_link
Installing service desktop_finder.site_mdl_modules
Installing service desktop_finder.site_mdl_seo
Installing service desktop_finder.site_mdl_menus
Installing service desktop_finder.site_mdl_themes
Installing service desktop_finder.site_mdl_route_statics
Installing service desktop_finder.site_mdl_route_statics
Installing service desktop_finder.site_mdl_widgets_proinstance
Installing service desktop_finder_callback.site_mdl_modules
Installing service desktop_finder_callback.site_mdl_modules
Installing service app_content_detector
Installing service view_compile_helper
Installing service view_helper
Installing service site_view_helper
Installing service site_controller_content
Installing service cachemgr_global_vary
Installing service site_service_seo
Installing service autotask
Installing service desktop_menu
Installing service site_maps
Installing service dev.project_type
Installing service site_theme_content_detector
Installing service tpl_source.site_proinstance
Installing service site_display_errorpage.conf
site "en-us" language resource stored
site "zh-cn" language resource stored
Installing Cache_Expires DB:SITE_EXPLORERS
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:SITE_LINK
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:SITE_MENUS
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:SITE_MODULES
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:SITE_ROUTE_STATICS
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:SITE_SEO
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:SITE_THEMES
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:SITE_THEMES_TMPL
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:SITE_WIDGETS
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:SITE_WIDGETS_INSTANCE
UPDATE CACHE EXPIRES KV DATA
Installing Cache_Expires DB:SITE_WIDGETS_PROINSTANCE
UPDATE CACHE EXPIRES KV DATA
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing menu site_ctl_admin_module
Installing workground site.wrokground.theme
Installing workground site.wrokground.theme
Installing permission site
Initial themes
Application site installed... ok.
Creating table sdb_notebook_item
Installing service notebook_addon
Installing service desktop_finder.notebook_mdl_item
Installing Cache_Expires DB:NOTEBOOK_ITEM
UPDATE CACHE EXPIRES KV DATA
Installing menu notebook_ctl_admin_notebook
Installing workground notebook_admin_notebook
Installing permission notebook_manage
Application notebook installed... ok.
  • 进入后台，效果如下：


  • 现在我们已经可以看到模板很多的功能了。

下边开始准备为我们自己的模板提供在线安装

创建自己的个性化模板

  • 目前我们的site app的在线模板中只支持ecstore的模板, 因此我们要根据项目设计自己的模板

模板设计文档参见：[http://ecos.phpwindow.com/quickstart/advance/site/template.html]

  • 为了方便演示，我们下载一个现有的模板, 进行修改：
  • 进入站点->模板列表->在线安装模板


  • 我们选择在线安装电子数码模板


  • 模板被安装到 [项目名称]/themes/digital 目录下
  • 创建我们自己的模板目录 [项目名称](以后略去)/themes/notebook
  • 从themes/digital目录下拷贝必要的文件到我们自己的模板目录下 themes/notebook
    block
borders
default.html
images
index.html
preview.jpg
theme.xml

    注：以上文件缺一不可，一定得复制完全！

  • 创建：themes/notebook/info.xml
    <?xml version="1.0" encoding="UTF-8" ?>
<theme>
  <name>notebook</name>
  <id>notebook</id>
  <version>0.1</version>
  <info></info>
  <author>ShopEx-bryant</author>
  <site>http://www.shopex.cn</site>
  <update_url></update_url>
  <borders>
    <set key="邮件订阅" tpl="borders/border1.html" />
    <set key="边栏样式" tpl="borders/border2.html" />
    <set key="品牌热卖排行" tpl="borders/border4.html" />
    <set key="热销排行" tpl="borders/border5.html" />
    <set key="首页商品列表" tpl="borders/border6.html" />
    <set key="页尾文章列表" tpl="borders/border9.html" />
    <set key="购买本商品的顾客还买过" tpl="borders/border10.html" />
  </borders>
  <views></views>
  <config></config>
</theme>
    因为我们复制的theme.xml这个文件里有很多无用的widget,所以我们还要做下面操作
  • 打开theme.xml然后将该文件的内容全部替换成刚才新建的info.xml里的内容（两个文件的内容一模一样便可）。我们的模板已初步完成
  • 删除我们的参照模板目录 themes/digital
  • 为了让系统重新加载模板, 我们需要重新安装site
    bryant@forsky /Users/bryant/codes/notebook/app/base %> sudo ./cmd uninstall -r site
...
...
bryant@forsky /Users/bryant/codes/notebook/app/base %> sudo ./cmd install notebook
...
...
  • 进入后台, 看看我们自己的模板

  • 点击上图中的可视化编辑,效果下图所示：


创建前台导航widget

  • 如果已经看过我们的模板设计文档, 应该已经对widget有个基本概念
  • 实际上系统添加 widget 有两种方式：
    1. 通过app进行添加 app/[$app_name]/widgets 目录下
    2. 通过模板进行添加 themes/[$theme_name]/widgets 目录下
  • 我们选择通过app进行添加，具体实现过程如下：
    1. 创建app/notebook下的widgets目录 app/notebook/widgets
    2. 把 app/b2c/widgets/menu_lv1 目录拷贝到 app/notebook/widgets，通过拷贝的方式建立前台导航widgets。
    3. 修改挂件描述文件: app/notebook/widgets/menu_lv1/widgets.php，把文件中的 app::get('b2c')->_('xxxx') 的写法换成 'xxxx'。
    4. 前后对比效果图如下：

      修改前：

         $setting['name']=app::get('b2c')->_('商店导航菜单');
      修改后效果：
         $setting['name']='商店导航菜单';
      这种奇怪的写法是为了多语言的考虑, 暂无需理解。
    • 大功告成, 重新安装 site app
      bryant@forsky /Users/bryant/codes/notebook/app/base %> sudo ./cmd uninstall -r site
...
...
bryant@forsky /Users/bryant/codes/notebook/app/base %> sudo ./cmd install notebook
...
...
  • 进入 index.html 可视化编辑页, 添加刚刚写完的widgets，具体操作流程如下：
    1. 点击页面左上角添加模板按钮，如下图所示：


    2. 在弹出的增加页面板块提示框中，单击左侧列表的导航相关，如下图所示：
    3. 在右侧弹出商店导航菜单中，单击商店导航菜单右上角的小加号，如下图所示：
    4. 将数据移动到页面的导航菜单栏的左上角，会自动弹出蓝色的小编辑条，单击蓝色编辑条右侧的编辑按钮，如下图所示：
    5. 在出现的修改板块提示框中，填写板块标题，选择板块边框为无边框，单击保存修改按钮，如下图所示：
    6. 最后单击可视化编辑页面右上角的保存按钮，待保存完毕，关闭可视化编辑页面。如下图所示：

让我们的前端支持site

下面，我们开始对之前的notebook前端进行改造：

  • 为notebook增加:app/notebook/site.xml
    <site>
    <explorer id='notebook' path='view/site'>notebook</explorer>

    <module controller='site_default' >
        <name>default</name>
        <title>notebook</title>
        <disable>false</disable>
        <allow_menu act='index'>留言板</allow_menu>
        <default_menu>
            <title>留言板</title>
            <act>index</act>
            <hidden>false</hidden>
        </default_menu>
    </module>
</site>
  • 修改mapper文件 config/mapper.php

将

'/' 设置为 array('app' => 'site')

我们让site app来接管 通过url对控制器的调度方式
  • 更改老的控制器位置将 app/notebook/controller/default.php 搬到 app/notebook/controller/site/ 目录下

  • 修改 default.php
  • 更改控制器的名称为notebook_ctl_site_default, 并将继承类从 base_controller 改为 site_controller
      注：[http://localhost/项目名称/index.php/default.html] 对应到控制器为 **notebook_ctl_site_default**

      这样的目的是为了seo友好

    将function index 里的

      $this->display('default.html');
    替换为
      $this->page('default.html');

将function addnew 的

  $this->begin(array("ctl" => "default", "act" => "index", "app"=> "notebook"));
替换为
  $this->begin(array("ctl" => "site_default", "act" => "index", "app"=> "notebook"));
  • 修改页面文件app/notebook/view/default.html，修改form表单"提交"的控制器，修改代码如下：

将

...
<form id="writer" method="post" action="<{link ctl='default' act='addnew' app='notebook'}>">
...
修改为：
...
<form id="writer" method="post" action="<{link ctl='site_default' act='addnew' app='notebook'}>">
...
  • 卸载site, 重新安装notebook


访问出错后解决方案

  • 如果没有出现预期的结果或者是出现警告信息，可以尝试下载一个新模板然后切换模板。操作步骤如下：
    1. 点击在线安装模板按钮，在弹出模板列表页中选择并安装一个新的模块。如下图所示：


    2. 点击刚下载的新模板的启用此模板。如下图所示：
    3. 最后再点击我们之前的模板notebook中的启用此模板，启用我们自建的模板。然后再访问[http://localhost/项目名称/index.php/default.html]。

內容目录

上一个主题

Desktop - 添加后台管理功能

下一个主题

pam - 添加登录功能

快速搜索

输入相关的模块，术语，类或者函数名称进行搜索

导航

© irudder.me