OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

在OurJS开源博客网站中添加自定义缩略图片


分享到
分类 开源OurJS   关键字 OurJS   发布 newghost  1408587099688
注意 转载须保留原文链接,译文链接,作者译者等信息。  
这里将介绍如何在OurJS开源博客中扩展添加一个自定义的缩略图字段。如下图所示,目前文章左侧显示的是文字,即文章类别,这是一个导航到此类别的链接。



我们的目标是将此黄色区域换一个缩略图,过程如下:

更新Schema


找到article的schema文件,默认位置在: ./data/schema/article.js

添加一个字段: imageurl, 类型为: url, 如:

{
    "_id"         : "id"
  , "title"       : "shown,string"
  , "url"         : "url"
  , "imageurl"    : "url"
  , "verify"      : "shown,int"
  , "category"    : "shown,string"
  , "keyword"     : "shown"
  , "summary"     : "html"
  , "content"     : "html"
  , "description" : "string"
  , "hottest"     : "json"
  , "similar"     : "json"
  , "replies"     : "json"
  , "postdate"    : "int"
  , "poster"      : "shown"
  , "publishTime" : "int"
  , "replyTime"   : "int"
}

更新之后重启服务(关闭再打开ourjs.sh即可)。

然后进入数据管理中心(Data Manager)查看字段是否加上,

地址: http://localhost:8054/admin/data



以管理员(有isAdmin: 1 属性的用户)用户登录即可,默认的管理用户名: guest  密码: 123456

添加一个新的article,可以看到新添加的字段 imgurl




Data Manager是专为管理员提供的,可以修改任何字段的一个插件(包括最热文章列表,相关文章列表等),并且绕过缓存直接获取/更新数据(更新后需要通过 Refresh Cache [ http://localhost:8054/updatecache ]将数据更新到缓存)。

schema的作用是防止前端注入其他字段,并限制字段类型; Data Manager将依据schema和文件存储位置自动管理这些数据,每次刷新性能会较差,且仅有管理员可登录。

下一步将会将这个字段添加到普通用户可以编辑的页面上(在此页面上的更新将直接同步到缓存,无需手动刷新),并且编辑界面更友好。

更新编辑模板(template)


找到当前主题下的编辑文章模板,如默认magazine的主题下路径为: .\web\magazine\edit.tmpl

在合适的位置添加imageurl字段,注意一定要和schema中的一致,否则会被过滤掉,如下所示。PS: OurJS默认的模板引擎为doT,参考文档

      {{?}}
      <label>Title
      <input type="text"  name="title"      value="{{=it.title || ''}}"  placeholder="Title">
      </label>
      <br><br>
      <label>Thumbnail Image
      <input type="text"  name="imageurl"     value="{{=it.imageurl || ''}}"  placeholder="Thumbnail Image">
      </label>
      <br><br>

打开“New Post”(添加文章)验证,刷新一下即可(在Debug模式下,模板文件不会被缓存,直接刷新即可更新)

我们添加一篇测试文章并提交保存。PS: 1) 填入的imgurl字段(此为网络上的任意一张图片地址) 2) Verify验证类型:直接发布到首页 3) 你可以使用编辑器对摘要和正文格式进行调整。



提交完了以后,你可以在article的存放目录检查一下这个字段是否被真正地添加到JSON文件中[可选]。 (例如: ./data/models/article/53f54a7a3f85c0e4001e38bf)

更新显示模板(template)


添加好文章以后,还要显示这张图片,现在找到并编辑当前主题下的首页模板,如: ./web/magazine/home.tmpl

将imageurl的规则添加到首页,为了跟不影响原来的逻辑,这里添加对imageurl是否存在进行了判断。OurJS默认的模板引擎为doT,参考文档




现在大功告成了,刷新首页即可看到这张缩略图了,你也可以自行在正文中添加缩略图。




项目地址: https://github.com/newghost/ourjs

社区评论 ( Beta版 )
  • #0 feivorid 1408939550125

    sadadasda

  • #1 f2e.be 1410430111248

    @newghost 我今天研究了websvr.js这个文件,很多东西值得学习,纯json文件使ourjs访问so快

  • #2 newghost 1410439667396

    @f2e.be #1

    呵,欢迎贡献代码

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. OurJS-免费开源的博客引擎,论坛系统,网站模板和轻量级的CMS
  2. 痛苦的Java程序员
  3. 微软开源TypeScript编绎器
  4. JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM
  5. JavaScript中的继承,构造函数以及new关键字的作用
  6. TJ Holowaychuk将Express维护权移交给StrongLoop
  7. Google官方支持的NodeJS访问API,提供后台登录授权
  8. 有可能将CSS应用到一个字符的一半吗?
  9. Amazon云增长过快,吓坏股东
  10. fibjs 比 nodejs 快五倍
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 开源OurJS
  1. 在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
  2. OurJS-免费开源的博客引擎,论坛系统,网站模板和轻量级的CMS

 关键字 - OurJS
  1. 在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
  2. Bootstrap vs Foundation如何选择靠谱前端框架
  3. OurJS-免费开源的博客引擎,论坛系统,网站模板和轻量级的CMS
  4. 等待已久的jQuery 3.0带来了更精简的编译
  5. NodeJS on Nginx: 使用nginx反向代理处理静态页面
  6. 拿什么守护你的Node.JS进程: Node出错崩溃了怎么办?
  7. 各大邮件群发/订阅代理服务商比较
  8. WebSvr匹配首页问题
  9. 在OurJS开源博客网站中添加自定义缩略图片

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号