中电科工程建设有限公司网站怎么做一个订阅号

中电科工程建设有限公司网站,怎么做一个订阅号,丹东网站设计,百度自动点击器怎么用1. 为什么选择 Mkdocs 来搭建你的第一个网站#xff1f; 如果你和我一样#xff0c;是个喜欢折腾技术但又不想在搭建网站这件事上耗费太多精力的开发者#xff0c;那你肯定也经历过那种纠结#xff1a;想有个地方写写技术笔记、展示自己的项目#xff0c;但一看到要配置服…1. 为什么选择 Mkdocs 来搭建你的第一个网站如果你和我一样是个喜欢折腾技术但又不想在搭建网站这件事上耗费太多精力的开发者那你肯定也经历过那种纠结想有个地方写写技术笔记、展示自己的项目但一看到要配置服务器、数据库、后端语言就头大。几年前我也是这样直到我遇到了 Mkdocs它彻底改变了我对“建站”这件事的看法。简单来说Mkdocs 就是一个用 Markdown 写文档然后一键生成漂亮静态网站的工具。你完全不用操心 HTML、CSS、JavaScript甚至不需要懂任何前端框架只需要会写最简单的 Markdown 语法就能拥有一个专业、响应式、支持搜索的网站。我当初选择它最看重的就是“静态”这两个字。静态网站意味着所有页面都是预先生成好的 HTML 文件没有动态的服务器端处理。这带来的好处太多了速度快得飞起因为服务器只需要把现成的文件扔给浏览器就行安全性极高没有数据库和后端程序黑客几乎找不到攻击入口部署成本极低随便一个能托管静态文件的服务就能用比如 GitHub Pages完全免费。对于个人博客、项目文档、知识库这类内容驱动型的站点静态生成器简直是量身定做。而 Mkdocs 在众多静态站点生成器中又是对文档作者最友好、上手门槛最低的那个。你可能听说过 Jekyll、Hugo 或者 Hexo它们都很强大。但 Mkdocs 的核心优势在于它的“文档优先”理念和极其简单的配置。它的默认主题就很好看尤其是搭配上 Material for MkDocs 这个第三方主题后颜值和功能直接拉满支持暗黑模式、即时搜索、导航抽屉、语法高亮等等开箱即用。你不需要为了调整一个侧边栏的样式而去学习一套新的模板语法大部分需求在配置文件里改几个参数就能搞定。对于想快速拥有一个高质量个人网站并且希望把主要精力放在内容创作而非技术折腾上的朋友Mkdocs 是我最推荐没有之一的起点。2. 手把手准备安装环境和创建项目仓库万事开头难但 Mkdocs 的开头真的不难。我们一步步来确保你一次成功。2.1 安装 Python 和 pipMkdocs 是基于 Python 的所以第一步是确保你的电脑上有 Python 环境。别怕这很简单。打开你的终端Windows 上是命令提示符或 PowerShellmacOS/Linux 是 Terminal输入python --version或python3 --version。如果能看到类似Python 3.8.10的版本号恭喜你这一步可以跳过。如果提示“命令未找到”那就需要去安装。我建议直接去 Python 官网下载最新稳定版。安装时千万记得勾选 “Add Python to PATH” 这个选项这能省去后面手动配置环境变量的大麻烦。安装完成后重新打开终端再次输入python --version确认。同时Python 会自带一个叫pip的包管理工具检查一下pip --version是否正常。有了pip我们安装 Mkdocs 就像安装手机 App 一样简单。2.2 安装 Mkdocs 和 Material 主题环境准备好接下来就是安装主角了。在终端里输入下面这行命令pip install mkdocs mkdocs-material这条命令会同时安装 Mkdocs 核心框架和 Material for MkDocs 主题。mkdocs-material这个主题包非常受欢迎它基于 Google 的 Material Design 设计语言视觉效果和交互体验都是一流的而且集成了大量实用插件。安装过程可能会花一两分钟取决于你的网速。安装成功后输入mkdocs --version如果能看到版本信息就说明一切就绪。2.3 创建 GitHub 仓库并克隆到本地我强烈建议你从一开始就使用 GitHub 来管理你的网站源码并且直接使用 GitHub Pages 来免费托管生成后的网站。这是最流畅、最自动化的工作流。首先去 GitHub 官网注册一个账号如果还没有的话。然后点击右上角的 “” 号选择 “New repository”。给仓库起个名字这里有个关键技巧如果你想通过https://你的用户名.github.io这样的顶级域名直接访问网站那么仓库名必须是你的用户名.github.io。比如我的 GitHub 用户名叫zhangsan那么仓库名就应该是zhangsan.github.io。创建仓库时可以勾选 “Add a README file”其他保持默认即可。创建完成后把这个仓库克隆到你的本地电脑。你可以使用 Git 命令行但我更推荐新手使用GitHub Desktop这个图形化工具它非常直观。下载安装 GitHub Desktop 后登录你的账号选择 “Clone a repository from the Internet”找到你刚创建的用户名.github.io仓库选择一个你喜欢的本地文件夹比如D:\MySite点击克隆。这样你就有了一个本地的工作目录所有后续操作都在这个文件夹里进行。3. 初始化网站并理解核心文件结构现在我们进入最激动人心的环节创建网站骨架。打开终端或 VS Code 的内置终端使用cd命令切换到刚才克隆下来的本地仓库目录。例如cd D:\MySite\zhangsan.github.io3.1 快速创建新站点在终端里输入以下命令mkdocs new .注意命令最后有一个点.这代表在当前目录创建新站点。执行后Mkdocs 会快速生成两个核心文件和一个文件夹mkdocs.yml这是网站的配置文件相当于网站的大脑。网站的名字、主题、导航菜单、插件等所有设置都在这里。docs/文件夹这是存放网站内容的地方相当于网站的肉体。你所有的 Markdown 文档都放在这里面。docs/index.md这是网站的首页默认已经创建好了。你可以用文件管理器或代码编辑器比如 VS Code打开这个目录看看。结构非常清晰对吧mkdocs.yml负责控制一切docs文件夹里放你想展示的内容。这种分离的设计让管理和维护变得特别简单。3.2 启动实时预览服务器Mkdocs 提供了一个超级好用的开发服务器可以让你在本地实时预览网站效果并且支持热重载你修改 Markdown 文件保存后浏览器页面会自动刷新。在终端里输入mkdocs serve你会看到类似Running at: http://127.0.0.1:8000/的输出。打开你的浏览器访问这个地址通常是http://localhost:8000一个崭新的、基于 Material 主题的网站就出现在你面前了默认的首页已经有一些示例内容。现在你可以尝试用编辑器打开docs/index.md随便修改里面的 Markdown 文字保存然后回头刷新浏览器页面看看变化是不是立刻生效了这种即时反馈的体验对于内容创作来说真是太棒了。4. 深度配置让你的网站独一无二默认网站虽然能跑起来但毕竟还是“样板间”。我们要把它变成自己的“家”关键就在于配置mkdocs.yml文件。用文本编辑器打开它我们一起来改造。4.1 基础信息配置首先替换掉最基础的站点信息。找到site_name、site_url等字段修改成你自己的site_name: 张三的技术小筑 site_url: https://zhangsan.github.io site_author: 张三 site_description: 这里是张三分享编程笔记和项目心得的地方。site_name会显示在浏览器标签页和网站顶部site_url是你最终部署后的网址必须填对site_description是网站的简短描述对 SEO 有帮助。4.2 主题与视觉定制接下来是重头戏配置 Material 主题。在theme部分我们可以进行丰富的定制theme: name: material palette: # 配色方案切换 - scheme: default primary: indigo accent: pink toggle: icon: material/brightness-7 name: 切换到暗色模式 - scheme: slate primary: blue grey accent: cyan toggle: icon: material/brightness-4 name: 切换到亮色模式 features: - navigation.tabs # 顶部导航标签 - navigation.sections # 侧边栏章节折叠 - navigation.expand # 默认展开侧边栏当前章节 - search.highlight # 搜索关键词高亮 - content.code.copy # 代码块复制按钮palette定义了网站的亮色和暗色模式的主题色你可以把primary和accent换成任何你喜欢的 Material Design 颜色名如teal,amber,deep orange。features列表则像开关一样启用各种炫酷功能我强烈建议把上面这几个都加上用户体验提升巨大。4.3 构建导航菜单一个清晰的导航菜单至关重要。Mkdocs 通过nav配置项来定义。你可以手动列出所有页面但更常见的做法是让它自动根据docs文件夹的结构生成同时进行一些排序和重命名nav: - 首页: index.md - 博客: - 技术笔记: blog/tech-notes.md - 生活随笔: blog/life.md - 项目: - 项目一: projects/project-a.md - 项目二: projects/project-b.md - 关于我: about.md同时你需要确保docs文件夹下有对应的目录和文件结构比如docs/blog/tech-notes.md。Mkdocs 会自动将 Markdown 文件渲染成网页并根据nav的设置生成菜单。5. 内容创作用 Markdown 书写一切配置好了框架现在可以安心写内容了。所有内容都放在docs目录下使用 Markdown 格式。Markdown 语法非常简单十分钟就能学会。这里分享几个在 Mkdocs 里特别有用的技巧。5.1 基础语法与扩展除了标题 (#)、列表 (-)、链接 ([]())、图片 (![]()) 这些基础语法Material 主题支持很多扩展语法。比如警告框可以用来突出显示提示、注意或警告信息!!! note “一个小提示” 这里是提示内容会有一个漂亮的蓝色边框图标。 !!! warning “注意” 这里是警告内容使用醒目的黄色。还有标签页可以在同一位置组织不同内容 “Python” python print(“Hello, Python!”) “JavaScript” javascript console.log(“Hello, JS!”); 读者可以点击标签切换查看不同的代码片段非常整洁。5.2 嵌入图片与文件把图片放在docs目录下的一个文件夹里比如docs/images/然后在 Markdown 中引用对于 PDF、ZIP 等文件同样可以放在docs目录下例如docs/files/whitepaper.pdf然后提供一个下载链接[下载白皮书](files/whitepaper.pdf)。部署后这些资源都会被自动处理。5.3 利用 Front Matter 进行页面控制虽然 Mkdocs 主要靠mkdocs.yml全局配置但每个 Markdown 文件也可以有自己的“头信息”称为 Front Matter用来覆盖全局设置。在文件最顶部用三条短横线包裹--- title: 我的自定义页面标题 hide: - navigation # 隐藏本页的导航 - toc # 隐藏本页的目录 --- # 这里是正常的Markdown内容这在你需要制作一些特殊布局的页面如封面页、全屏展示页时非常有用。6. 自动化部署一键发布到 GitHub Pages内容写好了本地预览也满意了是时候让全世界看到了。我们将利用 GitHub 的 Actions 功能实现“提交代码自动部署”的自动化流程。6.1 创建 GitHub Actions 工作流在你的项目根目录下创建这样一个文件路径.github/workflows/ci.yml。这个文件定义了自动化部署的脚本。将以下内容复制进去name: Deploy MkDocs Site to GitHub Pages on: push: branches: - main # 当代码推送到 main 分支时触发 pull_request: branches: - main # 当针对 main 分支的 Pull Request 创建时也触发用于预览 jobs: build-and-deploy: runs-on: ubuntu-latest # 在一个全新的 Ubuntu 系统环境中运行 steps: - name: Checkout Code uses: actions/checkoutv3 # 第一步获取你的代码 - name: Setup Python uses: actions/setup-pythonv4 # 第二步安装 Python with: python-version: ‘3.x’ - name: Install Dependencies run: pip install mkdocs mkdocs-material # 第三步安装 MkDocs 和主题 - name: Build Site run: mkdocs build # 第四步构建静态网站生成 site 文件夹 - name: Deploy to GitHub Pages if: github.ref ‘refs/heads/main’ # 仅在推送到 main 分支时执行部署 uses: peaceiris/actions-gh-pagesv3 # 使用一个专门部署到 gh-pages 的 Action with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./site # 将构建好的 site 目录内容部署出去这个工作流的意思是每当你有新的代码推送到 GitHub 仓库的main分支GitHub 就会自动启动一个虚拟的 Linux 机器在那台机器上拉取你的代码安装 Python 和 Mkdocs执行mkdocs build命令生成静态网站文件最后将这些文件推送到一个名为gh-pages的特殊分支上。GitHub Pages 服务会自动从这个gh-pages分支获取文件并提供给外界访问。6.2 关键仓库设置创建好工作流文件后你需要进行一个关键设置以确保 Actions 有权限写入gh-pages分支。进入你的 GitHub 仓库页面点击 “Settings” - “Actions” - “General”。页面往下拉找到 “Workflow permissions” 部分。这里非常重要请选择 “Read and write permissions”读写权限然后保存。这样我们工作流中的peaceiris/actions-gh-pages步骤才有权限创建和更新gh-pages分支。6.3 触发首次部署现在将你本地所有的更改包括新写的文档、修改的mkdocs.yml和新增的.github/workflows/ci.yml文件提交并推送到 GitHub。你可以使用 Git 命令git add . git commit -m “初始化我的 Mkdocs 网站” git push origin main也可以使用 GitHub Desktop点击界面上的 “Commit to main” 然后 “Push origin”。推送完成后立刻打开你的 GitHub 仓库页面点击顶部的 “Actions” 标签页。你会看到一个新的工作流正在运行名字是 “Deploy MkDocs Site to GitHub Pages”。点击进去可以看到实时的构建日志。大约一分钟后如果所有步骤都显示绿色的对勾就说明部署成功了7. 访问网站与后续维护部署成功后打开浏览器访问https://你的用户名.github.io。瞧你的个人网站已经在线了第一次访问可能需要一两分钟等待 DNS 完全生效。以后你只需要专注于在本地docs文件夹下用 Markdown 写文章。写完后通过 GitHub Desktop 或 Git 命令提交并推送到main分支剩下的构建和部署工作 GitHub Actions 会自动帮你完成等待一分钟左右刷新生效。关于自定义域名如果你想用www.你的名字.com这样的域名也很简单在域名注册商那里将你的域名通过 CNAME 记录解析到你的用户名.github.io然后在仓库的 “Settings” - “Pages” 页面在 “Custom domain” 处填写你的域名并保存。最后别忘了在你本地的mkdocs.yml配置文件中将site_url也更新为你的新域名。踩过几次坑之后我的经验是配置文件mkdocs.yml是核心任何改动前最好先本地mkdocs serve预览一下多用 Material 主题的官方文档里面几乎有所有功能的配置示例对于博客文章可以考虑按日期在docs下建立目录如docs/2024/05/20-my-post.md来管理让导航更清晰。这个由 Mkdocs 驱动的静态网站将会是你最可靠、最省心的数字自留地。