2016-03-02 66 views
0

我想对Meteor示例应用“LocalMarket”进行逆向工程,并针对不同的利基设计类似的设计。我遇到的问题是我几乎不知道从哪里开始,改变导航。反向工程/自定义流星LocalMarket示例应用

根据Meteor官方教程,当我们创建我们的流星应用程序时,它会创建一个包含.js文件,.html文件,.css文件和.meteor文件夹的文件夹。

但LocalMarket应用具有.meteor文件夹,然后其他几个文件夹:

客户端,科尔多瓦 - 构建 - 覆盖,LIB,公共资源,服务器。

还有一个移动配置JavaScript文件和自述文件。

我(有点)不明白为什么有单独的文件夹的客户端和服务器和这么多不同的样式表。但这是有点旁边。我想要改变导航文本,图标和链接:主页,什么是烹饪,食谱,书签,关于,同时保持这种令人敬畏的菜单风格,并可能只是修改现有的页面,以避免重新命名一切。虽然如果您有关于轻松重命名页面的建议,我完全赞同。

在templates \ app-body.html中,它看起来像定义了菜单结构。例如,

<a href="{{pathFor 'about'}}" class="{{activePage 'about'}}"> 
     <span class="wrapper-menu-item"> 
      <span class="icon-question"></span> 
      <span class="title-menu">About</span> 
     </span> 
     </a> 

指向书签页面的链接。

但我找不到任何列出的类的样式,除了在.meteor \ local \ build \ programs中的“merged-stylesheets.css”文档。

可以修改merged stylesheets.css吗?我认为.meteor文件夹不适合应用程序开发人员修改。我错了吗?

我看到那里的类,即:

