思想架构博客大数据

推荐一套整合内容发布的高颜值全家桶

2019-03-02  本文已影响517人  井月轩

楔子

去年的时候，因为工作需要重新把代码捡起来。不过并不是开发企业级管理系统，而是面向客户的内容发布平台，用来拼凑我的整套泛会员框架的1/50，目前核心业务已经对外发布，所以这个图也终于不用保密了。

泛会员框架v1.03

这张图等到下半年可以找一个机会详细再写一篇文章，说回正题，由于是面向客户的系统，颜值是第一位的，寻寻觅觅很久，也试用了很多款开源框架以及一些云存储平台，下面罗列一下，需要注意的是，也许这些开源产品原本的用途并不是我所应用的用途，在我组合的框架里面可能定位有些偏颇：

小程序UI库：

image

最终我选择使用ColorUI主要是两个方面：

  1. 颜值，ColorUI的颜值非常高，可以看一下我用Mock做的这张图

    image

  2. ColorUI使用的是传统的css引用，这就避免了上面那些UI的组件注入，很大程度的节省了代码空间，要知道小程序的包大小限制在4M，最近群里很多人都在劝说作者封装组件，我想说的是，还是要保持初心，你最早做UI就是面向小程序的，完全没必要去封装，如果是要适应uni-app，改一个参数不就好了，也是没必要封装组件。

内容管理系统：

云存储：

其实云存储没什么好选的，阿里的虽然流量免费但是存储空间按月收费，费用不高，但，收费。又拍云的CDN很不错，但是收费。七牛云做完实名认证之后有10G的免费空间可以使用，下载流量也是10G之内免费，唯一需要付费的就是Https的流量。嗯，怎么看都像一个个人开发者的思考逻辑，而不是公司行为，啧啧。

开始组装

系统都选好了，那么接下来就是组装了，组装非常简单：

image

对Halo进行二次开发

首先clone最新的Halo源码，然后抛出我们所需要的API，这里主要是根据分类和根据标签查询文章，在package cc.ryanc.halo.web.controller.api.ApiPostController;里面添加一个方法：通过文章分类查找文章

    /**
     * 根据分类目录查询所有文章 分页
     *
     *
     * @param cateUrl 分类目录路径
     * @param page    页码
     * @return String
     */
    @GetMapping("/cate/{cateUrl}/{page}")
    public JsonResult categories(@PathVariable("cateUrl") String cateUrl,
                             @PathVariable("page") Integer page,
                             @SortDefault(sort = "postDate", direction = DESC) Sort sort) {
        final Category category = categoryService.findByCateUrl(cateUrl);
        int size = 10;
        if (StrUtil.isNotBlank(OPTIONS.get(BlogPropertiesEnum.INDEX_POSTS.getProp()))) {
            size = Integer.parseInt(OPTIONS.get(BlogPropertiesEnum.INDEX_POSTS.getProp()));
        }
        final Pageable pageable = PageRequest.of(page - 1, size, sort);
        final Page<Post> posts = postService.findPostByCategories(category, pageable);
        if (null == posts) {
            return new JsonResult(HttpStatus.NO_CONTENT.value(), HttpStatus.NO_CONTENT.getReasonPhrase());
        }
        return new JsonResult(HttpStatus.OK.value(), HttpStatus.OK.getReasonPhrase(), posts);
    }



    /**
     * 根据标签路径查询所有文章 分页
     *
     *
     * @param tagUrl 标签路径
     * @param page   页码
     * @return String
     */
    @GetMapping(value = "/tag/{tagUrl}/{page}")
    public JsonResult tags(@PathVariable("tagUrl") String tagUrl,
                       @PathVariable("page") Integer page,
                       @SortDefault(sort = "postDate", direction = DESC) Sort sort) {
        final Tag tag = tagService.findByTagUrl(tagUrl);
        int size = 10;
        if (StrUtil.isNotBlank(OPTIONS.get(BlogPropertiesEnum.INDEX_POSTS.getProp()))) {
            size = Integer.parseInt(OPTIONS.get(BlogPropertiesEnum.INDEX_POSTS.getProp()));
        }
        final Pageable pageable = PageRequest.of(page - 1, size, sort);
        final Page<Post> posts = postService.findPostsByTags(tag, pageable);
        if (null == posts) {
            return new JsonResult(HttpStatus.NO_CONTENT.value(), HttpStatus.NO_CONTENT.getReasonPhrase());
        }
        return new JsonResult(HttpStatus.OK.value(), HttpStatus.OK.getReasonPhrase(), posts);
    }

需要注意的是，这里的findPostByCategories方法需要传入Categories，categoryService里面有一个写好的方法findByCateName，在因此需要在类上面categoryService

    @Autowired
    private TagService tagService;
    @Autowired
    private CategoryService categoryService;

OK了，就这么简单，接下来直接用源码里面的dockerfile打包成镜像扔到服务器上就可以了。

作者还非常贴心的整合了个docker-compose文件，也可以用，不过我是直接敲命令的。

