Silverstripe-FocusPoint 项目教程

Silverstripe-FocusPoint 项目教程

silverstripe-focuspointModule for improving automatic image cropping in SilverStripe. Adds simple art-direction control by allowing you to set and crop from a focus point instead of the centre point of an image.项目地址:https://gitcode.com/gh_mirrors/si/silverstripe-focuspoint

1. 项目的目录结构及介绍

silverstripe-focuspoint/
├── _config/
│   └── config.yml
├── client/
│   ├── css/
│   ├── js/
│   └── images/
├── docs/
│   └── en/
├── lang/
│   └── en.yml
├── screenshots/
├── src/
│   ├── FocusPointField.php
│   ├── FocusPointImage.php
│   └── ...
├── templates/
│   └── JonoM/
│       └── FocusPoint/
├── tests/
│   ├── FocusPointFieldTest.php
│   ├── FocusPointImageTest.php
│   └── ...
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .nvmrc
├── README.md
├── build-tools.md
├── changelog.md
├── composer.json
├── contributing.md
├── license.md
├── package.json
├── phpunit.xml.dist
├── webpack.config.js
└── yarn.lock

目录结构介绍

• _config/: 包含项目的配置文件，如 config.yml。
• client/: 存放前端资源文件，包括 CSS、JavaScript 和图片。
• docs/: 项目的文档文件，通常包含不同语言的文档。
• lang/: 语言文件，如 en.yml。
• screenshots/: 存放项目的截图文件。
• src/: 项目的核心源代码，包括 PHP 文件和其他相关代码。
• templates/: 存放模板文件，如 JonoM/FocusPoint/ 目录下的模板。
• tests/: 项目的测试代码，包括单元测试和其他测试文件。
• .editorconfig: 编辑器配置文件。
• .gitattributes: Git 属性配置文件。
• .gitignore: Git 忽略文件配置。
• .nvmrc: Node 版本管理配置文件。
• README.md: 项目说明文件。
• build-tools.md: 构建工具说明文件。
• changelog.md: 项目变更日志文件。
• composer.json: Composer 依赖管理文件。
• contributing.md: 贡献指南文件。
• license.md: 项目许可证文件。
• package.json: npm 包管理文件。
• phpunit.xml.dist: PHPUnit 配置文件。
• webpack.config.js: Webpack 配置文件。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件通常是 index.php 或 app.php，但在 Silverstripe-FocusPoint 项目中，启动文件可能是一个配置文件或入口文件。由于项目文档中没有明确提到启动文件，我们可以假设项目的启动逻辑是通过 Silverstripe 框架的默认入口文件来实现的。

3. 项目的配置文件介绍

composer.json

{
  "name": "jonom/silverstripe-focuspoint",
  "description": "Module for improving automatic image cropping in SilverStripe",
  "type": "silverstripe-module",
  "license": "MIT",
  "require": {
    "silverstripe/framework": "~4"
  },
  "extra": {
    "installer-name": "focuspoint"
  }
}

config.yml

---
Name: focuspoint
---
FocusPointImage:
  default_quality: 85
  default_crop_width: 1000
  default_crop_height: 1000

webpack.config.js

const path = require('path');

module.exports = {
  entry: './client/js/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'client/dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

phpunit.xml.dist

<phpunit bootstrap="vendor/autoload.php">
  <testsuites>
    <testsuite name="SilverStripe FocusPoint">
      <directory>tests</directory>
    </testsuite>
  </testsuites>
</phpunit>

以上是 Silverstripe-FocusPoint 项目的主要配置文件介绍。这些文件定义了项目的依赖、配置选项、构建工具配置以及测试配置。

silverstripe-focuspointModule for improving automatic image cropping in SilverStripe. Adds simple art-direction control by allowing you to set and crop from a focus point instead of the centre point of an image.项目地址:https://gitcode.com/gh_mirrors/si/silverstripe-focuspoint