bluff
1.0.0
Bluff 是一个用 Dart 编写的静态网站生成器,其灵感来自 Flutter 小部件。
为什么 ?
我开始这个项目是因为我厌倦了每次需要编写一个小型静态网站时都切换到js环境。我希望这个概念尽可能接近 Flutter,以保持开发用户界面的相同方式,而不是一次又一次浪费时间重新学习范例。
为什么不在 Web 上使用 Flutter?
只是因为我想要一个具有良好 SEO 的轻量级网站。不过,迁移到 Flutter Web 版应该非常简单。
一个简单的使用示例:
import 'package:bluff/bluff.dart' ;
Future main () async {
final app = Application (
availableSizes : [
MediaSize .small,
MediaSize .medium,
],
supportedLocales : [
Locale ( 'fr' , 'FR' ),
Locale ( 'en' , 'US' ),
],
routes : [
homeRoute,
],
);
;
await publish (app);
}
final homeRoute = Route (
title : (context) {
final locale = Localizations . localeOf (context);
if (locale.languageCode == 'fr' ) return 'Accueil' ;
return 'Home' ;
},
relativeUrl : 'index' ,
builder : (context) => Home (),
);
class Home extends StatelessWidget {
@override
Widget build ( BuildContext context) {
final mediaQuery = MediaQuery . of (context);
final theme = Theme . of (context);
return Column (
crossAxisAlignment : CrossAxisAlignment .stretch,
children : < Widget > [
Flex (
direction : mediaQuery.size == MediaSize .small
? Axis .vertical
: Axis .horizontal,
children : < Widget > [
Expanded (
child : Container (
height : 300 ,
decoration : BoxDecoration (
image : DecorationImage (
image : ImageProvider . asset ( 'images/logo_dart_192px.svg' ),
),
),
),
),
Padding (
padding : EdgeInsets . all ( 20 ),
child : Text ( 'Hello world!' ),
),
Container (
width : 200 ,
height : 200 ,
decoration : BoxDecoration (
color : const Color ( 0xFF0000FF ),
borderRadius : BorderRadius . circular ( 5 ),
boxShadow : [
BoxShadow (
color : const Color ( 0xAA0000FF ),
blurRadius : 10 ,
offset : Offset ( 10 , 10 ),
),
],
),
),
Image . asset (
'images/logo_dart_192px.svg' ,
fit : BoxFit .cover,
),
Click (
newTab : true ,
url : 'https://www.google.com' ,
builder : (context, state) {
return Container (
child : Text (
'Button' ,
style : theme.text.paragraph. merge (
TextStyle (
color : state == ClickState .hover
? const Color ( 0xFFFFFFFF )
: const Color ( 0xFF0000FF ),
),
),
),
padding : EdgeInsets . all ( 20 ),
decoration : BoxDecoration (
color : state == ClickState .hover
? const Color ( 0xFF0000FF )
: const Color ( 0x440000FF ),
borderRadius : BorderRadius . circular ( 5 ),
),
);
},
)
],
)
],
);
}
}