version: '2'
services:

  nginx:
    restart: always
    image: nginx
    container_name: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      - /etc/nginx/conf.d:/etc/nginx/conf.d
      - /etc/nginx/vhost.d:/etc/nginx/vhost.d
      - /usr/share/nginx/html:/usr/share/nginx/html
      - /etc/nginx/certs:/etc/nginx/certs:ro

  halo:
    restart: always
    image: ruibaby/halo
    container_name: halo
    ports:
      - 8090:8090
    environment:
      - VIRTUAL_PORT=8090
      - VIRTUAL_HOST=localhost  # 监听的地址（务必修改）
      - LETSENCRYPT_HOST=localhost # 证书的域名 （务必修改）
      - LETSENCRYPT_EMAIL=i@example.com # 证书所有者的邮箱，快过期时会提醒（务必修改）
      - DB_USER=admin # h2数据库用户名，自定义（务必修改）
      - DB_PASSWORD=123456 # h2数据库密码，自定义（务必修改）
    volumes:
      - ~/halo:/root/halo

  docker-gen:
    restart: always
    image: jwilder/docker-gen
    container_name: docker-gen
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro
      - /etc/nginx/nginx.tmpl:/etc/docker-gen/templates/nginx.tmpl:ro
    volumes_from:
      - nginx
    entrypoint: /usr/local/bin/docker-gen -notify-sighup nginx -watch -wait 5s:30s
      /etc/docker-gen/templates/nginx.tmpl /etc/nginx/conf.d/default.conf

  letsencrypt-nginx-proxy-companion:
    restart: always
    image: jrcs/letsencrypt-nginx-proxy-companion
    container_name: letsencrypt-nginx-proxy-companion
    volumes_from:
      - nginx
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - /etc/nginx/certs:/etc/nginx/certs:rw
    environment:
      - NGINX_DOCKER_GEN_CONTAINER=docker-gen

配置Halo后台多媒体文件保存在七牛云

这个操作比较简单，直接在后台设置-博客设置-附件设置里面选择，并填写入对应申请的信息即可，Bucket就是你对象存储空间的名字，一开始我也是懵逼半天。

image

用ColorUI开发小程序展示页面

ColorUI的使用方法异常简单，Demo就在源码里面，所以虽然群里面一直有人喊让作者写文档，我觉得除了自定义tabBar之外应该都不太用写吧？整个源码就两个文件夹template和demo

image

查看demo的方法：先自己建一个空的小程序，把路径里面除了project.config.json其他的文件全都删掉，然后把demo文件夹里面除了project.config.json的所有内容复制小程序路径里面，直接微信开发者工具打开就可以了，所有的实现都在里面，喜欢那个样式直接复制即可。

如果需要在现有小程序里面引用：

  1. 需要复制colorui.wxss和icon.wxss两个文件到你的小程序根目录，如果你开启了云开发的话，就是在miniprogram下
image
  1. 在app.wxss里面加入引用
@import "icon.wxss";
@import "colorui.wxss";

view {
  overflow: initial;
}
  1. 喜欢哪个就复制哪个wxml就可以了，page里面的wxss不用管

自定义tabBar的说明

需要多说一句的是自定义tabBar，作者在2.0.5版本里面加入了自定义tabBar，不过微信官方支持自定义的基础库版本是2.5以上，所以设置自定义tabBar需要考虑清楚，如果确定要用，那么也是分两步：

   Component({
     options: {
       addGlobalClass: true,
     },
     data: {
       selected: 0,
       color: "#808080",
       selectedColor: "#FFFFFF",
       backroundColor: "#000",
       modalName:false,
       list: [{
         pagePath: "/pages/index/index",
         icon:"icon-repeal",
         text: "来往"
         },
         {
           pagePath: "/pages/halo/index",
           icon: "icon-comment",
           text: "课堂"
         },
         {
           pagePath: "/pages/translator/translator",
           icon: "icon-cart",
           text: "翻译"
         },
         {
           pagePath: "/pages/walk/walk",
           icon: "icon-footprint",
           text: "漫步"
         },
         {
           pagePath: "/pages/halo/index",
           icon: "icon-list",
           text: "生活"
         }
       ]
     },
     methods: {
       switchTab(e) {      
         const url = e.currentTarget.dataset.path
         console.log(e)   
         wx.switchTab({
           url
         })
        
       }
     },
     pageLifetimes: {
     }
   })

index.wxml

   <view class="cu-bar tabbar bg-black shadow padding-tb-sm"  style='background-color:rgba(0, 0, 0, 0.2)'>
   
     <view class='action {{index == 2 ? "add-action" : ""}}' wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab" style='color: {{selected === index ? selectedColor : color}}'>
       <view wx:if="{{index != 2}}" class='{{item.icon}}'></view>
       <view wx:if="{{index == 2}}" class='cu-btn icon-order bg-bjfunred shadow'></view>
       {{item.text}}
     </view>
   
   </view>

使用html2wxml插件进行html页面渲染

因为我们是用小程序来展现API的文章内容，因此传过来的内容为html格式，这时候就需要html2wxml插件来将html文件转为wxml文件格式，并呈现出来，直接在小程序后台可以搜索html2wxml富文本组件并在小程序后台开通

image

在app.json里面进行插件声明：

"plugins": {
    "htmltowxml": {
        "version": "1.3.1",
        "provider": "wxa51b9c855ae38f3c"
    }
}

然后在需要页面的json文件中进行如下注册：

"usingComponents": {
    "htmltowxml": "plugin://htmltowxml/view"
  }

最后在需要页面的wxml文件里面直接使用，将html文件内容注入标签即可：

  <view class='margin-lrji solid-top padding-top'>
    <htmltowxml text="{{post.postContent}}" highlightStyle="{{style}}" linenums="{{false}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap"></htmltowxml>
  </view>

最后看一下呈现效果：

image 欢迎关注个人公众号
上一篇下一篇

猜你喜欢

热点阅读