生财有迹（Wealth Tracker）是一款专注于个人资产分析的应用程序。其核心功能是：全面记录并展示用户的资产状况，帮助用户轻松了解财务现状；运用 AI 能力，结合每种资产的特性和当前环境，提供适宜的财务建议。 项目愿景 在当今多元化的经济环境中，个人资产管理变得日益重要。它往往分散于各类金融账户和服务中，例如银行存款与理财产品、移动支付平台（如微信支付、支付宝）、公积金、医保账户、货币基金（例如余额宝）、债券、各种股票及基金产品、房地产、贵金属、外部借款（尽量不做此配置🤫）以及其他投资等等（对于部分朋友，或许还有贷款、欠款等负债）。这些账户中的数额在不断变动，使得快速准确地了解个人总资产状况成为一项挑战。 本项目旨在提供一个高效、直观的解决方案，以应对个人资产管理中的分散性和复杂性。生财有迹专注于账户余额及整体数额，避免深陷于单笔收支的琐碎细节。其目标是通过简化操作流程，帮助用户揭示个人资产的整体变化趋势，并通过友好的用户界面，使用户能够轻松记录和洞悉自己的财务信息。如欲了解更多，可移步至博文：生财有迹 | 您专属的资产跟踪与分析工具。 核心特性 简洁易用的操作界面：用户可以通过几个简单的步骤快速上手，无需任何复杂的财务知识。 丰富的数据可视化：通过图表和图形，直观展示资产变化，帮助用户轻松掌握财务状况。 本地部署的灵活性：部署在哪里由用户决定，确保数据的私密性、安全性，以及可扩展性。 开源的代码架构：项目的源代码完全开放，欢迎参与贡献，以不断改进和完善工具的功能。 通过这些特性，希望建立一个用户友好、透明且可信赖的个人财分析工具，帮助用户更全面地掌握自己的财务状况。 在线体验 为了让您更直观地了解 生财有迹 的功能和特性，已在服务器上使用 pm2 部署了一个演示版本。该演示环境填充了模拟数据，方便您全面体验各项功能。无论您是想评估工具的实用性，还是出于好奇想一探究竟，欢迎访问以下链接进行体验： https://fund.niceshare.site/ 请注意，这是一个公共演示环境，因此请勿在其中输入任何真实的个人财务信息。建议您在体验后，考虑按照本文档的指导，在自己的环境中部署和使用”生财有迹”，以确保您的财务数据的隐私和安全。 如果您在使用过程中遇到任何问题或有反馈意见，欢迎通过项目的 GitHub 页面 与我们联系。您的宝贵意见将帮助我们不断改进这一工具，以更好地满足用户的需求。 先决条件 说明用户在安装和使用前，需要准备的一些先决条件，譬如：您需要安装或升级 Node.js（>= 16.*），推荐使用 Pnpm 或 Yarn 作为首选包管理工具。 如何使用？ 使用 Docker 使用 docker compose： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 version: '3.8' services: wealth-tracker: image: nicejade/wealth-tracker container_name: wealth-tracker ports: - '8888:8888' volumes: - ./data:/app/data restart: unless-stopped volumes: data: 这将在后台启动服务，并且效果与下面的 docker run 命令相同。使用 Docker Compose 可以更方便地管理多个容器，并且配置更易读和维护。 或者 docker run： 1 docker run -d -p 8888:8888 -v "$(pwd)/data:/app/data" nicejade/wealth-tracker 如果您在本地部署，只需打开网址——http://localhost:8888 即可访问。如果在服务器运行，可通过 http://[Server-IP]:8888 来访问，您也可以指定其他端口。 使用 Node.js 1 2 3 4 5 6 7 8 # clone project git clone https://github.com/nicejade/wealth-tracker.git # install & run for client cd client && pnpm i && pnpm start # install & run for srever cd server && pnpm i && pnpm start 本项目客户端采用 Svelte 框架，基于 Vite 所构建，默认 5173 端口，只需打开网址—— http://localhost:5173 即可访问。 命名由来 在项目开发初期，有为应用取中文名为：”财富追踪器”（英文名：Wealth Tracker）。这个名称初看简洁明了，似乎完美契合产品理念。然而，随着开发深入，逐渐显现出其局限性： 概念范畴过广：”财富”一词涵盖范围极广，不仅包括金钱资产，还可能指代时间、知识、经历，甚至是绝美容颜等无形价值。 功能定位不够精准：该应用实际上专注于能被精确计算和记录、且已经形成的有形资产，而非泛泛追踪所有形式的”财富”。 这种认知更新促使重新思考产品定位和命名。偶然想到了两个颇具启发性的成语：”生财有道”和”生财有术”；而应用的核心功能恰恰是记录资产增长的轨迹。基于这一灵感，最终确定将应用命名为”生财有迹“。这个名字巧妙地结合了几个要素： “迹”与”记”同音，暗示了记录的功能。 “生”与”升”同音，象征着资产的增长。 整体保留了”生财”的概念，与原有的资产主题保持一致。 “生财有迹”这个新名称不仅准确反映出产品功能定位，传达了产品理念，还蕴含了对用户资产增长的美好祝愿，希望您也会喜欢。 给予支持 生财有迹项目开源且免费，然而设计与编码需耗费时间和精力。如若您对其使用感到满意，请考虑通过以下方式进行小额捐赠： 微信扫码赞助 路线图 “生财有迹”项目正处于积极的设计和研发阶段，致力于在功能丰富与易用性之间寻求平衡，以满足用户日益增长的个人财务管理需求。未来开发重点包括增强数据可视化能力、加强数据安全性、以及提升 AI 辅助分析功能等。 更新资产数据记录； 资产数据可视化； 查阅数据记录详情； 设置阶段性目标； 资产数据安全性； 借助 AI 辅助分析； 特别鸣谢 本项目的开发过程中，依赖并受益于以下优秀的开源技术和工具（未包含全部）。它们不仅提供了强大的功能，还促进了项目的高效开发和稳定运行。 Svelte: 作为一种新兴的前端框架，Svelte 通过其创新的编译时技术，让我们的 Web 应用更加轻量和高效。它减少了我们需要编写的样板代码，同时提高了运行时的性能。 TailwindCSS: 通过提供实用主义的 CSS 类，TailwindCSS 极大地简化了样式设计的过程。它使得我们能够快速构建美观且响应式的用户界面，同时保持代码的清晰和维护性。 Vite: 作为一个现代化的前端构建工具，Vite 通过其快速的冷启动和即时的模块热更新，极大地提高了我们的开发效率。它利用了原生 ES 模块特性，使得项目构建更加高效。 Flowbite: 提供了一系列预构建的组件和模板，Flowbite 极大地加快了我们的开发流程。它帮助我们快速实现了复杂的用户界面元素，同时保持了代码的可定制性和可维护性。 Axios: 作为一个基于 Promise 的 HTTP 客户端，Axios 简化了我们的 Web 应用中与 API 的交互。它的易用性和广泛的功能集使得我们能够轻松处理 HTTP 请求和响应。 Day.js: 作为一个轻量级的 JavaScript 日期库，Day.js 提供了直观的 API 来处理日期和时间。它使得我们在应用中处理复杂的日期计算变得简单且可靠。 Node.js: 作为一个高效的 JavaScript 运行环境，Node.js 使得服务器端开发变得前所未有的简单和快速。它的事件驱动和非阻塞 I/O 模型极大地提高了我们的应用性能和响应速度。 Fastify: 这个高性能的 Node.js Web 框架为我们提供了一个简单且强大的接口来构建 RESTful API。它的低开销和高度可扩展性使得我们的后端服务既快速又稳定。 SQLite3: 作为一个轻量级的数据库引擎，SQLite3 为我们提供了一个无需配置的本地存储解决方案。它的简单性和高效性使得开发者在本地部署应用时能够轻松管理数据。 Sequelize: 作为一个强大的 ORM 框架，Sequelize 为我们提供了一种简单且直观的方式来管理数据库关系。它的灵活性和功能丰富性使得我们能够轻松实现复杂的数据操作和查询。 在此，对上述技术和工具的开发者和社区，致以崇高的敬意和衷心的感谢❤️。正是得益于他们的卓越贡献，生财有迹才能得以成功构建并持续优化。同时，也要感谢如 ChatGPT、Github Copilot、Poe、Kimi 等 AI 工具在开发过程中提供的宝贵支持，它们显著提高了工作效率和体验。
Tailwind CSS，在 Web 开发领域，已经成为各种框架、开发人员标配；已经有大量实例证明，基于 Tailwind CSS 来编写样式，可以为开发者节省诸多时间；而且，能够优化减小代码体积、提升运行性能，是非常棒的技术套件。 快应用 开发，同样基于 Web 技术栈，理论上也完全可以使用 Tailwind CSS；在实际开发过程中，该如何使用 Tailwind CSS 呢？本文旨在对此做些许分享。 Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板的类名，生成相应的样式，然后将它们写入静态 CSS 文件。它快速、灵活、可靠，且运行时间为零。官方提供 Tailwind CLI 、PostCSS、Play CDN 等使用方式；下面主要讲下如何基于 Tailwind CLI 方式，在应用开发中使用 Tailwind CSS： Tailwind CSS 可为快应用开发带来哪些好处？ Tailwind CSS 是一种现代的 CSS 框架，它提供了一组预定义的 CSS 类，用于快速开发现代 Web 应用程序。Tailwind 的核心理念是为开发者提供一种灵活的方法来构建自定义的 UI 组件，而不需要编写大量的 CSS 代码。 Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板的类名，生成相应的样式，然后将它们写入静态 CSS 文件。它快速、灵活、可靠，且运行时间为零。 在快应用开发中引入，可以为项目带来四方面的好处：更快的编写效率、更小的代码总体积、更高的运行效率、更易于项目维护。更详细说明如下： 预定义的 CSS 类可以减少样式的冗余，从而减小 CSS 文件的体积。 大量配套设施，可以提高开发效率，不必手动编写大量的 CSS 代码。 提供了自动优化工具，可以删除未使用的 CSS 代码。 代码体积减小，可以减少下载、加载、解析等步骤耗时。 使 CSS 样式更规范化，避免冗余的样式和复杂的选择器，优化性能。 拥有活跃的社区和文档，可以帮助开发者快速上手和解决问题。 Tailwind CSS：当今最流行 CSS 框架；相信借助其巧妙设计、结合强大生态，您也会偏爱用它来塑造 UI；如果必须要手动编码：那无需频繁滚动编辑区，无需于 template 与 style 之间横跳，无需绞尽脑汁为类命名，无需再编写重复的 CSS……是多么美妙。 如何在项目中使用 Tailwind CSS？ 安装 Tailwind CSS 依赖 通过 npm 安装 tailwindcss 并创建 tailwind.config.js 文件，具体命令如下： 1 2 3 4 pnpm install -D tailwindcss # OR # npm install -D tailwindcss npx tailwindcss init 配置您的模板路径 在文件中添加所有模板文件的路径 tailwind.config.js，参考性配置如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 const colors = require('tailwindcss/colors') const selfCustomColors = { brand: { DEFAULT: '#1e293b', }, warn: { DEFAULT: '#f59e0b', }, link: { DEFAULT: '#0ea5e9', }, mark: { DEFAULT: '#ff4582', }, } module.exports = { mode: 'jit', content: [ './src/**/*.{ux,html,js,svelte,vue,ts}', './node_modules/flowbite/**/*.js', ], purge: { enabled: true, content: [ './src/**/*.{ux,html,js,svelte,vue,ts}', './node_modules/flowbite/**/*.js', ], }, // https://tailwindcss.com/docs/configuration#core-plugins corePlugins: { preflight: false, // disable base/reset styles container: false, // disable container component content: false, // disable `content` utility accentColor: false, // disable `accent-color` utility accessibility: false, // disable `appearance` utility appearance: false, // disable `appearance` utility aspectRatio: false, // disable `aspect-ratio` utility backgroundOpacity: false, // disable `background-opacity` utility backdropBlur: false, // disable `backdrop-blur` utility backdropBrightness: false, // disable `backdrop-brightness` utility backdropContrast: false, // disable `backdrop-contrast` utility backdropGrayscale: false, // disable `backdrop-grayscale` utility backdropHueRotate: false, // disable `backdrop-hue-rotate` utility backdropInvert: false, // disable `backdrop-invert` utility backdropOpacity: false, // disable `backdrop-opacity` utility backdropSaturate: false, // disable `backdrop-saturate` utility backdropSepia: false, // disable `backdrop-sepia` utility blur: false, // disable `blur` utility borderCollapse: false, // disable `border-collapse` utility borderOpacity: false, // disable `border-opacity` utility borderSpacing: false, // disable `border-spacing` utility boxShadow: false, // disable `box-shadow` utility boxShadowColor: false, // disable `box-shadow-color` utility boxDecorationBreak: false, // disable `box-decoration-break` utility boxSizing: false, // disable `box-sizing` utility breakAfter: false, // disable `break-after` utility breakBefore: false, // disable `break-before` utility breakInside: false, // disable `break-inside` utility brightness: false, // disable `brightness` utility captionSide: false, // disable `caption-side` utility caretColor: false, // disable `caret-color` utility clear: false, // disable `clear` utility contrast: false, // disable `contrast` utility divideColor: false, // disable `divide-color` utility divideOpacity: false, // disable `divide-opacity` utility divideStyle: false, // disable `divide-style` utility divideWidth: false, // disable `divide-width` utility float: false, // disable `float` utility fontVariantNumeric: false, // disable `font-variant-numeric` utility hyphens: false, // disable `hyphens` utility isolation: false, // disable `isolation` utility lineClamp: false, // disable `line-clamp` utility mixBlendMode: false, // diable `mix-blend-mode` utility listStyleImage: false, // disable `list-style-image` utility listStylePosition: false, // disable `list-style-position` utility listStyleType: false, // disable `list-style-type` utility objectPosition: false, // disable `object-position` utility opacity: false, // disable `opacity` utility outlineColor: false, // disable `outline-color` utility outlineOffset: false, // disable `outline-offset` utility outlineStyle: false, // disable `outline-style` utility outlineWidth: false, // disable `outline-width` utility overscrollBehavior: false, // disable `overscroll-behavior` utility placeContent: false, // disable `place-content` utility placeItems: false, // disable `place-items` utility placeSelf: false, // disable `place-self` utility placeholderOpacity: false, // disable `placeholder-opacity` utility resize: false, // disable `resize` utility ringColor: false, // disable `ring-color` utility ringOffsetColor: false, // disable `ring-offset-color` utility ringOffsetWidth: false, // disable `ring-offset-width` utility ringOpacity: false, // disable `ring-opacity` utility space: false, // disable `space-between` utility textDecorationThickness: false, // disable `text-decoration-thickness` utility textOpacity: false, // disable `text-opacity` utility textTransform: false, // disable `text-transform` utility textUnderlineOffset: false, // disable `text-underline-offset` utility touchAction: false, // disable `touch-action` utility userSelect: false, // disable `user-select` utility verticalAlign: false, // disable `vertical-align` utility whitespace: false, // disable `whitespace` utility wordBreak: false, // disable `word-break` utility willChange: false, // disable `will-change` utility }, darkMode: false, theme: { colors: { ...colors, ...selfCustomColors }, extend: { width: ({ theme }) => ({ auto: 'auto', ...theme('spacing'), }), height: ({ theme }) => ({ auto: 'auto', ...theme('spacing'), }), spacing: { '1/2': '2px', '1': '4px', '3/2': '6px', '2': '8px', '5/2': '10px', '3': '12px', '7/2': '14px', '4': '16px', '5': '20px', '6': '24px', '7': '28px', '8': '32px', '9': '36px', '10': '40px', '11': '44px', '12': '48px', '14': '56px', '16': '64px', '20': '80px', '24': '96px', '28': '112px', '32': '128px', '36': '144px', '40': '160px', '44': '176px', '48': '192px', '52': '208px', '56': '224px', '60': '240px', '72': '288px', '80': '320px', '96': '384px', }, borderWidth: { 'DEFAULT': '1px', '0': '0px', '2': '2px', '4': '4px', '8': '8px', }, borderRadius: { 'none': '0', '': '1px', 'sm': '2px', 'DEFAULT': '4px', 'md': '6px', 'lg': '8px', 'xl': '12px', '2xl': '16px', '3xl': '24px', }, fontSize: { 'xm': ['12px', { lineHeight: '16px' }], 'sm': ['14px', { lineHeight: '20px' }], 'base': ['16px', { lineHeight: '24px' }], 'lg': ['18px', { lineHeight: '28px' }], 'xl': ['20px', { lineHeight: '28px' }], '2xl': ['24px', { lineHeight: '32px' }], '3xl': ['30px', { lineHeight: '36px' }], '4xl': ['36px', { lineHeight: '40px' }], '5xl': ['48px', { lineHeight: '60px' }], '6xl': ['60px', { lineHeight: '60px' }], '7xl': ['72px', { lineHeight: '60px' }], '8xl': ['96px', { lineHeight: '60px' }], '9xl': ['128px', { lineHeight: '60px' }], } }, }, variants: { extend: {}, }, plugins: [], } 将 Tailwind 指令添加到您的 CSS 中 @tailwind 将 Tailwind 每个层的指令添加到您的主 CSS 文件中。 1 2 3 4 5 /* input.css */ /* @tailwind base; */ @tailwind components; @tailwind utilities; 启动 Tailwind CLI 构建过程 运行 CLI 工具来扫描模板文件中的类并构建 CSS，参考性命令如下： 1 npx tailwindcss -i ./src/input.css -o ./src/output.css --watch 这是看起来路径简短的方式，实际上这个 input.css 和 output.css，无论是名字，或是它存在的路径，皆可以自行指定，您可以按照自己喜欢的方式、或是团队约定俗成的形式；譬如统一存放在：src/assets/styles 目录下。 需要补充说明的是：在团队开发中，输入上述命令，略显繁琐，可以在 package.json 注入命令（如下示例）；如此以下，您只需在「终端」运行 pnpm tailwindcss 或 npm run tailwindcss 命令即可。 1 2 3 "scripts": { "tailwindcss": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch", } 开始在 UX 中使用 Tailwind CSS 将已编译的 CSS 文件，在 .ux （非 app.ux）文件中，通过 @import 方式引入； 1 2 3 @import './../../output.css'; 现在，即可在 .ux 的 template 中，开始使用 Tailwind 的实用程序类来设置内容的样式，如下面这段代码示例： 1 2 3 4 5 6 TailwindCSS Area Awesome TailwindCSS 当您写完保存之后，打开 output.css 即可如下的 CSS 代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /* @tailwind base; */ .flex { display: flex } .w-full { width: 100% } .flex-col { flex-direction: column } .items-center { align-items: center } .justify-center { justify-content: center } .bg-blue-300 { background-color: #93c5fd } .text-red-600 { color: #dc2626 } 至此，在 快应用 开发中引入 Tailwind CSS 的准备工作，已经初步完成，您可以与 Tailwind CSS 开启愉快合作之旅，从而促使高效编码、提前完工。假如，您对 Tailwind CSS 尚不熟悉，可通过查阅 Tailwind CSS Doc ，亦可在线体验—— Tailwind Playground 。 需要补充说明的是，使用 Tailwind CSS 并不破坏您原来的 CSS 书写✍🏻方式；您完全可以结合喜欢的预处理器（如 Sass、Less、Stylus），来共同工作，而无需做更多设置（如下代码示例）；但我以为当您熟悉 Tailwind CSS 之后，大有可能也会“移情而别恋”。 1 2 3 4 5 6 7 8 9 10 11 12 @import './../../assets/styles/style.scss'; @import './../../assets/styles/output.css'; .primary-btn { width: 90 * $size-factor; height: 16 * $size-factor; background-color: $brand; border-radius: 8 * $size-factor; color: $white; } 如何基于 Tailwind CSS 提升开发效率？ 安装 Tailwind CSS IntelliSense 扩展 您可以在应用开发工具的「扩展市场」，通过关键字 Tailwind 检索”Tailwind CSS IntelliSense“扩展——适用于 Visual Studio Code 的智能 Tailwind CSS 工具，用户提供自动完成、语法突出显示和 linting 等高级功能来增强 Tailwind 开发体验；略作适配即可支持 *.ux；详细设置，可参见： Tailwind CSS IntelliSense 。 默认情况下，编辑“字符串”内容时（例如在 JSX 属性值中），开发工具中不会触发完成。更新设置 editor.quickSuggestions 可能会改善您的体验： 1 2 3 "editor.quickSuggestions": { "strings": "on" } 参考基于 Tailwind CSS 组件的开源库 Tailwind CSS 生态发展繁荣超乎想象，就连其衍生产品也不可胜数；如 Flowbite ——包含 600 多个 UI 组件、部分和页面的开源库进行开发，该库使用 Tailwind CSS 的实用程序类构建并在 Figma 中设计。它不仅能充当 Tailwind CSS 插件使用，也可以拷贝到项目直接使用，还可以在线查阅效果（支持多种屏幕设备类型），挑选匹配实现方案；在仍是基于组件树构建页面的时代，极大提升页面搭建效率。如： pagination 组件： 常见问题及说明 如果您熟悉 Web 开发，针对上述教程，您可能会有诸多疑惑；实际上，笔者在实践之时，也有发现，只不过因为各种机制限制，目前只能如此。下面就与诸君分享，期可解惑： 不能在 script 标签中，引入输出 CSS 文件么？ 按 Web 开发习惯，在 app.ux 文件中可以直接 import 输出 CSS 文件（如下代码所示），那为何未建议如此呢？ 1 2 3 import './output.css' 因为这样做会报如下错误；具体是缺乏与之匹配的 loader；当然，可以使用 css-loader 和 style-loader 来处理 CSS 文件，详见 ChatGPT | You may need an appropriate loader…. 。 1 2 3 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | /* @tailwind base; */ 但在快应用开发过程中，却不能生效；因为 style-loader 的作用是将 CSS 注入 DOM，其中用到了诸多浏览器 API（document），而快应用的开发虽然是基于前端技术栈，但其运行环境止于 v8，实际的渲染是由 Android 底层完成，并未走浏览器这条路，因此无法工作。在构建工具优化、兼容之前，通过 style 标签中引入 CSS，成了主要选择。 为何在 tailwind.config.js 禁用如此多样式？ Tailwind corePlugins 部分允许您完全禁用 Tailwind 通常默认生成的类（如果您的项目不需要它们）；这个设计对于快应用实在必要的紧，在上述示例中，对 text-opacity 等样式进行禁用，也是无奈之举。具体原因在于以下两点： 其一：快应用标准虽然基于 Web 技术栈，但只是 Web 标准子集，如蛮多 CSS 属性并不能很好的支持；其二：默认情况下，TailwindCSS 会将样式属性的值存储为 CSS 变量（例如 --tw-text-opacity），以便进行动态计算和响应式设计。 如此一来，在 template 中使用类 text-red-300、border-spacing-1，输出的便是如下 CSS；这样的写法，在快应用中并不能得到正确解析，也就无法起到期待效果，于是禁用便成了必须要做之事。当然，这样禁用也好处：利于输出更小提及的 CSS 文件。其他属性亦复如是。 1 2 3 4 5 6 7 8 9 .text-red-300 { --tw-text-opacity: 1; color: rgb(252 165 165 / var(--tw-text-opacity)) } .border-spacing-1 { --tw-border-spacing-x: 4px; --tw-border-spacing-y: 4px; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y) } 为何要在 input.css 中移除 @tailwind base; ？ 这么做主要未解决问题： How disable default styles for : before and : after 。 1 2 3 4 5 /* input.css */ /* @tailwind base; */ @tailwind components; @tailwind utilities; 在一般 Web 开发过程中，会将 base、components、utilities 等指令，都添加到 CSS 文件项目中；但，在快应用开发过程中，这无疑是累赘；因为它的存在，会使得 output.css 输出较多对项目没有裨益额外内容（如下代码所示），故而移除；这与通过 corePlugins 禁用基础样式（preflight）、禁用容器组件（container）作用类似。 1 2 3 4 5 6 7 8 *, ::before, ::after { --tw-border-spacing-x: 0; ...... } ::backdrop { --tw-border-spacing-x: 0; ...... } 为什么要在配置中通过 theme 自定义长度单位？ 修改长度单位从 rem 到 px，这也是不得已而为之。 快应用 标准对 长度单位 的支持，在 1070 及以下版本仅支持长度单位 px 和 %。从 1080 版本开始，新增了长度单位 dp。它无法支持 rem，就只能自定义设置为 px；在通过 theme 自定义长度单位，是 Tailwind CSS 官方提供的功能，以此能够实现更精细的样式控制；虽然操作不难，但属性较多、约定繁杂。后续时间如果允许，将探索 rem to px 批量转换插件来实现，以达到快速修改。如果您感兴趣，可以查阅 Tailwind CSS 完整版本配置—— config.full.js 。 其他暂未解决问题 少部分类名写法，快应用构建不支持 在 Tailwind CSS 机制中，支持使用类名诸如 h-[100px] w-1/3 （对应生成 CSS 如下），然而，在快应用构建工具暂不支持这类名，于是乎这样写便不会生效，当然也不会造成什么问题；后续亟待打包工具优化。 1 2 3 4 5 6 .h-\[100px\] { height: 100px } .w-1\/3 { width: 33.333333% } 在打包（Toolkit）未解决该问题之前，您可以手动写一个 class，或者使用内联样式（style）来兼容；在这种情况下，更推荐后者；因为引入 Tailwind CSS 的开发模式中，基本不用手写 class，即无需滚动到 style 标签或跳转 less、(s)css、文件，那么直接在 template 中使用内联更为便捷。 1 2 3 4 5 6 7 .training-list-width { width: 326px; } 快应用构建，资源存在重复引用问题 前文中提到，在 script 标签中 import CSS 资源，暂时未得到支持；但，在 style 标签中 @import 的 CSS 文件，被 A、B 两个页面（*.ux）引入，那么对应的 css 内容，就会被打入对应页面（即便有的内容没有被使用），从而导致代码体积略有增加（即便参考 如何优化「快应用」rpk 包体积？ 一文中的方法，也不可避免）。这是快应用构建本身存在的问题，使用 Tailwind CSS 也不例外。后续需要打包工具优化。 以上，就是在 快应用 开发过程中，引入 Tailwind CSS 所需的操作、以及常见问题说明。肯定还有异常更多情况没有考虑到，后续会逐步补充；如果您在实际运用过程中，欢请留言交流、反馈、分享。 2023 年 07 月 05 日写于〔深圳福田〕 猜您可能感兴趣的文章 快应用如何基于真机调试正式包（rpk）？ 快应用如何快速安装并运行 rpk 包？ 快应用如何基于 watch computed 监听多个变量？ 如何在快应用开发中使用 vuex 做状态管理 快应用 IDE 配置 babel.config.js 的前世今生 快应用开发工具入门介绍 Chrome 为何无法通过 url 拉起快应用？ 团队开发快应用，如何统一代码风格？ 如何用 Prettier 美化您的快应用代码？ 如何通过 IDE 的预检测功能提高审核通过率 如何优雅地配置快应用的代码片段 如何基于 Typescript 开发快应用 快应用开发中，如何区分各种环境？ 快应用官方加载动画库：qa-spin
晚晴幽草轩 于 2014 年，采用 Hexo 所搭建；专注互联网开发，以及分享优质网站、AI 应用、效率工具、心得感悟等内容；至今已近 9 年。只不过它是本地 Markdown 静态博客，不能随时在线更新，已然不适如今之快节奏；每有新的见闻、感悟，有在以下几个在线平台进行记载： 倾城之链：基于 Vue2、Node.js 等技术栈，所搭建的在线导航平台，用以记录所遇见的有价值网站，每周定期更新。 静轩之别苑，由 Ghost 所驱动，2019 年 元月基于 Docker 部署于阿里云服务器，用于记录技术相关心得。 悠然宜想亭， 2021 年 3 月 基于 Flarum（一款优雅简洁论坛软件）所搭建的“社区型个人博客”，至今有记录文章近 300 篇，不定期更新。 半缘修道观 ，2022 年 11 月，基于 Memos 、 Docker Compose 所搭建的“个人微博/推特/备忘录📕”，用于记录学习、感悟、电影、投资、娱乐、科普、代码、 ChatGPT 等相关内容，不到半年已记录近 200 条，是目前更新最为频繁的平台。 除此之外，闲暇时间，有构建些 Web 应用，诸如：玉桃文飨轩 （Markdown 在线转图片）、素问智聊斋（ChatGPT 在线客户端），感兴趣朋友可移步以了解更多。后续如果有写值得分享的长篇，依旧会同步至「晚晴幽草轩」。 2025 年 5 月 02 日写于〔深圳福田〕
素问智聊斋，非官方 ChatGPT 在线客户端，旨在提供更便捷的 ChatGPT 访问体验；它基于非官方 ChatGPT API 、 Svelte 、 TailwindCSS 、 Vite 和 NodeJS 所搭建，无需账号，零配置，即可与 ChatGPT 畅聊；支持自定义 OPENAI API KEY。 目标与哲学 OpenAI 于 2022 年 11 月推出的超级对话模型 ChatGPT， 受到来自世界各地的认可和赞誉，令人印象深刻。然而，由于一些原因，如果没有正确搭建相应的环境（🪜），ChatGPT 在部分地区就无法正常使用。鉴于此，搭建了这个服务，以便用户能够方便地使用 ChatGPT。当然，条件允许您可前往 OpenAI 官网上注册、登录、申请专属 API KEY。此外，为了保障用户的数据安全，本服务的操作过程中不会存储任何使用者的数据，因此可以放心使用（备注：这段介绍有使用本服务加以润色）。 适用场景 没有注册 Open AI 账号，导致无法使用 ChatGPT 时； 因为网络环境限制，无法正常使用 ChatGPT 时； 具备账号，想让远方亲人、朋友快速体验 ChatGPT； 补充说明：承诺后台不会保存任何数据；基于 API KEY 发起的对话内容，会同步到对应账号；如果您习惯使用桌面客户端，类似项目有： lencx/ChatGPT 。 诞生初衷 最原始的动机，是因为：以上两点适用场景所对应的诉求，我觉得都需要。但，这并不足以缘起这个项目，更详细的阐述如下： 作为颇爱折腾的技术人员，ChatGPT 自然是要体验；有请时在美国的朋友，帮着注册®️了账号；然而，蛮多时候即便采用科学上网，设备却无法成功登陆 ChatGPT 官网地址 。恰逢一个契机——帮朋友写几行关于 ChatGPT 的示例；当痛点（Motivation：动机）碰上可执行性（Ability：能力），外加适当的 触发条件 （Trigger），福格行为模型（BJ Foog’s Behaviour Model）已全部满足，于是乎， 素问智聊斋 就有了诞生的充足理由。 命名来源 早在 关于“悠然宜想亭”的由来，以及未来 一文提及，对于网站取名多是五个字；或是兴趣的原因，其后缀带有 亭台楼阁、轩榭廊舫，殿庭苑斋 其中一个；其中大部分已被使用；因为「Chat」的应为对应的是「对话、聊天」；于是，「斋」字就这么定下；AI 对应智能，所以「智聊」也就应景而生。 原本命名为「智聊问异斋」，后觉不妥，略阅资料，遂修改为 素问智聊斋；素问：最早或于《黄帝内经》；釋名：“「素者，本也；問者，黃帝問於岐伯也」”。另有解释为：“ 即问本，探索人与自然的根本性问题 ”。当想 ChatGPT 说：“解释下「素问」”，它给出以下解释： 「素问」是一种中国古代哲学思想，它强调对本质的探究。它的核心思想是：任何事物都有其本质，而且这个本质不受时间和空间的束缚，所以要理解它，就必须通过探究本质来探索事物的真相。 技术选型 前端采用了 Svelte 、 TypeScript 、 TailwindCSS 、 Flowbite 、 MDSvex 、 Vite 、 等流行技术栈，而后台则采用 Fastify 框架；在服务器上，则基于 Nginx 、 pm2 进行部署；其中 Svelte、TailwindCSS、MDSvex 等工具，极大提升了编写代码的舒适度，令人青睐有加。 思考感悟 关于 ChatGPT（或其他 AI 产品），相信接触过它的人们，或多或少都会有自己的感受；目前为止，吾有以下几点看法： 类似 ChatGPT 这样的 AI 产品，必将像如今的手机一般，成为绝大部分人类生活必需品，这很难以人类意志为转移； 毕竟是工具，使用乃至产生依赖，倒无不可；但也不能荒废自身，我辈仍须保持深度学习习惯，及提高学习能力； AI 会进而加剧人与人之间的差异；因为不喜欢折腾或探究新鲜事物的人，很难尽早去接触它，而是等时代浪潮拍打过来。 未来规划 新注册 Open AI 账号，为 API Key 调用费用赠送 18$，为期三个月；4 月 1 日过期之后，为使得服务能够正常运行，有继续购买它的服务。ChatGPT 的价格为：0.002 美元 1000 个 tokens（约为 750 个英文单词），GPT4 则更贵一些；当使用费用超过所能承受的能力，外加服务器使用费用，或可能考虑植入定量商业化措施。现如今，如果您认为 素问智聊斋 对您有一定价值，可以考虑为发起 赞助 。 其他作品 倾城之链 曼妙句子 玉桃文飨轩 悠然宜想亭 静轩之别苑 晚晴幽草轩 以上介绍内容，部分使用 ChatGPT 加以润色 。截止目前，它可以协助人类，已经很多，诸如学术论文、内容创作、翻译、数据分析、研究咨询、简历和求职信、广告文案、编写小说、个人陈述、 SEO 优化等等，如果想让它更好帮助到您，可以移步 ChatGPT 中文调教指南 ，学习怎么让它在不同场景，更好听理解您的指令。 您可能感兴趣的文章 为什么说 WebAssembly 让 Web 的未来更光明？ NPM 如何发布和使用带范围（scope）的包？ 如何基于 Espanso 提高打字效率，提升幸福感？ 如何更提升各类网站 PC 端访问体验？ Awesome Chrome 插件集锦 Vimium 让您的 Chrome 起飞 那些所倚靠的利器记载 Win 下最爱效率神器: AutoHotKey Win 下必备神器之 Cmder 新编码神器 Atom 使用纪要 sublime text 下的 Markdown 写作 SublimeText 下写作利器之 MarkdownEditing Mac 必备软件渐集之 ZSH－终极 Shell
WebAssembly 堪称一个革命性的技术，它给 Web 带来了更多的可能性，对于 CPU 密集型的应用，比如图片、音频、视频、直播、机器学习、AR、VR、游戏、在线会议、在线文档、在线 IDE、在线游戏等等，WebAssembly 既可以帮助 Web 突破性能瓶颈，也可以让 Web 得以利用其他语言的代码库。随着越来越多业务跟服务转战云端，基于 Web 本身优势，外有 WebAssembly 技术性能加持，在可预见的未来，WebAssembly 可让 Web 再次绽放。 WebAssembly 历史起源 WebAssembly 起源于 Mozilla 员工的一个业余项目。2010 年，在 Mozilla 从事 Android Firefox 开发的 Alon Zakai，为了把他以前开发的游戏引擎移植到浏览器上运行，利用业余时间开发了一款名叫 Emscripten 的编译器，可以把 C++ 代码通过 LLVM IR 编译成 JavaScript 代码。 到了 2011 年底，Emscripten 甚至能够成功编译 Python 和 Doom 等大型 C++ 项目，Mozilla 此时觉得这个项目很有前途，于是成立团队并邀请 Alon 全职开发这个项目。2013 年 Alon 和其他成员一起提出了 asm.js 规范，asm.js 是 JavaScript 语言的一个严格子集，试图通过“减少动态特性”和”添加类型提示“的方式帮助浏览器提升 JavaScript 优化空间。相较于完整的 JavaScript 语言，裁剪后的 asm.js 更靠近底层，更适合作为编译器目标语言。 asm.js 只提供两种数据类型：32 位带符号整数，64 位带符号浮点数，其他数据类型比如字符串、布尔值或者对象，asm.js 一概不提供，它们都是以数值的形式存在，保存在内存中，通过 TypedArray 调用。类型的声明也有固定写法：变量 | 0 表示整数，+变量 表示浮点数。例如下面一段代码： 1 2 3 4 5 6 7 8 9 function MyAsmModule() { "use asm"; // 告诉浏览器这是个 asm.js 模块 function add(x, y) { x = x | 0; // 变量 | 0 表示整数 y = y | 0; return (x + y) | 0; } return { add: add }; } 支持 asm.js 的引擎提前识别出了类型，可以进行激进的 JIT（即时编译）优化，甚至是 AOT（事先编译）编译，大幅提升性能。不支持 asm.js 按普通 JavaScript 代码执行也不会影响运行结果。 但是 asm.js 的缺点也很明显，那就是“底层”得不够彻底，例如代码仍然是文本格式；代码编写仍然受 JavaScript 语法限制；浏览器仍然需要完成解析脚本、解释执行、收集性能指标、JIT 编译等一系列步骤。如果采用像 Java 类文件那样的二进制格式，不仅能缩小文件体积，减少网络传输时间和解析时间，还能选用更接近机器的字节码，这样 AOT/JIT 编译器实现起来会更轻松，效果也更好。 与此同时，Google 的 Chrome 团队也在试图解决 JavaScript 性能问题，但方向有所不同。Chrome 给出的解决方案是 NaCl（Google Native Client）和 PNaCl（Portable NaCl）。通过 NaCl/PNaC1，Chrome 浏览器可以在沙箱环境中直接执行本地代码。 asm.js 和 NaCl/PNaC1 技术各有优缺点，二者可以取长补短。Mozilla 和 Google 也看到了这一点，所以从 2013 年开始，两个团队就经常交流和合作。后来他们决定结合两个项目的长处，合作开发一种基于字节码的技术。到了 2015 年，“WebAssembly” 确定为正式名称并对外公开，W3C 成立了 WASM 社区小组（成员包括 Chrome、Edge、Firefox 和 WebKit），致力于推动 WASM 技术的发展。 2016 年 Rust 1.14 发布，开始支持 WASM。 2017 年 Google 决定放弃 PNaCl 技术；四大浏览器 Chrome、Edge、Safari、Firefox 更新版本开始支持 WASM。 2018 年 Go 1.11 发布，开始支持 WASM。 2019 年 Emscripten 更新为默认使用 LLVM 编译为 WASM 代码，停止对 asm.js 的支持；WebAssembly 成为万维网联盟（W3C）的推荐标准，与 HTML，CSS 和 JavaScript 一起成为 Web 的第四种语言。 2021 年 1 月 6 日，Wasmer（🚀支持 WASI 和 Emscripten 的领先 WebAssembly 运行时） 1.0.0 版本发布。 2022 年 09 月 20，Wasmtime（WebAssembly 的快速安全运行时） 的官方 1.0 版本发布。 全面认识 WebAssembly WebAssembly 诞生背景 Web 平台的成熟催生了复杂而苛刻的网络应用，如交互式三维可视化，音频和视频软件，以及游戏。随着伴随着这一点，Web 上代码的效率和安全性变得比以往更加重要。然而，作为唯一的网络内置语言——JavaScript 并没有很好地满足这些要求，特别是作为编译目标。来自四个主要浏览器供应商的工程师们迎接挑战，合作设计了一个可移植的低级字节码，称为 WebAssembly 。它提供了紧凑的表示、高效的验证和编译，以及安全的低至无开销的执行。WebAssembly 不是致力于一个特定的编程模型，而是 WebAssembly 是对现代硬件的抽象，使其与语言、硬件和平台无关，其使用范围不只是 Web 浏览器；就目前而言，Node.js、Deno、 WebAssembly 运行时 等环境都可使用。 WebAssembly 是什么？ WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C / C ++ 等语言提供一个编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。WebAssembly 是可移植、体积小、加载快并且兼容 Web 浏览器的全新类汇编语言格式，其具有高效、安全、开放、标准等特性。 WebAssembly （缩写为Wasm）是基于堆栈的虚拟机的二进制指令格式。其设计目的不是为手写代码，而是为诸如 C、C++、Rust 等低级语言提供一个高效的、可移植的编译目标，支持在 Web 上部署客户端和服务器应用程序。 WebAssembly 试图取代 JavaScript 吗？ 不会。在 WebAssembly 常见问题 中，作者给出了明确说明：“WebAssembly 旨在补充而非替代 JavaScript。随着时间的推移，WebAssembly 将允许许多语言被编译到 Web，而 JavaScript 具有令人难以置信的势头，并将继续保持 Web 的单一、特权（ 如上所述 ）动态语言。此外，预计 JavaScript 和 WebAssembly 将在许多配置中一起使用”。 理解 WebAssembly 文件格式 源代码（source code）：由开发者基于 JavaScript、TypeScript 等编程语言直接提供，主要用来给人类阅读、维护的文本格式。即便是压缩、混淆后，依然是文本格式。 AST：抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法，并不会表示出真实语法中出现的每个细节。 汇编代码：（Assembly Code），是介于高级语言和机器码之间的一种中间语言（也是人看的懂的语言）。它比机器代码高一级，比高级语言低一级。而且，它的语法类似于英语，但比高级编程语言更难。它经过转译最终也会成为机器码，所以抽象上来说，它和字节码是同一级别的。可以简单将其理解为机器语言的助记符，便于人们理解和记忆。像用地址符号（Symbol）或标号（Label）代替指令或操作数的地址，常见的 x86 汇编指令有 MOV、PUSH、POP 等。 字节码：（Byte Code）是一种包含 执行程序、由一序列 OP 代码(操作码)/数据对 组成的二进制文件。 字节码是一种 中间码，它比机器码更抽象，需要 直译器转译 后才能成为机器码的中间代码（通常不是人类可读的语言）。 机器码：(Machine Code)，学名 机器语言指令，有时也被称为 原生码（Native Code），是电脑的 CPU 可直接解读 的数据（即计算机只认识 0 和 1）。 WebAssembly 文本格式 ：推荐扩展名是 .wat（WebAssembly Text Format），是另外一种输出格式，是使用 “S- 表达式” 的文本格式，可以近似理解为与二进制等价的汇编代码。部分浏览器的开发者工具支持将 WASM 转换成 WAT 查看，便于在线调试。社区提供了 wasm2wat 和 wat2wasm 等成熟的工具将二者进行转换，可以在 WebAssembly/wabt (WebAssembly Binary Toolkit) 工具集中找到，所以也是可以直接编写 WAT 再转换成 WASM。 WebAssembly 二进制格式（.wasm） ：WebAssembly 的最终形式，是一种低级字节码，基于 16 进制表示；无需解析，只要解码并且检查确认代码，即可编译为机器码。 WASI：(WebAssembly System Interface)，一种与不同操作系统通信统一标准；它是为 WASM 专门设计一套引擎无关（engine-indepent）、面向非 Web 系统（non-Web system-oriented）的 API 标准；遵循可移植性、安全性两大原则。WASI 在 WASM 字节码与虚拟机之间，增加了一层“系统调用抽象层”。 WebAssembly 优缺点 从 WebAssembly 诞生背景及目标来看，它所要解决的是 JavaScript 语言本身限制，不足以应对 CPU 密集型应用的问题。因此，优缺点比较对象是 JavaScript、以及 Native Client 和 asm.js 等尝试“解决 Web 上安全快速代码”的方案。 Native Client：是一个沙箱，用于在浏览器中高效、安全地运行已编译的 C 和 C++ 代码，独立于用户的操作系统。它已于 2020 年弃用，支持将于 2021 年 6 月结束。 Asm.js：代码在很多方面类似于 C，但它仍然是可以在所有当前引擎中运行的完全有效的 JavaScript。Firefox 是目前唯一可以做到这一点的浏览器。已被弃用。 WebAssembly VS JavaScript 优点 更好性能 下载： JS 是高级语言，便于开发者阅读和编写，文件体积比汇编语言大。 WebAssembly 不是设计用于手动编写的，也不是供人类阅读的。代码被编译为 WebAssembly 之后，字节码会以二进制格式而不是文本格式表示，这可以减小文件大小，从而支持快速传输和下载。 解析/解码： JS 需要先通过词法分析、语法分析生成 AST，然后再由 AST 生成字节码。 WebAssembly 是一种字节码，不需要进行解析，只需要解码并且检查确认代码没有错误就可以了。 编译（优化、反优化）： JS 是弱语言类型，无法预知变量类型。JIT 监测热点代码，在代码执行若干次后，优化编译器才将其编译为机器码并优化。如果数据类型被动态修改，优化编译器会进行反优化，下次执行时会回退到解释器解释执行。 WebAssembly 代码是静态类型的，即可以预知变量持有的值的类型。WebAssembly 代码可以从一开始就编译为机器码，无须先监测，因此第一次运行代码就可以看到性能提升。WebAssembly 更接近机器码，在编译阶段不需要做太多的优化；WebAssembly 代码的类型是确定的，不存反优化的阶段。 WebAssembly 二进制文件的设计方式使得模块验证可以在一轮内完成，其结构也支持并行编译文件的不同部分。 浏览器厂商引入了流编译技术，在浏览器下载和接收文件时，该技术可以将 WebAssembly 代码编译为机器码。流编译支持 WebAssembly 模块下载完毕，即进行初始化，这样会显著加速模块的启动过程。 执行： JS 是一种编程语言，更注重开发效率和代码可读性，开发者编写的代码不一定能发挥 JIT （just-in-time） 的优化机制。 WebAssembly 被设计为编译目标，专注于提供更加理想的指令（执行效率更高的指令）给机器，执行效率更高。 垃圾回收： JS 引擎会自动进行垃圾回收，垃圾回收可能会在一个不合适的时机启动并造成性能损耗。大多数浏览器已经能给垃圾回收安排一个合理的启动时间，但还是会增加性能开销。 WebAssembly 不支持垃圾回收，内存操作都是手动控制的（像 C、C++一样），性能由开发者控制。 便携且安全 WebAssembly 独立于平台、独立于硬件和独立于语言，它对设备或浏览器没有任何特殊要求，这增强了其便携性；其设计原则是与其他 Web 技术和谐共处，并保持向后兼容。代码在内存安全的沙盒环境中进行验证和执行，可以防止安全漏洞和数据损坏。此外，像其他 Web 代码一样，它遵循浏览器的同源策略和授权策略。 支持多线程 WebAssembly 不直接支持多线程。但是，WebAssembly 程序可以在宿主环境中执行，这个宿主环境可能支持多线程。因此，WebAssembly 程序间可以通过宿主环境来协调多线程（通过 Web Worker、共享线性内存 SharedArrayBuffer、 WebAssembly atomics ）。详情可参见文章： Using WebAssembly threads from C, C++ and Rust 。 集成已有库 如果应用程序使用 C/C++、Rust 或任何其他兼容语言，WebAssembly 可以轻松地将代码或桌面应用程序用于 Web。如今（2022 年 12 月）生态已经非常丰富，除了用于 Rust 的 wasm-pack 和用于 C/C++ 的 Emscripten 之外，还有 AssemblyScript 、 TinyGo 凡此种种，详情可参见： Awesome Wasm Compilers 。 WebAssembly VS JavaScript 缺陷 尽管 WebAssembly 具有很多优点，但目前仍存在些缺陷，譬如： 旧浏览器不支持：它只能在支持 WebAssembly 的浏览器（或 runtime）中运行；倘若环境不支持，需要使用其他方式来实现（假如要考虑兼容）； 不能直接访问 DOM：WebAssembly 目前还不能直接访问浏览器的 DOM 元素；如果代码要访问浏览器 DOM，需要调用 JavaScript 方法来实现（ 已有计划实现 ）； 存在局限：比起 JavaScript，编写相关代码不够灵活，需要经过编译；需要手动分配内存，且缺少用于自动内存管理的垃圾收集 (GC)（尽管有计划添加 GC）； 显而易见，没有技术会是银弹，只有把技术放在适用的场景下才能达到事半功倍的效果；在开发效率，与运行效率两者之间，无法同时做到最优；根据不同环境、需求，做平衡才是更优的选择。因此，除了计划解决的部分，WebAssembly 携带部分缺陷在所难免；毕竟它是对 JavaScript 的补充。 WebAssembly 应用场景 WASM 并不是为了优化您的网站，而是为了在执行以下任务时将浏览器（和服务器端运行时，如 Node.js、Deno）提升到一个新的水平： 机器学习：TensorFlow.js； 视频编辑：Clipchamp、Mastershot； 实时合作编辑：Figma； 游戏开发：Unity Web； AR/VR 直播应用：（非常低的延迟）； 音乐编辑和流媒体： FFMPEG.WASM ； 平台仿真：AutoCAD、Google Earth； 加密解密：JSVMP（编译及二进制特性）； 开发工具：vim web、SQLlite web； 图像识别及处理： Squoosh.app ，多线程客户端图像压缩； 开发人员工具：（编辑器、编译器、调试器……）； 代替 JavaScript 框架：Yew、Blazor、Tokamak、Prism； ……. 更多使用场景可参见： WebAssembly Use Cases ；任何需要大量编码和大量性能调整的事物，都是 WASM 的完美用例。如需使用 WASM 的开源项目列表，您可以访问 Made with WebAssembly 这个社区。下面是些声名远扬的项目： Tensorflow ：是将 AI 和 ML 带给 JS 开发人员的主要库之一；在它 添加了 wasm 后端支持后 ，与普通 JS 版本相比，模型的性能平均提高了 10 倍。 Unity ：作为主要的游戏开发引擎之一，它能够将您的项目导出为与 Web 兼容。从 2018 年开始，这个过程是通过 编译成 WebAssembly 来完成的。这是正确使用 WASM 的强大功能的完美示例。 Google Earth ：该产品已经存在超过 15 年，曾经是一个桌面应用程序。 现在感谢 WASM，他们通过将旧代码编译为 WASM 将其 移植到网络中（就像 Autodesk 为其 CAD 应用程序所做的一样）。 Yew ：有没有想过将 Rust 用于您的网络应用程序？现在你可以了，感谢 Yew 和 Web Assembly 给我们带来的力量。你不仅可以将 Rust 用于你的 UI，而且这个框架还提供了一个多线程环境来工作。Github 拥有 26kb Star（备注：目前还不是 1.0。准备好因破坏 API 更改而进行重大重构）。 Blazor ：构建美观的 Web 应用，使用 .NET 和 C# 的强大功能构建全栈 Web 应用程序，而无需编写一行 JavaScript。生态可参见 awesome-blazor 。 Pyodide ：是基于 WebAssembly 的浏览器和 Node.js 的 Python 发行版。 WebAssembly 主要的几个概念 为了理解 WebAssembly 是如何在 Web 运行的，需要了解几个关键概念： Instance ：一个包含它在运行时用到的所有状态，包含 Memory、Table、以及一系列导入值的 Module，一个 Instance 类似一个 ES2015 的模块，它被加载到具有特定导入集的特定全局变量中 Module ：通过浏览器编译成为可执行机器码的 WebAssembly 二进制文件，Module 是无状态的，类似 Blob，能够在 Window 和 Worker 之间通过 postMessage 共享，一个 Module 声明了类似 ES2015 模块类似的 import 和 export。 Memory ：一个可调整大小的 ArrayBuffer，其中包含由 WebAssembly 的低层次内存访问指令读取和写入的线性字节数组。 Table ：一个可调整大小的类型化引用数组（如函数），然而处于安全和可移植性的原因，不能作为原始字节存储在内存中。 WebAssembly 的 JavaScript API 提供给开发者创建 Module、Memory、Table 和 Instance 的能力，给定一个 WebAssembly 的 Instance，JS 代码可以同步的调用它的 exports – 被作为普通的 JavaScript 函数导出。任意 JavaScript 函数可以被 WebAssembly 代码同步的调用，通过将 JavaScript 函数作为 imports 传给 WebAssembly Instance。 因为 JavaScript 能够完全控制 WebAssembly 代码的下载、编译和运行，所以 JavaScript 开发者可以认为 WebAssembly 只是 JavaScript 的一个新特性：可以高效的生成高性能的函数。 1 2 import {foo} from "./myModule.wasm"; foo(); 在未来， WebAssembly 模块可以以 ES2015 的模块加载形式加载，如通过 import 或 ，意味着 JS 可以获取、编译、和导入一个 WebAssembly 模块，就像导入 ES2015 模块一样简单。详见： WebAssembly 的 ES 模块集成提案 。 如何在应用里使用 WebAssembly？ WebAssembly 给 Web 平台添加了两块内容：一种二进制格式代码，以及一系列可用于加载和执行二进制代码的 API。时值 2022 年，生态已颇具规模，详情可参见： Awesome Wasm ；主要流行的入口有： 使用 EMScripten 来移植 C / C++ 应用； 编写 Rust 应用，然后将 WebAssembly 作为它的输出； 使用 AssemblyScript ，它是一门类似 TypeScript 的语言，能够编译成 WebAssembly 二进制； 对于 Web 开发者来说，可是使用类 TypeScript 的形式来尝试 WebAssembly 的编写，而不需要学习 C 或 Rust 的细节，那么 AssemblyScript 或将会是最好的选择。AssemblyScript 将 TypeScript 的变体编译为 WebAssembly，使得 Web 开发者可以使用 TypeScript 兼容的工具链，例如 Prettier 、VSCode Intellisense，你可以查看 AssemblyScript 文档 来了解如何使用。 补充说明，如今已有大量的工具库被编译为 WebAssembly，并做了封装；譬如 Photon （一个高性能的 Rust 图像处理库，它编译为 WebAssembly，允许在本地和 Web 上进行安全、快速的图像处理），其使用方式与其他 npm 包没有区别；在基于 Vue3 开发的作品： 玉桃文飨轩 中就有使用，如您感兴趣，可移步源码实现： markdown2png 。 参考资料及资源网站 资源网站 WebAssembly 官网网站 ； WebAssembly Package Manager ：WebAssembly 包管理器。类似于 npm 之于 Node.js。 bytecodealliance/wasmtime ：A fast and secure runtime for WebAssembly； emscripten-core/emsdk ：Emscripten 工具链作为独立的 Emscripten SDK 分发。 WebAssembly Org - GitHub ：Development of WebAssembly and associated infrastructure； GoogleChromeLabs/wasm-feature-detect ：一个小型库，用于检测支持哪些 WebAssembly 功能。 Emscripten Tutorial ：Emscripten 是WebAssembly的完整开源编译器工具链。 wasmerio/wasmer-python ：基于 Wasmer 的完整成熟的 Python WebAssembly 运行时。 参考资料 What’s Wrong with Web Assembly? Using WebAssembly threads from C, C++ and Rust Why you should not use WebAssembly to build your SPA Maybe you don’t need Rust and WASM to speed up your JS Faster Fractals with Multi-Threaded WebAssembly How JavaScript works: A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript WebAssembly 基础 - vivo 快应用官方博客 认识 WebAssembly - zkqiang’s blog WebAssembly 学习(一)：认识 WebAssembly - 姬无华 您可能感兴趣的文章 NPM 如何发布和使用带范围（scope）的包？ 如何基于 Espanso 提高打字效率，提升幸福感？ 如何更提升各类网站 PC 端访问体验？ Awesome Chrome 插件集锦 Vimium 让您的 Chrome 起飞 那些所倚靠的利器记载 Win 下最爱效率神器: AutoHotKey Win 下必备神器之 Cmder 新编码神器 Atom 使用纪要 sublime text 下的 Markdown 写作 SublimeText 下写作利器之 MarkdownEditing Mac 必备软件渐集之 ZSH－终极 Shell
著名 IT 咨询公司 Gartner（高德纳），有一个”技术热门度曲线”模型（Gartner Hype Cycle）。该模型认为，一门技术的发展要经历五个阶段：启动期、泡沫期、低谷期、爬升期、高原期；该公司每年都会公布当年的热门技术图；基于所提及的新兴技术， 如果没有接触，难以知道是用来做什么的。本文旨在科普这些行业技术。 Gartner 技术热门度曲线 启动期（Innovation Trigger）：该技术刚刚诞生，还只是一个概念，不具有可用性，无法评估商业潜力。媒体有所报道，引起了外界的兴趣。 泡沫期（Peak of Inflated Expectations）：该技术逐步成型，出现了个别成功的案例，一些激进的公司开始跟进。媒体开始大肆报导，伴有各种非理性的渲染，产品的知名度达到高峰。 低谷期（Trough of Disillusionment）：该技术的局限和缺点逐步暴露，对它的兴趣开始减弱。基于它的产品，大部分被市场淘汰或者失败，只有那些找到早期用户的公司艰难地活了下来。媒体对它的报道逐步冷却，前景不明。 爬升期（Slope of Enlightenment）：该技术的优缺点越来越明显，细节逐渐清晰，越来越多的人开始理解它。基于它的第二代和第三代产品出现，更多的企业开始尝试，可复制的成功使用模式出现。媒体重新认识它，业界这一次给予了高度的理性的关注。 高原期（Plateau of Productivity）：经过不断发展，该技术慢慢成为了主流。技术标准得到了清晰定义，使用起来越发方便好用，市场占有率越来越高，进入稳定应用阶段。配合它的工具和最佳实践，经过数代的演进，也变得非常成熟了。业界对它有了公认的一致的评价。 一门技术到底前景如何，很难准确预测；但是它的热门程度却是可以衡量的（比如在社交媒体提及次数的增长幅度）。风险投资跟热门程度高度正相关，越热门的技术越容易拿到投资。 用户可以基于 Gartner 技术热门度曲线，判断技术处在哪一个阶段，确定它的热门程度。简单的使用规则为：”争取风险投资，要选择热门的技术；解决实际问题， 要选择可靠的技术。“ 简单说，处于启动期的技术，风险很大，不确定性极高，但是一旦成功，回报可能也很高，适合创业公司；处于高原期的技术，非常可靠，风险低，有成熟的解决方案和配套工具，适合大公司和企业的内部应用。 反之，如果一门技术已处于高原期了，就代表它非常成熟；人们对它能干什么和不能干什么，都已经很是了解，也难以产生新的期待，技术本身的潜力已经不大，所以用它拿不到投资，只能用来干活。 2022 年 Gartner 新兴技术成熟度曲线公布最新技术趋势 2021 年 Gartner 新兴技术成熟度曲线公布最新技术趋势 XR、AR、VR、MR 什么是扩展现实 (XR)？ 扩展现实 (XR)：是一个“包罗万象”的术语，指的是增强或取代我们对世界的看法的技术。这通常是通过将计算机文本和图形叠加或浸入现实世界和虚拟环境，甚至是两者的结合。 XR 包括增强现实 (AR)、虚拟现实 (VR) 和混合现实 (MR)。虽然所有三个“现实”都有共同的重叠特征和要求，但每个都有不同的目的和底层技术。 XR 将在元宇宙中发挥基础性作用。“互联网的下一次发展”将把真实、数字和虚拟世界融合到新的现实中，通过 Arm 驱动的“网关”设备（例如 VR 耳机或一副 AR 智能眼镜）进行访问。 XR 技术有一些基本的相似之处：所有 XR 可穿戴设备的核心部分是能够使用视觉输入方法（例如对象、手势和注视跟踪）来导航世界并显示上下文相关信息。深度感知和映射也可以通过深度和位置特征来实现。 什么是增强现实 (AR)？ 增强现实 (AR) ，通过将我们看到的内容、与计算机生成的信息叠加在一起，增强了我们对现实世界的看法。如今，这项技术在智能手机 AR 应用程序中很普遍，这些应用程序需要用户将手机放在面前。通过从相机中获取图像并进行实时处理，该应用程序能够显示上下文信息、或提供似乎植根于现实世界的游戏和社交体验。 尽管智能手机 AR 在过去十年中取得了显着进步，但其应用仍然有限。越来越多的重点是通过可穿戴智能眼镜提供更全面的 AR 体验。这些设备必须将超低功耗处理器与包括深度感知和跟踪在内的多个传感器结合在一起，所有这些都在一个轻巧舒适的外形中，足以长时间佩戴。 AR 智能眼镜需要在用户移动时始终在线、直观且安全的导航。这需要在深度、遮挡（当 3D 空间中的一个对象从视图中挡住另一个对象时）、语义、位置、方向、位置、姿势以及手势和眼睛跟踪等功能方面取得重大进展。 什么是虚拟现实 (VR)？ 虚拟现实 (VR)， 完全取代了用户的视野，让他们沉浸在计算机生成的虚拟环境中。这种 XR 技术已经存在了一段时间，并在逐步改进。它主要用于娱乐体验，例如游戏、音乐会、电影或体育，但它也在加速进入社交领域。对于 VR，沉浸式娱乐体验将需要高清渲染管道、体积捕捉、6DoF 运动跟踪和面部表情捕捉等功能。 VR 还用作培训、教育和医疗保健（例如康复）的工具。为了让最终用户获得这些体验（并且也是无缝的），VR 技术的重点通常是高质量的视频和渲染以及超低延迟。 最后，VR 设备现在正在通过 RecRoom 等平台增强视频会议体验，这些平台可以在不同的虚拟世界中进行虚拟聚会。现在支持 Oculus Quest 的 RecRoom 在 2020 年 Arm 新现实系列的第三集中 出现，讨论了 VR 的沉浸式体验。 什么是混合现实 (MR)？ MR 介于 AR 和 VR 之间，因为它融合了真实世界和虚拟世界。此类 XR 技术存在三个关键场景。第一种是通过智能手机或 AR 可穿戴设备将虚拟对象和角色叠加到现实环境中，反之亦然。可参见 Microsoft 教程： 什么是混合现实？ 2016 年风靡全球的 Pokémon Go 手机游戏，通过智能手机摄像头将虚拟 Pokémon 覆盖在现实环境中。这通常被吹捧为革命性的 AR 游戏，但它实际上是 MR 的一个很好的例子——将现实世界环境与计算机生成的对象混合在一起。 混合现实也开始用于使 VR 真实世界玩家能够叠加到视频游戏中，从而将真实世界的人物带到 Twitch 或 YouTube 等游戏流媒体平台上。以上内容，出自文章： XR、AR、VR、MR：现实有何不同？ （发表于 2022 年 4 月 1 日）。 数字孪生 数字孪生是一种旨在精确反映物理对象的虚拟模型。 会给研究对象（例如，风力涡轮机）配备与重要功能方面相关的各种传感器。 这些传感器产生与物理对象性能各个方面有关的数据，例如，能量输出、温度和天气条件等等。 然后将这些数据转发至处理系统并应用于数字副本。 一旦获得此类数据，虚拟模型便可用于运行模拟、研究性能问题并生成可能的改进方案；所有这些都是为了获取富有价值的洞察成果，然后将之再应用于原始物理对象。 数字孪生与模拟 尽管模拟和数字孪生都是利用数字模型来复制系统的各种流程，但数字孪生实际上是一个虚拟环境，对于研究来说内容特别丰富。 数字孪生和模拟之间的区别主要是规模问题： 模拟通常研究的是一个特定流程，而数字孪生本身可运行任意数量的实用模拟项目来研究多个流程。 当然，二者之间的差异远不止如此。 例如，模拟通常不会从获得实时数据中受益。 但数字孪生是围绕双向信息流设计的。当对象传感器向系统处理器提供相关数据时，该信息流首次出现。然后，当处理器将其得出的洞察成果与原始源对象共享时，该信息流会再次出现。 数字孪生拥有的数据更加优质且不断更新，且覆盖了更加广泛的诸多领域；除此之外，虚拟环境还具备更强的计算能力，因此，与标准模拟相比，数字孪生能够从更有利的角度研究更多问题，具备更大的最终潜力来改进产品和流程。 数字孪生的优点 促进研发：利用数字孪生能够更高效地研究和设计产品，生成与潜在性能结果相关的大量数据。 根据这些信息得出的洞察成果可帮助企业在开始生产之前就能进行必要的产品改进。 效率更高：即使在新产品投入生产后，数字孪生也有助于真实反映和监控生产系统，以期在整个制造流程中获得和保持最高效率。 产品生命末期管理：数字孪生甚至可以帮助制造商决定如何处理生命周期结束并需要通过回收或其他措施进行最终处理的产品。 通过使用数字孪生，制造商能够确定哪些产品材料可以回收。 4D 打印技术 4D 打印技术，是指由 3D 技术打印出来的结构，能够在外界激励下、发生形状或者结构的改变，直接将材料与结构的变形设计内置到物料当中，简化了从设计理念到实物的造物过程，让物体能自动组装构型，实现了产品设计、制造和装配的一体化融合。 4D 打印构成要素 4D 打印的主要构成要素可以分为四个部分：智能或刺激反馈材料、4D 打印设备、外部刺激因子、智能化设计过程。 4D 打印主要优势 实物可从一种形态转换成另一种形态，提供了最大限度的产品设计自由度。 可在打印部件中嵌入驱动、逻辑及感知等能力，且无需额外的时间和成本。 可在同一批次产品中定制生产。 生产个性化产品是 4D 打印的独特优势。 可先打印极其简单的结构，然后通过外部刺激转变成具有复杂功能的结构和系统。 一旦制造出 4D 打印材料并嵌入动态功能，生产成品的功能将超过预期。 可从根本上消除供应链和组装线。 利用设计和编程实现物质世界的数字化。 数字文件可发送到世界任何地点，并收集合适的三维像素，制造所需产品。 三维像素的设计和制造将成为新兴行业，所带来的影响将异常深远。 将激发科学家和工程师想象各种多功能动态物体，之后进行物质编程，并利用 4D 打印实现，“物质程序化”这一新领域可能将兴起。 4D 打印应用领域 4D 打印可应用领域有：生物、医疗领域、军事工业领域、产品设计领域、交通工具、建筑与航空航天领域、教育领域。 4D 打印的原理 4D 打印让快速建模有了根本性的转变。与 3D 打印的预先建模然后使用物料成形并不一样，4D 打印直接将设计内置到物料当中，简化了从“设计理念”到“实物”的创物过程。让物体如机器般“自动”创造，不需要连接任何复杂的机电设备。为了充分应用这一新技术，Autodesk 公司的研发团队进一步设计了新软件 Cyborg，可以用于自我组装和可编程的模拟材料，实现设计的优化和材料的折叠。 虚拟助理 虚拟助理（virtual assistant）是一种能替个人执行任务或服务的软件代理（software agent）。有时候“聊天机器人”泛指虚拟助理，亦或专指网络聊天使用的软件机器人（有时候更专指娱乐而非实用的网络聊天）。但也可以指一种职业，或者企业组织，其乃是透过网络执行远端服务。其能依据使用者输入的内容、位置感测而完成相对应的任务或提供相关服务，同时也具有从网络上寻找并提供使用者各种资讯（像是天气、交通状况、新闻、股市行情、行程或零售价格等）的能力。 至 2017 年，随着新产品进入市场，虚拟助理的功能与运用正快速扩张。一项 2017 年 5 月的线上调查显示，美国的市占率依次为苹果 Siri（34%）、Google 个人助理（19%）、Amazon Alexa（6%）及微软 Cortana（4%）。搭载这些助理的智慧扬声器也有着巨大的变化；苹果直到 2017 年 6 月才宣布其智慧扬声器。脸书的 M 虚拟助理 预计 2017 年在 Facebook Messenger 上会有数亿的用量。 互动方式 虚拟助理的作业媒介: 文字（网络聊天），尤其是即时通讯等的应用程序。 语音，例如 Amazon Echo 上的 Alexa 或是 iPhone 上的 Siri 。 利用照相或上传图像，例如三星 Galaxy S8 上的 Bixby。 有些虚拟助理的使用方式多样，例如 Google 智能助理在 Google Allo app 用文字，Google Home 智慧扬声器则用语音。虚拟助理，利用自然语言处理（NLP）从使用者的文字、语音输入，找到相应的可执行指令。许多助理利用人工智能的技巧，包括 机器学习 ，不断学习。 用语音启动虚拟助理，可能需要用到“唤醒词”（wake word），这是一个或一组词，例如 Alexa、“嗨，Siri”（Apple iPhone、Mac 等），“小 v 小 v”（ vivo ） 或者 OK Google。 可提供的服务 虚拟助理可提供多样的服务，尤其是 Amazon Alexa 和 Google 个人助理，日新月异，包括： 提供资讯，例如气象、来自维基百科或 IMDB 的事实，设定闹钟、待办事项、购物清单等。 播放串流服务的音乐例如 Spotify 和 Pandora，播放广播或有声书。 从串流服务例如 Netflix，在电视上播放影片、电视节目或电影。 辅助、取代真人的客服、取代真人推广推销（在国内经常遇到，不胜其烦）。 IPFS IPFS（InterPlanetary File System），一般翻译为“星际文件系统”，它由 Protocol Lab 提出，始于 2014 年，发明者： Juan Benet ；它是一种点对点（P2P）的分布式文件系统（用来存储数据的技术）；但更确切的说 IPFS 是一种传输协议。IPFS 将 HTTP 视为对手，宣传上要对标 HTTP。 IPFS 它是一个基于内容寻址的、分布式的、新型超媒体传输协议。 IPFS 支持创建完全分布式的应用。 它旨在使网络更快、更安全、更开放。 IPFS 是一个分布式文件系统，它的目标是将所有计算设备连接到同一个文件系统，从而成为一个全球统一的存储系统。实现互联网中永久可用、数据可以永久保存（理论上，访问量越大，越能保证）。 HTTP(超文本传输协议)是目前最常用的传输协议。在网上找到想要的内容，就要输入网址，网址多是 HTTP 开头。HTTP 通过域名、IP 及多个中心服务器的中转，再进行文件的上传下载。HTTP 的功绩无可取代，现在人们上网都要依赖于 HTTP。但 HTTP 也存在一些问题，比如性能效率不是非常高，过度依赖于中心服务器与主干网络等等。 IPFS 与之相比，它是一种多中心化的解决方案，内容寻址不是通过域名、IP，而是通过唯一 HASH 密钥来进行数据寻找。IPFS 是个分布式文件存储系统，文件数据并不储存在一个中心化的服务器中，而是存储在网络上所有符合条件的电脑中。当然，IPFS 不止如此，还有很多其他的特性，层次与应用范围也超过了简单的 P2P 下载。 如果您对 IPFS 感兴趣，可以参见 IPFS 入门笔记 、 IPFS 如何冲击我们熟知的网络世界 等文章。 2022 年 11 月 ～ 12 月 03 日写于〔深圳福田〕 您可能感兴趣(/有用)的文章： 如何基于 Espanso 提高打字效率，提升幸福感？ 如何更提升各类网站 PC 端访问体验？ Awesome Chrome 插件集锦 Vimium让您的Chrome起飞 那些所倚靠的利器记载 Win下最爱效率神器:AutoHotKey Win下必备神器之Cmder 新编码神器Atom使用纪要 sublime text 下的Markdown写作 SublimeText下写作利器之MarkdownEditing Mac必备软件渐集之ZSH－终极Shell
倾城之链 是基于 Vue2 所构建的单页面应用（SPA），这很不利于 SEO，尤其是之于国内搜索引擎。早在项目之初，采取 SSR 方案对代码侵入性高，也不大方便以 SSG 方案处理；于是乎，便在服务端针对搜索引擎爬虫返回预渲染结果，从而做 SEO 优化；本文就此方案做简单分享。 Prerender 预渲染原理 prerender 项目由 Prerender.io 出品（其内部基于 Headless Chrome，与 Google Puppeteer 类似），也可以使用 Prerender.io 提供的服务；它旨在加快向搜索爬虫提供内容的速度，从而提高您的 SEO 分数。只需注册、登录、按照说明进行 Nginx 配置即可；相比自己部署的 prerender 服务，有更快的速度、更多可选项设置、强大的仪表盘、缓存管理器以及其他缓存相关活动操作。 prerender 的原理是，配置 nginx，判断出是爬虫来访时，先将请求页面地址发送给 prerender 服务，由 prerender 服务渲染出页面内容，再将页面内容返回给爬虫。 Prerender is a node server that uses Headless Chrome to render HTML, screenshots, PDFs, and HAR files out of any web page. The Prerender server listens for an http request, takes the URL and loads it in Headless Chrome, waits for the page to finish loading by waiting for the network to be idle, and then returns your content. 架设自己的 prerender 服务 虽然说 Prerender.io 提供了抓取及缓存服务，但当内容超过 1000 条就要收费，对于中小项目，或许得不偿失；当然，完全可以架设自己的 prerender 服务，只要拥有可控制的服务器即可「操作非常简单」。Github prerender 项目中对于如何使用，已经做了详细说明。为使得内容可以快速给到搜索爬虫，最好可以对内容做缓存（基于 Redis 或 memory-cache 都可以）。有在 Github 开源项目： prerender-spa-server ，如果您有类似需求，克隆之，基于 pm2 做下持久化部署即可。 Prerender 是使用 Headless Chrome 来呈现 HTML 的节点服务器，即在你的服务器，要安装 google chrome，否则该服务无法正常工作。 修改 nginx 配置文件 搭建 prerender 服务之外，还是要针对项目搜索爬虫，做下额外处理，使之取到预渲染结果。如今，多半 Web 应用都采用 nginx 来配置； 倾城之链 亦是如此；只需在原有配置文件加些判断即可，示例代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 location / { set $prerender 0; if ($http_user_agent ~* "Googlebot|googlebot|bingbot|baiduspider|twitterbot|facebookexternalhit|rogerbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") { set $prerender 1; } if ($args ~ "_escaped_fragment_") { set $prerender 1; } if ($prerender = 1) { set $prerender "127.0.0.1:3000"; proxy_pass http://$prerender; rewrite .* /$scheme://$host$request_uri? break; } proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Client-Verify SUCCESS; proxy_set_header X-Client-DN $ssl_client_s_dn; proxy_set_header X-SSL-Subject $ssl_client_s_dn; proxy_set_header X-SSL-Issuer $ssl_client_i_dn; proxy_read_timeout 1800; proxy_connect_timeout 1800; if ($prerender = 0) { proxy_pass http://localhost:8668; } } 修改完配置文件后，记得要使用命令 nginx -s reload 重新加载。一切配置妥当，即可发起测试，以验证结果是否符合预期；在终端使用 curl 工具，对目标网址发起访问即可；需要说明的是，网址后面需要添加 ?_escaped_fragment_ 标记，主动触发 prerender 渲染服务，以模拟搜索爬虫来源。示例如下： 1 curl https://your-website-url/?_escaped_fragment_ 可能存在的问题 Google Chrome 版本过低 前文提及需要安装 google chrome，对于它的版本，截止 2022 年 11 月，已经升级至 107.*；您的项目中，对于它的版本，应该尽可能的高些（如果在 70 以下，很有可能出现问题，渲染出的 html 跟实际不相符，莫问吾如何知道💧）。关于在 linux 环境，如何安装新版本的 google chrome，可参见文章： How to Install Google Chrome Using Terminal on Linux 。主要步骤如下： 1 2 3 4 5 6 7 8 9 # Update the package index sudo apt update sudo apt upgrade # Use wget to download the Chrome package wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb # Install the downloaded Chrome package. sudo dpkg -i google-chrome-stable_current_amd64.deb 以上，即是「如何 Prerender 为 SPA 做 SEO 优化」的主要内容；这种方案，对于主代码侵入性小，效果跟 SSR 方案也别无二致。虽然说 Google 能够对 SPA 页面通过 JavaScript 抓取，各种因素，效果肯定不如渲染后 HTML；感兴趣的朋友可以尝试；如有疑问，欢请留言评论。 其他报错问题 比如可能在腾讯云服务器报如下错误： 2022-11-12T05:02:49.270Z Starting Prerender 2022-11-12T05:02:49.272Z Starting Chrome 2022-11-12T05:02:49.279Z Prerender server accepting requests on port 3000 2022-11-12T05:02:49.292Z Chrome connection closed… restarting Chrome 2022-11-12T05:02:49.293Z Chrome died immediately after restart… stopping Prerender 需要首先检查 Prerender 配置是否正确，配置示例如下： 1 2 3 4 5 6 7 8 9 const server = prerender({ chromeFlags: [ '--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222', '--hide-scrollbars', ], }) 假如确定配置的话，尝试使用 sudo 权限再次运行，重新修改 chromeLocation 路径（在腾讯云上遇到过此问题，用此办法得以解决）代码示例如下： 1 2 3 4 5 6 7 8 9 10 const server = prerender({ chromeLocation: '/usr/bin/google-chrome-stable', chromeFlags: [ '--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222', '--hide-scrollbars', ], }) 需要补充说明的是，基于 Prerender 为 SPA 做 SEO 优化，即需要在服务器端 运行 google chrome ，以获得真实渲染呈现的 HTML；如果将这个 Prerender 服务与其他服务混搭与统一服务器，受抓取频率、服务器配置 等影响，或可能引发 CPU 、内存占用过多问题；如有条件，可分开部署。服务一旦搭建，或可能被别有用心之人利用，需要提前防范；在 prerender-spa-server 最新代码中，增加了域名白名单限制。 倾城之链 基于这种方案改善 SEO，通过近一个月观测，效果还可以。以上，大致是全部内容；如果您感兴趣，欢请留言评论。 2022 年 11 月 10 日写于〔深圳福田〕；2022 年 12 月 08 日更新。 您可能感兴趣的文章 如何基于 Deno 做持久化定时任务？ NPM 如何发布和使用带范围（scope）的包？ 如何基于 Espanso 提高打字效率，提升幸福感？ 如何更提升各类网站 PC 端访问体验？ Awesome Chrome 插件集锦 Vimium 让您的 Chrome 起飞 那些所倚靠的利器记载 Win 下最爱效率神器: AutoHotKey Win 下必备神器之 Cmder 新编码神器 Atom 使用纪要 sublime text 下的 Markdown 写作 SublimeText 下写作利器之 MarkdownEditing Mac 必备软件渐集之 ZSH－终极 Shell
转眼间，距离「倾城之链」诞生之时，已有六年之久。如今（2022.10.25），倾城收录网站已突破 1000 款，值此之时，有必要督促自己深入思考，不仅是「倾城」过往的总结、未来之设想，更要确立后续业余项目方向、乃至职业规划。于是乎，便有了这篇文章，也有意将其做成年度系列，年与时驰，环境变迁，认知更替，载之于文，以慰这似水流年。 应用名称 倾城之链。 应用平台 Web 应用、小程序、快应用。 应用简介 倾城之链，新一代开放型导航平台，为云集全球「优质网站」而生。在这里，您可以便捷的探索互联网中那更广阔的世界，同时还能分享为您所欢喜的网站。 官方地址 https://site.lovejade.cn// 。 应用简介 探索更广阔的世界，为您 在这个信息化的世界，海量的讯息可能让您不知所措；担心错过她而努力汲取的同时，却可能错过更多；「倾城之链」的存在，即是为您解决这种困扰；在这里，您可以浏览全球各类智慧的结晶；丰富视野的同时，可以标注抑或分享您喜欢的站点，从而为更多挖掘讯息的人提供建设性参考。 分享，为您所欢喜的网站 在当今这信息化时代，即便是再小的个体，也当有自己的品牌。=然而，独立的才是自己的。「倾城之链」作为一个开放平台，鼓励您创造属于您的个人品牌，烙印着自己的风格，替自己代言、发声。如果您已经这样做了，您可以尽情分享在这里，让更多人知道，且从中受益。当然，您也可以分享出您欢喜的其他有意思站点，让您的见识惠及更多人。 应用截图 网站特色 收集有价值网站，并在后台审核，力争所收录的内容，可对他人产生积极作用； 鼓励用户自荐、推荐欢喜的网站，使得见闻、见识可以互相，从而惠及更多人； 尽最大可能为收录的网站，提供完善推荐语，使用户能轻易知道该网站价值； 内置搜索功能，并在不断完善中，使得用户可以便捷索引到主动想要的内容； 持续在经营的社交网站等，对优质网站，进行分享传播，从而提升其访问量； 陆续更新其它功能如箴言锦语(云集所喜欢的曼妙句子)，以促进网站趣味性。 所用技术 前端：Vue、vue-router、Webpack、vuex、axios、marked 等 后端：Node(Koa2) + MongoDB + Redis 等 工具：Mac、Git、VsCode、prettier、Yarn 等； 其他： Prerender（For SEO）、Waline（评论）、Gatsby 作者简介 业余独立开发者杨轩帅，目前在国内一家智能手机研发公司做快应用相关；工作内容繁杂，侧重工具型产品的思考与设计，当然也仍会写些代码；出于对高效工作的追求，比较热衷与创造一些好产品 / 工具；相比之下，业余时间写代码会更多一些。 独立开发者？ 目前仍是一名业余独立开发者。工作内外，都有很多想法，以及一些痛点；个人非常倾向将其抽象出来，加以设计，用代码实现出一个工具，或是一款产品，为自己和他人都能带来价值；即便只有自己用，也觉得很酷（极客范儿）。 从另一角度回答这个问题，有必要理解下其定义；『独立开发者』，一般指的是“从产品立项、设计、开发、推广、到盈利的闭环全部独立完成的人”。也想有更多志同道合朋友，组成一个团队，聚集起来完成一款产品；但这并不容易，只能是自己事必躬亲，孤军奋战。 因此，目前所开辟的业余项目，包括倾城之链在内，涉及的全部工作，都须自己去完成；在不擅长的领域，难免捉襟见肘，比如 UI 设计、交互设计，运营推广、监控运维等环节。但，始终保持学习，并积极实践，受益匪浅。 项目初衷 那些年，在搭建这个人博客平台 ──「晚晴幽草轩」之时，就有深刻的认识到：当今时代，即便是再小的个体，也当有自己的品牌；这一观点在过去很多文章中，都有极力的去呈现、宣扬。然而，这种影响力毕竟有限，况且对于那些优质品牌，也无法起到实质性作用。要知道，当今时代，最重要莫过于「信息」；对信息的承载，可以说绝大部分是源于网络；而信息在网络中传播，起着绝对作用的则是各类网站；故此，不难得出：对于很多品牌最佳的承载，即「专属网站」；因此，在 2016 年初，就决心自己开发一款产品，为这观点以布道，使那优秀能广传；这即是「倾城之链」得诞生的动机与起源；整体而言呢，可总结为以下几点： 尝试解决大数据信息时代，高效汲取优质、有价值信息，以更好服务网民； 搭建汇聚优质网站平台，并赋予其👍、👎、分享等功能，以促进个体品牌发展； 作为前端开发工程师（当时），欲借此契机，学习、磨练各项技术，提升自我； 假如您对「倾城」 想要了解更多，可参见早期撰写的文章： 云集优站，尽在「倾城之链」 云集优站，尽在「倾城之链」其二 网络应用百科之 ── 倾城之链 如何运营？ 倾城之链支持用户注册、登录，以提交推荐的网站。截至目前，从开发到运营，乃至推广，仍由「@轩帅」完成；主要负责审核推荐网站、重设「主题 & 标签」、编写推荐语、发布倾城周刊等工作（其中大部分精确性工作，比如生成周刊，通过 Node.js 或 Deno 编写脚本来完成）。遇见特别有用的产品，会通过小程序或网址推给同事或朋友。得空，也前往 Product Hunt、阿酷导航等平台，发现更多有价值 Web 应用。 如何推广？ 从 2019 您开始，主要推广方式变更为：私域互链（还维护了其他几个网站）、购买 Google ADS（谷歌广告）、社区发推广帖、友情链接、SEO 优化。Google Ads 有两段时间，因为每次点击价格问题折腾蛮多，其他的就是不定期增加投入、修改广告内容描述、以及设计并制作广告素材；关乎广告素材制作，虽留有谷歌自适应广告素材，制作心得分享一文，至今也不得其法，只能不断设计然后交有 Google 机器学习去评判，不理想就撤掉重新再来。社区发帖，有在以下平台尝试： 链滴社区：[自荐]：个人开源 Web 应用——倾城之链 2019-10 v2ex 社区：[自荐]个人开源 Web 应用：「倾城之链」 2019-12 创造者日报社区：倾城之链 - 免费实用的资源网站导航 2020-04 思否社区：轩帅：开启技术变现之路，探索第三收入来源 2020-11 为爱发电：致力于塑造新一代、高质量的 Web 应用（网站）导航 2021.02 悠然宜想亭：倾城之链：云集全球优秀网站（推荐） 2021-03 电鸭社区：[自荐]：个人开源多平台应用——「倾城之链」 2021.10 线圈社区：倾城之链 ｜ NICE LINKS 2022.09 小众软件：【自荐】倾城之链：在线导航平台，专注优质网站 2022.10 独立开发者社区：我的作品 倾城之链 - 优质网站导航应用 2022.10 从流量角度来看，社区发帖所能带来的流量有限，不及投放一天 Google 广告；值此市场低迷之际，持续广告投入，也非长久之计。优化 SEO，从用户所需——「搜索行为」来攫取黄金，相比之下，是更为明智的选择；这也是目前主要努力方向之一。 盈利方式 盈「利」：如果特指金钱；目前方式仅有：广告收入（包含：微信公众号、Google AdSense、小程序广告）。实际上，利，也可以是掌握技术、开阔思维、获取信息、获取数据、收获经验、节省时间等等。「倾城」的初衷与维护，以及后续可能的发展，在时间、得到和失败的洗礼中，逐渐变迁，这「盈利方式」也跟随变化，有必要在此，对其过往趋利方式做下总结： 17 ～ 18 年：主要是学习技术，不乏包括前端、后端、设计、运维等； 19 ～ 20 年：开发小程序、快应用，尝试开辟新的获利方式和途径； 21 ～ 22 年：学习投放 Google AdSense 广告、SEO、接入微信登录等； 当然，所学到零碎技能，远不止这些；此外，收录千款 Web 应用，从而了解很多效率工具、创意产品，对工作和生活，都有一定积极意义。目前来看，在这可量化的价值中，占比最多的莫过于，由「倾城」间接促进提高的工作薪酬。未来，探索用户对象、构建盈利模式，亦是努力侧重点。 心得感悟 过去这几年的业余时间，很大部分给了娱乐；其余不多的“雨露”，则在产品设计及臆想，倾城运营及推广等方面做了“均沾”；如今回顾，虽说有些决策只是蹉跎了岁月，但成长总是需要过程，也就能够释怀。但以下几个方面，在之后的折腾中，实该避免： 做好认知：认知，近期工作总是围绕的主题，五看三定，久思已倦🤮。但，不可否认，做产品须先做好对其认知：服务客户是谁？竞争对手有哪些？如何错位/对位竞争？市场盘子有多大？如何为客户带来价值？盈利模式是什么？未来商业价值何在？…..将这些准确思考并评估清晰，再做长短期规划、可行性分析、实际落地，相信是更棒的选择。 瞄准客户：从前总是幻想，「倾城」可以被所有人使用；事实上，绝无可能。就自身而言，假如半年前给我很好的机器学习资料，多半也只是收藏；实际生活、工作用不到，也就不太会去关注、学习乃至使用（于大多数人，学习甚苦，娱乐至上）。用户心智与产品匹配度，是绕不开的结界。因此，后续主要服务于互联网从业人员；至于内容，则依旧保持开放，不乏包括技术、有趣、人文、信息、资源等。 保持平衡：逐利、客户、产品、技术、情怀等考量，该要保持适当平衡（作为开发者，先前较侧重技术、情怀）。按道理，产品、技术都该服务于获利；但获利本质上是为获取更高层次的利「幸福、价值体现」；如果抛弃情怀（价值观），本末倒置之余，也难以在困境中坚持。倘若不能盈利，产品也是难以长久（近两年主要精力在此）。 跟随趋势：视频信息，相比于图文，越发更具优势；虽不愿承认，但这是铁一般的事实。就目前而言，「倾城」仍是图文信息，想调整为「视频」格式输出，倒也可以，只不过没有足够智能工具加持，就只有人工处理，代价颇高（得闲时，可录制几期视频，或搞几次直播）。未来将折腾，最好跟随趋势：如 XR、AI、Web3 等。 经营资产：打工上班，相对最简单的收入来源；但其本质是一种负债——不上班便没有收入，跟自媒体蹭热点式经营没有本质区别；相信越来越多人意识到：税后收入及多种收入来源的必要性（经营资产、远离负债）。就自媒体或独立开发者而言，经营长期性内容、打造专属品牌，综合来看或是更可取的选择。 备注：这 五看三定 模型，最早源自 IBM 战略制定方法论；五看分别是：看行业/趋势（行业现状，及未来发展趋势）、看市场/客户（市场规模、发展趋势、市场需求、客户痛点）、看竞争（分析竞争对手、知己知彼）、看自己、看机会（市场空间有多大、战略机会点）；根据「五看」得到的输出，在战略制定阶段需要“三定”：定战略控制点（即：竞争优势）、定目标（可量化）、定策略（具体的方案、阶段里程碑、实施策略等）。 未来路线图 倾城之链 是在 2017 年初，源于个人所需，外加技术修炼，而开启的独立项目；无论是之前抑或是以后，我自己始终是她的最为忠实的用户；为此，无论「倾城」是否持续盈利，甚至是账面上的亏损，依旧会持续维护。目前而言，为「倾城」所制定的路线图有如下几条（欢迎各界对倾城感兴趣的朋友，提出您宝贵的建议）： 认知：思考：如何错位竞争、如何获得更多流量，如何建立更多盈利方式； 迭代：优化网站性能，改进 SEO，解决发现的存在问题，增添有价值新功能； 学习：学习机器学习相关技术，探索如何用新的手段来填充 & 审核内容。 2022 年 10 月 15 日 ～ 11 月 02 日，写于〔深圳福田〕 您可能感兴趣的文章 如何基于 Deno 做持久化定时任务？ NPM 如何发布和使用带范围（scope）的包？ 如何基于 Espanso 提高打字效率，提升幸福感？ 如何更提升各类网站 PC 端访问体验？ Awesome Chrome 插件集锦 Vimium让您的Chrome起飞 那些所倚靠的利器记载 Win下最爱效率神器:AutoHotKey Win下必备神器之Cmder 新编码神器Atom使用纪要 sublime text 下的Markdown写作 SublimeText下写作利器之MarkdownEditing Mac必备软件渐集之ZSH－终极Shell
前端发展史及学习方法论 豆豆的小说《遥远的救世主》中提到：“有道无术，术尚可求，有术无道，止于术”，深以为然。道是方向，术是法则；认清事物的本源、把握事物之规律，有助于后续更好掌握知识、技能，从而解决需求和问题。故而，本篇分享，主要围绕学习方向、如何学习等方面进行。托尔斯泰曾说：“多么伟大的作家，也不过就是在书写他个人的片面而已”，意识流派相关（技术）分享亦是如此，望朋友们带着思考，辩证看待，吸取觉得有用部分即可。 备注：本文写于 2022/07/10 ~ 2022/07/21〔深圳福田〕；起源于内部分享，首发于最新基于 Wiki.js 搭建的网站：前端异空间｜ 清风明月阁。 前端技术可以用来做什么？ 原本并无前端，写的人多了，也便有了这前端；而如今，它或也被唤为：大前端。前端起源初衷，原本只是方便科学家看文档、传论文，而诞生的静态网页（1991）。那么，前端技术现而今可以用来做什么？时至今日，历经近 30 年巨变，前端技术栈，可以涉及的领域越来愈多： 移动端兴起，所带来的移动端领域（Web App）； 与原生端共同协作的混合型应用（Hybrid App ）; 由 React Native 等引领起来的原生移动应用； 由 nw.js、 Electron 等流行起来的原生桌面应用； 由小程序， 快应用 等所带来的即点即用型轻应用； 其他如 TV、VR、IOT、 可视化 、人机交互等领域； 在人工智能、5G 等新技术的引领下，前端未来可期….. 前端开发，发展简史 蛮荒时代： 1991～1994，方便科学家看文档、传论文，而诞生的静态网页；前后端开发一体，前端代码是后端代码的一部分：后端收到浏览器的请求 => 发送静态页面 => 发送到浏览器。 （ Document ）。 石器时代： 1994～2006，从静态走向动态，94 年可以看作前端历史的起点； Tim Berners-Lee 创建了 W3C， HåkonWium Lie 提出 CSS，为动态 web 网页设计的服务端脚本 PHP 诞生； 铁器时代： 2006 ～ 2009， 从后端走向前端；Ajax 为大众所接受； 0 6 年 John Resig 发布了 jQuery，主要用于操作 DOM，其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手，因此很快风靡全球（MVC）； 工业时代： 2009 ～ 从前端走向全端；伴随着信息时代、大数据时代的到来，jQuery 在大量的数据操作中的弊端体现出来了，它在对 DOM 进行大量的操作中，会导致页面的加载缓慢等问题，此时，前端开发人员逐渐觉得力不从心….. 由此，也开启了前端模块化、工业化进程（MVVM）。 近十年前端发展大事件 2008 年，谷歌 V8 引擎发布，拉开终结微软 IE 时代序幕； 2009 年，Ryan Dahl 发布 Node.js ； 2009 年， AngularJS 诞生； 2011 年 React 诞生； 2014 年 Vue.js 诞生； 2014 年 HTML5 标准制定； 2015 年 6 月 ES6 正式发布； 2015 年 Google 提出 PWA； 2017 年 小程序正式上线； 2018 年 3 月， 快应用 及联盟诞生； 2018 年底， Flutter 发布第一个稳定版； 2020 年 5 月 Deno 正式发布； 前端发展历史上大事件(浏览器) 1991 年，第一个网页浏览器 WorldWideWeb 浏览器发布（Nexus）； 1992 年， NCSA 研发出知名浏览器：Mosaic，可在窗口浏览网页； 1994 年，Netscape 成立，发布第一款商业浏览器 Netscape Navigator； 1995 年，微软针对 Netscape 发布了 IE，第一场浏览器之战爆发； 1998 年，随着同 IE 征战的失利，Netscape 浏览器走向开源； 2002 年，借助操作系统的捆绑优势，IE 赢得第一场浏览器之战； 2003 年，苹果 Safari 浏览器登场，推出自己的 Webkit 引擎； 2004 年，Firefox 1.0（前身 Mozilla，Netscape） 推出，引发第二轮大战； 2006 年，时隔六年，微软匆匆推出 IE7 应战，徒劳无功； 2008 年，Google 携 Chrome 参战，为其后来主导江山，拉开序幕； 额外可参考链接： A Brief History of Web Browsers and How They Work 浏览器 user-agent 简史 当今浏览器现状 以人为镜，可以明得失；以史为镜，可以知兴替。截止目前， Chrome 浏览器所占份额，在 70% 左右（实际上，如果按 v8 引擎来算，远比这个高很多）；了解前端这 20 余年发展历史，可以让你更好地把控这份工作。至少，你会明白，现在从事这项工作，相对是更幸福的，你无需再为兼容 IE 而头疼不已；工具的进化，让你能更「便捷」开展这项工作；时代的发展让（大）前端开发者，越发显得重要，再无需背负”切图仔”之名。 当然，在新的时代，伴随新老更替，在摒弃兼容那些陈旧的同时，也会迎来各种「新的挑战」；比方说，更多设备（IOT、穿戴设备、VR）将会基于不同应用形态，运行基于「前端技术栈」所编写的产品；就目前而言，除了运行在浏览器外，微信小程序、快应用、桌面应用、 穿戴设备，基于前端技术栈产品，已渗透颇多。 Web 前端学习方法论 学习方法 多阅读，多编码，多改进；勤于总结，保持激情 & 好奇 & 专注（孰能生巧）。 把握原则 提升搜商：相比于情商和智商，搜商更是不能或缺（Google）； 注重基础：前端知识点多且杂，更新又快，夯实基础，方能快速迎新； 精益求精：遇到问题，通过搜索等，一定要弄明白为止，且举一反三； 二八原则：“学以致用”，不必执着于快速掌握所有，时间有限，分优先级； 立足于己：找到适合自己的方法论，系统性建立属于自己知识体系； 重视效率：大时代裹挟之下：要够快；优化自己的工作流、机制、习惯； 放眼团队：从业务和工程角度，思考前端团队亟需提升的点及发展需要； 寓学于乐：须知“飘风不终朝（zhāo），骤雨不终日”，当懂得「劳逸结合」； 可参考链接 20 Google Search Tips to Use Google More Efficiently 如何更好地运用 Google Chrome How To Ask Questions The Smart Way | 提问的智慧 The Book Of Secret Knowledge 与时俱进版前端资源教程 | Github Roadmap to becoming a web developer in 2019 | Github 如何开始学习前端？ 学习方向：从前面的历史中，我们可以了解到，一些中间性产物如 IE 浏览器、DreamWeaver、以及 jQuery，Backbone.js 等，已然完成了其历史使命；而我们所要学习的，除了基础知识技能（&必要工具）外，即过度至而今流行技术。如在工作中遇到历史遗留产物，可秉承“「学以致用」”的原则，再去了解。 学习起点：如今的前端，涉及场景已非常之多；其所牵扯的技术栈，更是多不可数；浏览器、编辑器、框架、构建、发布、网络、调试、测试、模块化、优化、工程化、后台…… 乃至近几年陆续流行开来的各类小程序、快应用等，万变不离其宗，都是围绕前端三剑客： HTML，CSS，JavaScript 而扩展开来的存在。其中： HTML 为骨架，CSS 为外貌，JavaScript 为交互。 循序渐进：在后面的诸多课程中，都是以这三项基础而开展。或编写、或框架、或调试、或编译、或工程化。而我们所要完成的大作业，也是跟这三剑客息息相关。可喜的是，前端入门，堪称是最为简单的了：用任何编译工具，新建立一个文件（即便是写一个 index.txt） ，写入些内容后将其保存为 index.html (也可以是 htm)，用浏览器打开，就可以看到所呈现出的简单页面。 前端开发需要学习哪些？ 早年，在一篇博文 如何写一手漂亮的 Vue 中，有写几句随言： 身在程序的江湖，如你是一位即将出征武士，对决于浩瀚无尽的需求大军；那么你不仅需要一副好的体格，还需要一身技艺：而这 软件工程学(抑或加算法)就好比内功（查克拉）；而所使用的 各家语言，则好如武学招式（独孤九剑？）；那加以利用的各种工具，当如随身利器（小李飞刀？）；那属于自己一套极致开发流程，便是轻功（凌波微步？）……如是斯言，那么作为开发者的你，几技傍身耶？ 如今，多年过去，对其中阐述的观点，依旧认可。如果将编程开发工作中，需要用到的「软硬技能」，对标成行走江湖的「文治武功」， 以我目前的思考看来，至少需要：基本功、轻功、内功、谋略策略等。 基本功 万丈高楼平地起，扎实的基本功，或可让以后的精修之路，能更加快捷。就这些年经历来看，最重要的基本功当数「学习能力」（自学）；这么谈颇有些抽象，可将其拆分为：问题搜索能力、文档阅读能力、感知分析能力、逻辑思维能力、问题抽象能力等等。这些能力，皆非朝夕可至，需要长期坚持正循环：「学习、运用、改进」。好如肠胃的消化能力，即便通过常年修理那，已经具备，但仍需勤加养护，否则就会导致反噬。如何修炼「自学习能力」，每个人都有自己的方法，在此就不多赘谈。 “首先得是一位程序员，然后才是一位「前端程序员」”。诸如计算机原理、数据结构、网络等大学时代所学的基础知识，也该属于必备基本功。于前端开发而言，额外需要具备的基本功是： Web 前端三剑客：Front-end web development is the practice of converting data to graphical interface for user to view and interact with data through digital interaction using HTML, CSS and JavaScript (前端 Web 开发，是将数据转换为图形界面的实践，供用户使用 HTML，CSS 和 JavaScript 通过数字交互查看数据并与之交互)。——维基百科。 HTML(5) ：（超文本标记语言 —— HyperText Markup Language）是构成 Web 世界的基石。 JavaScript(6) ：JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 CSS(3) ：层叠样式表（Cascading Style Sheets）是一种用来表现 HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 温馨提示：良好的基本功，至少需要勤奋好学、端正心态、持之以恒。 招式 在掌握了武学基本功之后，与人切磋，就好比是要解决「各类需求」，合乎时宜的招数/套路（如独孤九剑），显得很重要。Web 网页开发，只借助 Web 前端三剑客，当然可以完成，可在如今时代，势必是低效的选择。选择合适「框架」，诸如 React 、 Vue.js ，来提升开发效率，则为更为明智的选择。 前端：ES6、 TypeScript 、 Vue.js ｜ React | Svelte | AngularJS 、Webpack ｜ Vite ….. 后端：Node.js(Koa2) ｜ Python 、Nginx、MySQL | MongoDb 、 Redis ….. 兵器 工欲善其事，必先利其器。「工具」的重要性，实在无须多言；它，从生到死，这期间的每时每刻，它几乎都陪伴着你我。在编程开发中，配备适合自己的工具，犹如上阵杀敌携带的「兵器」，从长期效果看，大有「失之毫厘差之千里」之势；就自己而言，使用 MacOS 开发，远比基于 Windows 系统要高效，而且心情、心境也会好很多。对于工具选取，建议认真对待。前端开发中，所常用工具粗列有： 代码编辑器： VsCode ｜ SublimeText3 ｜ Atom、Vim ….. 代码规范： Prettier 、Eslint、 Airbnb …… 代码提交： Git 、 iTerm2 、Husky、lint-staged、pre-commit、 Gitmoji …… 软件应用： Chrome 、 Docker 、 XMind 、 Fig 、 Obsidian …… 在线服务： Github 、 Gitlab 、 Jenkins 、CI/CD、 Sentry ….. 硬件工具：Mac、趁手键盘、人体工学座椅、防噪音耳机…… 轻功 国漫《秦时明月》中，白凤有句台词，非常喜欢：“轻功不代表武功，但速度决定了你我的距离”。在软件开发中，智能化、自动化 趋势越发明显，作为程序员如不能尽快适应，其所面临的窘境可想而知；势必会在科技的浪潮中捉襟见肘；所以这更加要求从业者能快准稳的去解决需求，同时保持知识技能的不断 更新。 而这 快 字，自然是业务技能熟练度多半取决定性作用，但如果能简化、优化的工作流机制，势必锦上添花。而这个话题，所涉及的点线面，非一言可蔽之；这需要在渐进的学习探索中，不断去变化更新。但至少一个当前的准则是：即便不能全自动，至少也须半自动化。 当前阶段，所能给出的建议是：摒除盲忙，予勤于思；善于去发现效率问题，利用抽象思维，剥离精确性部分，借助已有工具或代码脚本，来代替人工手动处理，从而提升整理效率，并形成复用；再之后，坚持、反复坚持。 内功 金庸先生在《倚天屠龙记》中写道：他强由他强，清风拂山岗；他横由他横，明月照大江。他自狠来他自恶，我自一口真气足。在编程开发中，亦是同理；拥有扎实功底，掌握「核心原理」，方能在不断变迁的浪潮中，快速掌握精髓，紧跟时代步伐，从而利于不败之地。 何为编程内功？编程通用性知识，如算法、数据结构、重构、性能优化、面向对象编程、函数式编程等，当然可算为内功。但，可以更宽泛去看，任何工具或框架，在能够熟练使用基础上，深层次 掌握其设计、优劣，这便也是在修炼内功。就拿汽车而言，会开只是掌握了这个代步工具的玩儿法；能清楚知晓其构造，坏了可修，有部件能组装，这个阶段才算是增添了份「技能」。 内功修炼，非朝夕可至。在上述方向上的精修，实际就是内功的提炼，尤其在解决所遇到些问题时，这是自我提升的良机。编程通用性知识，如函数式编程、面向对象编程、设计模式，也可以逐步学习深入；此外，抽空建议读一读《代码大全》、《重构 · 改善既有代码的设计》等著作。 谋略策略 《孙子兵法·谋攻篇》中写道：上兵伐谋，其次伐交，其次伐兵，其下攻城。在编程开发领域，尤其明显── 必要时，再编写必要的代码。程序员，不该只是需求的实现者；更须参与到产品设计阶段，贡献自己所知、所学，以促进产品更有可行性、良好体验。即便到了实现阶段，也该先「三思（设计）后行（编码）」。Elon Musk 在经历生产系统过程中的惨痛教训后，总结五步工作法，与君共勉： 优秀工程师犯的最大错误，就是持续优化一个不该存在的东西。所以我要求所有人走完基于第一性原理的流程，第一步是约束和优化需求，让它不繁琐；第二步是删除冗余的零件或工艺步骤；如果你没有把你删除的东西的 10% 又加回来，那意味着还可以继续删除；第三步是简化和优化的迭代；第四步是加快生产速度，第五步是实现自动化；因为我也经常犯这种顺序性的错误，所以我经常告诫自己这才是正确的顺序。—— Elon Musk 概括性来讲即为：验证你的需求、最少的流程、简化和优化、加速迭代、自动化。对于工作中遇到的诉求，或者接下来所要完成的「大作业」，建议参考黄金圈理论（The Golden Circle）：在关注事物之时，更多关注背后的 WHY， 而不要只看到外部的 WHAT；并构建持续的迭代循环（Why => How => What），以此驱动：做正确的事 & 正确的做事。当然，真正做到这些，需要涉及到敏捷思维、产品思维、沟通技巧、项目架构等，可循序渐进、次第体悟、不断更善。 学习参考资料 Awesome-Mac ：收集了各种类别的出色 macOS 软件，可选取适合自己，以提升工作效率； Nice Front-End Tutorial ：与时俱进版前端资源，教程和意见，可以查找些学习方向、资料； 现代 JavaScript 教程：以最新的 JS 标准为基准。通过简单但足够详细的内容，为你讲解从基础到高阶的 JS 相关知识； ECMAScript 6 入门教程 ：开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性； HTML 初学者教程 ：HTML（超文本标记语言）是构成 Web 世界的砖瓦，它定义了网页内容的含义和结构； React ：用于构建用户界面的主流 JavaScript 库，革命性创新，设计独特、性能出众，简单易用； Vue3 ：一款友好的、多用途且高性能的渐进式 JavaScript 框架，灵活、高效、易用、成熟； Svelte ：一种构建 Web 应用程序的新方法；将浏览器中完成大部分工作，转移到构建应用程序时的编译步骤； Webpack：是一个用于现代 JavaScript 应用程序的静态模块打包工具，能够转换、捆绑或构建几乎任何资源。 Vite：一个基于浏览器原生 ES imports 的开发服务器（下一代 Web 前端构建工具）； Refactoring.Guru ：免费、在线学习代码「重构」和「设计模式」的网站，强烈推荐收藏 & 阅读； Clean Code JavaScript：🛁 Clean Code concepts adapted for JavaScript. Front-End-Checklist ：The perfect Front-End Checklist for modern websites and meticulous developers. Frontend Developer Roadmap：Step by step guide to becoming a modern frontend developer in 2022； JavaScript The Right Way ：旨在向新开发人员介绍 JavaScript，并帮助有经验的开发人员更多地了解其最佳实践； 前端精读 weekly：前端精读周刊（Github 开源项目，20k Star）。帮你理解最前沿、实用的技术。 大作业 题目：做一款「代办清单/To Do List」类 Web 应用；具体交互设计、UI 设计不限，可参考优秀 Web 或原生应用。 目的：“学以致用”，旨在训练各位学习能力（包含：如何 搜索、提问、使用框架、工具、及发现、解决未知问题）和思维能力（包含产品思维、敏捷思维、逻辑思维等）。 时间：直至本次培训结束；有效时间，大致三个周。 技术栈：不限；框架可以是 React、Vue.js 或 Web Components；构建工具可选 Vite、Webpack 或 rollup.js。 主要方向 具体说明 评分占比 备注说明 项目、代码规范 语义化命名、简洁代码设计等，需符合业界通用规范 20% 前端项目开发规范意见 - 项目规范 组件封装设计 合理的设计组件，达到易读、易维护、易扩展之目标 20% 组件设计原则 Black Pearl 功能有用且丰富 覆盖基本功能，并能在此基础上附加有价值的创新 20% 具体可参见 Trello、TickTick 等应用 UI、交互设计 设计良好，且适配 PC、Pad、Phone 等多端设备 20% 通过 CSS，以及适当的 DOM 区分即可 代码提交规范 按每个功能点进行提交，Commit Message 写清晰 10% 前端项目开发规范意见 - 代码规范 提前完成交付 本作业相对较为简单，不应花费太多时间，至少保证如期完成 10% 合理分配时间，建议先构思产品设计、探究如何实现、再动手编码 您可能感兴趣的文章 微话搭建优质 Web 应用其二：AMP 篇 2022，值得学习系列之：函数式编程 如何防范 CSRF 跨站请求伪造？； H5 拉起微信小程序流程解析； Web 开发中，较有用的一些 API 分享； 腾讯云服务器使用感受，及折腾笔记； 如何基于 npm 在安装时为依赖重命名？； 如何为 nginx 配置多个域名服务？； 如何基于 Flarum 搭建一个优雅简洁论坛？； Linux 系统如何设置开机启动脚本？； 如何将 Flarum 论坛内容，主动推送至百度；
在诞生近 70 年之后， 函数式编程（Functional Programming）开始获得越来越多的关注。并且随着时间推移、技术演变，它与前端开发，结合的也越发紧密；前些日子，读了些文章，对函数式编程有了粗浅的了解，并在代码上做了些实践，发现这种思想非常有趣，喜之不已。近日我女神对它突感好奇，于是乎，便结合业界已有之分享，结合自己理解与实践，梳理成文，以便解释。 备注：原文首发于：浅谈关于「函数式编程」的理解 ｜ 宜想悠然亭，@2022 年 05 月 30 日。 与非函数式的区别 非函数式的示例代码如下： 1 2 3 4 let counter = 0 const increment = () => { counter++ } 1 2 3 const increment = (counter) => { return counter + 1 } 你可能会觉得这个例子太过普通。但，这就是函数式编程的准则：不依赖于外部的数据，而且也不改变外部数据的值，而是返回一个新的值给你。 再看一段复杂一点，却较为 实用的代码示例 ： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 const handleSearch = (_keywords) => { let queryResultArr; if (!_keywords) { queryResultArr = [] } else { queryResultArr = getQueryResult(_keywords) } setQueryResultArr(queryResultArr) setIsShowResults(queryResultArr.length > 0) } const throttle = (fn, wait) => { let pre = Date.now(); return function () { const context = this; const args = arguments; const now = Date.now(); if (now - pre >= wait) { fn.apply(context, args) pre = Date.now() } } } const requestSearchFunc = throttle(handleSearch, 200) const handleInputChange = (event) => { const value = event.target.value; setKeywords(value) requestSearchFunc(value) } 可以使用 throttle 来节流函数，如：requestSearchFunc；这个技术其实就是 Currying 技术（把一个函数的多个参数分解成多个函数， 然后把函数多层封装起来，每层函数都返回一个函数去接收下一个参数这样，可以简化函数的多个参数）。从这个技术上，你可能体会到函数式编程的理念：把函数当成变量来用，关注于描述问题而不是怎么实现，这样可以让代码更易读。 过程式 vs 函数式 过程式编程，主要要采取过程调用，或函数调用的方式来进行流程控制；它主要关注：一步一步地解决问题。这是完全有效的编码方式，但当您希望应用程序扩展时，它存在许多缺点。而函数式编程（ Functional Programming）关注的是：描述要做什么，而不是如何做（describe what to do, rather than how to do it）。 举例来说，对于一个英文名数组，需要将其中短横线命名，转化为大驼峰格式。基于传统过程式编程，可能你不会想太多，直接将想法用代码来表达出来，临时变量、循环语句，用的飞起： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const nameArr = ['nice-jade', 'rayso-lee', 'jon-snow', 'arya-stark']; const newArr = []; for (let i = 0, len = nameArr.length; i str[0].toUpperCase() + str.slice(1).toLowerCase() const convertName = (name) => { let tempNameArr = name.split('-') let newNameArr = [] for (let j = 0, nameLen = tempNameArr.length; j { const newArr = [] for (let i = 0, len = nameArr.length; i str[0].toUpperCase() + str.slice(1).toLowerCase() const convertName = compose(join(' '), map(capitalize), split('-')) const newNameArr = nameArr.map((item) => convertName(item)) console.log(newNameArr) // [ 'Nice Jade', 'Rayso Lee', 'Jon Snow', 'Arya Stark' ] 如上代码（有借助 ramda ——「实用的函数式 JavaScript 工具库」来实现），虽依然把程序的逻辑分成了函数，不过这些函数都是 Functional 的。因为它们有三个症状： 它们之间没有共享的变量。 函数间通过参数和返回值来传递数据。 在函数里没有临时变量。 从这个编程思路，可以清晰看出，函数式编程的思维过程是完全不同的，它的着眼点是函数，而不是过程，它强调的是：通过函数的组合、变换去解决问题，而不是通过写什么样的语句去解决问题；当你的代码越来越多的时候，这种函数的拆分和组合，就会产生出更加强大的力量。 什么函数式编程？ 函数式编程 ，或称函数程序设计、泛函编程（英语：Functional Programming），是一种编程范式，它将电脑运算视为函数运算，并且避免使用程序状态以及易变对象。比起指令式编程，函数式编程更加强调程序执行的结果，而非执行的过程；倡导利用若干简单的执行单元，让计算结果不断渐进，逐层推导复杂的运算，而不是设计一个复杂的执行过程。 在函数式编程中，函数是头等对象，意思是说一个函数，既可以作为其它函数的输入参数值，也可以从函数中返回值，被修改或者被分配给一个变量。 不仅最古老的函数式语言 Lisp 重获青春，而且新的函数式语言层出不穷，比如 Erlang、clojure、Scala、F#等等。目前最当红的 Python、Ruby、Javascript，对函数式编程的支持都很强，就连老牌的面向对象的 Java、面向过程的 PHP，都忙不迭地加入对匿名函数的支持。越来越多的迹象表明，函数式编程已经不再是学术界的最爱，开始大踏步地在业界投入实用。 也许继”面向对象编程”之后，”函数式编程”会成为下一个编程的主流范式（paradigm）。未来的程序员恐怕或多或少都必须懂一点。—— 函数式编程初探 @阮一峰 （2012 年） 函数，即是一种描述集合和集合之间的转换关系，输入通过函数，都会返回有且只有一个输出值。函数实际上是一个关系，或者说成一种映射，而这种映射关系是可 组合 的，当知道一个函数的输出类型，可以匹配另一个函数的输入，那他们就可以进行组合。如上述代码中提及的 convertName 函数。 在编程世界中，需要处理的逻辑，其实只有“数据”和“关系”，而关系就是 函数。一旦映射关系（函数）找到了，问题即能迎刃而解；剩下的事情，就是让数据通过这种关系，然后转换成另一个数据而已。 函数式编程的特点 函数是”第一等公民” 所谓 “第一等公民” （First Class），指的是函数与其他数据类型一样，处于平等地位，可以赋值给其他变量，也可以作为参数，传入另一个函数，或者作为别的函数的返回值。如上文中代码： 1 const convertName = compose(join(' '), map(capitalize), split('-')) 无状态和数据不可变 无状态（Statelessness）和数据不可变（Immutable data），这是函数式编程的核心概念： 数据不可变：它要求你所有的数据都是不可变的，这意味着如果你想修改一个对象，那你应该创建一个新的对象用来修改，而不是修改已有的对象。 无状态：主要是强调对于一个函数，不管你何时运行，它都应该像第一次运行一样，给定相同的输入，给出相同的输出，完全不依赖外部状态的变化。 为了实现这个目标，函数式编程提出函数应该具备的特性：没有副作用和纯函数。 没有”副作用” 所谓”副作用”（side effect），指的是函数内部与外部互动（最典型的情况，就是修改全局变量的值），产生运算以外的其他结果。 函数式编程强调没有”副作用”，意味着函数要保持独立，所有功能就是返回一个新的值，没有其他行为，尤其是不得修改外部变量的值。 引用透明 引用透明（Referential transparency），指的是函数的运行不依赖于外部变量或”状态”，只依赖于输入的参数，任何时候只要参数相同，引用函数所得到的返回值总是相同的。 有了前面的第三点和第四点，这点是很显然的。其他类型的语言，函数的返回值往往与系统状态有关，不同的状态之下，返回值是不一样的。这就叫”引用不透明”，很不利于观察和理解程序的行为。 惰性执行 所谓惰性执行（Lazy Evaluation），指的是函数只在需要的时候执行，即：不产生无意义的中间变量。像上面👆的例子，函数式编程跟命令式编程最大的区别就在于：几乎没有中间变量，它从头到尾都在写函数，只有在最后的时候才通过调用 convertName 产生实际的结果。 尾递归优化 迭代在函数式语言中常用递归来完成，用递归来实现控制流程的机制，是函数式编程的一个非常重要的特点。我想您当然知道 递归 的害处，那就是如果递归很深的话，stack 受不了，并会导致性能大幅度下降。所以，我们使用尾递归优化技术——每次递归时都会重用 stack，这样一来能够提升性能。尾递归的实现，其实是基于编译器的识别和优化的，编译器发现一个函数是尾递归，就会把它实现为与命令式编程中的迭代差不多的汇编码。 函数式编程相关技术 map & reduce ：这个技术不用多说了，函数式编程最常见的技术，就是对一个集合做 Map 和 Reduce 操作。这比起过程式的语言来说，在代码上要更容易阅读。（传统过程式的语言需要使用 for/while 循环，然后在各种变量中把数据倒过来倒过去的）这个很像 C++中的 STL 中的 foreach，find_if，count_if 之流的函数的玩法。 pipeline：这个技术的意思是，把函数实例成一个一个的 action，然后，把一组 action 放到一个数组或是列表中，然后把数据传给这个 action list，数据就像一个 pipeline 一样顺序地被各个函数所操作，最终得到我们想要的结果。 compose：它可以接收多个独立的函数作为参数，然后将这些函数进行组合串联，最终返回一个“组合函数”。pipe 与 compose 的共同点是：都返回“组合函数”，区别则是执行的顺序不同，前者是从左向右执行，后者则是从右向左执行。 recursing 递归 ：递归最大的好处就简化代码，他可以把一个复杂的问题用很简单的代码描述出来。注意：递归的精髓是描述问题，而这正是函数式编程的精髓。 currying：把一个函数的多个参数分解成多个函数， 然后把函数多层封装起来，每层函数都返回一个函数去接收下一个参数这样，可以简化函数的多个参数。在 C++中，这个很像 STL 中的 bind_1st 或是 bind2nd。 higher order function 高阶函数：所谓高阶函数就是函数当参数，把传入的函数做一个封装，然后返回这个封装函数。现象上就是函数传进传出，就像面向对象对象满天飞一样。 函数式编程的意义 代码简洁，开发快速：大量使用函数，减少了代码的重复，因此程序比较短，开发速度较快； 接近自然语言，易于理解：函数式编程的自由度很高，可以写出很接近自然语言的代码； 更方便的代码管理：不依赖、也不会改变外界的状态，只要给定输入参数，返回的结果必定相同； 更少的出错概率：因为每个函数都很小，而且相同输入，永远可以得到相同的输出，测试也很简单； 易于”并发编程”：因为它不修改变量，所以根本不存在”锁”线程的问题； 代码的热升级：基于没有副作用特点，只要保证接口不变，内部实现是外部无关的。 函数式编程，结语 正如您在函数式编程中看到的，它希望使用小的（理想情况下是纯函数）函数来解决问题。这种方法也非常具有可 扩展性，并且函数可以 重用。 没有更好和更坏的范式。有经验的开发人员，可以看到每种范式的优点，并为给定的问题选择相对更合适的。过程式编程，并不是说你不能使用函数；函数式编程也不会阻止你使用“类”。这些范式，只是以一种随代码增长而有益的方式，来帮助解决问题。 所参考系列文章 函数式编程 | 酷 壳 – CoolShell 函数式编程初探 | 阮一峰的网络日志 简明 JavaScript 函数式编程——入门篇 我所了解的函数式编程 ｜ scarletsky 猜您可能感兴趣的文章 如何基于 npm 在安装时为依赖重命名？ 如何防范 CSRF 跨站请求伪造？ H5 拉起微信小程序流程解析 如何基于 Flarum 搭建一个优雅简洁论坛？ Mac、Linux 如何快速升级 Node.js 版本？ 如何在 Mac 上安装 Deno，并加入至 PATH 如何启用 gmail 邮件的 SMTP 服务？ Linux 系统如何设置开机启动脚本？ 如何将 Flarum 论坛内容，主动推送至百度 解决 Node.js 连接 MySQL 8.0 报错 如何快速升级 Ghost 博客至 4.0 版本？ 如何为 nginx 配置多个域名服务？
沈从文先生在给张兆和的情书中，有写道：“我一辈子走过许多地方的路，行过许多地方的桥，看过许多形状的云，喝过许多种类的酒，却只爱过一个正当最好年龄的人”。近十年，写文章或文档，用过非常多基于 Markdown 出色的文本编辑工具，诸如 Sublime Text 、 Cmd Markdown 、 MarkEditor 、 Typora ， Arya 在线 等等，直到遇见 Obsidian ，被强大的功能、完美的设计所震撼、折服，堪称地表最强文本编辑工具。 Obsidian 是一个强大的知识库、一款好用的笔记应用程序，位于纯文本 Markdown 文件的本地文件夹之上。其目标是：永远成为你第二个大脑。人脑是非线性的：人们总是从一个想法跳到另一个想法。你的第二个大脑应该同样工作。在 Obsidian 中，建立和跟随连接 是无摩擦的。像园丁一样照顾你的笔记；在一天结束时，坐下来惊叹于您自己的知识图谱。── 出自 倾城之链 | Obsidian 。 Obsidian ，它不仅是极其好用的文本编辑工具，而且还是一款强大的知识库；但，在这里就不对知识库作探讨，主要就其极致的文本编辑体验，结合自己短暂的实践体验，来跟朋友们分享下 Obsidian 的优势： 默认所见即所得（wysiwyg）的编辑模式； 支持粘贴 HTML 自动转换为 Markdown； 所有操作默认有快捷键，并且方便自行更改； 应用打开极快，操作流畅，所占用内存很少； 100% 免费供个人使用，无需账户或注册； 支持扩展，社区已贡献有 近 600 个插件 ； 要着重称赞的就是 Obsidian 的插件，这在 Markdown 编辑器工具中是少见的。首先，这种机制本身就很赞，不将所有功能，都集成于应用本身，而按需给予，善莫如是，使其能在轻量与强大中平衡；其次，有了这种机制，即能允许用户介入，参与贡献，无疑是为产品功能丰富，提供了绝佳的途径。 备注：Obsidian 插件，安装与使用，都非常方便；前往 Obsidian Plugins，检索您想要的插件；如果您已安装并打开 Obsidian，点击 Open in Obsidian，即可快速在 Obsidian 中，打开该插件；点击 install 安装之后，再点击 enable 即可启用该插件（如下截图）。对于有需要按键才能作用的插件，您还可以修改快捷键以及其他设置参数。 下面，跟大家分享些个人所喜欢的插件： ADVANCED TABLES ：改进的表格导航、格式化和操作 Add improved navigation, formatting, and manipulation to markdown tables in Obsidian Markdown 的表格语法比在 Word 中插入表格还要麻烦，一旦想要增改某个内容，更是灾难。该插件则大大简化了表格输入的流程。 要创建表格，请创建一个 | 字 符，然后键入表格的第一个标题并按 Tab，就会触发插件的自动补全语法。之后通过 Tab / Shift + Tab 来在表格之间移动光标，通过 Enter 完成输入；顷刻之间，就能写完您想要的表格，实在是完美。 如果您想了解更多，可参见 Github 源码： tgrosinger/advanced-tables-obsidian 。 OBSIDIAN PANGU ：改进中英文间距 为 Obsidian 笔记加上「盘古之白」，排版强迫症者的福音。 | A small plugin aims to add space between Chinese Characters and English Alphabet, and it is a boon for typographically compulsive people. 这个小插件，旨在增加汉字和英文字母之间，添加空格，使得整个排版更加专业且美观；这对于排版强迫症的人来说，是一个福音（我个人非常喜欢，先前是借助 Prettier 或其他工具，来实现）。 如果你想了解更多，可以参见 Github 源码： Obsidian Pangu Plugin 。 Editor Syntax Highlight ：代码高亮 A plugin for Obsidian which allows syntax highlighting for code blocks in the editor. 这对于程序员（软件开发）来讲，非常有价值；它能让编辑界面的代码，页面的元数据都有高亮效果；而且支持的格式极多，如 xml、json、ts、js、html、css、python、bash 等等。值得一提的是，在代码区域，可以放心使用 Tab 按键，无需担心会清空你选中的代码，其效果跟在代码编辑器中是一致的，体验极佳。 如果你想了解更多，可以参见 Github 源码： Editor Syntax Highlight Obsidian Plugin 。 Kanban ：看板模块 Create markdown-backed Kanban boards in Obsidian Kanban，这款插件可以为 Obsidian 增加看板模块；让你可以使用看板，来管理任务或笔记。它有两种看板创建方式：使用命令添加新的看板，也可以使用右键菜单创建；而且可以在 Markdown 和看板中，随时切换，如果你想要用 Obsidian 管理日常任务的话，它是非常好的插件。 关于如何创建和使用看板，可参见： 创建看板 ；最简单的方式是：右键单击文件夹，并选择 New Kanban board。值得一提的是，Obsidian 的看板功能，其使用体验，在笔者看来要比 Giuhub 、 Gitlab 、 Trello 要用很多，强烈推荐。 如果你想了解更多，可以参见 Github 源码： Advanced Tables for Obsidian 。 Outline：文件大纲（官方插件） Display the outline of current file or linked pane Outline 是一款大纲插件，可以根据标题自动为 Obsidian 文档生成目录大纲，可以快速预览所有标题，也可以用来快速跳转到指定位置，如果你经常写长文章的话会非常有用，Outline 是官方插件，到核心插件中启用即可自动开启。具体操作为：打开设置（command + ,） => Core Plugin => 发起检索 Outline => 选择开启。 Mind Map ：思维导图插件 This repository contains a plugin for Obsidian for viewing Markdown notes as Mind Maps using Markmap. Mind Map 是一款 思维导图 插件，它可以为你的 Markdown 文本转换为思维导图，可以更清晰地查看文章的结构和内容，还支持一些简单的操作，比如放大缩小、拖拽、收起展开节点等，你还可以一键复制思维导图图片，分享或保存到其他位置。 如果你想了解更多，可以参见 Github 源码： Obsidian Mind Map 。 Paste URL into selection ：快速插入链接 Insert links (URLs) into a selected text “notion-style” using regular Ctrl/Cmd + V 当想要在鼠标选中的单词上插入 URL 时，基于 Markdown 语法，并不是很方便；此时你可以安装 Paste URL into selection 这款插件；启用该插件后，只需要选中文字再 Cmd + V （or Ctrl V Windows 系统） 键，就可以直接添加链接，比富文本编辑器中操作，还要方便许多。 如果你想了解更多，可以参见 Github 源码： Paste URL into selection 。 Checklist ：待办任务增强 Consolidate checklists across all files into a single view Checklist 是一款待办任务增强插件，它可以为 Obsidian 的侧边栏增加一个任务栏，你可以在该栏目下查看到所有笔记中的待办任务，可以快速跳转到任务的位置，也可以直接在任务栏上勾选完成任务。其用法如下： 启用此插件后，您将看到清单出现在右侧边栏中； 您标记的任何清单项目块都 #todo 将显示在此侧边栏中； 您可以通过在编辑器中勾选它们（例如 - [ ]-> - [x]）或单击侧栏中的清单项目来完成清单项目，这将为您更新 .md 文件； 如果你想了解更多，可以参见 Github 源码： obsidian-checklist-plugin 。 Calendar：日历📅 This plugin for Obsidian creates a simple Calendar view for visualizing and navigating between your daily notes. Calendar 是一款为增强 Daily notes 而制作的日历插件，它可以在侧边栏上增加日历模块，你可以用它来快速跳转到特定时间的每日笔记，而且你还可以用它来为没有每日笔记的日期创建笔记，可以为之前的日期创建，也可以创建未来的笔记。其用法如下： 在设置菜单中启用插件后，您应该会看到日历视图出现在右侧边栏中。该插件会读取您的每日笔记设置，以了解您的日期格式、每日笔记模板的位置以及它创建的新每日笔记的位置。 如果你想了解更多，可以参见 Github 源码：obsidian-calendar-plugin。 如今，Obsidian 插件市场，所蕴含的宝藏已十分丰富，大凡能想到优化点，都已有人贡献出良好的设计方案。如果您有自己独特诉求，完全可以基于Obsidian，定制属于自己的插件，只需阅读相关文档，懂些 JavaScript 编程基础即可。具体可参见文章：为 Obsidian.md 创建插件 或 How to create your own Obsidian Plugin。 窃以为，好的工具与强大工具，其最大区别在于：前者会让使用者觉得自己跟软件本身都很强；而后者只会让使用者觉得工具很强。Obsidian 就属于前者，它能让用户 0 配置，即能快速上手使用；又能很好支持愿意折腾的朋友，在上面各种折腾，附加额外功能，实在是值得称赞。如今，只使用了没几天，尚有更多玩法儿，等待探索；欢迎各路朋友，分享您宝贵的建议和意见。 原文首发于个人最新博客：地表最强 Markdown 文本编辑工具——Obsidian | 悠然宜想亭。 您可能感兴趣的文章 谷歌自适应广告素材，制作心得分享 优质网站同好者周刊（第 38 期）- 倾城之链 优质网站同好者周刊（第 37 期）- 倾城之链 优质网站同好者周刊（第 36 期）- 倾城之链 开启技术变现之路，探索第三收入来源 云集优站，尽在「倾城之链」 云集优站，尽在「倾城之链」其二 欲问美图何处寻？倾城之链有定音 超实用图片工具网站，值得典藏 高质量免费图标资源大全 十佳 AI 产品工具，为生活添彩 最想与朋友分享的网站列表
对于博客或者文档，全文搜索是非常重要的功能。现如今，网站生成器工具，无论是静态的、携带完整后台的、还是基于低代码、无代码的，皆不可胜数，诸如：Hexo、Vuepress、Docsify、Hugo、Ghost 等，但之于「搜索」功能，或未提供、或不尽如人意；基于这样的背景，本文旨在探讨如何打造本地全文搜索？ 根据先前的些许经验，要使得本地全文检索，拥有良好体验，至少要包含以下几个方面： 基于全文本内容，建好索引（数据），支持用户输入关键字，能快速、准确检索到结果； （实时）展示检索结果列表，高亮检索关键字，最好可以按照匹配程度高低来排序； 支持点击结果列表项跳转至页面，高亮所有关键字，并将页面滚动至第一个关键字位置； 更多优化，支持用户分词搜搜，增加 -、\* 等匹配方式（一般来讲，满足以上三条已足够）； 下面，与大家分享下，如何通过简洁操作，做到以上三条： 如何检索关键字？ 方案一 基于类 Gitbook 默认方案来创建索引。如快应用文档，其数据来源于：search_plus_index.json；在本地编译 md 文件时，将所有其内容纯文本化，作为数据源，并将其他信息如路径、标题、关键字等，一并存储于该 JSON 文件；发起关键字检索时，只需读取该 json 内容，并逐个遍历；将存有关键字的项 push 至结果数组，从而展示给用户就好。 创建索引 1 gitbook build 发起搜索 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function query(keyword) { if (keyword == null || keyword.trim() === '') return; var results = [], index = -1; for (var page in INDEX_DATA) { if ((index = INDEX_DATA[page].body.toLowerCase().indexOf(keyword.toLowerCase())) !== -1) { results.push({ url: page, title: INDEX_DATA[page].title, body: INDEX_DATA[page].body.substr(Math.max(0, index - 50), MAX_DESCRIPTION_SIZE).replace(new RegExp('(' + escapeReg(keyword) + ')', 'gi'), '$1') }); } } displayResults({ count: results.length, query: keyword, results: results }); } 方案二 基于 Lunr.js （A bit like Solr, but much smaller and not as bright.）结合 nodejieba（”结巴”中文分词的 Node.js 版本），来实现中文全文搜索。 Lunr.js is a small, full-text search library for use in the browser. It indexes JSON documents and provides a simple search interface for retrieving documents that best match text queries. Lunr.js 是一个用于浏览器的小型全文搜索库。它索引 JSON 文档并提供一个简单的搜索界面，用于检索与文本查询最匹配的文档。它具有以下功能特征： 简单的：Lunr 设计小巧但功能齐全，让您无需外部服务器端搜索服务即可提供出色的搜索体验。 可扩展：添加强大的语言处理器为用户查询提供更准确的结果，或调整内置处理器以更好地适应您的内容 到处：Lunr 没有外部依赖项，可以在您的浏览器或带有 node.js 的服务器上工作； 基本原理：Lunr 将字符串拆分为单词标记，然后经过一系列处理（score 计算分数、metadata 元数据），最终组装成为结果对象数组；关于这块儿详细信息，可参见 Lunr.js 核心概念；值得一提的是，Lunr 不能很好支持中文，因此对于中文分析，有借助 nodejieba 做了处理。具体创建索引的过程，参见如下代码（基于 Gatsbyjs 的实现）： 创建索引 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 const marked = require('marked') const striptags = require(`striptags`) const lunr = require('lunr') require('./src/helper/lib/lunr.stemmer.support.js')(lunr) require('./src/helper/lib/lunr.zh.js')(lunr) const createIndex = async (docsNodes, type, cache) => { const cacheKey = `IndexLunr` const cached = await cache.get(cacheKey) if (cached) { return cached } const documents = [] const store = {} // iterate over all posts for (const node of docsNodes) { const { slug } = node.fields const title = node.frontmatter.title const tag = node.frontmatter.tag const content = striptags(marked.parse(node.rawMarkdownBody)) documents.push({ slug, title, tag, content, }) store[slug] = { title, tag, content, } } const index = lunr(function () { this.use(lunr.zh) this.ref('slug') this.field('title') this.field('tag') this.field('content') for (const doc of documents) { this.add(doc) } }) const json = { index: index.toJSON(), store } await cache.set(cacheKey, json) return json } 发起搜索 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 getQueryResult(query) { const lunrData = this.props.lunrData const { store } = lunrData.LunrIndex // Lunr in action here const index = Index.load(lunrData.LunrIndex.index) let results = [] try { // Search is a lunr method results = index.search(query).map(({ ref }) => { // Map search results to an array of {slug, title, excerpt} objects return { slug: ref, ...store[ref], } }) return results || [] } catch (error) { console.error(`Something Error: ${error}`) return results } } handleSearch(keywords) { let queryResultArr; if (!keywords) { queryResultArr = [] } else { queryResultArr = this.getQueryResult(keywords) } this.keywords = keywords this.setState({ queryResultArr: queryResultArr, isShowResults: queryResultArr.length > 0 }) } 如何高亮文本？ 1 2 3 4 5 6 7 8 highlightKeyword(keyword) { const contentDom = document.querySelector(`#layout .wrapper .content`) const instance = new Mark(contentDom); instance.mark(keyword, { exclude: ["h1"], className: "mark-highlight" }); } 如何定位到具体内容？ 1 2 3 4 setTimeout(() => { const markNode = document.querySelector("#layout .mark-highlight"); markNode && markNode.scrollIntoView({ behavior: "smooth", block: "start" }); }, 1000) 先前基于 Gatsbyjs 搭建一个静态网站，上文中提及的代码，完整版可参见：blog.nicelinks.site | search。在线示例：倾城周刊、快应用消息中心。 您可能感兴趣的文章 如何防范 CSRF 跨站请求伪造？； H5 拉起微信小程序流程解析； Web 开发中，较有用的一些 API 分享； 腾讯云服务器使用感受，及折腾笔记； 如何基于 npm 在安装时为依赖重命名？； 如何为 nginx 配置多个域名服务？； 如何基于 Flarum 搭建一个优雅简洁论坛？； Linux 系统如何设置开机启动脚本？； 如何将 Flarum 论坛内容，主动推送至百度；
自 2021 年九月，就有尝试在 Google Ads，为个人应用倾城之链投递广告，以增加转化（访问量）；Google Ads 使用比较简单，价格相对也便宜，可谓「物美价廉」；其中，比较复杂的是：“为您的自适应型展示广告添加素材资源，争取更多转化”；为提升转化，就得逼着自己去“设计”「广告素材」，此篇文章，旨在记录在制作过程中的些许心得，以期后续可不断提升；也希望能给有相同诉求的朋友，提供些参考（备注：负面的也蛮有价值）。 广告标题 标题是广告的第一行，最多可以包含 30 个字符。最多可以添加 3 个标题，这些标题将与其他素材资源组合以生成广告。在实际显示时，标题的长度取决于展示广告的网站。如果需要省略内容，则会以省略号结尾。 最多可添加 5 个标题。以上是 Google 对标题的要求。下面是我对倾城之链广告标题的探索： 免费、优质资源网站导航平台（效果非常好） 免费、优质资源网站分享平台 发现高品质、免费资源网站（效果非常好） 分享 & 发现免费资源网站平台 免费、实用的资源网站导航 最能开阔您思维的 100 个网站 最能提高工作效率的 100 个网站（效果非常好） 最能提升生活品质的 100 个网站（效果非常好） 倾城之链：倾心缔造，痴心为你（Google 正在学习） 发现高品质、免费资源网站（效果不理想 @2022.02.18） 倾城之链：倾心缔造，痴心为你（效果非常好 @2022.02.18） 最能提升生活品质的 100 个网站~~（效果不佳） 倾城之链，您网络冲浪的参考必备（Google 正在学习） 素材要求 Google Ads 素材，其尺寸要求比例为：1.91 ： 1；内容，不能用不太相关的（如单纯的美女照片）；格式，无要求（png、jpeg、jpg 都可以，想必 Google 本身也会对上传的素材，另做处理）。 使用工具 考虑没有系统学习过设计，另外也缺乏相应灵感；在制作过程中，有尝试用了多款图片编辑器软件： 超级简单易用的平面设计软件 – Canva； Fotor在线设计工具免费设计素材和模板在线平面设计网站； 图怪兽-在线图片编辑器-在线PS抠图-图片制作-搞定平面设计不求人； Picmaker - Fast, Free and Easy Online Graphic Design Software； 素材资源 Google Ads，会针对性给出建议（有明确的优化得分），包括出价和预算、广告与附加信息等。这个「广告与附加信息」中，就含有针对素材资源的建议；当 Google “发现”您的某些自适应型展示广告的广告效力低于“极佳”水平 ，就会给出建议；根据建议就可以把不理想的素材撤掉，下面是近两月业余时间，所制作的一些图；有划分为理想素材和不理想素材（根据 Google Ads 的建议）： 自适应型展示广告是一种基于素材资源的广告，这意味着您可以通过上传各种素材资源（如图片、标题文字、徽标和广告内容描述）来制作此类广告，而且 Google 会通过这些素材资源的组合来生成广告，以便在展示时提供最佳用户体验。 当然，Google 广告引擎本身会有学习的过程，在不断投递过程中，素材是否合适，也是在持续变化；因此下面提及的状态，也会有所更新（本文的描述，却不会持续跟进，望周知）。 最佳素材 理想素材 不理想素材 素材制作心得 Google 展示广告可投放到超过 300 万个网站和超过 65 万款应用中，并可在 Gmail 和 YouTube 等 Google 产品和服务中展示。本指南将以自适应型展示广告为重点，为您讲解如何制作展示广告的素材资源。 自适应型展示广告是一种基于素材资源的广告。素材资源就是广告的组成部分，例如标题、广告内容描述、图片或徽标。在制作基于素材资源的广告时，您需要提供标题、广告内容描述、图片和徽标。Google 会运用机器学习算法在整个网络上用无数种排列方式对这些素材资源进行组合，并会持续优化，以便获得更好的效果。 如何制作谷歌自适应广告素材，在 Google 广告素材最佳做法指南中，已经给出了较为详细的说明，大体总结如下： 营销图片 图片是自适应型展示广告中最重要的元素。您可以上传自己的图片，也可以从 Google 图片库中选择。制作自适应型展示广告时，您最多可以上传 15 张图片，可使用的图片宽高比有 2 种，分别为 1.91:1（横向）和 1:1（方形）。最少要上传 2 张图片，其中至少有 1 张是宽高比为 1.91:1 的横向图片。 根据广告版式，上传的图片可能会以不同的尺寸显示。系统会调整图片的大小，以适应特定的广告尺寸。 使用高品质图片 图片有助于用户了解您的商家、产品和品牌，是广告取得理想效果的关键所在。 为了取得最理想的效果，请避免使用模糊、歪斜、上下颠倒、不清晰、带有边框、反色或过度使用滤镜的图片。 不要叠加徽标 请勿在图片上方叠加徽标，因为某些广告版式可能本来就会加徽标。不过，如果徽标已融入到图像中，那便没有问题。 避免叠加文字 避免在图片上方插入文字。请注意，素材资源组合在一起后，您插入的文字可能会显得重复，例如当叠加的文字与标题非常相似的时候。另外，在尺寸较小的广告中，叠加文字会难以辨认。不过，如果文字是自然嵌入的或已融入到图片中，那便没有问题。例如，照片中出现的文字标志就属于自然嵌入的文字。 不要叠加按钮 提供按钮（承诺不存在的功能，例如：“播放”、“下载”或“关闭”）属于违反 Google Ads 政策的行为。 避免拼贴图片 请使用单一图片。不建议使用拼贴的图片。 避免使用数字合成背景 请避免在数字合成背景（包括全白背景）上展示产品，而应使用有实景和自然阴影与光线的优质照片。 除了上述 Google 指南中提及的做法外，需明确：素材是否合适，也是在持续变化；针对素材、标题，或许在某个时间段内，是理想甚至最佳的，但这并非永恒如此；因此，需要间断性查看 Google Ads 建议（优化得分），从而及时做出调整。 原文首发于：谷歌自适应广告素材，制作心得分享 | 悠然宜想亭。 您可能感兴趣的文章 优质网站同好者周刊（第 38 期）- 倾城之链 优质网站同好者周刊（第 37 期）- 倾城之链 优质网站同好者周刊（第 36 期）- 倾城之链 开启技术变现之路，探索第三收入来源 云集优站，尽在「倾城之链」 云集优站，尽在「倾城之链」其二 欲问美图何处寻？倾城之链有定音 超实用图片工具网站，值得典藏 高质量免费图标资源大全 十佳 AI 产品工具，为生活添彩 最想与朋友分享的网站列表
倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界。此周刊，将汇聚过去一周倾城所收录的内容，以飨同好；欢迎推荐或自荐（仅限有独立域名的网站，可以是二级域名）。您如果要了解收录要求，请参见关于倾城。 倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界。此周刊，将汇聚过去一周倾城所收录的内容，以飨同好；欢迎推荐或自荐（仅限有独立域名的网站，可以是二级域名）。您如果要了解收录要求，请参见关于倾城。 备注：本周刊每周五生成，首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩，以及悠然宜想亭社区；此一键生成脚本基于 Deno 编写，并在 Github 开源：nicejade/nicelinks-weekly。 Fig 标签：工具 · 开源 · 自动化 Autocomplete for your terminal. 推荐语：Fig 将 VSCode 样式的可视化自动完成添加到您的终端，无需任何配置，可以让您的操作更加快捷。支持数百个 CLI 工具，当您键入时，Fig 会在您现有的 macOS 终端中弹出子命令、选项和上下文相关的参数；有下载安装初步尝试了下，实在是丝滑，提示也非常贴合所想。Fig 适用于 iTerm、Hyper、VSCode 和 macOS 终端，具有以下功能特性： 为速度而生：您的终端速度很快，基于 Fig也一样； 键盘优先：但是，如果您愿意，可以使用鼠标； 开源：完成规范是开源的，由社区构建； 个人和团队：将 Fig 用于公共 CLI 工具或您团队的内部工具； 本地的：Fig 加载一次然后完全保持本地； 私人的：永远不会跟踪敏感数据； Fig 的完成都是开源的，并由社区的贡献提供支持。更值得称赞的是，使用 Fig.js API，可构建您自己的应用程序，详情可参见：Fig 文档。如果您也是终端操作爱好者，那么 Fig 即将成为您的最爱工具。 ── 出自倾城之链 - Fig 美叶 标签：灵感 · 设计 · 设计师 关键字：美叶, UI 设计, 视觉设计, APP 截图, 应用设计, 插画, 设计师, 创意, 原创, 平面设计, UI, UX, UE, GUI, 截屏, 设计网站, 设计原图, 网页设计, 图标, H5, 设计, 灵感 美叶，为设计师，创意人提供有价值的设计参考。灵感采集，优质素材获取，时刻 Follow 最新流行设计趋势。 推荐语：美叶，为设计师，创意人提供有价值的设计参考，让灵感获取变轻松。美叶目前有上线应用墙（精美应用截屏推荐）、读课学堂（设计师入门进阶课堂）、标志库（优秀标志分类展示）、插画师（优秀插画师及作品推荐）等版块儿。 ── 出自倾城之链 - 美叶 LibHunt - Trending open-source projects and their alternatives 标签：开源 · 开发者 · 编程 Discover trending open-source projects and their alternatives. 推荐语：LibHunt，发现流行的开源项目和它们的替代品。其目标是成为开发者寻找库和开源项目以完成其工作的首选网站。它监测 Reddit、HackerNews 和 Dev.to 上发布的所有信息（几乎是实时的）。然后，如果一个开源资源库被提及，我们就会记录下来，并利用它来编制流行和类似项目的清单。 @StanBright：“作为一个拥有 15 年以上经验的软件工程师，我经历了许多编程语言，我注意到每一种新语言都有类似的需求模式。总的来说，LibHunt 是满足我自己需求的一个体现，它的想法是让它对更多的软件开发者同伴有用。我的想法是，它可以有足够的帮助和普及，这样我就可以从中赚到足够的钱（通过赞助）来支持和改进它，直到可预见的几十年“。 如果您对编程语言的流行度感兴趣，您应该查看最流行的编程语言的 LibHunt 索引。 ── 出自倾城之链 - LibHunt - Trending open-source projects and their alternatives Iconoir | Free Icons 标签：图标 · SVG · 开源 The Simple and Definitive hand-crafted SVG Icons Library. 推荐语：Iconoir，简单而权威的手工制作的 SVG 图标库；它是最大的开源库之一，目前拥有 1000 多个 SVG 图标，设计在 24x24 像素的网格上。您可以检索想要的图标，下载即可直接使用，当然也可以通过安装 npm 包来使用；没有高级图标，没有新闻通讯，不需要电子邮件注册。 ── 出自倾城之链 - Iconoir | Free Icons 对倾城之链感兴趣的朋友，可通过 Web，小程序，快应用等渠道进行访问(后续将支持更多，如 VsCode 插件，Chrome 扩展等)。您有任何问题，欢迎随时向我们反馈（您可以通过官网反馈渠道，或添加如下客服微信），🤲 。 本期文末寄语 最好的人生是什么样呢？没钱人追求富贵，有钱人追求素淡。没事业拼命奋斗，有事业总想退出。每个人想要的东西都不同。但历经沧桑后你会发现，真正好的人生，无非就是一家三口，父母双全，工作不累，赚钱不少，生活安稳，岁月静好。平平安安过好每一天，就是最好的人生。── 网络 · 佚名 倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。 您可能感兴趣的文章 优质网站同好者周刊（第 49 期）- 倾城之链 优质网站同好者周刊（第 48 期）- 倾城之链 优质网站同好者周刊（第 47 期）- 倾城之链 优质网站同好者周刊（第 46 期）- 倾城之链 优质网站同好者周刊（第 45 期）- 倾城之链 优质网站同好者周刊（第 44 期）- 倾城之链 优质网站同好者周刊（第 43 期）- 倾城之链 优质网站同好者周刊（第 42 期）- 倾城之链 优质网站同好者周刊（第 41 期）- 倾城之链 优质网站同好者周刊（第 40 期）- 倾城之链 优质网站同好者周刊（第 39 期）- 倾城之链 开启技术变现之路，探索第三收入来源 云集优站，尽在「倾城之链」 云集优站，尽在「倾城之链」其二 欲问美图何处寻？倾城之链有定音 超实用图片工具网站，值得典藏 高质量免费 🆓 图标资源大全 十佳 AI 产品工具，为生活添彩 最想与朋友分享的网站列表
清风明月阁，基于 Wiki.js 搭建的 Web 应用，名字取自：“惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色”。年与时驰，意与岁去，念其功能之丰盈，特在此：记余之所造，录吾之所闻，享愚之所学，载我之随感…..人生漫短，白首时回顾，堪凭这些许文字以自怜。 初衷 早先搭建的十余个网站，有些实属为体验「网站构建工具」而起；岁月蹉跎中折腾多了，那种兴之所至、行之所往的冲动，早已隐去；而今，却又“重蹈覆辙”，实在是感念 Wiki.js 之强大，一时为其蕴藏的「哲思」所着迷；一直以来呢，也在探索文档、Wiki 最佳撰写工具；而前段时间，又恰巧购得云服务器一台；这好奇的念头，与适宜的环境，结合的恰到好处，于是，便有了“清风明月阁”。 命名 给网站命名，向来谨慎，却总也是“因循守旧”，大多没有新意；从最早 2014 年的晚晴幽草轩，到今年（2021）的悠然宜想亭，格式上，都是一个调子：截取喜欢的诗词，结合建筑名为后缀。那些年喜欢李商隐那句：“天意怜幽草，人间重晚晴”，便有了最初的两个网站，这在晚晴幽草轩，天意人间舫一文中有过记载。 多年来，深（身）陷代码中，久未涉足文学诗词，按照如上惯例，为此站取名时，为求其名能“达意”且兼具雅致，好一阵搜肠刮肚；亭台楼阁、轩榭廊舫，殿庭苑斋之中，已用亭、轩、舫、苑，又因此站基于 Wiki.js 所建，在当时或者如今回头看，择以「阁」字，这存在必然性。而在诗词的甄选中，之处有意取李太白的“若非群玉山头见，会向瑶池月下逢”中「群玉」、「瑶池」；虽说雅致，但究竟与心境不能完全契合；斟酌时，须臾之间，灵光乍现，脑海浮现苏子瞻《前赤壁赋》中一段经典： “逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也，而又何羡乎！且夫天地之间，物各有主，苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭。是造物者之无尽藏也，而吾与子之所共适。” 其雅致、其意境、其哲思，莫有与心之所愿更契合者，于是立即便定下了，名曰：清风明月阁；工作生活中，自觉总也是”一肚子不合时宜“，今为这网站命此名，怕是为数不多的一次“合乎时宜”；感谢苏子赐名！ 其用 漫画《四月一日灵异事件簿》中，有写道：“思想、语言是会束缚人的东西，不但自己的会束缚自己，别人的也会束缚自己”，对此深表认同：愚顽的脑袋里如再被束缚，接收到任何与之相悖的理念，都是引发愤怒的毒物。这个时代，关乎“求同存异”，于虚拟网络中或可“被存在”；而生活的现实中，却是难以“存活”。这些年，关乎“思想的表达、语言的阐述”，所引发的后果，远胜海啸山洪，且是司空见惯；即便朋友恋人间的好心建议（或提议），轻起口角，重则仇恨；如此往复，伤痕累累，乃至近乎“四海无人对夕阳”的悲苦……于是乎，痛定思痛后，终可懂得海明威为何如此说： 我们花了两年学会说话，却要花上六十年来学会闭嘴。大多数时候，我们说得越多，彼此的距离却越远，矛盾也越多。在沟通中，大多数人总是急于表达自己，一吐为快，却一点也不懂对方。两年学说话，一生学闭嘴。懂与不懂，不多说。心乱心静，慢慢说。若真没话，就别说。── 曼妙句子。 耳聪可以闻世声，目明堪能睹世事，这是与生俱来的本领；人间真实，纷呈精彩，阴阳相生，优劣混合；犹为凡夫俗子，免不了阐述下自己看法，一抒心中块垒，也为“两肩抬道义”；倘若付与人当面说，恐引纷争，实非余愿；“夫唯不争，故天下莫能与之争”，于是乎，在自建平台，以文字形式，承载所学、所思、所感、所悟，或是最佳之选。明朝文学家、画家陈继儒，在《小窗幽记》中写道： 带雨有时种竹，关门无事锄花；拈笔闲删旧句，汲泉几试新茶。余尝净一室，置一几，陈几种快意书，放一本旧法帖；古鼎焚香，素麈挥尘，意思小倦，暂休竹榻。饷时而起，则啜苦茗，信手写汉书几行，随意观古画数幅。心目间，觉洒洒灵空，面上俗尘，当亦扑去三寸。但看花开落，不言人是非。 其中所描绘心性境界，实在令人殷羡，而这也正是所追求的完美。至于“汉书几行、平思几许”，置于这人间网络中，赠予有缘人；期之如“江上之清风，山间之明月”，与人无害，偶可参考，吾愿足矣。 2021 年 12 月末，记之于深圳。
倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界。此周刊，将汇聚过去一周倾城所收录的内容，以飨同好；欢迎推荐或自荐（仅限有独立域名的网站，可以是二级域名）。您如果要了解收录要求，请参见关于倾城。 备注：本周刊每周五生成，首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩，以及悠然宜想亭社区；此一键生成脚本基于 Deno 编写，并在 Github 开源：nicejade/nicelinks-weekly。 清风明月阁 标签：社区 · 分享 · Wiki 且夫天地之间，物各有主，苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭。是造物者之无尽藏也，而吾与子之所共适。 推荐语：清风明月阁，基于 Wiki 搭建的 Web 应用，名字取自：“惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色”。年与时驰，意与岁去，念其功能之丰盈，特在此：记余之所造，录吾之所闻，享愚之所学，载我之随感…..人生漫短，白首时回顾，堪凭这些许文字以自怜。 初衷：早先搭建的十余个网站，有些实属为体验「网站构建工具」而起；岁月蹉跎中折腾多了，那种兴之所至、行之所往的冲动，早已隐去；而今，却又“重蹈覆辙”，实在是感念 Wiki.js 之强大，一时为其蕴藏的「哲思」所着迷；一直以来呢，也在探索文档、Wiki 最佳撰写工具；而前段时间，又恰巧购得云服务器一台；这好奇的念头，与适宜的环境，结合的恰到好处，于是，便有了“清风明月阁”。 ── 出自倾城之链 - 清风明月阁 Plask 标签：AI · 工具 · 动画 关键字：Motion Capture, 3D Animation, AI Animation, AI Motion Capture, Mocap, Animation Software, Motion Tracking Plask is a browser-based AI motion capture tool and animation editor. With any camera, creators can digitize their movements, automate animation work, collaborate with colleagues, and export them all on one platform. 推荐语：Plask，一款基于浏览器的免费 AI 动作捕捉和动画工具。只需在网络摄像头上录制视频。智能 AI 将为您捕捉动作，让动画变得轻而易举。使用 Plask 基于浏览器的编辑工具编辑您的动画，只需一处即可找到所有必要工具，让您的动画完美无缺。Plask 支持您直接在浏览器中共享、查看和协作。使用 Plask 在浏览器中管理您的想法和项目。无论您是单独工作还是与团队合作，它都可以无缝集成到您的工作流程中。它支持大多数专业文件格式，包括 GLB、FBX、BVH 等。每个人的动画，为每个人服务，使用 Plask，专业质量的工具唾手可得！ ── 出自倾城之链 - Plask Svg Wave - A free & beautiful gradient SVG wave Generator. 标签：SVG · 图片 · 设计 SVG Wave is a minimal svg wave generator with lot of customization. It lets you abiltiy to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs. 推荐语：Svg Wave，一个免费且漂亮的渐变 SVG 波形图生成器。它支持您自由的对波浪 🌊 进行调整，如波浪的高度、图层数量、弯曲度，颜色等等，也支持重制、反转等操作，以便您可以生成自己满意的图形；除此外，Svg Wave 还支持生成波浪动画（只适用于 Chrome 浏览器）；它可以导出 SVG、PNG 两种格式。另外值得一提的是，Svg Wave 这个网站设计的干净、清爽，看着令人颇为舒适。 ── 出自倾城之链 - Svg Wave - A free & beautiful gradient SVG wave Generator. Mixkit - Awesome free assets for your next video project 标签：视频 · 素材 · 资源 Download Free Stock Video Footage, Stock Music & Premiere Pro Templates for your next video editing project. All assets can be downloaded for free! 推荐语：Mixkit，为您的下一个视频项目提供很棒的免费资源，如：视频剪辑、库存音乐（100 多个免费的 Ambient Stock 音乐曲目。从梦幻般的背景音乐到大气、郁郁葱葱的器乐，用我们的环境音乐曲目之一设定完美的基调。）、声音效果和视频模板。他们精心策划了一些世界上最有才华的创作者的剪辑、曲调和模板，所有内容都是免费提供的。Mixkit 的免费图书馆正在快速增长，每周都有新的视频资产被添加进来，你总能找到完美的高质量项目来下载，并在你的项目中使用。您可以根据需要下载视频、声音和模板，无需署名或注册。如果您从事或有意愿从事视频相关内容创造，Mixkit 是您非常值得关注的网站。 ── 出自倾城之链 - Mixkit - Awesome free assets for your next video project Waline | Waline 标签：JavaScript · Framework · 评论系统 一款基于 Valine 衍生的简洁、安全的评论系统。 推荐语：Waline，一款基于 Valine 衍生的简洁、安全的评论系统。可以将 Waline 等价成 With backend Valine。它具有以下功能特征： 自由评论：完全的 Markdown 支持，同时包含表情、数学公式、HTML 嵌入； 轻量：54kB gzip 的完整客户端大小； 强大的安全性：内容校验、防灌水、保护敏感数据等； 登录支持：在允许匿名评论的基础上，支持账号注册，保持身份； 完全免费部署：可免费部署在 Vercel 上； 易于部署：多种部署部署方式和存储服务支持。 除了以上特征外，Waline 已经完成非常多优质功能，诸如：邮件（ 微信、 QQ、Telegram）通知，评论管理、评论删除、登录支持、Akismet、文章统计、多语言同步、基于 IP 的发布评论频率限制、 IP 黑名单、 重复内容检测、置顶评论、其它数据库支持（已支持 LeanCloud, MySQL, MongoDB, SQLite, PostgreSQL, CloudBase, Deta, 轻服务, GitHub）等等。最值得一提的是，它支持独立部署，您可以基于 Docker（docker-compose 或 Node），部署在自己的服务器上。 ── 出自倾城之链 - Waline | Waline 对倾城之链感兴趣的朋友，可通过 Web，小程序，快应用等渠道进行访问(后续将支持更多，如 VsCode 插件，Chrome 扩展等)。您有任何问题，欢迎随时向我们反馈（您可以通过官网反馈渠道，或添加如下客服微信），🤲 。 本期文末寄语 我曾七次鄙视自己的灵魂： 第一次，当它本可进取时，却故作谦卑； 第二次，当它在空虚时，用爱欲来填充； 第三次，在困难和容易之间，它选择了容易； 第四次，它犯了错，却借由别人也会犯错来宽慰自己； 第五次，它自由软弱，却把它认为是生命的坚韧； 第六次，当它鄙夷一张丑恶的嘴脸时，却不知那正是自己面具中的一副； 第七次，它侧身于生活的污泥中，虽不甘心，却又畏首畏尾。 ── 黎巴嫩裔美国诗人、画家 · 纪伯伦《我曾七次鄙视自己的灵魂》 倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。 您可能感兴趣的文章 优质网站同好者周刊（第 48 期）- 倾城之链 优质网站同好者周刊（第 47 期）- 倾城之链 优质网站同好者周刊（第 46 期）- 倾城之链 优质网站同好者周刊（第 45 期）- 倾城之链 优质网站同好者周刊（第 44 期）- 倾城之链 优质网站同好者周刊（第 43 期）- 倾城之链 优质网站同好者周刊（第 42 期）- 倾城之链 优质网站同好者周刊（第 41 期）- 倾城之链 优质网站同好者周刊（第 40 期）- 倾城之链 优质网站同好者周刊（第 39 期）- 倾城之链 优质网站同好者周刊（第 38 期）- 倾城之链 优质网站同好者周刊（第 37 期）- 倾城之链 优质网站同好者周刊（第 36 期）- 倾城之链 开启技术变现之路，探索第三收入来源 云集优站，尽在「倾城之链」 云集优站，尽在「倾城之链」其二 欲问美图何处寻？倾城之链有定音 超实用图片工具网站，值得典藏 高质量免费 🆓 图标资源大全 十佳 AI 产品工具，为生活添彩 最想与朋友分享的网站列表
倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界。此周刊，将汇聚过去一周倾城所收录的内容，以飨同好；欢迎推荐或自荐（仅限有独立域名的网站，可以是二级域名）。您如果要了解收录要求，请参见关于倾城。 备注：本周刊每周五生成，首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩，以及悠然宜想亭社区；此一键生成脚本基于 Deno 编写，并在 Github 开源：nicejade/nicelinks-weekly。 倾城博客 标签：博客 · 导航 · 网站 倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界。倾城博客，旨在汇聚倾城之链所收录的内容，以博文的形式承载，提供检索功能，且具备极致丝滑访问体验，以飨同好者。 推荐语：倾城博客，基于 GatsbyJS 所搭建的网站，汇聚倾城之链所收录的内容，以文章的形式承载，并提供检索功能，提供给广大用户。倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。关于倾城之链更多详情，可参见云集优站，尽在「倾城之链」、云集优站，尽在「倾城之链」其二等文章阐述。 ── 出自倾城之链 - 倾城博客 AI Image Upscaler - Enlarge & Enhance your Images for Free 标签：图片 · AI · 工具 关键字：upscale, upscale.media, let’s enhance, 2x image, 2x upscale, 2x upscale image, 4x image, 4x image upscale, 4x image, enhance image, enhance photo, higher resolution, higher resolution image, online upscale, online upscale image, low quality to high quality, high quality image, enhance picture, enhance resolution, image quality enhancer, image resolution enha Upscale your image to 2x or 4x without losing any textures or details with our AI tool. Use our super-resolution tool and bring new life to your images. 推荐语：AI Image Upscaler，免费的（永久） AI 工具，可将图像分辨率提高 4 倍（big），而不会降低质量，并为您的所有个人和业务需求做好准备。其使用非常方便，上传、拖放图像或粘贴 URL，即可开始；需点击几下，就能基于强大的 AI 技术升级和增强您的图像；它支持 png、jpeg、jpg、webp 等格式。值得一提的是，它有以下独特的功能： 自动和快速的结果：借助我们强大的人工智能技术，整个升级过程在几秒钟内完成； 提高分辨率：使用我们先进的计算机视觉算法，您可以将分辨率提高 4 倍； 保留详细信息：保留图像中的纹理并以在图像放大时看起来逼真的方式增强它们； Upscale.media 适合所有人： 专业人士 轻松增强低质量图像，为其他创意任务节省时间；从绘画到数字艺术，从肖像到风景，从徽标到产品目录图像，任何东西都可以升级。 电子商务 通过清晰的图像提高在线产品的转化率；通过使用 Upscale.media 处理不同平台的高分辨率要求来简化您的工作流程。 个人 将来自社交媒体的压缩图像放大多达 400%；增强从未如此简单，但在人工智能的帮助下，它可以在几秒钟内完成，而无需花费昂贵的工具。 借助 Upscale.media，任何人现在都可以升级和增强图像，无论他们是专业摄影师还是新手。 ── 出自倾城之链 - AI Image Upscaler - Enlarge & Enhance your Images for Free 電腦玩物 标签：时间管理 · 个人提升 · 工作方法 分享各種行動工作技巧、雲端生活應用，善用數位工具改變你我的工作效率與生活品質。 推荐语：電腦玩物，是作者 Esor Huang（异尘行者）的个人部落格；Esor，是本站唯一的作者与站长；主要涉及云端办公室、数位笔记、时间管理等让人生更美好工作方法；在電腦玩物上可以读到 Esor 的这些文章： 最新云端工具、数位软体的真实心得分享。 科技工具如何真正活用到生活的具体经验。 关于工作效率、专案管理、时间管理、习惯养成的实作教学或观念反思。 如果你是 Google 云端办公室、Evernote 云端笔记的爱用者，那么这里有最深入的应用教学。 为什么在这个社群时代，作者还在努力写个人部落格（Blog 博客）呢？Esor 这样写道：“因为我希望把自己的完整想法、深入经验用精准文字记录并传播，能够跟网路上的你们彼此激荡。我期许自己在電腦玩物上的文章，有别于单纯的软体和服务介绍，而是更强调软体和服务背后的「数位工作思维及方法」，并说明实际应用后带来的「生活改变」，我分享的主题将会涵盖数位应用、时间管理到生活旅游中的科技人文观察，目前部落格每日点阅数超过 8 万，累积浏览人次更已突破一亿三千万人“。 近期，因为時間管理 Q&A：下班後如何避免滑一下手機就沒時間了？4 步驟調整習慣这篇文章，从而了解到電腦玩物这个网站，有志于提升自己的朋友们，不妨考虑关注下，闲来品读，增加阅历，开阔思维。 ── 出自倾城之链 - 電腦玩物 二维码梦工厂 · 简单强大实用的艺术二维码生成器 标签：二维码 · 工具 · 在线 简单强大实用的艺术二维码生成器。 推荐语：二维码梦工厂，是一款简单、强大、实用、在线的二维码生成器，可以为文本、网址、微信公众号生成二维码；其目标是使得用户：“不会 PS、AI 也可以做出精美的艺术二维码”。 功能强大：二维码梦工厂，提供优质图库、二维码模版、元素和码眼自定义、元素切割功能； 效果贼好：无需多余步骤，很容易就能制作高质量的作品； 简单上手：视频教程与常见问题应有尽有，使上手变得更加简单； 长期有效识别率高：制作的艺术二维码能保持长期有效，并且识别率超高； 值得一提的是，二维码梦工厂不仅提供高级编辑功能，而且提供很多精选模板，对精美二维码感兴趣的朋友，可以关注下。 ── 出自倾城之链 - 二维码梦工厂 · 简单强大实用的艺术二维码生成器 对倾城之链感兴趣的朋友，可通过 Web，小程序，快应用等渠道进行访问(后续将支持更多，如 VsCode 插件，Chrome 扩展等)。您有任何问题，欢迎随时向我们反馈（您可以通过官网反馈渠道，或添加如下客服微信），🤲 。 本期文末寄语 真正的快乐，不是狂喜，亦不是苦痛，在我很主观的来说，它是细水长流， 碧海无波，在芸芸众生里做一个普通的人，享受生命一刹间的喜悦，那么我们即 使不死，也在天堂里了。── 现代 · 三毛《雨季不再来》 倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。 您可能感兴趣的文章 优质网站同好者周刊（第 47 期）- 倾城之链 优质网站同好者周刊（第 46 期）- 倾城之链 优质网站同好者周刊（第 45 期）- 倾城之链 优质网站同好者周刊（第 44 期）- 倾城之链 优质网站同好者周刊（第 43 期）- 倾城之链 优质网站同好者周刊（第 42 期）- 倾城之链 优质网站同好者周刊（第 41 期）- 倾城之链 优质网站同好者周刊（第 40 期）- 倾城之链 优质网站同好者周刊（第 39 期）- 倾城之链 优质网站同好者周刊（第 38 期）- 倾城之链 优质网站同好者周刊（第 37 期）- 倾城之链 优质网站同好者周刊（第 36 期）- 倾城之链 优质网站同好者周刊（第 35 期）- 倾城之链 优质网站同好者周刊（第 34 期）- 倾城之链 开启技术变现之路，探索第三收入来源 云集优站，尽在「倾城之链」 云集优站，尽在「倾城之链」其二 欲问美图何处寻？倾城之链有定音 超实用图片工具网站，值得典藏 高质量免费 🆓 图标资源大全 十佳 AI 产品工具，为生活添彩 最想与朋友分享的网站列表
倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界。此周刊，将汇聚过去一周倾城所收录的内容，以飨同好；欢迎推荐或自荐（仅限有独立域名的网站，可以是二级域名）。您如果要了解收录要求，请参见关于倾城。 备注：本周刊每周五生成，首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩，以及悠然宜想亭社区；此一键生成脚本基于 Deno 编写，并在 Github 开源：nicejade/nicelinks-weekly。 ERIK JOHANSSON 标签：摄影 · 图片 · 有趣 Website of Swedish surreal photographer Erik Johansson. 推荐语：ERIK JOHANSSON，一个承载超现实主义摄影的网站；Erik Johansson（生于 1985 年），是来自瑞典的摄影师和视觉艺术家。他的作品可谓是结合照片创造的超现实世界。Erik 主要从事个人项目，以及在世界各地举办展览。与传统摄影不同，他不捕捉瞬间，而是借助相机和想象力捕捉想法。目标是在单个帧中捕捉故事，并使其看起来尽可能逼真，即使场景本身包含不可能的元素。最后，一切都归结为解决问题，找到一种方法来捕捉不可能的事情。 对 Erik 来说，在他的作品中保持高度的现实主义总是很重要的。他想让观众觉得他们是场景的一部分。尽管他的工作包括大量后期制作和组合照片，但他总是试图在现场用相机捕捉尽可能多的东西。这通常意味着构建道具并使用创造性的方式来规划拍摄。 以逼真的方式组合图像时，光线和透视是至关重要的部分，如果某些部分无法在现场拍摄，则必须在受控环境中构建类似的场景。了解从创意和规划、摄影和后期制作的每一步，对于使一切无缝融合非常重要。每张照片和部分都有其目的。 Erik 总是自己做所有的后期制作，以完全控制最终结果。创意、摄影和后期制作都是相互关联的。最终图像并不比用于捕捉它的照片更好。就像照片不会变得比想法更强大。 Erik 的个人作品中没有计算机生成的、插图的或库存照片，只有他自己的照片的复杂组合。这是一个漫长的过程，他每年只创作大约 10 张新图像。如果您想了解更多关于图像如何变为现实的过程，请查看这些幕后视频。 Erik 既是一名摄影师，又是一名修图师，这使他能够创造出你能想象到的任何东西。了解过程中的每个步骤，可以完全控制从草图到最终图像的整个工作过程，以确保高质量的逼真结果。以这种方式创建图像需要大量的工作和准备才能获得逼真的结果。Erik 可用于全球委托项目。 ── 出自倾城之链 - ERIK JOHANSSON 网络广告人社区 - 分享国内外创意广告和网络营销及市场营销案例 标签：广告 · 创意 · 分享 关键字：网络广告人社区, 广告, 市场营销, 广告人才, 广告公司, 创意广告, 营销策划, 广告词, KPI, 广告设计, 品牌营销案例, 国外创意, 国外创意案例, 国外广告, 广告社区, 营销案例, 社会化媒体, 视频广告, 病毒营销案例, 公益广告, 微信营销 网络广告人社区(iwebad.com)致力于分享国外创意广告、网络营销、市场营销案例 推荐语：网络广告人社区（(webad），创建于 2007 年 12 月，是一家致力于原创翻译国外营销案例的垂直类传媒网站。创立的前几年，主要是分享国外创意 Banner；随着国内外互联网环境的改变，各种营销方式层出不穷，网站也由此扩展出整合营销、品牌营销、移动营销、病毒营销、社会化营销、活动网站、邮件广告等广告类型，设有 IT、金融、汽车、房地产、电信、日化用品、消费电子、食品饮料八大行业广告案例。网站现拥将近 10000 部国外案例，及 4000 多支创意 TVC，所传播视频在优酷、土豆、56 等视频网站累计播放量超过 5000 万次。 ── 出自倾城之链 - 网络广告人社区 - 分享国内外创意广告和网络营销及市场营销案例 Create stunning product mockups easily and online - Smartmockups 标签：工具 · mockups · 利器 Smartmockups enables you to create stunning high-resolution mockups right inside your browser within one interface across multiple devices. 推荐语：Smartmockups，轻松在线创建令人惊叹的产品模拟图。即使人在旅途，也可直接在浏览器中制作专业模板；忘了花上数小时学习如何使用 Photoshop 的痛苦吧。通过 Smartmockups，能直接在浏览器中，在一个界面中跨多个设备创建令人惊艳的高分辨率模板。它具有以下功能特点： 性能和可用性 这是基于网络的工具，可在所有浏览器中运行； 不需要经验或技能，用起来易如反掌； 可在台式机、智能手机和平板电脑中使用； 是市场上最快的模板生成工具； 丰富模版库 每周都有新模板； 专业照片和独立对象； 始终了解最新设备相关最新信息； 备选上传方式 以 JPG、PNG 或 PDF 格式上传图像，或以 MP4、MOV 或 GIF 格式上传视频； URL 屏幕截图，有高级设置； 可通过第三方整合上传素材； 支持自定义 按自己的尺寸通过裁切调整长宽比； 从最终导出的模板的 4 种不同的分辨率中进行选择； 尽享最优质量，没有数量限制； 最终导出的模板 按自己的尺寸通过裁切调整长宽比； 从最终导出的模板的 4 种不同的分辨率中进行选择； 尽享最优质量，没有数量限制； 即使不是设计能手，也可享用产品模板的强大功能，Smartmockups，你值得拥有。 ── 出自倾城之链 - Create stunning product mockups easily and online - Smartmockups Pika – Create beautiful screenshots quickly 标签：图片 · 免费 · 开源 A free app to quickly beautify your screenshots. You can add background gradients, tweak shadows, add rounded corners and more. You can save the image or copy it to clipboard. 推荐语：Pika，免费和开源网络应用程序，可快速美化您的屏幕截图（将无聊的屏幕截图变成漂亮的可共享图像）。您可以添加背景渐变、调整阴影、添加圆角、调整间距等等。其使用也非常简单，选择图片即可开始操作（支持粘贴截图）；您可以将图像保存为 PNG 文件或将其复制到剪贴板。 ── 出自倾城之链 - Pika – Create beautiful screenshots quickly 对倾城之链感兴趣的朋友，可通过 Web，小程序，快应用等渠道进行访问(后续将支持更多，如 VsCode 插件，Chrome 扩展等)。您有任何问题，欢迎随时向我们反馈（您可以通过官网反馈渠道，或添加如下客服微信），🤲 。 本期文末寄语 你还年轻。不相信明天的青年就是对自己的背叛。人要生活，就一定要有信仰。信仰什么？相信一切事物和一切时刻的合理的内在联系，相信生活作为整体将永远延续下去，相信最近的东西和最远的东西。── 弗兰兹·卡夫卡 《午夜的沉默》 倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。 您可能感兴趣的文章 优质网站同好者周刊（第 46 期）- 倾城之链 优质网站同好者周刊（第 45 期）- 倾城之链 优质网站同好者周刊（第 44 期）- 倾城之链 优质网站同好者周刊（第 43 期）- 倾城之链 优质网站同好者周刊（第 42 期）- 倾城之链 优质网站同好者周刊（第 41 期）- 倾城之链 优质网站同好者周刊（第 40 期）- 倾城之链 优质网站同好者周刊（第 39 期）- 倾城之链 优质网站同好者周刊（第 38 期）- 倾城之链 优质网站同好者周刊（第 37 期）- 倾城之链 优质网站同好者周刊（第 36 期）- 倾城之链 优质网站同好者周刊（第 35 期）- 倾城之链 优质网站同好者周刊（第 34 期）- 倾城之链 开启技术变现之路，探索第三收入来源 云集优站，尽在「倾城之链」 云集优站，尽在「倾城之链」其二 欲问美图何处寻？倾城之链有定音 超实用图片工具网站，值得典藏 高质量免费 🆓 图标资源大全 十佳 AI 产品工具，为生活添彩 最想与朋友分享的网站列表
倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界。此周刊，将汇聚过去一周倾城所收录的内容，以飨同好；欢迎推荐或自荐（仅限有独立域名的网站，可以是二级域名）。您如果要了解收录要求，请参见关于倾城。 备注：本周刊每周五生成，首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩，以及悠然宜想亭社区；此一键生成脚本基于 Deno 编写，并在 Github 开源：nicejade/nicelinks-weekly。 metaSEO - Meta tags for best SEO 标签：SEO · 工具 · 在线 Generate meta tags in one click for the best SEO of your website, rank high in search results, and appear unique when someone shares your link! 推荐语：metaSEO，一个 SEO 相关的工具网站；支持一键生成元标签（meta tags，会增加社交相关属性，如 twitter:description 等），为您的网站提供最佳的搜索引擎优化，使得在搜索结果中排名靠前；当有人在推特（twitter）等平台分享您的链接时，会显得很独特。实际使用，需要您自己输入网站名称、描述、关键字以及预览图片网址等信息（这一点，其实可以继续优化：先抓取，没有获取到再让用户自己填写）。 ── 出自倾城之链 - metaSEO - Meta tags for best SEO 更点 - 自编书平台: 微信书 博客印书 QQ 空间印书 微博印书 标签：旅行 · 在线 · 工具 关键字：微信书, 自编书, 朋友圈印书, 相册, 微博印书, 博客印书, QQ 相册印书, QQ 说说印书, QQ 日志印书, 途牛游记印书, 电子书, 印刷, 礼品, 朋友圈做书, 博客做书, 微博做书, QQ 空间做书, 公众号文章做书 社交网站内容自动导出成电子书、印刷书，微信书、博客做书、QQ 日志做书、QQ 说说做书、QQ 相册做书、途牛游记做书、微博做书、朋友圈印书、公众号文章印书等，自动排版，在线编辑 推荐语：更点，一个在线自编书平台；支持在线编辑书和相册，图文编排，实时预览；适合：微信书、博客书、QQ 说说日志书、微博书、纪念册、写作书。可导入各社交网站内容，制作旅游集、宝宝相册、博客日志书等。已经支持：微信书、新浪/网易/搜狐博客成书、QQ 日志/说说成书、公众号文章成书、微博成书、美篇文章成书、知乎专栏成书、豆瓣日记成书等。鲜有接触类似产品，有尝试导入公众号内容来编书，一番操作，与预期似乎不太相符。 ── 出自倾城之链 - 更点 - 自编书平台: 微信书 博客印书 QQ 空间印书 微博印书 GraphQL | A query language for your API 标签：GraphQL · API · 编程 A query language for your API — GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. 推荐语：GraphQL 是一种 API 查询语言和运行时，用于使用现有数据完成这些查询。GraphQL 为您的 API 中的数据提供了完整且易于理解的描述，让客户能够准确地询问他们需要什么，更容易随着时间的推移发展 API，并启用强大的开发人员工具。 GraphQL 是一种用于 API 的查询语言，也是一种服务器端运行时，用于使用您为数据定义的类型系统执行查询。GraphQL 不依赖于任何特定的数据库或存储引擎，而是由您现有的代码和数据支持。使用中，主要步骤为：描述您的数据、询问你想要的、获得可预测的结果；您可从以下几个特征说明，来更充分了解它： 询问你需要的，准确地得到：向您的 API 发送 GraphQL 查询，并准确获取您需要的内容，不多也不少。GraphQL 查询总是返回可预测的结果。使用 GraphQL 的应用程序既快速又稳定，因为它们控制的是获取的数据，而不是服务器。 在单个请求中获取多个资源：GraphQL 查询不仅可以访问一种资源的属性，还可以平滑地跟踪它们之间的引用。虽然典型的 REST API 需要从多个 URL 加载，但 GraphQL API 可以在单个请求中获取您的应用程序所需的所有数据。即使在移动网络连接速度较慢的情况下，使用 GraphQL 的应用程序也可以很快。 描述类型系统的可能性：GraphQL API 是按照类型和字段组织的，而不是端点。从单个端点访问数据的全部功能。GraphQL 使用类型来确保应用程序只询问什么是可能的，并提供清晰和有用的错误。应用程序可以使用类型来避免编写手动解析代码。 无需版本即可发展您的 API：在不影响现有查询的情况下向 GraphQL API 添加新字段和类型。老化字段可以被弃用并从工具中隐藏。通过使用一个不断发展的版本，GraphQL API 使应用程序能够持续访问新功能，并鼓励使用更简洁、更易于维护的服务器代码。 自带数据和代码：GraphQL 在整个应用程序中创建统一的 API，而不受特定存储引擎的限制。编写 GraphQL API，利用您现有的数据和代码以及多种语言的 GraphQL 引擎。您为类型系统中的每个字段提供函数，GraphQL 以最佳并发调用它们。 GraphQL 由 Facebook 开发，并于 2012 年首次应用于移动应用。GraphQL 规范于 2015 年实现开源。现在，它受 GraphQL 基金会监管。值得一提的是，著名开源框架 GatsbyJS 就基于 GraphQL 所构建，您可以通过使用它快速体验 GraphQL 的强大。 ── 出自倾城之链 - GraphQL | A query language for your API Next.js by Vercel - The React Framework 标签：React · Web开发 · 网站生成器 Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. 推荐语：Next.js，一个用于 生产环境的 React 框架，为您提供生产所需的所有功能的最佳开发人员体验：混合静态和服务器渲染、TypeScript 支持、智能捆绑、路由预取等。无需配置。它具有以下功能特征： 图像组件和图像优化：自带 image 组件，改进的性能、视觉稳定性、更快的页面加载、资产灵活性。 Next.js 分析：基于真实访问者数据，以及逐页洞察的真实灯塔（Lighthouse）分数； 零配置：自动编译并打包，从一开始就为生产环境而优化。 混合模式，SSG 和 SSR：在一个项目中同时支持构建时预渲染页面（SSG）和请求时渲染页面（SSR）。 增量静态生成：在构建之后以增量的方式添加并更新静态预渲染的页面。 支持 TypeScript：自动配置并编译 TypeScript。 快速刷新：快速、可靠的实时编辑体验，已在 Facebook 级别的应用上规模上得到验证。 基于文件系统的路由：每个 pages 目录下的组件都是一条路由。 API 路由：创建 API 端点（可选）以提供后端功能。 内置支持 CSS：使用 CSS 模块创建组件级的样式。内置对 Sass 的支持。 代码拆分和打包：采用由 Google Chrome 小组创建的、并经过优化的打包和拆分算法。 Next.js 正在为变得更好而努力，如今，越来越多的公司在使用并喜爱 next.js，您可以 Next.js Showcase 了解到基于它所构建的精美网站。 ── 出自倾城之链 - Next.js by Vercel - The React Framework 对倾城之链感兴趣的朋友，可通过 Web，小程序，快应用等渠道进行访问(后续将支持更多，如 VsCode 插件，Chrome 扩展等)。您有任何问题，欢迎随时向我们反馈（您可以通过官网反馈渠道，或添加如下客服微信），🤲 。 本期文末寄语 你的眼睛可真好看 里面有晴雨、日月、山川、江河、云雾、花鸟 但我的眼睛更好看 因为我的眼里有你 ── 当代 · 余光中《你的眼睛真好看》 倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。 您可能感兴趣的文章 优质网站同好者周刊（第 45 期）- 倾城之链 优质网站同好者周刊（第 44 期）- 倾城之链 优质网站同好者周刊（第 43 期）- 倾城之链 优质网站同好者周刊（第 42 期）- 倾城之链 优质网站同好者周刊（第 41 期）- 倾城之链 优质网站同好者周刊（第 40 期）- 倾城之链 优质网站同好者周刊（第 39 期）- 倾城之链 优质网站同好者周刊（第 38 期）- 倾城之链 优质网站同好者周刊（第 37 期）- 倾城之链 优质网站同好者周刊（第 36 期）- 倾城之链 优质网站同好者周刊（第 35 期）- 倾城之链 优质网站同好者周刊（第 34 期）- 倾城之链 开启技术变现之路，探索第三收入来源 云集优站，尽在「倾城之链」 云集优站，尽在「倾城之链」其二 欲问美图何处寻？倾城之链有定音 超实用图片工具网站，值得典藏 高质量免费 🆓 图标资源大全 十佳 AI 产品工具，为生活添彩 最想与朋友分享的网站列表
倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界。此周刊，将汇聚过去一周倾城所收录的内容，以飨同好；欢迎推荐或自荐（仅限有独立域名的网站，可以是二级域名）。您如果要了解收录要求，请参见关于倾城。 备注：本周刊每周五生成，首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩，以及悠然宜想亭社区；此一键生成脚本基于 Deno 编写，并在 Github 开源：nicejade/nicelinks-weekly。 美国宇航局（NASA）图像和视频库 标签：图片 · 在线 关键字：NASA, Image, Video NASA Image and Video Library. 推荐语：NASA 图像和视频库，带你看宇宙太空相关图片、视频、及声音；支持检索。它用于再现 3 维模型的图像、音频、视频和计算机文件，例如任何格式的纹理贴图和多边形数据；您可以将此材料用于教育或信息目的，包括照片集、教科书、公共展览、计算机图形模拟和 Internet 网页。此一般权限扩展到个人网页。NASA 拥有大量 在线图像 和 视频库，包括 历史图像、 当前任务、 天文图片、 地球图像 以及 搜索 NASA 图像的方法。 ── 出自倾城之链 - 美国宇航局（NASA）图像和视频库 Windi CSS 标签：CSS · 框架 · Web开发 关键字：windi, windicss, tailwind, tailwindcss, vitejs, svelte, vue Next generation utility-first CSS framework. 推荐语：Windi CSS 下一代实用优先的 CSS 框架；如果您已经熟悉 Tailwind CSS，可以将 Windi CSS 视为 Tailwind 的按需替代品，它提供更快的加载时间，与 Tailwind v2.0 完全兼容，并具有许多额外的酷炫功能。 “当我的项目变大了，大约有几十个组件时，初始编译时间达到了 3s，热更新用 Tailwind CSS 花了 1s 多。“，基于这样的痛点，作者创造了 Windi CSS；通过扫描您的 HTML 和 CSS 并按需生成实用程序，Windi CSS 能够在开发中提供更快的加载时间和快速的 HMR，并且不需要在生产中清除。 Windi CSS 支持 Tailwind CSS 的所有 Utilities（实用程序类），无需任何额外配置。您可以像往常一样，在组件和样式表中使用实用程序类，只有您使用的 Utilities （实用程序类）才会生成相应的 CSS；这对 Web 前端开发者，非常有用。 ── 出自倾城之链 - Windi CSS 可道云-私有云存储&协同办公平台企业网盘企业云盘网盘云盘 标签：网盘 · 在线 · 云盘 关键字：网盘, 云盘, 私有云, 企业网盘, 企业云盘, 企业私有云, 私有云存储, 在线办公, 云网盘, 私有云搭建, 在线 office, 资源管理器, 协同办公, 文档管理 可道云 KodExplorer（原芒果云）提供私有云存储/企业网盘/企业云盘和在线文档管理解决方案，助力企业实现办公协作、Office 在线编辑、安全存储访问和组织权限控制。 推荐语：KodExplorer 可道云 ，原名芒果云，是基于 Web 技术的私有云在线文档管理解决方案。Kod，读音通 code，意为“代码，编码”，中文名为“可道”。Kod 取义于著名计算机科学家 Linus Torvalds 的名言：“Talk is cheap. Show me the code.“。KodExplorer 可道云具有以下功能特征： 轻量易部署 借助可道云，五分钟即可完成私有云平台的初步搭建和使用；采用 Ajax+Json 进行数据通信,毫秒级的响应速度；全平台兼容，对硬件设施要求低，有助于企业挖掘现有硬件潜力，降低部署成本。 本地化的用户体验 沿用了 Windows 操作界面和习惯方式，与本地完全一致的操作体验，用户无须学习即可适应，是私有云里的小米系统，对传统私有云的交互方式构成了革命性的改变。 在线操作，本地体验。支持 100 多种所有格式包括文档、多媒体、工程图件与矢量图件的在线预览和播放，支持文本文档、office 文档的在线编辑，支持在线编程，支持文档分享、离线下载等功能。 适用性强，应用场景多 全平台兼容性：Win、Linux、Mac (Apache、Nginx、IIS)。从百元级别的智能路由器和盒子产品，到 NAS 网络存储设备，到服务器面板，服务器，硬件集成，ERP 集成，私有云、公有云、SaaS 服务搭建等各种场景都可自如适用。 可控性、安全性 支持私有云的局域网部署，多元化的群组和用户权限设置和管理；采取多种加密、防护和强制提醒手段来增强安全性。 高度的可定制和可拓展性 可道云内建插件和应用市场，为私有云提供了强大的可拓展性；同时，可道云提供开放的 API 接口，用户可以根据自己需求方便地与 ERP、OA 等业务系统集成和开发，完善企业业务模块，与现有业务系统完美融合。 KodExplorer 最初由雾渺的个人兴趣开发而来，至今已经五年有余。正如 Linus Torvalds 的名言中所表达的那样，我们认为代码及其衍生的产品是与用户最好的沟通桥梁，能够表达我们的追求、坚持和情感，也是我们作为开发者耕耘的意义所在。KodExplorer 产品发布以来，一直以提供极致的产品体验为己任，持续更新，不断优化，获得了广大用户的肯定和支持。项目当前由杭州可道云网络有限公司开发和运营，亦将秉承 KOD 内在的产品信念，致力于用优秀的产品，为用户提供安全可控、可靠易用、高扩展性的私有云解决方案。 用户只需通过简单环境搭建，即可使用 KodExplorer 快速完成私有云、私有网盘、在线文档管理系统的部署和搭建。KOD 提供了类 Windows 用户界面，延续了 Windows 平台的操作逻辑和使用习惯，支持 100 余种文件格式的在线预览，使得用户的私有云产品可以拥有本地操作一样方便、快捷、安全的体验；为企业用户提供了了文件在线存储与管理、分享和跨平台访问、群组与权限、生产流转、审批存档等全生命周期的在线文档管理的解决方案。 ── 出自倾城之链 - 可道云-私有云存储&协同办公平台企业网盘企业云盘网盘云盘 Surmon.me - 来苏之望 标签：博客 · Vue · 前端开发 关键字：Surmon 博客, surmon-china, 苏尔蒙, Vue 博客, 前端技术开发博客, JavaScript 技术 来苏之望。本是浪蝶游蜂，自留半亩石池，但求直抒胸臆，挥墨九云之中。 推荐语：surmon.me，使用 Vue（3） 构建的个人博客网站，承载了作者对技术、编码、人生等思考；作者将网站划分为明殿、宁静寺、无色庵、丹青阁、茫涯、狂浪生、伯乐、善巧堂、四方馆等模块，来分别承载技术、Github、Vlog、内推、Freelancer、评论、旅行、主页等内容。站在个人角度看，对于技术、或者生活思考，都蛮有深度，感兴趣同学，不妨关注下。 ── 出自倾城之链 - Surmon.me - 来苏之望 700+ CSS Icons, Customizable, Retina Ready & API 标签：CSS · SVG · 图标 Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled-components, Figma and Adobe XD. Easy integration: Embed, NPM & API 推荐语：css.gg，一个非常棒的图标相关资源网站；是拥有 700+ 开源 CSS、SVG 和 Figma UI 的图标库，可用于 SVG Sprite、样式组件、NPM 和 API；这对 Web 开发非常有用；其每个图表，有纯 CSS、SVG、TSX（react）等多种实现，另外提供了修改颜色、一键拷贝等功能，不仅拿来就能使用，而且还可以学到相关技巧。 ── 出自倾城之链 - 700+ CSS Icons, Customizable, Retina Ready & API 对倾城之链感兴趣的朋友，可通过 Web，小程序，快应用等渠道进行访问(后续将支持更多，如 VsCode 插件，Chrome 扩展等)。您有任何问题，欢迎随时向我们反馈（您可以通过官网反馈渠道，或添加如下客服微信），🤲 。 本期文末寄语 人们总是用一生来等待开始新的生活，这是很常见的现象。等待是思维的一个状态，意味着你需要未来，而你不要现在。你不要此时此刻，你把希望寄托于未来。丧失对当下时刻的意识，会大大地降低你的生命质量。── 埃克哈特·托利（德国出生的加拿大移民） 《当下的力量》 倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。 您可能感兴趣的文章 优质网站同好者周刊（第 44 期）- 倾城之链 优质网站同好者周刊（第 43 期）- 倾城之链 优质网站同好者周刊（第 42 期）- 倾城之链 优质网站同好者周刊（第 41 期）- 倾城之链 优质网站同好者周刊（第 40 期）- 倾城之链 优质网站同好者周刊（第 39 期）- 倾城之链 优质网站同好者周刊（第 38 期）- 倾城之链 优质网站同好者周刊（第 37 期）- 倾城之链 优质网站同好者周刊（第 36 期）- 倾城之链 优质网站同好者周刊（第 35 期）- 倾城之链 优质网站同好者周刊（第 34 期）- 倾城之链 开启技术变现之路，探索第三收入来源 云集优站，尽在「倾城之链」 云集优站，尽在「倾城之链」其二 欲问美图何处寻？倾城之链有定音 超实用图片工具网站，值得典藏 高质量免费 🆓 图标资源大全 十佳 AI 产品工具，为生活添彩 最想与朋友分享的网站列表
您可以订阅此RSS以获取更多信息