作者: admin

  • Quickstart: Compose and WordPress

    You can use Docker Compose to easily run WordPress in an isolated environment built with Docker containers. This quick-start guide demonstrates how to use Compose to set up and run WordPress. Before starting, make sure you have Compose installed.

    在docker容器构建的隔离环境中,你可以使用docker compose很容易运行wordpress,本快速入门指南演示如何使用compose设置并运行wordpress。在开始之前,确保你已经安装compose

    Define the project 定义项目

    1,Create an empty project directory.

    创建一个空项目文件夹

    You can name the directory something easy for you to remember. This directory is the context for your application image. The directory should only contain resources to build that image.

    你可以将文件夹命名成容易记忆的名称。这个文件夹是你应用程序镜像的上下文。文件夹应该仅仅包含构建镜像的资源。

    This project directory contains a docker-compose.yml file which is complete in itself for a good starter wordpress project.

    项目文件夹包含一个docker-compose.yml文件,这个文件是完成wordpress项目的一个好的开始。

    Tip: You can use either a .yml or .yaml extension for this file. They both work.

    2,Change into your project directory.

    进入文件夹修改

    For example, if you named your directory my_wordpress:

     cd my_wordpress/

    3,Create a docker-compose.yml file that starts your WordPress blog and a separate MySQL instance with volume mounts for data persistence:

    创建docker-compose.yml 文件启动你的wordpress博客和独立mysql实例,该实例具有用于数据持久的卷挂载。

    version: "3.9"
        
    services:
      db:
        image: mysql:5.7
        volumes:
          - db_data:/var/lib/mysql
        restart: always
        environment:
          MYSQL_ROOT_PASSWORD: somewordpress
          MYSQL_DATABASE: wordpress
          MYSQL_USER: wordpress
          MYSQL_PASSWORD: wordpress
        
      wordpress:
        depends_on:
          - db
        image: wordpress:latest
        volumes:
          - wordpress_data:/var/www/html
        ports:
          - "8000:80"
        restart: always
        environment:
          WORDPRESS_DB_HOST: db:3306
          WORDPRESS_DB_USER: wordpress
          WORDPRESS_DB_PASSWORD: wordpress
          WORDPRESS_DB_NAME: wordpress
    volumes:
      db_data: {}
      wordpress_data: {}

    Notes:

    • The docker volumes db_data and wordpress_data persists updates made by WordPress to the database, as well as the installed themes and plugins. Learn more about docker volumes
    • docker卷db_data和wordpress_data保持wordpress对数据库的更新,以及已安装的主题和插件
    • WordPress Multisite works only on ports 80 and 443.
    • wodpress多站点工作仅仅在80和443端口

    Build the project

    Now, run docker-compose up -d from your project directory.

    现在在项目文件夹运行 docker-compose up -d

    This runs docker-compose up in detached mode, pulls the needed Docker images, and starts the wordpress and database containers, as shown in the example below.

    这个运行 docker-compose up 在分离模式,拉去需要的docker 镜像,然后启动wordpress和数据库容器,如下所示。

    Bring up WordPress in a web browser

    At this point, WordPress should be running on port 8000 of your Docker Host, and you can complete the “famous five-minute installation” as a WordPress administrator.

    Shutdown and cleanup

    The command docker-compose down removes the containers and default network, but preserves your WordPress database.

    The command docker-compose down --volumes removes the containers, default network, and the WordPress database.

  • tailwind ui

    Getting set up

    Requirements

    All of the components in Tailwind UI are designed for Tailwind CSS >= v2.0. To make sure that you are on the latest version of Tailwind, update via npm:

    tailwind ui中所有的组件被设计tailwind css >=v2.0。确保你使用最新版本的tailwind,通过npm更新:

    npm install tailwindcss@latest

    If you are previously coming from Tailwind UI for Tailwind CSS v1, check out our guide for getting updated to Tailwind CSS v2.0.

    如果你之前来自tailwind ui 为tailwind css v1 ,查看我们的指南设置更新到tailwind css v2.0。

    All of the examples in Tailwind UI rely on the default Tailwind CSS v2.0 configuration, but some rely on additional first-party plugins like @tailwindcss/forms@tailwindcss/typography, and @tailwindcss/aspect-ratio.

    在tailwind ui中所有的示例默认依赖配置tailwind css v2.0,但一些依赖于额外的第一插件 @tailwindcss/forms, @tailwindcss/typography, 和 @tailwindcss/aspect-ratio.

    When an example requires any plugins or configuration changes, it will be noted in a comment at the top of the example.

    当一个案例需要一些插件或者配置变化,它将在示例顶部的注释中注明。

    If you’re new to Tailwind CSS, you’ll want to read the Tailwind CSS documentation as well to get the most out of Tailwind UI.

    如果你是tailwind css的新手,你想要阅读tailwind css 文档已充分利用tailwind ui。

    Optional: Add the Inter font family

    We’ve used Inter font family for all of the Tailwind UI examples because it’s a beautiful font for UI design and is completely open-source and free. Using a custom font is nice because it allows us to make the components look the same on all browsers and operating systems.

    我们使用 Inter 字体为所有的tailwind ui 示例 因为它是一个漂亮的字体为ui设计并且完全开源和自由。使用自定义字体很好因为它允许我们使组件在所有浏览器和操作系统看起来一样。

    You can use any font you want in your own project of course, but if you’d like to use Inter, the easiest way is to first add it via the CDN:

    在你的项目资源中你可以使用你想要的任意字体,但是如果你喜欢使用 Inter, 最简单的方式是通过cdn添加它:

    Then add “Inter var” to your “sans” font family in your Tailwind config:

    然后在tailwind配置中添加 “Inter var “到你的 “sans”字体

    // tailwind.config.js
    const defaultTheme = require(‘tailwindcss/defaultTheme’)

    module.exports = {
    theme: {
    extend: {
    fontFamily: {
    sans: [‘Inter var’, …defaultTheme.fontFamily.sans],
    },
    },
    },
    // …
    }

  • What is EditorConfig?

    EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

    EditorConfig帮助在多人跨各种编辑器和IDE开发同一项目保持一致的代码风格。EditorConfig项目文件格式的一致 为定义代码风格和文本编辑器插件的集合 开启编辑器度文件格式 和坚持定义样式。

    EditorConfig文件很容易阅读,并且它们配合版本控制系统很好地工作

  • vue服务器渲染NUXTJS

    一,创建项目

    yarn create nuxt-app my-nuxt-project

  • docker:创建node.js镜像

    先决条件

    • Node.js版本12.18或者更新
    • 本地运行的docker
    • IDE或者代码编辑器,推荐VS code

    案例程序

    创建一个简单的Node.js应用程序,用作案例。在本地创建文件夹“node-docker”,按照以下步骤创建简单的REST API。

    $ cd [path to your node-docker directory]
    $ npm init -y
    $ npm install ronin-server ronin-mocks
    $ touch server.js

    增加代码处理REST请求

  • centos7 安装最新版nodejs

    在centos中如果安装默认版本的nodejs,版本太低,会有很多坑

    yum install nodejs

    正确的安装姿势如下:

    先增加最新版的yum源,setup_后面的数字改成最新版的

    $curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -

    然后yum 安装

    $yum -y install nodejs

    查看node版本

    node -v
    v14.15.4

    查看npm的版本

    npm -v
    6.14.10
  • 今天更新了php和wordpress

    好久没管过这个网站了,今天心血来潮,更新了一下wordpress和php,php更新的7.4,wordpress更新到5.6,把之前下的好多插件删除了,就当成blog来用。

    打算试着写一个wordpress的主题,感觉官方的主题有点丑,哈哈哈哈哈哈哈哈

    现在用的编辑器是官方自带的新款编辑器,用着也还挺顺手的。试一下这个代码编辑器

    $wp core update
    $wp language core update
    $pw plugin list

    今天就写到这,以后会试着多更新这个网站。

  • typescript的函数Functions

    Introduction

    Functions are the fundamental building block of any application in JavaScript. They’re how you build up layers of abstraction, mimicking classes, information hiding, and modules. In TypeScript, while there are classes, namespaces, and modules, functions still play the key role in describing how to do things. TypeScript also adds some new capabilities to the standard JavaScript functions to make them easier to work with.

    介绍

    函数是javascript任何应用程序的基本构建块,它们是您构建抽象层,模仿类,信息隐藏,和模块的方式。Typescript中虽然有类,命名空间,和模块,函数仍然在描述操作方式中扮演重要角色。Typescript也给标准JavaScrip函数增加了新特性,让它们更容易去使用。

  • 这两个别记混了assign对象合并,concat数组合并,assign去重,concat不去重

    const target = { a: 1, b: 2 };
    const source = { b: 4, c: 5 };
    
    const returnedTarget = Object.assign(target, source);
    
    console.log(target);
    // !!!expected output: Object { a: 1, b: 4, c: 5 }
    
    console.log(returnedTarget);
    // expected output: Object { a: 1, b: 4, c: 5 }
    
    let aaa = [1,2]
    let bbb = [2,4]
    
    const ccc=aaa.concat(bbb)
    
    console.log(aaa)
    //[1,2]
    
    console.log(ccc)
    //[1,2,2,4]