wedxt (Tanmer)

手把手教您在 Baklib 上搭建一个模板网站

wedxt — Sat, 30 Nov 2024 12:03:59 +0800

说到建站这个事情，作为开发者的你可以有非常多的解决方案，更何况是 2024 年了，建站交给 AI 也能快速完成。用 WordPress 开源系统，用 Wix、SXL 等 SaaS 平台，或者直接“Rails new"从零搭建。

本文将为你介绍一个建站新范式：Baklib。Baklib 是用 Rails 框架构建的基于 Liquid 语言的模版建站平台，作为 Ruby/Rails 开发者，这道菜应该再熟悉不过了。

1. 注册 Baklib 账号

首先咱们需要在 Baklib 上注册一个组织管理者账号（免费的）。当你注册好一个组织管理者账号登录到组织后台以后，我们可以看到在组织管理端有一个模板管理，点击即可进入到组织模板管理中心。

*** 如果提示试用版本，则联系客服注明来自 Ruby China 申请免费版本 ***

组织工作台	模板管理

2. 添加网站模板

Baklib 上的模板都是开源的，托管在： https://gitlab.com/baklib/themes

你可以做公共模板中选择喜欢的模板，复制 git 链接并添加到 Baklib 上，也可以参考 Baklib 的模板开发要求，自行打造权限的模板。具体参考：Baklib 模板开发中心

公共模板	复制 git 地址

3. 安装站点

在【市场】中可以看到所有公共的模板，以及组织自己挂载的模板，选择安装，根据流程即可创建一个站点。

选择模板	安装应用

4. 站点管理

一旦创建好一个站点，就可以有三个入口：前端会自动生成一个独立域名的网站（可解析到自有域名），后台有个独立的网站内容管理端，以及模板在线编辑器。

后台管理	模板开发	前端预览｜

参考用此模板创建的真实案例： https://release.baklib.cn

5. 模板开发

重头戏是对模板的二次开发支持，Baklib 设计了一个灵活的网站模板结构，你可以随时在线实时开发、实时预览，包括复杂的自定义字段、排版布局、查询检索等能力。

模板结构

├── assets
    └── images
    └── css
    └── javascripts
    └── ...
├── config
    └── settings_schema.json
├── layout
    └── theme.liquid
├── locales
├── src
├── statics
├── snippets
└── templates

静态文件可直接添加到 statics 目录中，比如添加一个 about.liquid，直接前端输入地址： /s/about 即可打开。
模板片段添加到 snippets目录中，比如添加文件 _header.liquid，在其他文件引用： {% render 'header' %}。
模板文件添加到templates目录中，比如添加文件 blog.liquid

模板代码

每个模板的页内代码由 HTML（CSS/JS） + Liquid 组成，以下是模板首页代码示例： index.liquid

{% assign pages = site.pages['/'].children_in_list  %}

<div class="overflow-visible h-auto pb-[70px] min-h-screen bg-slate-100">

  <div class="max-w-5xl mx-auto relative  flex flex-col sm:flex-row sm:space-x-2 px-3 sm:px-0  pt-[220px]">
    <div class="w-full space-y-2 lg:space-y-4 -mt-[60px]">
      {% paginate_tag pages, per: 6 %}
        {% for page in pages %}
          {% render "card", page: page %}
        {% else %}
          {{ 'generic.empty' | t }}
        {% endfor %}
        {% render 'paginate', paginate: paginate %}
      {% endpaginate_tag %}
    </div>

    <!-- Sidebar Section -->
    <aside class="hidden w-64 pl-4 sm:block shrink-0">
      {% render 'sidebar', site: site %}
    </aside>
  </div>
</div>

{% schema %}
  {
      "name": "Index",
      "description": "Card Style",
      "thumb_url": "images/theme/index-card.png",
      "sub_page_templates": ["page"]
  }
{% endschema %}

自定义模板字段

如果需要自定义模板页面的字段，则只需要做模板页面的 schame 中声明即可。

