{"id":5370,"date":"2026-01-11T11:17:40","date_gmt":"2026-01-11T03:17:40","guid":{"rendered":"https:\/\/code.jishujc.com\/?p=5370"},"modified":"2026-01-11T11:17:40","modified_gmt":"2026-01-11T03:17:40","slug":"%e5%bd%b1%e8%a7%86%e6%a8%a1%e6%9d%bf%e5%ae%9a%e5%88%b6%e4%bf%ae%e6%94%b9%e6%95%99%e7%a8%8b-%e5%85%8d%e8%b4%b9%e5%93%8d%e5%ba%94%e5%bc%8f%e5%bd%b1%e8%a7%86%e7%ab%99%e6%a8%a1%e6%9d%bf%e6%8e%a8%e8%8d%90","status":"publish","type":"post","link":"https:\/\/www.qqjishu.com\/index.php\/2026\/01\/11\/%e5%bd%b1%e8%a7%86%e6%a8%a1%e6%9d%bf%e5%ae%9a%e5%88%b6%e4%bf%ae%e6%94%b9%e6%95%99%e7%a8%8b-%e5%85%8d%e8%b4%b9%e5%93%8d%e5%ba%94%e5%bc%8f%e5%bd%b1%e8%a7%86%e7%ab%99%e6%a8%a1%e6%9d%bf%e6%8e%a8%e8%8d%90\/","title":{"rendered":"\u5f71\u89c6\u6a21\u677f\u5b9a\u5236\u4fee\u6539\u6559\u7a0b \u514d\u8d39\u54cd\u5e94\u5f0f\u5f71\u89c6\u7ad9\u6a21\u677f\u63a8\u8350"},"content":{"rendered":"<p class=\"ds-markdown-paragraph\">\u5f71\u89c6\u7f51\u7ad9\u7684\u6210\u529f\u5f88\u5927\u7a0b\u5ea6\u4e0a\u53d6\u51b3\u4e8e\u6a21\u677f\u7684\u8d28\u91cf\u548c\u4e2a\u6027\u5316\u7a0b\u5ea6\u3002\u5373\u4f7f\u662f\u4f18\u79c0\u7684\u514d\u8d39\u6a21\u677f\uff0c\u4e5f\u9700\u8981\u6839\u636e\u5177\u4f53\u9700\u6c42\u8fdb\u884c\u5b9a\u5236\u4fee\u6539\u3002\u672c\u6559\u7a0b\u5c06\u8be6\u7ec6\u8bb2\u89e3\u5982\u4f55\u5b9a\u5236\u4fee\u6539\u82f9\u679cCMS\u5f71\u89c6\u6a21\u677f\uff0c\u5e76\u63a8\u8350\u591a\u6b3e\u4f18\u79c0\u7684\u514d\u8d39\u54cd\u5e94\u5f0f\u6a21\u677f\uff0c\u5e2e\u52a9\u60a8\u6253\u9020\u72ec\u5177\u7279\u8272\u7684\u5f71\u89c6\u7f51\u7ad9\u3002<\/p>\n<h2>\u6a21\u677f\u5b9a\u5236\u524d\u7684\u51c6\u5907\u5de5\u4f5c<\/h2>\n<h3>\u9700\u6c42\u5206\u6790\u4e0e\u89c4\u5212<\/h3>\n<p class=\"ds-markdown-paragraph\">\u5728\u5f00\u59cb\u4fee\u6539\u524d\uff0c\u660e\u786e\u60a8\u7684\u9700\u6c42\uff1a<\/p>\n<ol start=\"1\">\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u54c1\u724c\u5b9a\u4f4d\u5206\u6790<\/strong>\uff1a\u7f51\u7ad9\u98ce\u683c\u4e0e\u76ee\u6807\u53d7\u4f17\u5339\u914d<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u529f\u80fd\u9700\u6c42\u6e05\u5355<\/strong>\uff1a\u5fc5\u987b\u529f\u80fd vs \u53ef\u9009\u529f\u80fd<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u5185\u5bb9\u7ed3\u6784\u89c4\u5212<\/strong>\uff1a\u4fe1\u606f\u67b6\u6784\u4e0e\u5bfc\u822a\u8bbe\u8ba1<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u6280\u672f\u9650\u5236\u8bc4\u4f30<\/strong>\uff1a\u670d\u52a1\u5668\u6027\u80fd\u4e0e\u5e26\u5bbd\u9650\u5236<\/p>\n<\/li>\n<\/ol>\n<h3>\u73af\u5883\u642d\u5efa\u5efa\u8bae<\/h3>\n<ol start=\"1\">\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u672c\u5730\u5f00\u53d1\u73af\u5883<\/strong>\uff1aXAMPP\/WAMP\/MAMP<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u4ee3\u7801\u7f16\u8f91\u5668<\/strong>\uff1aVS Code\/Sublime Text\/PHPStorm<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u7248\u672c\u63a7\u5236<\/strong>\uff1aGit\u521d\u59cb\u5316\u4ed3\u5e93<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u6d4f\u89c8\u5668\u5de5\u5177<\/strong>\uff1aChrome\u5f00\u53d1\u8005\u5de5\u5177\u5957\u88c5<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u6d4b\u8bd5\u8bbe\u5907<\/strong>\uff1a\u591a\u5c3a\u5bf8\u5c4f\u5e55\u6d4b\u8bd5<\/p>\n<\/li>\n<\/ol>\n<h2>\u514d\u8d39\u54cd\u5e94\u5f0f\u6a21\u677f\u63a8\u8350<\/h2>\n<h3>\u6a21\u677f\u4e00\uff1aBootstrap Video<\/h3>\n<p class=\"ds-markdown-paragraph\"><strong>\u7279\u70b9\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p class=\"ds-markdown-paragraph\">\u57fa\u4e8eBootstrap 5\u6846\u67b6<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u5b8c\u5168\u54cd\u5e94\u5f0f\uff0c\u79fb\u52a8\u4f18\u5148<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u7ec4\u4ef6\u4e30\u5bcc\uff0c\u6613\u4e8e\u5b9a\u5236<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u8be6\u7ec6\u6587\u6863\u548c\u793a\u4f8b<\/p>\n<\/li>\n<\/ul>\n<p class=\"ds-markdown-paragraph\"><strong>\u4e0b\u8f7d\u6765\u6e90\uff1a<\/strong>\u00a0\u6a21\u677f\u6c47\uff08<a href=\"https:\/\/www.qqjishu.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">www.qqjishu.com\/<\/a>\uff09\u7684\u514d\u8d39\u6a21\u677f\u533a<\/p>\n<h3>\u6a21\u677f\u4e8c\uff1aFlexTV<\/h3>\n<p class=\"ds-markdown-paragraph\"><strong>\u7279\u70b9\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p class=\"ds-markdown-paragraph\">CSS Flexbox\u5e03\u5c40<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u65e0\u6846\u67b6\u4f9d\u8d56\uff0c\u8f7b\u91cf\u7ea7<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u9ad8\u6027\u80fd\uff0c\u52a0\u8f7d\u5feb\u901f<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u7b80\u6d01\u73b0\u4ee3\u7684\u8bbe\u8ba1\u98ce\u683c<\/p>\n<\/li>\n<\/ul>\n<h3>\u6a21\u677f\u4e09\uff1aAdaptive Cinema<\/h3>\n<p class=\"ds-markdown-paragraph\"><strong>\u7279\u70b9\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p class=\"ds-markdown-paragraph\">\u81ea\u9002\u5e94\u65ad\u70b9\u7cfb\u7edf<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u9ed1\u6697\u6a21\u5f0f\u81ea\u52a8\u5207\u6362<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">PWA\u5c31\u7eea<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u65e0\u969c\u788d\u8bbf\u95ee\u4f18\u5316<\/p>\n<\/li>\n<\/ul>\n<h2>\u6a21\u677f\u6587\u4ef6\u7ed3\u6784\u89e3\u6790<\/h2>\n<h3>\u82f9\u679cCMS\u6a21\u677f\u6807\u51c6\u7ed3\u6784<\/h3>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">text<\/span><\/div>\n<div class=\"d2a24f03 _246a029\">\n<div class=\"efa13877\">\n<div class=\"ds-focus-ring\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre>template\/\n\u2514\u2500\u2500 your_template\/          # \u6a21\u677f\u4e3b\u76ee\u5f55\n    \u251c\u2500\u2500 config.php          # \u6a21\u677f\u914d\u7f6e\u6587\u4ef6\n    \u251c\u2500\u2500 index.html          # \u9996\u9875\u6a21\u677f\n    \u251c\u2500\u2500 list.html           # \u5217\u8868\u9875\u6a21\u677f\n    \u251c\u2500\u2500 detail.html         # \u8be6\u60c5\u9875\u6a21\u677f\n    \u251c\u2500\u2500 search.html         # \u641c\u7d22\u9875\u6a21\u677f\n    \u251c\u2500\u2500 user\/               # \u7528\u6237\u4e2d\u5fc3\u6a21\u677f\n    \u251c\u2500\u2500 css\/                # \u6837\u5f0f\u6587\u4ef6\u76ee\u5f55\n    \u2502   \u251c\u2500\u2500 style.css       # \u4e3b\u6837\u5f0f\u6587\u4ef6\n    \u2502   \u251c\u2500\u2500 responsive.css  # \u54cd\u5e94\u5f0f\u6837\u5f0f\n    \u2502   \u2514\u2500\u2500 theme.css       # \u4e3b\u9898\u6837\u5f0f\n    \u251c\u2500\u2500 js\/                 # \u811a\u672c\u6587\u4ef6\u76ee\u5f55\n    \u2502   \u251c\u2500\u2500 main.js         # \u4e3b\u811a\u672c\u6587\u4ef6\n    \u2502   \u251c\u2500\u2500 custom.js       # \u81ea\u5b9a\u4e49\u811a\u672c\n    \u2502   \u2514\u2500\u2500 plugins\/        # \u63d2\u4ef6\u811a\u672c\n    \u251c\u2500\u2500 images\/             # \u56fe\u7247\u8d44\u6e90\n    \u2514\u2500\u2500 config\/             # \u914d\u7f6e\u6587\u4ef6\u76ee\u5f55<\/pre>\n<\/div>\n<h2>\u57fa\u7840\u5b9a\u5236\u4fee\u6539\u6559\u7a0b<\/h2>\n<h3>\u4fee\u6539\u4e00\uff1a\u66f4\u6539\u7f51\u7ad9\u914d\u8272\u65b9\u6848<\/h3>\n<h4>\u65b9\u6cd5A\uff1a\u901a\u8fc7CSS\u53d8\u91cf\u4fee\u6539<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">css<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/* \u5728 :root \u4e2d\u5b9a\u4e49\u914d\u8272\u53d8\u91cf *\/<\/span>\n<span class=\"token selector\">:root<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">--primary-color<\/span><span class=\"token punctuation\">:<\/span> #3498db<span class=\"token punctuation\">;<\/span>     <span class=\"token comment\">\/* \u4e3b\u8272\u8c03 *\/<\/span>\n  <span class=\"token property\">--secondary-color<\/span><span class=\"token punctuation\">:<\/span> #2ecc71<span class=\"token punctuation\">;<\/span>   <span class=\"token comment\">\/* \u8f85\u52a9\u8272 *\/<\/span>\n  <span class=\"token property\">--background-color<\/span><span class=\"token punctuation\">:<\/span> #1a1a1a<span class=\"token punctuation\">;<\/span>  <span class=\"token comment\">\/* \u80cc\u666f\u8272 *\/<\/span>\n  <span class=\"token property\">--text-color<\/span><span class=\"token punctuation\">:<\/span> #ffffff<span class=\"token punctuation\">;<\/span>        <span class=\"token comment\">\/* \u6587\u5b57\u989c\u8272 *\/<\/span>\n  <span class=\"token property\">--accent-color<\/span><span class=\"token punctuation\">:<\/span> #e74c3c<span class=\"token punctuation\">;<\/span>      <span class=\"token comment\">\/* \u5f3a\u8c03\u8272 *\/<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token comment\">\/* \u4f7f\u7528\u53d8\u91cf *\/<\/span>\n<span class=\"token selector\">body<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">var<\/span><span class=\"token punctuation\">(<\/span>--background-color<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">var<\/span><span class=\"token punctuation\">(<\/span>--text-color<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token selector\">.btn-primary<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">var<\/span><span class=\"token punctuation\">(<\/span>--primary-color<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/pre>\n<\/div>\n<h4>\u65b9\u6cd5B\uff1a\u76f4\u63a5\u66ff\u6362\u989c\u8272\u503c<\/h4>\n<ol start=\"1\">\n<li>\n<p class=\"ds-markdown-paragraph\">\u4f7f\u7528\u7f16\u8f91\u5668\u5168\u5c40\u641c\u7d22\u529f\u80fd<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u67e5\u627e\u8981\u66ff\u6362\u7684\u989c\u8272\u4ee3\u7801<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u6279\u91cf\u66ff\u6362\u4e3a\u65b0\u989c\u8272\u503c<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u6d4b\u8bd5\u66ff\u6362\u6548\u679c<\/p>\n<\/li>\n<\/ol>\n<h3>\u4fee\u6539\u4e8c\uff1a\u8c03\u6574\u5e03\u5c40\u7ed3\u6784<\/h3>\n<h4>\u9996\u9875\u5e03\u5c40\u8c03\u6574\u793a\u4f8b<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">html<\/span><\/div>\n<div class=\"d2a24f03 _246a029\">\n<div class=\"efa13877\">\n<div class=\"ds-focus-ring\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">&lt;!-- \u539f\u59cb\u7ed3\u6784 --&gt;<\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>row<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>col-md-8<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      <span class=\"token comment\">&lt;!-- \u4e3b\u8981\u5185\u5bb9 --&gt;<\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>col-md-4<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      <span class=\"token comment\">&lt;!-- \u4fa7\u8fb9\u680f --&gt;<\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n\n<span class=\"token comment\">&lt;!-- \u4fee\u6539\u4e3a\u5168\u5bbd\u5e03\u5c40 --&gt;<\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>container-fluid<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>row<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>col-12<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n      <span class=\"token comment\">&lt;!-- \u5168\u5bbd\u5185\u5bb9 --&gt;<\/span>\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span><\/pre>\n<\/div>\n<h4>\u54cd\u5e94\u5f0f\u65ad\u70b9\u8c03\u6574<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">css<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/* \u4fee\u6539\u54cd\u5e94\u5f0f\u65ad\u70b9 *\/<\/span>\n<span class=\"token atrule\"><span class=\"token rule\">@media<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 768px<span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token selector\">.sidebar<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u79fb\u52a8\u7aef\u9690\u85cf\u4fa7\u8fb9\u680f *\/<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token selector\">.main-content<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u79fb\u52a8\u7aef\u5168\u5bbd *\/<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><\/pre>\n<\/div>\n<h2>\u9ad8\u7ea7\u5b9a\u5236\u6280\u5de7<\/h2>\n<h3>\u6dfb\u52a0\u81ea\u5b9a\u4e49\u529f\u80fd\u6a21\u5757<\/h3>\n<h4>\u793a\u4f8b\uff1a\u6dfb\u52a0\u70ed\u95e8\u63a8\u8350\u6a21\u5757<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">php<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">!<\/span><span class=\"token operator\">--<\/span> \u5728\u9002\u5f53\u4f4d\u7f6e\u63d2\u5165 <span class=\"token operator\">--<\/span><span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"hot-recommend\"<\/span><span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span>h3<span class=\"token operator\">&gt;<\/span>\u70ed\u95e8\u63a8\u8350<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h3<span class=\"token operator\">&gt;<\/span>\n  <span class=\"token operator\">&lt;<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"recommend-list\"<\/span><span class=\"token operator\">&gt;<\/span>\n    <span class=\"token punctuation\">{<\/span>php<span class=\"token punctuation\">}<\/span>\n    <span class=\"token comment\">\/\/ \u83b7\u53d6\u70ed\u95e8\u5f71\u7247\u6570\u636e<\/span>\n    <span class=\"token variable\">$hot_videos<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">get_videos_by_hot<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">foreach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$hot_videos<\/span> <span class=\"token keyword\">as<\/span> <span class=\"token variable\">$video<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">echo<\/span> <span class=\"token string single-quoted-string\">'&lt;div class=\"video-item\"&gt;'<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">echo<\/span> <span class=\"token string single-quoted-string\">'&lt;a href=\"'<\/span><span class=\"token operator\">.<\/span><span class=\"token variable\">$video<\/span><span class=\"token punctuation\">[<\/span><span class=\"token string single-quoted-string\">'url'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token operator\">.<\/span><span class=\"token string single-quoted-string\">'\"&gt;'<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">echo<\/span> <span class=\"token string single-quoted-string\">'&lt;img src=\"'<\/span><span class=\"token operator\">.<\/span><span class=\"token variable\">$video<\/span><span class=\"token punctuation\">[<\/span><span class=\"token string single-quoted-string\">'thumb'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token operator\">.<\/span><span class=\"token string single-quoted-string\">'\" alt=\"'<\/span><span class=\"token operator\">.<\/span><span class=\"token variable\">$video<\/span><span class=\"token punctuation\">[<\/span><span class=\"token string single-quoted-string\">'title'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token operator\">.<\/span><span class=\"token string single-quoted-string\">'\"&gt;'<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">echo<\/span> <span class=\"token string single-quoted-string\">'&lt;span class=\"video-title\"&gt;'<\/span><span class=\"token operator\">.<\/span><span class=\"token variable\">$video<\/span><span class=\"token punctuation\">[<\/span><span class=\"token string single-quoted-string\">'title'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token operator\">.<\/span><span class=\"token string single-quoted-string\">'&lt;\/span&gt;'<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">echo<\/span> <span class=\"token string single-quoted-string\">'&lt;\/a&gt;'<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token keyword\">echo<\/span> <span class=\"token string single-quoted-string\">'&lt;\/div&gt;'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">{<\/span><span class=\"token operator\">\/<\/span>php<span class=\"token punctuation\">}<\/span>\n  <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><\/pre>\n<\/div>\n<h4>\u793a\u4f8b\uff1a\u6dfb\u52a0AJAX\u52a0\u8f7d\u66f4\u591a<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">javascript<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/\/ \u5728 main.js \u4e2d\u6dfb\u52a0<\/span>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">loadMoreVideos<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">page<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  $<span class=\"token punctuation\">.<\/span><span class=\"token function\">ajax<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>\n    <span class=\"token literal-property property\">url<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'\/api\/load_more.php'<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token literal-property property\">type<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">'GET'<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token literal-property property\">data<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token literal-property property\">page<\/span><span class=\"token operator\">:<\/span> page<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token function-variable function\">success<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'#video-list'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">append<\/span><span class=\"token punctuation\">(<\/span>response<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      currentPage<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token function-variable function\">error<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">alert<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/pre>\n<\/div>\n<h3>\u4f18\u5316SEO\u7ed3\u6784<\/h3>\n<h4>\u4f18\u5316\u6807\u9898\u548c\u63cf\u8ff0<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">html<\/span><\/div>\n<div class=\"d2a24f03 _246a029\">\n<div class=\"efa13877\">\n<div class=\"ds-focus-ring\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">&lt;!-- \u52a8\u6001\u751f\u6210SEO\u4f18\u5316\u6807\u9898 --&gt;<\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>{$category_name} - {$site_name}<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>description<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>{$description|msubstr=0,100}...<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n\n<span class=\"token comment\">&lt;!-- \u6dfb\u52a0\u7ed3\u6784\u5316\u6570\u636e --&gt;<\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>application\/ld+json<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><span class=\"token language-javascript\">\n<span class=\"token punctuation\">{<\/span>\n  <span class=\"token string-property property\">\"@context\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/schema.org\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string-property property\">\"@type\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"WebSite\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string-property property\">\"name\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"{$site_name}\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string-property property\">\"url\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"{$site_url}\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token string-property property\">\"description\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"{$site_description}\"<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span><\/pre>\n<\/div>\n<h2>\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u6df1\u5ea6\u4f18\u5316<\/h2>\n<h3>\u79fb\u52a8\u7aef\u4e13\u5c5e\u4f18\u5316<\/h3>\n<h4>\u89e6\u6478\u53cb\u597d\u8bbe\u8ba1<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">css<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/* \u589e\u5927\u89e6\u6478\u76ee\u6807 *\/<\/span>\n<span class=\"token selector\">.btn, .menu-item, .video-thumb<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">min-height<\/span><span class=\"token punctuation\">:<\/span> 44px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">min-width<\/span><span class=\"token punctuation\">:<\/span> 44px<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 12px 16px<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token comment\">\/* \u9632\u6b62\u610f\u5916\u89e6\u6478 *\/<\/span>\n<span class=\"token atrule\"><span class=\"token rule\">@media<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">hover<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">and<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">pointer<\/span><span class=\"token punctuation\">:<\/span> coarse<span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token selector\">.dropdown:hover .dropdown-menu<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token selector\">.dropdown:active .dropdown-menu<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> block<span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><\/pre>\n<\/div>\n<h4>\u79fb\u52a8\u7aef\u6027\u80fd\u4f18\u5316<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">javascript<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/\/ \u5ef6\u8fdf\u52a0\u8f7d\u975e\u5173\u952e\u8d44\u6e90<\/span>\n<span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'IntersectionObserver'<\/span> <span class=\"token keyword\">in<\/span> window<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> lazyImages <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'img.lazy'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  \n  <span class=\"token keyword\">const<\/span> imageObserver <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">IntersectionObserver<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">entries<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n    entries<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">entry<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>entry<span class=\"token punctuation\">.<\/span>isIntersecting<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        <span class=\"token keyword\">const<\/span> img <span class=\"token operator\">=<\/span> entry<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">;<\/span>\n        img<span class=\"token punctuation\">.<\/span>src <span class=\"token operator\">=<\/span> img<span class=\"token punctuation\">.<\/span>dataset<span class=\"token punctuation\">.<\/span>src<span class=\"token punctuation\">;<\/span>\n        img<span class=\"token punctuation\">.<\/span>classList<span class=\"token punctuation\">.<\/span><span class=\"token function\">remove<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'lazy'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        imageObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">unobserve<\/span><span class=\"token punctuation\">(<\/span>img<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  \n  lazyImages<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">img<\/span> <span class=\"token operator\">=&gt;<\/span> imageObserver<span class=\"token punctuation\">.<\/span><span class=\"token function\">observe<\/span><span class=\"token punctuation\">(<\/span>img<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/pre>\n<\/div>\n<h3>\u684c\u9762\u7aef\u589e\u5f3a\u4f53\u9a8c<\/h3>\n<h4>\u5927\u5c4f\u5e55\u4f18\u5316<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">css<\/span><\/div>\n<div class=\"d2a24f03 _246a029\">\n<div class=\"efa13877\">\n<div class=\"ds-focus-ring\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token atrule\"><span class=\"token rule\">@media<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">min-width<\/span><span class=\"token punctuation\">:<\/span> 1200px<span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token selector\">.container<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 1400px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u66f4\u5bbd\u7684\u5185\u5bb9\u533a\u57df *\/<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token selector\">.video-grid<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token property\">grid-template-columns<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">repeat<\/span><span class=\"token punctuation\">(<\/span>6<span class=\"token punctuation\">,<\/span> 1fr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u66f4\u591a\u5217 *\/<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token selector\">.sidebar<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> sticky<span class=\"token punctuation\">;<\/span>\n    <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u56fa\u5b9a\u4fa7\u8fb9\u680f *\/<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><\/pre>\n<\/div>\n<h4>\u952e\u76d8\u5bfc\u822a\u652f\u6301<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">javascript<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/\/ \u589e\u5f3a\u952e\u76d8\u5bfc\u822a<\/span>\ndocument<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'keydown'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token comment\">\/\/ \u7a7a\u683c\u952e\u64ad\u653e\/\u6682\u505c<\/span>\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">.<\/span>code <span class=\"token operator\">===<\/span> <span class=\"token string\">'Space'<\/span> <span class=\"token operator\">&amp;&amp;<\/span> e<span class=\"token punctuation\">.<\/span>target<span class=\"token punctuation\">.<\/span>tagName <span class=\"token operator\">!==<\/span> <span class=\"token string\">'INPUT'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    e<span class=\"token punctuation\">.<\/span><span class=\"token function\">preventDefault<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">const<\/span> player <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'video'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">)<\/span> player<span class=\"token punctuation\">.<\/span>paused <span class=\"token operator\">?<\/span> player<span class=\"token punctuation\">.<\/span><span class=\"token function\">play<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> player<span class=\"token punctuation\">.<\/span><span class=\"token function\">pause<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  \n  <span class=\"token comment\">\/\/ ESC\u952e\u5173\u95ed\u6a21\u6001\u6846<\/span>\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">.<\/span>code <span class=\"token operator\">===<\/span> <span class=\"token string\">'Escape'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token function\">closeAllModals<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/pre>\n<\/div>\n<h2>\u6027\u80fd\u4f18\u5316\u5b9e\u8df5<\/h2>\n<h3>\u524d\u7aef\u6027\u80fd\u4f18\u5316<\/h3>\n<h4>CSS\u4f18\u5316\u7b56\u7565<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">css<\/span><\/div>\n<div class=\"d2a24f03 _246a029\">\n<div class=\"efa13877\">\n<div class=\"ds-focus-ring\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/* \u4f7f\u7528will-change\u63d0\u793a\u6d4f\u89c8\u5668 *\/<\/span>\n<span class=\"token selector\">.animated-element<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">will-change<\/span><span class=\"token punctuation\">:<\/span> transform<span class=\"token punctuation\">,<\/span> opacity<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token comment\">\/* \u51cf\u5c11\u91cd\u7ed8\u533a\u57df *\/<\/span>\n<span class=\"token selector\">.fixed-header<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> fixed<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">z-index<\/span><span class=\"token punctuation\">:<\/span> 1000<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">translateZ<\/span><span class=\"token punctuation\">(<\/span>0<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u89e6\u53d1\u786c\u4ef6\u52a0\u901f *\/<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token comment\">\/* \u4f7f\u7528content-visibility\u8df3\u8fc7\u79bb\u5c4f\u6e32\u67d3 *\/<\/span>\n<span class=\"token selector\">.long-list<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">content-visibility<\/span><span class=\"token punctuation\">:<\/span> auto<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">contain-intrinsic-size<\/span><span class=\"token punctuation\">:<\/span> 0 500px<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/pre>\n<\/div>\n<h4>JavaScript\u4f18\u5316<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">javascript<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/\/ \u9632\u6296\u548c\u8282\u6d41<\/span>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">debounce<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">func<span class=\"token punctuation\">,<\/span> wait<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">let<\/span> timeout<span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">executedFunction<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token operator\">...<\/span>args<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">later<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">clearTimeout<\/span><span class=\"token punctuation\">(<\/span>timeout<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n      <span class=\"token function\">func<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">...<\/span>args<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">clearTimeout<\/span><span class=\"token punctuation\">(<\/span>timeout<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    timeout <span class=\"token operator\">=<\/span> <span class=\"token function\">setTimeout<\/span><span class=\"token punctuation\">(<\/span>later<span class=\"token punctuation\">,<\/span> wait<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token comment\">\/\/ \u4f7f\u7528<\/span>\nwindow<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'resize'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">debounce<\/span><span class=\"token punctuation\">(<\/span>handleResize<span class=\"token punctuation\">,<\/span> <span class=\"token number\">250<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/pre>\n<\/div>\n<h3>\u56fe\u7247\u4f18\u5316\u65b9\u6848<\/h3>\n<h4>\u54cd\u5e94\u5f0f\u56fe\u7247\u5b9e\u73b0<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">html<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>picture<span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source <span class=\"token attr-name\">media<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>(min-width: 1200px)<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>large.jpg<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source <span class=\"token attr-name\">media<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>(min-width: 768px)<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>medium.jpg<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source <span class=\"token attr-name\">media<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>(max-width: 767px)<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>small.jpg<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>fallback.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u5f71\u7247\u5c01\u9762<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">loading<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lazy<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>picture<span class=\"token punctuation\">&gt;<\/span><\/span><\/pre>\n<\/div>\n<h4>WebP\u683c\u5f0f\u652f\u6301<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">php<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/\/ \u81ea\u52a8\u8f6c\u6362\u56fe\u7247\u4e3aWebP<\/span>\n<span class=\"token keyword\">function<\/span> <span class=\"token function-definition function\">get_optimized_image<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$image_path<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">strpos<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$_SERVER<\/span><span class=\"token punctuation\">[<\/span><span class=\"token string single-quoted-string\">'HTTP_ACCEPT'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string single-quoted-string\">'image\/webp'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">!==<\/span> <span class=\"token constant boolean\">false<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token variable\">$webp_path<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">str_replace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token string single-quoted-string\">'.jpg'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string single-quoted-string\">'.png'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string single-quoted-string\">'.webp'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token variable\">$image_path<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">file_exists<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$webp_path<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token keyword\">return<\/span> <span class=\"token variable\">$webp_path<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n  <span class=\"token punctuation\">}<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token variable\">$image_path<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/pre>\n<\/div>\n<h2>\u517c\u5bb9\u6027\u5904\u7406\u4e0e\u6d4b\u8bd5<\/h2>\n<h3>\u8de8\u6d4f\u89c8\u5668\u517c\u5bb9\u6027<\/h3>\n<h4>CSS\u524d\u7f00\u5904\u7406<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">css<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/* \u4f7f\u7528Autoprefixer\u5904\u7406\u540e\u7684CSS *\/<\/span>\n<span class=\"token selector\">.box<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> -webkit-box<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> -ms-flexbox<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">-webkit-box-pack<\/span><span class=\"token punctuation\">:<\/span> justify<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">-ms-flex-pack<\/span><span class=\"token punctuation\">:<\/span> justify<span class=\"token punctuation\">;<\/span>\n  <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> space-between<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/pre>\n<\/div>\n<h4>\u7279\u6027\u68c0\u6d4b\u4e0e\u964d\u7ea7<\/h4>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">javascript<\/span><\/div>\n<div class=\"d2a24f03 _246a029\">\n<div class=\"efa13877\">\n<div class=\"ds-focus-ring\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\">\/\/ \u68c0\u6d4b\u6d4f\u89c8\u5668\u7279\u6027<\/span>\n<span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'IntersectionObserver'<\/span> <span class=\"token keyword\">in<\/span> window<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token comment\">\/\/ \u4f7f\u7528\u73b0\u4ee3API<\/span>\n  <span class=\"token function\">setupLazyLoading<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token comment\">\/\/ \u964d\u7ea7\u65b9\u6848<\/span>\n  <span class=\"token function\">setupFallbackLazyLoading<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token comment\">\/\/ \u68c0\u6d4b\u89e6\u6478\u652f\u6301<\/span>\n<span class=\"token keyword\">const<\/span> isTouchDevice <span class=\"token operator\">=<\/span> <span class=\"token string\">'ontouchstart'<\/span> <span class=\"token keyword\">in<\/span> window <span class=\"token operator\">||<\/span> \n                     navigator<span class=\"token punctuation\">.<\/span>maxTouchPoints <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span> <span class=\"token operator\">||<\/span>\n                     navigator<span class=\"token punctuation\">.<\/span>msMaxTouchPoints <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><\/pre>\n<\/div>\n<h3>\u6d4b\u8bd5\u7b56\u7565<\/h3>\n<h4>\u591a\u8bbe\u5907\u6d4b\u8bd5\u6e05\u5355<\/h4>\n<ul>\n<li>\n<p class=\"ds-markdown-paragraph\">iPhone\u7cfb\u5217\uff08\u6700\u65b03\u4ee3\uff09<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u5b89\u5353\u4e3b\u6d41\u673a\u578b\uff08\u81f3\u5c113\u6b3e\uff09<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u5e73\u677f\u8bbe\u5907\uff08iPad\u3001\u5b89\u5353\u5e73\u677f\uff09<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u684c\u9762\u6d4f\u89c8\u5668\uff08Chrome\u3001Firefox\u3001Safari\u3001Edge\uff09<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u9ad8\u6e05\u663e\u793a\u5668\uff084K+\uff09<\/p>\n<\/li>\n<\/ul>\n<h4>\u81ea\u52a8\u5316\u6d4b\u8bd5\u5de5\u5177<\/h4>\n<ol start=\"1\">\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u6d4f\u89c8\u5668Stack<\/strong>\uff1a\u4e91\u7aef\u591a\u6d4f\u89c8\u5668\u6d4b\u8bd5<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>Lighthouse<\/strong>\uff1a\u6027\u80fd\u3001SEO\u3001PWA\u6d4b\u8bd5<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>WebPageTest<\/strong>\uff1a\u5168\u7403\u6027\u80fd\u6d4b\u8bd5<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>W3C\u9a8c\u8bc1\u5668<\/strong>\uff1a\u4ee3\u7801\u6807\u51c6\u9a8c\u8bc1<\/p>\n<\/li>\n<\/ol>\n<h2>\u6a21\u677f\u53d1\u5e03\u4e0e\u7ef4\u62a4<\/h2>\n<h3>\u7248\u672c\u7ba1\u7406\u5efa\u8bae<\/h3>\n<div class=\"md-code-block md-code-block-light\">\n<div class=\"md-code-block-banner-wrap\">\n<div class=\"md-code-block-banner md-code-block-banner-lite\">\n<div class=\"_121d384\">\n<div class=\"d2a24f03\"><span class=\"d813de27\">bash<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<pre><span class=\"token comment\"># Git\u7248\u672c\u63a7\u5236\u793a\u4f8b<\/span>\n<span class=\"token function\">git<\/span> init\n<span class=\"token function\">git<\/span> <span class=\"token function\">add<\/span> <span class=\"token builtin class-name\">.<\/span>\n<span class=\"token function\">git<\/span> commit <span class=\"token parameter variable\">-m<\/span> <span class=\"token string\">\"\u521d\u59cb\u7248\u672c\uff1a\u57fa\u4e8eBootstrap Video\u6a21\u677f\u5b9a\u5236\"<\/span>\n<span class=\"token function\">git<\/span> branch feature\/new-design\n<span class=\"token function\">git<\/span> checkout feature\/new-design\n<span class=\"token comment\"># \u5f00\u53d1\u65b0\u529f\u80fd...<\/span>\n<span class=\"token function\">git<\/span> <span class=\"token function\">add<\/span> <span class=\"token builtin class-name\">.<\/span>\n<span class=\"token function\">git<\/span> commit <span class=\"token parameter variable\">-m<\/span> <span class=\"token string\">\"\u6dfb\u52a0\u9ed1\u6697\u6a21\u5f0f\u652f\u6301\"<\/span>\n<span class=\"token function\">git<\/span> checkout main\n<span class=\"token function\">git<\/span> merge feature\/new-design<\/pre>\n<\/div>\n<h3>\u6587\u6863\u7f16\u5199<\/h3>\n<p class=\"ds-markdown-paragraph\">\u4e3a\u60a8\u7684\u5b9a\u5236\u6a21\u677f\u7f16\u5199\u6587\u6863\uff1a<\/p>\n<ol start=\"1\">\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u5b89\u88c5\u8bf4\u660e<\/strong>\uff1a\u8be6\u7ec6\u5b89\u88c5\u6b65\u9aa4<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u914d\u7f6e\u9009\u9879<\/strong>\uff1a\u53ef\u914d\u7f6e\u9879\u8bf4\u660e<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u5b9a\u5236\u6307\u5357<\/strong>\uff1a\u5982\u4f55\u8fdb\u4e00\u6b65\u4fee\u6539<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u5e38\u89c1\u95ee\u9898<\/strong>\uff1a\u95ee\u9898\u4e0e\u89e3\u51b3\u65b9\u6848<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u66f4\u65b0\u65e5\u5fd7<\/strong>\uff1a\u7248\u672c\u53d8\u66f4\u8bb0\u5f55<\/p>\n<\/li>\n<\/ol>\n<h3>\u793e\u533a\u8d21\u732e<\/h3>\n<p class=\"ds-markdown-paragraph\">\u5982\u679c\u60a8\u57fa\u4e8e\u5f00\u6e90\u6a21\u677f\u8fdb\u884c\u4e86\u6709\u4ef7\u503c\u7684\u4fee\u6539\uff0c\u8003\u8651\uff1a<\/p>\n<ol start=\"1\">\n<li>\n<p class=\"ds-markdown-paragraph\">\u56de\u9988\u539f\u9879\u76ee<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u5728\u6a21\u677f\u6c47\uff08<a href=\"https:\/\/www.qqjishu.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">www.qqjishu.com\/<\/a>\uff09\u7b49\u5e73\u53f0\u5206\u4eab<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u53c2\u4e0e\u793e\u533a\u8ba8\u8bba\u548c\u95ee\u9898\u89e3\u7b54<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\">\u7ef4\u62a4\u81ea\u5df1\u7684\u5f00\u6e90\u9879\u76ee<\/p>\n<\/li>\n<\/ol>\n<h2>\u8d44\u6e90\u4e0e\u8fdb\u4e00\u6b65\u5b66\u4e60<\/h2>\n<h3>\u5b66\u4e60\u8d44\u6e90\u63a8\u8350<\/h3>\n<ol start=\"1\">\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u5b98\u65b9\u6587\u6863<\/strong>\uff1a\u82f9\u679cCMS\u5f00\u53d1\u6587\u6863<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u524d\u7aef\u6846\u67b6<\/strong>\uff1aBootstrap\u3001Tailwind CSS\u5b98\u65b9\u6587\u6863<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u8bbe\u8ba1\u8d44\u6e90<\/strong>\uff1a\u6a21\u677f\u6c47\uff08<a href=\"https:\/\/www.qqjishu.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">www.qqjishu.com\/<\/a>\uff09\u7684\u8bbe\u8ba1\u8d44\u6e90\u533a<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u89c6\u9891\u6559\u7a0b<\/strong>\uff1aYouTube\u4e0a\u7684\u82f9\u679cCMS\u6559\u7a0b<\/p>\n<\/li>\n<\/ol>\n<h3>\u5de5\u5177\u63a8\u8350<\/h3>\n<ol start=\"1\">\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u4ee3\u7801\u7f16\u8f91\u5668<\/strong>\uff1aVS Code + \u76f8\u5173\u63d2\u4ef6<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u8bbe\u8ba1\u5de5\u5177<\/strong>\uff1aFigma\u3001Adobe XD<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u6027\u80fd\u5206\u6790<\/strong>\uff1aChrome DevTools<\/p>\n<\/li>\n<li>\n<p class=\"ds-markdown-paragraph\"><strong>\u7248\u672c\u63a7\u5236<\/strong>\uff1aGit + GitHub\/GitLab<\/p>\n<\/li>\n<\/ol>\n<p class=\"ds-markdown-paragraph\">\u901a\u8fc7\u672c\u6559\u7a0b\u7684\u5b66\u4e60\uff0c\u60a8\u5e94\u8be5\u80fd\u591f\u719f\u7ec3\u5730\u5bf9\u82f9\u679cCMS\u5f71\u89c6\u6a21\u677f\u8fdb\u884c\u5b9a\u5236\u4fee\u6539\u3002\u8bb0\u4f4f\uff0c\u6a21\u677f\u5b9a\u5236\u662f\u4e00\u4e2a\u6301\u7eed\u7684\u8fc7\u7a0b\uff0c\u9700\u8981\u6839\u636e\u7528\u6237\u53cd\u9988\u548c\u6280\u672f\u53d1\u5c55\u4e0d\u65ad\u4f18\u5316\u3002\u5728\u6a21\u677f\u6c47\uff08<a href=\"https:\/\/www.qqjishu.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">www.qqjishu.com\/<\/a>\uff09\u7b49\u4e13\u4e1a\u5e73\u53f0\u4e0a\uff0c\u60a8\u53ef\u4ee5\u627e\u5230\u66f4\u591a\u7075\u611f\u548c\u89e3\u51b3\u65b9\u6848\uff0c\u4e0d\u65ad\u63d0\u5347\u60a8\u7684\u5f71\u89c6\u7f51\u7ad9\u4f53\u9a8c\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5f71\u89c6\u7f51\u7ad9\u7684\u6210\u529f\u5f88\u5927\u7a0b\u5ea6\u4e0a\u53d6\u51b3\u4e8e\u6a21\u677f\u7684\u8d28\u91cf\u548c\u4e2a\u6027\u5316\u7a0b\u5ea6\u3002\u5373\u4f7f\u662f\u4f18\u79c0\u7684\u514d\u8d39\u6a21\u677f\uff0c\u4e5f\u9700\u8981\u6839\u636e\u5177\u4f53\u9700\u6c42\u8fdb\u884c\u5b9a\u5236\u4fee\u6539\u3002\u672c\u6559\u7a0b\u5c06\u8be6\u7ec6\u8bb2\u89e3\u5982\u4f55\u5b9a\u5236\u4fee\u6539\u82f9\u679cCMS\u5f71\u89c6\u6a21\u677f\uff0c\u5e76\u63a8\u8350\u591a\u6b3e\u4f18\u79c0\u7684\u514d\u8d39\u54cd\u5e94\u5f0f\u6a21\u677f\uff0c\u5e2e\u52a9\u60a8\u6253\u9020\u72ec\u5177\u7279\u8272\u7684\u5f71\u89c6\u7f51\u7ad9\u3002 \u6a21\u677f\u5b9a\u5236\u524d\u7684\u51c6\u5907\u5de5\u4f5c \u9700\u6c42\u5206\u6790\u4e0e\u89c4\u5212 \u5728\u5f00\u59cb\u4fee\u6539\u524d\uff0c\u660e\u786e\u60a8\u7684\u9700\u6c42\uff1a \u54c1\u724c\u5b9a\u4f4d\u5206\u6790\uff1a\u7f51\u7ad9\u98ce\u683c\u4e0e\u76ee\u6807\u53d7\u4f17\u5339\u914d \u529f\u80fd\u9700\u6c42\u6e05\u5355\uff1a\u5fc5\u987b\u529f\u80fd vs \u53ef\u9009\u529f\u80fd \u5185\u5bb9\u7ed3\u6784\u89c4\u5212\uff1a\u4fe1\u606f\u67b6\u6784\u4e0e\u5bfc\u822a\u8bbe\u8ba1 \u6280\u672f\u9650\u5236\u8bc4\u4f30\uff1a\u670d\u52a1\u5668\u6027\u80fd\u4e0e\u5e26\u5bbd\u9650\u5236 \u73af\u5883\u642d\u5efa\u5efa\u8bae \u672c\u5730\u5f00\u53d1\u73af\u5883\uff1aXAMPP\/WAMP\/MAMP \u4ee3\u7801\u7f16\u8f91\u5668\uff1aVS Cod<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"collection":[],"class_list":["post-5370","post","type-post","status-publish","format-standard","hentry","category-qtjc"],"_links":{"self":[{"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/posts\/5370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/comments?post=5370"}],"version-history":[{"count":0,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/posts\/5370\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/media?parent=5370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/categories?post=5370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/tags?post=5370"},{"taxonomy":"collection","embeddable":true,"href":"https:\/\/www.qqjishu.com\/index.php\/wp-json\/wp\/v2\/collection?post=5370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}