{"id":20519631,"url":"https://github.com/xiao555/webjucks","last_synced_at":"2025-08-21T16:24:42.931Z","repository":{"id":85749222,"uuid":"81103340","full_name":"xiao555/Webjucks","owner":"xiao555","description":"A front-end engineering solutions based on Webpack and Nunjucks","archived":false,"fork":false,"pushed_at":"2017-02-25T10:41:01.000Z","size":140,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-02T09:37:44.530Z","etag":null,"topics":["frontend-framework","nunjucks","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiao555.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-02-06T15:48:40.000Z","updated_at":"2018-01-21T15:52:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"10996afb-f78c-4e70-82fa-13062482ffd5","html_url":"https://github.com/xiao555/Webjucks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xiao555/Webjucks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiao555%2FWebjucks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiao555%2FWebjucks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiao555%2FWebjucks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiao555%2FWebjucks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiao555","download_url":"https://codeload.github.com/xiao555/Webjucks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiao555%2FWebjucks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271507247,"owners_count":24771823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend-framework","nunjucks","webpack"],"created_at":"2024-11-15T22:15:06.273Z","updated_at":"2025-08-21T16:24:42.907Z","avatar_url":"https://github.com/xiao555.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Webjucks\n\n各种聚会各种吃，拖了好几天...今天来更新一下...\n\n今天增加了数据模块，实现了数据模板分离的功能，这样算是可以方便的使用了，后面会进一步完善数据和模板，添加一些自定义函数等等，欢迎star以及提issue :-D\n\n### 项目结构\n\n```bash\n- web\n  - build                    # 打包生成的\n  - src           \n    - assets                 # 其他资源\n      - images             \n      - fonts \n    - posts\n      - *.html               # 数据\n    - scripts\n      - index.js             # 入口文件 \n    - styles\n      - styles               #css\n      - stylus\n        - *.styl         \n        - variables.styl     # 全局变量  \n      - index.js               # 入口文件\n  - views \n    - base.html              # 模板\n    - includes               # 引用的模块\n      - header.html\n      - footer.html  \n  - webpack.config.js        # webpack配置文件\n```\n\n### 使用\n\n那怎么来用 webjucks 来搭建自己的前端项目呢?\n\n#### HTML 和 数据\n\n从项目结构里能够看到，视图或者模板放在 `views` 目录下，同时在 `src/posts`目录下相应的创建html文件存放数据，内容如下：\n\n```html\n---\nlayout: index.html\ntitle: index\n---\ncontent\n``` \n在模板里使用如下：\n\n```html\n{{ title }}   // index\n{{ content }} // content\n```\n现在数据部分可以用md语法写，字段前面要加上`!!md`：\n```html\n---\nlink: !!md [link](www.example.com)\n---\n``` \n渲染后：\n\n```html\n\u003cp\u003e\u003ca href=\"www.example.com\"\u003elink\u003c/a\u003e\u003c/p\u003e\n```\n\n\n在html里img标签用到的图片会复制到build目录下：\n\n```\n// html\n\u003cimg src=\"assets/images/bg.jpg\"\u003e\n\n- root\n  - src/assets/images/bg.jpg  \n```  \nafter loader:\n```\n- root\n  - build/assets/images/bg.jpg \n  - src/assets/images/bg.jpg \n```\n\n我们采用的模板引擎是 [Nunjucks](https://mozilla.github.io/nunjucks/) ,后面会加上一些高级应用。\n\n#### CSS 和 JS\n\n数据模板好了，再来看看 `css` 和 `js` 怎么添加。从项目结构里也可以发现 `css` 和 `js` 都是放在 `src/styles` 和 `src/scripts` 里，而且这两个文件夹都有一个叫 `index.js` 的入口文件，用过 `webpack` 的童鞋就明白了，这个入口文件就是告诉 `webpack` 需要打包那些文件的。\n\n比如你要添加css和stylus文件：\n\n```js\n// src/styles/index.js\nimport './styles/style.css';\nimport './stylus/common.styl';\n```\n这样 Webpack 在打包的时候就会把这两个文件打包进去，另外 `src/styles/stylus/` 目录下有个 `variables.styl` 文件，这个文件是保存一些全局变量的，比如项目里需要用到的颜色，字体，排版，媒体查询，自定义函数等等，不用写进入口文件，在 Webpack 的配置文件里已经写进去了。另外配置文件还定义了一些`alias`，比如 `assets` 就代表 `src/assets` 目录，`assets` 目录用来放 images，fonts 等等静态资源，假如我们需要引用某个图片或者某个字体文件：\n\n```js\n// stylus\nbackground url('assets/images/img.jpg')\n\n// index.js\nimport 'assets/fonts/xxxx.css';\n```\n如果需要引用 `node_modules` 里的某个 package 的内容：\n\n```js\n// src/scripts/index.js\nimport 'copy!jquery/dist/jquery.min.js'\nimport $ from 'jquery'\nimport 'jquery-validation/dist/jquery.validate.js' // 导入 jquery-validation\n```\n解释一下前两行，`copy！` 是在配置文件中写好的，后面的js文件复制到 `build/assets` 里。\n`jquery` 也是写在配置文件中的。\n\n另外，引入了 [nib](https://github.com/tj/nib) 以及 [autoprefixer](https://github.com/postcss/autoprefixer), nib 的函数可以直接在styl里引用，例如 `common.styl` 里\n\n```css\nglobal-reset()\nnormalize-css()\n``` \nautoprefixer 可以自动给css属性添加前缀。\n\n#### 打包测试\n\n```javascript\nnpm install\nnpm start\n```\n 会自动转到浏览器浏览 `http://localhost:4000/` , 采用[Browsersync](http://www.browsersync.cn/) 热加载的，修改html, js，css会自动刷新。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiao555%2Fwebjucks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiao555%2Fwebjucks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiao555%2Fwebjucks/lists"}