icon-question:before { 
    content: "\e613"; 

,但我没有在任何地方发现,“e613”的参考。

根据我提到的具体问题,了解如何更改LocalMarket示例应用中不同页面的导航图标,文本和链接。

任何方式来改变页面标题,并改变应用程序范围内的一切,以反映,而不会致命地摧毁新的应用程序,将超级赞赏。

我看看如何修改页面上的内容。这看起来很直接。

更改显示的页面标题而不更改其他应用程序文件中对它们的类​​/功能引用的方法也有帮助。

非常感谢!

回答

1

里面还有很多问题,希望我们可以回答其中的大多数。

  1. 东西在/server是只可见的服务器端。
  2. /client中的内容仅在客户端可见。
  3. 的东西,在其他顶级目录(及其子目录)是可见的服务器和客户端
  4. 东西.meteor下不应该改变。这就是你所有软件包最终结束的地方
  5. 听起来这个例子的样式表是包的一部分。这意味着您不应该直接编辑它,而应该替换覆盖您需要在您自己的.css文件中更改的样式,该样式是在/client下创建的。您的样式表将在任何包装样式表之后加载,这意味着您的样式将会获胜。
  6. 它还听起来像是一个程序包安装其自己的图标,因此"\e613"您可以使用太多(例如)fontello
  7. 我不知道在哪里的页面标题是在例如设置安装自己的图标。可能有head.html文件带有<title>标签,或者它可以在路由器中设置。
+1

导航标题在'/ client/templates/app-body.html'内设置模板目录是@javaandy可以找到所有html来修改站点结构的地方。作为参考,这个例子的来源可以在https://github.com/meteor/meteor/tree/devel/examples/localmarket找到 – goldsz

+0

我正在考虑页面''而不是菜单中的导航标签。 – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">非常好,非常感谢Michel和goldsz。除了.meteor之外,我会玩弄一切,看看我能做些什么。非常感激。 – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/5990438/">javaandy</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4319274062" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">相关问题</div> <ul class="relative_list"> <li> 1. <a href="http://cn.voidcc.com/question/p-rpetcenw-qz.html" target="_blank" title="自定义过滤与反应表流星包不工作"> 自定义过滤与反应表流星包不工作 </a> </li> <li> 2. <a href="http://cn.voidcc.com/question/p-odsupxdd-dt.html" target="_blank" title="流星编译自定义引导较少的示例?"> 流星编译自定义引导较少的示例? </a> </li> <li> 3. <a href="http://cn.voidcc.com/question/p-fyysmgit-gq.html" target="_blank" title="自定义URL流星"> 自定义URL流星 </a> </li> <li> 4. <a href="http://cn.voidcc.com/question/p-cjhlhemn-bs.html" target="_blank" title="流星+反应+ createcontainer"> 流星+反应+ createcontainer </a> </li> <li> 5. <a href="http://cn.voidcc.com/question/p-ceiwxoiw-nk.html" target="_blank" title="使用反应和流星进行双向数据绑定"> 使用反应和流星进行双向数据绑定 </a> </li> <li> 6. <a href="http://cn.voidcc.com/question/p-qjnheprc-mx.html" target="_blank" title="自动运行中的流星反应"> 自动运行中的流星反应 </a> </li> <li> 7. <a href="http://cn.voidcc.com/question/p-rlwmiyat-tr.html" target="_blank" title="流星(反应):访问流星应用程序中的本地包装组件"> 流星(反应):访问流星应用程序中的本地包装组件 </a> </li> <li> 8. <a href="http://cn.voidcc.com/question/p-xcmbzpsj-ey.html" target="_blank" title="反应+解析或反应+流星?"> 反应+解析或反应+流星? </a> </li> <li> 9. <a href="http://cn.voidcc.com/question/p-wcmoevcn-ct.html" target="_blank" title="反应Komposer,反应和流星"> 反应Komposer,反应和流星 </a> </li> <li> 10. <a href="http://cn.voidcc.com/question/p-hnqqvrap-et.html" target="_blank" title="Nginx反向代理到自定义Mochiweb应用程序"> Nginx反向代理到自定义Mochiweb应用程序 </a> </li> <li> 11. <a href="http://cn.voidcc.com/question/p-djdrdwbs-ce.html" target="_blank" title="“退出代码8”示例流星应用程序"> “退出代码8”示例流星应用程序 </a> </li> <li> 12. <a href="http://cn.voidcc.com/question/p-tldsmhln-km.html" target="_blank" title="流星反应性来源"> 流星反应性来源 </a> </li> <li> 13. <a href="http://cn.voidcc.com/question/p-yhzvvpuy-ry.html" target="_blank" title="迁移到流星/反应"> 迁移到流星/反应 </a> </li> <li> 14. <a href="http://cn.voidcc.com/question/p-eprlclsx-cq.html" target="_blank" title="反应和流星订阅"> 反应和流星订阅 </a> </li> <li> 15. <a href="http://cn.voidcc.com/question/p-epktdjqp-se.html" target="_blank" title="流星和反应本机"> 流星和反应本机 </a> </li> <li> 16. <a href="http://cn.voidcc.com/question/p-njkrskcu-sz.html" target="_blank" title="流星反应拖放"> 流星反应拖放 </a> </li> <li> 17. <a href="http://cn.voidcc.com/question/p-hieopnfv-ot.html" target="_blank" title="流星反应fullcalendar实施"> 流星反应fullcalendar实施 </a> </li> <li> 18. <a href="http://cn.voidcc.com/question/p-boycvtrh-uu.html" target="_blank" title="流星/反应问题,getElementById"> 流星/反应问题,getElementById </a> </li> <li> 19. <a href="http://cn.voidcc.com/question/p-zpjitlvs-ud.html" target="_blank" title="流星 - createContainer反应变量"> 流星 - createContainer反应变量 </a> </li> <li> 20. <a href="http://cn.voidcc.com/question/p-khjxgnya-dd.html" target="_blank" title="流星反应似乎"> 流星反应似乎 </a> </li> <li> 21. <a href="http://cn.voidcc.com/question/p-fvujcrws-rc.html" target="_blank" title="流星和反应:帮手"> 流星和反应:帮手 </a> </li> <li> 22. <a href="http://cn.voidcc.com/question/p-sygpahqa-ea.html" target="_blank" title="用户未定义流星"> 用户未定义流星 </a> </li> <li> 23. <a href="http://cn.voidcc.com/question/p-bgnedwce-gt.html" target="_blank" title="流星:Accounts.sendVerificationEmail自定义行为"> 流星:Accounts.sendVerificationEmail自定义行为 </a> </li> <li> 24. <a href="http://cn.voidcc.com/question/p-wgrceuov-ho.html" target="_blank" title="流星nodets:mysql自定义查询"> 流星nodets:mysql自定义查询 </a> </li> <li> 25. <a href="http://cn.voidcc.com/question/p-hurjtxrk-oa.html" target="_blank" title="创建自定义EPiServer工作流程"> 创建自定义EPiServer工作流程 </a> </li> <li> 26. <a href="http://cn.voidcc.com/question/p-gdryevsp-ro.html" target="_blank" title="反向工程asp.net web应用程序"> 反向工程asp.net web应用程序 </a> </li> <li> 27. <a href="http://cn.voidcc.com/question/p-oskuscro-na.html" target="_blank" title="在流星/反应中使用ReactiveVars"> 在流星/反应中使用ReactiveVars </a> </li> <li> 28. <a href="http://cn.voidcc.com/question/p-mcntvytp-cc.html" target="_blank" title="在流星和反应中使用Bootstrap"> 在流星和反应中使用Bootstrap </a> </li> <li> 29. <a href="http://cn.voidcc.com/question/p-rdtpbuol-uh.html" target="_blank" title="流星+反应 - window.onpopstate不起作用"> 流星+反应 - window.onpopstate不起作用 </a> </li> <li> 30. <a href="http://cn.voidcc.com/question/p-otfetyfk-mu.html" target="_blank" title="Tinder应用程序流星"> Tinder应用程序流星 </a> </li> </ul> </div> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3534119089"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img2.voidcc.com/voidso/script/side.js?t=1652515421853"></script> <script type="text/javascript" src="http://img2.voidcc.com/voidso/plugin/highlight/highlight.pack.js"></script> <link href="http://img2.voidcc.com/voidso/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> 每日一句 </div> <div class="panel-body m-b-sm m-t-sm clearfix"> 每一个你不满意的现在,都有一个你没有努力的曾经。 </div> </div> <div class="row"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- VOIDCC问答侧边栏广告 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3862022848" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> 最新问题 </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://cn.voidcc.com/question/p-wbsglyji-nq.html" target="_blank" title="html2fpdf脚本问题"> html2fpdf脚本问题 </a> </li> <li class="side_article_list_item"> 2. <a href="http://cn.voidcc.com/question/p-evbfujxm-cy.html" target="_blank" title="如何管理对可交换类的订阅"> 如何管理对可交换类的订阅 </a> </li> <li class="side_article_list_item"> 3. <a href="http://cn.voidcc.com/question/p-ocvumnlg-mv.html" target="_blank" title="如何从两个表基于第一个表"> 如何从两个表基于第一个表 </a> </li> <li class="side_article_list_item"> 4. <a href="http://cn.voidcc.com/question/p-fwunghgg-hn.html" target="_blank" title="Android [Android Studio]如何使用海康威视CCTV SDK的PlayerSDK"> Android [Android Studio]如何使用海康威视CCTV SDK的PlayerSDK </a> </li> <li class="side_article_list_item"> 5. <a href="http://cn.voidcc.com/question/p-hocbslhg-tt.html" target="_blank" title="大熊猫 - 在同一个数据帧"> 大熊猫 - 在同一个数据帧 </a> </li> <li class="side_article_list_item"> 6. <a href="http://cn.voidcc.com/question/p-scxaoyte-ts.html" target="_blank" title="最简单的方式分发Tensorflow培训的前提?"> 最简单的方式分发Tensorflow培训的前提? </a> </li> <li class="side_article_list_item"> 7. <a href="http://cn.voidcc.com/question/p-banvlrwo-tr.html" target="_blank" title="连接来自外部客户端进程的kubernetes内作为码头容器运行的点火服务器"> 连接来自外部客户端进程的kubernetes内作为码头容器运行的点火服务器 </a> </li> <li class="side_article_list_item"> 8. <a href="http://cn.voidcc.com/question/p-wuyqquis-tp.html" target="_blank" title="使用Thymeleaf窗体构建POST请求"> 使用Thymeleaf窗体构建POST请求 </a> </li> <li class="side_article_list_item"> 9. <a href="http://cn.voidcc.com/question/p-hreqzzry-th.html" target="_blank" title="如何通过控制器与MVC发送电子邮件"> 如何通过控制器与MVC发送电子邮件 </a> </li> <li class="side_article_list_item"> 10. <a href="http://cn.voidcc.com/question/p-fmgltwuu-ma.html" target="_blank" title="用OpenCover运行XUnit和FluentAssertions会给出错误信息"> 用OpenCover运行XUnit和FluentAssertions会给出错误信息 </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> 相关问题</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://cn.voidcc.com/question/p-rpetcenw-qz.html" target="_blank" title="自定义过滤与反应表流星包不工作"> 自定义过滤与反应表流星包不工作 </a> </li> <li class="side_article_list_item"> 2. <a href="http://cn.voidcc.com/question/p-odsupxdd-dt.html" target="_blank" title="流星编译自定义引导较少的示例?"> 流星编译自定义引导较少的示例? </a> </li> <li class="side_article_list_item"> 3. <a href="http://cn.voidcc.com/question/p-fyysmgit-gq.html" target="_blank" title="自定义URL流星"> 自定义URL流星 </a> </li> <li class="side_article_list_item"> 4. <a href="http://cn.voidcc.com/question/p-cjhlhemn-bs.html" target="_blank" title="流星+反应+ createcontainer"> 流星+反应+ createcontainer </a> </li> <li class="side_article_list_item"> 5. <a href="http://cn.voidcc.com/question/p-ceiwxoiw-nk.html" target="_blank" title="使用反应和流星进行双向数据绑定"> 使用反应和流星进行双向数据绑定 </a> </li> <li class="side_article_list_item"> 6. <a href="http://cn.voidcc.com/question/p-qjnheprc-mx.html" target="_blank" title="自动运行中的流星反应"> 自动运行中的流星反应 </a> </li> <li class="side_article_list_item"> 7. <a href="http://cn.voidcc.com/question/p-rlwmiyat-tr.html" target="_blank" title="流星(反应):访问流星应用程序中的本地包装组件"> 流星(反应):访问流星应用程序中的本地包装组件 </a> </li> <li class="side_article_list_item"> 8. <a href="http://cn.voidcc.com/question/p-xcmbzpsj-ey.html" target="_blank" title="反应+解析或反应+流星?"> 反应+解析或反应+流星? </a> </li> <li class="side_article_list_item"> 9. <a href="http://cn.voidcc.com/question/p-wcmoevcn-ct.html" target="_blank" title="反应Komposer,反应和流星"> 反应Komposer,反应和流星 </a> </li> <li class="side_article_list_item"> 10. <a href="http://cn.voidcc.com/question/p-hnqqvrap-et.html" target="_blank" title="Nginx反向代理到自定义Mochiweb应用程序"> Nginx反向代理到自定义Mochiweb应用程序 </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div><!-- wrap end--> <!-- footer --> <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://cn.voidcc.com/contact">联系我们</a></li> <li>© 2020 CN.VOIDCC.COM</li> <li><a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备13005482号-13</a></li> <li><script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280098168&web_id=1280098168"></script></li> <li><a href="http://cn.voidcc.com/" target="_blank" title="程序问答园区">简体中文</a></li> <li><a href="http://hk.voidcc.com/" target="_blank" title="程序問答園區">繁體中文</a></li> <li><a href="http://ru.voidcc.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.voidcc.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.voidcc.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.voidcc.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.voidcc.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.voidcc.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.voidcc.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.voidcc.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.voidcc.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.voidcc.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.voidcc.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer> <!-- / footer --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-77509369-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-77509369-5'); </script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?67d4731349f0b00136755b80364ce381"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>