"settings": [
  {
    "id": "tags",
    "type": "tag_picker",
    "multiple": true,
    "label": "标签"
  },

Baklib 支持 18+ 动态表单（见 https://dev.baklib.cn/2a32/forms），足以满足各种类型字段的自定义。

Rails 2019 总结

wedxt — Mon, 06 Jan 2020 22:10:30 +0800

引自 This week in Rails - The 2019 edition

新年快乐！以下是 Rails 的 2019 年大事件记录：

2019 年有 494 位 Rails 贡献者

2019 年，有 494 位 Rails 贡献者。哇，这是一个惊人的数字！谢谢大家使 Rails 变得更好。

Rails 6.0 发布

Rails 6 包括 Headline 功能，例如并行测试，多数据库支持，新添加到 Rails 框架的 Zeitwerk 自动加载器。

Rails 中添加了两个新框架

Action Mailbox 和 Action Text 进入了 Rails 6 代码库。Action Mailbox 将帮助您接受传入的电子邮件，而 Action Text 将丰富的文本编辑器带入 Rails 框架。

其他发行

除了 Rails 6，2019 年还发布了 Rails 5.2.4 系列和5.1.7。

为 Rails 的繁荣，加油！

[成都] 2021 招聘 Ruby/Rails 工程师 15-18K

wedxt — Wed, 25 Dec 2019 22:52:46 +0800

关于探码科技

成都探码科技一直是以 Ruby 为核心生产力开发工具在使用，我们研发了基于 Ruby on Rails 的各种应用，如网络数据爬虫采集、数据 ETL、SaaS 框架系统等等。更多介绍请参考官网： http://www.tanmer.com/jobs

职位要求

本次招聘人员主要是配合 CTO 完成 SaaS 平台底层开发、微服务架构设计、并尝试开源代码。

3 年以上的软件开发经验（主要 Ruby）；
拥有 2+ 年以上 Rails 开发经验，Gem 开发经验；
熟悉数据库 PostgreSQL；
相关 Web 前端开发经验 HTML/React/Hotwire
相关部署运维如 Docker、Kubernetes 微服务架构；

其他

上班地点成华区建设路，我们上班不打卡，没有 996！，月薪根据能力定（中高级及以上工程师标准）；

简历投递

📮 hr@tanmer.com

用 Rails 打造的 SaaS 平台软件：Baklib

wedxt — Fri, 08 Nov 2019 21:45:39 +0800

https://www.baklib.com/pages/helper 定位在线制作知识库文档、帮助手册、产品手册、个人博客。内测上线一个月，欢迎大家体验。

同时，我们将 SaaS 开发进行了组件化拆分，未来会陆续开源出来，方便想用 Rails 搭建 SaaS 平台的伙伴开箱即用。架构里面的 core 部分都会独立开源，具体思路就是：SSO 实现统一账号认证，有个 CC 中心（类 App store），有个基于 rails 二次封装的 egg 用于生产针对不同业务的 APP(门户、电商、CRM、支付、交易等)。

欢迎大家吐槽~

关于中文文本及段落格式化的问题

wedxt — Fri, 15 Mar 2019 17:43:41 +0800

英文环境下有许多关于 text format 的插件和网站，帮助格式化英文文本，比如首字母大写、缩进、分段等。但是我还没找到一个关于中文文本格式化的很好用的插件，或者可以作为一个研究，下面举一个真实案例：没格式化之前：希望格式化之后：

有没有比较好的支持 Ruby 的区块链框架？

wedxt — Fri, 02 Mar 2018 10:36:53 +0800

不管区块链被吹的像神，还是像鬼。但是始终它来了，我这几天也在学习了解；当然是希望直接通过 Ruby 的技术栈 + 区块链的底层 API，但是找了许多区块链基础应用或者 BaaS，都对 Ruby 的支持靠后，有没有推荐的？

[成都] 招聘 Ruby/RoR 高级研发工程师 2 名

wedxt — Fri, 08 Dec 2017 18:15:22 +0800

2019 年 7 月更新~~~ 继续招人

5年以上开发经验， 待遇15K~，配股份期权

## 【岗位职责】

负责WEB前后端程序的开发和维护，具有一定的软件架构能力
基于Ruby on Rails 编程和单元测试工作，Gem/API开发能力
熟悉Linux/Mac OSX操作系统，熟练使用Git版本控制系统，能够流畅的阅读英文文档

## 【加分项】

乐于分享

有大型Web项目的前后端开发经验

设计过公开的API接口

较强的英语沟通能力

##【简历投递地址】

T 社的卫衣到货，秀一下

wedxt — Mon, 07 Nov 2016 18:33:21 +0800

自从参加 RubyConf 2016 成都大会

微信大转盘制作过程及算法分析

wedxt — Wed, 27 May 2015 11:57:20 +0800

在开发维斗喜帖的微转盘时候，研究了一下转盘应用，不过各种算法都相对复杂了，当时制作维斗喜帖微转盘只有一个目的：用户只需要设定奖项，填写抽奖人数，获奖人数，整个转盘游戏就搞定，简单轻松傻瓜化非严肃性质的微游戏定位。

本实例的代码适用于以下约定的需求场景：

奖项设置：

转盘为 8 格，可设置 6 个奖项，剩余 2 格为未中奖区域一等奖至六等奖的中奖比例为：1:2:5:10:12:20，即如果 [奖品总数] 设置为：50 个，预计抽奖人数 100 人，则一等奖有 1 个，六等奖有 20 个。若要扩大抽奖范围，则可以将 [奖品总数] 增加。

需要准备的素材：

第一张为转盘图，大小为：1032x1032px。下载转盘模版（PSD 格式，PNG 格式）http://www.wedxt.com/post/zhuanpan。第二张为指针图，大小为：256x357px。请点击这里下载指针模版。

制作好后的预览效果：(扫描二维码体验)

前端 JS 代码：

<script src="/assets/jquery.js"></script>
  <script src="/assets/bootstrap.js"></script>
  <script type="text/javascript">
    var extendUrl = 'http://localhost:3000';
    var getPrizeUrl = 'http://localhost:3000/zhuanpan/23/h';
    var commentUrl = 'http://www.example.com'
    var running = false,
    count = 0;

    //随机生成数字3或者7: 未中奖情况
    function rand() {
      var text = "";
      var possible = "37";
      text += possible.charAt(Math.floor(Math.random() * possible.length));
      return text;
    }

    //转盘css3动画
    function setDegree($obj, deg) {
      $obj.css({
        'transform': 'rotate(' + deg + 'deg)',
        '-moz-transform': 'rotate(' + deg + 'deg)',
        '-o-transform': 'rotate(' + deg + 'deg)'
      });
    }

    //转盘转动开始
    //params: offset 0-7,代表需要停到的奖项,由后端传入
    function rotate(offset) { 
      console.log(offset);
      var $tar = $('#outer'), 
      i, 
      cnt = 100,
      //用做ratio的索引(10-29)
      total = 0,
      //记录上一次的变化结果
      ratio = [],
      //存放角度的变化比例，制造快慢过渡效果
      amount = 18 - (0.45 * offset); //每次每多出45/200=0.225度,200次就多偏转45度
      ratio[1] = [0.2, 0.4, 0.6, 0.8, 1, 1, 1.2, 1.4, 1.6, 1.8];
      ratio[2] = [1.8, 1.6, 1.4, 1.2, 1, 1, 0.8, 0.6, 0.4, 0.2];
      for (i = 0; i < 100; i++) { //100次50ms的间隔
        setTimeout(function() {
          //计算每次偏转增量，对应阶段的增减比例最终造成快慢变化
          var deg = amount * (ratio[String(cnt).substr(0, 1)][String(cnt).substr(1, 1)]);
          setDegree($tar, deg + total); //改变偏转
          total += deg; //记录
          cnt++; //依据次数用作ratio的索引，这里用到了闭包不能使用i
        },
        i * 25);
      }
      setTimeout(function() {
        if (offset == 3 || offset == 7) {
          window.sessionStorage.setItem('prizename', '没中奖');
          $('#myModal').modal('show');
          $('#word').html("<p>加油哦，亲！</p>");
          $('#goShop').text('点击这里');
          $('#goShop').click(function() {
            location.href = extendUrl;
          });
        }
      },
      100 * 25 + 250);
    }

    //绑定事件，点击指针开始
    function actRotate() {
      if (running) 
      return;

      if (count >= 1) {
        $('#myModal').modal('show');
        $('#word p').text('亲，每人只能参加一次哦！');
        $('#goShop').text('点击这里');
        $('#goShop').click(function() {
          location.href = extendUrl;
        });
        count = 1;
        return
      }

      if (window.sessionStorage.getItem('prizename') != null)  {
        $('#myModal').modal('show');
        $('#word p').text('亲，你不能再参加本次活动了喔！下次再来吧^_^');
        $('#goShop').text('点击这里');
        $('#goShop').click(function() {
          location.href = extendUrl;
        });     
        return
      }

      $.ajax({ 
        type: "GET",
        url: getPrizeUrl,
        dataType:  "json",
        success:  function(data) {
          console.log(data);
          if (data.status == 0) { //活动还未开始
            console.log('活动还未开始');
            $('#myModal').modal('show');
            $('#word p').text('亲，活动还未开始啦!');
            $('#goShop').text('点击这里');
            $('#goShop').click(function() {
              location.href = extendUrl;
            });
          } else if (data.status == 1) { //活动进行中: 抽奖并中奖
            console.log('活动进行中：中奖');
            window.sessionStorage.setItem('goods_id', data.goods_id);   
            rotate(data.Coupon.grade);
            setTimeout(function() {
              window.sessionStorage.setItem('prizename', data.message + '');
              $('#myModal1').modal('show');
              $('#word1').html("<p>恭喜你，获得了" + data.message + "</p>");
              $('#goNext').click(function() {
                location.href = commentUrl;
              });
            },
            100 * 25 + 250);
          } else if (data.status == 2) { //活动进行中：抽奖未中奖
            console.log('活动进行中：抽奖未中奖');
            var text = rand();
            text = text.toString();
            rotate(text);
          } else if (data.status == 3) { //奖品已经领完
            console.log('奖品已经领完');
            $('#myModal').modal('show');
            $('#word p').text('今日奖品已经领完，明天继续哦!');
            $('#goShop').click(function() {
              location.href = extendUrl;
            });
          } else if (data.status == 4) { //活动结束
            console.log('活动结束');
            $('#myModal').modal('show');
            $('#word p').text('亲，活动已经结束啦!');
            $('#goShop').text('点击这里');
            $('#goShop').click(function() {
              location.href = extendUrl;
            });
          }                
          running  =  false;
          count++;            
        },
        error:  function() {
          $('#myModal').modal('show');
          $('#word').html("<img src='aa.png' class='fail' id='tsImg'>");
          $('#goShop').text('获得帮助');
          $('#goShop').click(function() {
            location.href = extendUrl;
          });
          prize = null;
          running = false;
          count = 0;            
        },
        timeout:  1000        
      });
    }    
  </script>

在这 JS 代码中，我们看到，需要 Ajax 调用服务器返回 JSON 数据：http://localhost:3000/zhuanpan/23 服务器端的代码如下：

#大转盘需要调用的action: 返回json数据，给js调用
#params: site_page_id, key
def zhuanpan_json
  # status 值：
  # 0 -> 亲，活动还未开始啦!
  # 1 -> 活动进行中: 抽奖并中奖
  # 2 -> 活动进行中：抽奖未中奖
  # 3 -> 今日奖品已经领完，明天继续哦！
  # 4 -> 亲，活动已经结束啦!
  @site_page = SitePage.find(params[:id])

  #状态获取
  status = case SitePageKeystore.value_for(@site_page, 'open_toggle')
  when '活动进行中'
    2
  when '活动未开始'
    0
  when '活动已结束'
    4
  else
    2
  end

  #获取用户设定的奖品总数
  prize_obj = SitePageKeystore.get(@site_page.id, 'prize_count')
  prize_count = prize_obj.value.to_i || 50

  #获取预计抽奖人数
  person_obj = SitePageKeystore.get(@site_page.id, 'person_count')
  person_count = person_obj.value.to_i || 100

  #计算中奖概率
  rate = prize_count/(person_count + 0.1)

  #获取已抽奖次数
  zhuan_obj = SitePageKeystore.get(@site_page.id, 'zhuan_count')
  if zhuan_obj.nil?
    key = CommonKey.get('zhuan_count')
    CommonKey.put('zhuan_count', 0) if key.nil?
    SitePageKeystore.put(@site_page.id, 'zhuan_count', 0)
    zhuan_obj = SitePageKeystore.get(@site_page.id, 'zhuan_count')
  end
  zhuan_count = zhuan_obj.value.to_i
  SitePageKeystore.put(@site_page.id, 'zhuan_count', zhuan_count + 1)

  status = 4 if zhuan_count >= person_count #次数已经抽完

  #获取中奖次数
  coupon_obj = SitePageKeystore.get(@site_page.id, 'coupon_count')
  if coupon_obj.nil?
    key = CommonKey.get('coupon_count')
    CommonKey.put('coupon_count', 0) if key.nil?
    SitePageKeystore.put(@site_page.id, 'coupon_count', 0)
    coupon_obj = SitePageKeystore.get(@site_page.id, 'coupon_count')
  end
  coupon_count = coupon_obj.value.to_i

  status  = 3 if coupon_count >= prize_count && status != 4 #奖品已完

  # 奖项数组 
  # 是一个二维数组，记录了所有本次抽奖的奖项信息， 
  # 其中id表示中奖等级，prize表示奖品，v表示中奖概率。 
  # 注意其中的v必须为整数，你可以将对应的 奖项的v设置成0，即意味着该奖项抽中的几率是0， 
  # 数组中v的总和（基数），基数越大越能体现概率的准确性。 
  # 本例中v的总和为100，那么平板电脑对应的 中奖概率就是1%， 
  # 如果v的总和是10000，那中奖概率就是万分之一了。 

  # goods_id: 
  # 8个值分别对应8格转盘的8个格子，其中3，7格为默认未中奖格，其他格为有奖格
  # 1 -> 奖品1
  # 2 -> 奖品2
  # 3 -> 未中奖
  # 4 -> 奖品3
  # 5 -> 奖品4
  # 6 -> 奖品5
  # 7 -> 未中奖
  # 8 -> 奖品6
  failed_count = (50/rate).to_i - 50 #预设中奖个数为50， 则根据中奖概率计算出未中奖个数
  prize_hash = {   
    0 => {'id'=>1,'prize'=> SitePageKeystore.value_for(@site_page, 'good1'),'v'=>1},   
    1 => {'id'=>2,'prize'=> SitePageKeystore.value_for(@site_page, 'good2'),'v'=>2},  
    2 => {'id'=>8,'prize'=> SitePageKeystore.value_for(@site_page, 'good3'),'v'=>5},
    3 => {'id'=>4,'prize'=> SitePageKeystore.value_for(@site_page, 'good4'),'v'=>10},  
    4 => {'id'=>5,'prize'=> SitePageKeystore.value_for(@site_page, 'good5'),'v'=>12},  
    5 => {'id'=>6,'prize'=> SitePageKeystore.value_for(@site_page, 'good6'),'v'=>20},
    6 => {'id'=>3,'prize'=> '没有抽中，感谢参与','v'=> failed_count/3},
    7 => {'id'=>7,'prize'=> '没有抽中，没准下次能抽到哦','v'=> failed_count/3*2},  
  }

  # 每次前端页面的请求，PHP循环奖项设置数组， 
  # 通过概率计算函数get_rand获取抽中的奖项id。 
  # 将中奖奖品保存在数组$res['yes']中， 
  # 而剩下的未中奖的信息保存在$res['no']中， 
  # 最后输出json个数数据给前端页面。 
  arr = {}
  prize_hash.each_pair do |key, val|
    arr[val['id']] = val['v']
  end
  rid = get_rand(arr) #根据概率获取奖项id
  coupon = prize_hash[rid - 1] #抽中的奖项
  if status == 2 && ![3, 7].include?(coupon['id']) #中奖了
    SitePageKeystore.put(@site_page.id, 'coupon_count', coupon_count + 1)
    status = 1
  end

  if status == 1 #中奖了
    render json: {status: status, goods_id: coupon['id'], message: coupon['prize'], Coupon: {grade: coupon['id']}}
  else #没中奖
    render json: {status: status}
  end
end

# 
#  经典的概率算法， 
#  $proArr是一个预先设置的数组， 
#  假设数组为：array(100,200,300，400)， 
#  开始是从1,1000 这个概率范围内筛选第一个数是否在他的出现概率范围之内，  
#  如果不在，则将概率空间，也就是k的值减去刚刚的那个数字的概率空间， 
#  在本例当中就是减去100，也就是说第二个数是在1，900这个范围内筛选的。 
#  这样 筛选到最终，总会有一个数满足要求。 
#  就相当于去一个箱子里摸东西， 
#  第一个不是，第二个不是，第三个还不是，那最后一个一定是。 
#  pro_hash = {id => v, 1 => 1, 2 => 30} 
def get_rand(pro_hash)
    result = nil
    #概率数组的总概率精度  
    pro_sum = pro_hash.values.inject{|sum,x| sum + x }
    #概率数组循环
    pro_hash.each_pair do |key, pro_cur|
      rand_num = 1 + rand(pro_sum)
      if rand_num <= pro_cur
        result = key
        break
      else
        pro_sum -= pro_cur
      end
    end
    result
end

中奖提示：

更多案例，可以参考这里：http://www.wedxt.com/templates/12