阿毛Alex - 2021年10月
type: channel
link: https://alexmao.com/index.php/2021/10/
description: 生命不息，折腾不止
items: css中解决外边距的重叠和父元素高度塌陷的问题
items: html的frameset和frame
items: 手工撸一个react shopify app基础
items: shopify app开发上手

css中解决外边距的重叠和父元素高度塌陷的问题
type: item
date: 2021-10-20T14:38:00+00:00
description: 直接使用这个就可以：.clearfix::before .clearfix::after { content: ''; display: table; clear: both; }

html的frameset和frame
type: item
date: 2021-10-18T07:52:00+00:00
description: 这个标签可以同时显示多个frame，frame里面可以是不同的页面。按列： 按行： 注意frame不能和body一起用，有frame就不要有body。最新更新，以上元素已经不推荐使用了。。。

手工撸一个react shopify app基础
type: item
date: 2021-10-13T15:18:00+00:00
description: 学习教程第一步，文件夹里创建项目npm init -y 第二步，新建pages文件夹，新建index.js文件，文件内容如下：const Index = () => { return Welcome } export default Index 注意：key和secret在shopify partner页面里新建app后就会出现新建app时需要有一个ngrok的外网映射，需要做以下步骤：先安装ngroknpm i ngrok -g // 注意要全局安装 然后创建一个映射ngrok http 3000 就可以获得一个URL，把URL填到创建app时的App URL处，在Allowed redirection URL(s)填这个地址并且在后面跟/auth/callback第三步，安装react和相关依赖包npm i --save next react react-dom/server koa @shopify/koa-shopify-auth dotenv koa-router@^8.0.8 isomorphic-fetch 第四步，创建一个.env文件，内容如下：SHOPIFY_API_KEY='XXX' SHOPIFY_API_SECRET='XXX' SHOPIFY_API_SCOPES=read_products,write_products SHOPIFY_API_URL='https://8760-2409-8a00-2450-9940-69c5-bbfa-f871-8a2c.ngrok.io' 第五步，创建server.js文件，内容如下：require('isomorphic-fetch') const dotenv = require('dotenv') const Koa = require('koa') const next = require('next') const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth') const { verifyRequest } = require('@shopify/koa-shopify-auth') const { default: Shopify, ApiVersion } = require('@shopify/shopify-api') const Router = require('koa-router') dotenv.config() Shopify.Context.initialize({ API_KEY: process.env.SHOPIFY_API_KEY, API_SECRET_KEY: process.env.SHOPIFY_API_SECRET, SCOPES: process.env.SHOPIFY_API_SCOPES.split(","), HOST_NAME: process.env.SHOPIFY_API_URL.replace(/https:\/\//, ""), API_VERSION: ApiVersion.October20, IS_EMBEDDED_APP: true, SESSION_STORAGE: new Shopify.Session.MemorySessionStorage() }) const port = parseInt(process.env.PORT, 10) || 3000 const dev = process.env.NODE_ENV !== 'production' const app = next({ dev }) const handle = app.getRequestHandler() const ACTIVE_SHOPIFY_SHOPS = {} app.prepare().then(() => { const server = new Koa() const router = new Router() server.keys = [Shopify.Context.API_SECRET_KEY] server.use( createShopifyAuth({ afterAuth(ctx) { const { shop, scope } = ctx.state.shopify ACTIVE_SHOPIFY_SHOPS[shop] = scope if ( ACTIVE_SHOPIFY_SHOPS[shop] ) { ctx.redirect(`https://${shop}/admin/apps`) } else { ctx.redirect(`/?shop=${shop}`) } } }) )…

shopify app开发上手
type: item
date: 2021-10-12T16:16:00+00:00
description: 第一步：注册一个开发账号，https://shopify.dev/第二步：创建一个测试商店第三步：安装Ruby第四步：安装shopify-cli脚手架gem install shopify-cli //安装完使用shopify version校验是否安装成功 第五步：到一个文件夹里，创建shopify项目shopify node create 第六步：进入项目文件夹，启动服务shopify node serve 第七步：获得一个ngrok.io的链接，打开就会进到app里，添加即可在商店里测试到app了