搜索

[25839] 2016-12-14_为什么我们的微信文章版式比较好看？

文档创建者：s7ckTeam
浏览次数：2
最后更新：2025-01-19
2016-12-14_为什么我们的微信文章版式比较好看？ - -   w x y 1 4 % 3 8 % 5 5 % 为 什 么 我 们 的 微 信 文 章 版 式 比 较 好 看 ？ 原 创   作 者 ： w x y   L i n u x 中 国   2 0 1 6 - 1 2 - 1 4 不 知 道 多 少 次 了 ， 我 在 微 信 公 众 号 后 台 收 到 询 问 “ 你 们 的 微 信 文 章 版 式 是 怎 么 做 的 ” 等 问 题 了 。 其 实 ， 我 本 来 觉 得 这 没 什 么 值 得 问 的 ， 也 不 值 得 保 密 ， 但 是 总 是 有 人 问 ， 我 觉 得 还 是 写 一 篇 小 文 来 介 绍 一 下 吧 ， 下 次 有 人 问 我 ， 我 就 直 接 丢 链 接 好 了 ~ 本 文 导 航 - 1 、 代 码 高 亮 - 2 、 英 文 注 释 标 签 - 3 、 其 它 作 者 ：   w x y 不 知 道 多 少 次 了 ， 我 在 微 信 公 众 号 后 台 收 到 询 问 “ 你 们 的 微 信 文 章 版 式 是 怎 么 做 的 ” 等 问 题 了 。 其 实 ， 我 本 来 觉 得 这 没 什 么 值 得 问 的 ， 也 不 值 得 保 密 ， 但 是 总 是 有 人 问 ， 我 觉 得 还 是 写 一 篇 小 文 来 介 绍 一 下 吧 ， 下 次 有 人 问 我 ， 我 就 直 接 丢 链 接 好 了 ~ 我 本 身 不 是 做 美 工 和   U I / U E   出 身 的 ， 但 是 我 们 的 （ 前 ） 联 合 创 始 人   D e a d F i r e   是 专 门 做 这 个 的 ， 奈 何 他 再 也 不 可 能 为   L i n u x 中 国 做 任 何 的   U E   调 整 了 ， / c r y 。 不 过 我 们 的   U E   在 他 的 努 力 之 下 ， 目 前 还 算 不 错 ， 也 仅 以 这 些 样 式 来 纪 念 他 吧 。 下 面 我 来 说 说 我 们 的 微 信 文 章 版 式 的 几 个 算 是 亮 点 的 地 方 吧 。
先 说 一 个 前 提 ， L i n u x   中 国 的 文 章 都 是 通 过 自 身 网 站 的   C M S   进 行 编 辑 的 ， 并 没 有 使 用 外 部 的 那 些 第 三 方 的 微 信 编 辑 器 。 因 此 ， 如 果 你 有 一 个 可 以 编 辑 内 容 并 形 成 网 页 的   C M S ， 那 么 以 下 技 巧 可 能 就 比 较 适 合 你 使 用 ； 如 果 你 没 有   C M S   ， 理 论 上 说 你 手 工 编 辑   H T M L   页 面 也 是 可 以 的 ； 或 者 ， 其 实 你 可 以 复 制 我 们 的 文 章 的 格 式 到 一 个 可 视 化     H T M L   编 辑 器 中 ， 修 改 内 容 也 可 以 。 1 、 代 码 高 亮 、 代 码 高 亮 作 为 技 术 网 站 ， 刊 载 的 文 章 中 出 现 代 码 是 必 不 可 少 的 ， 之 前 我 们 也 用 过 一 些 代 码 高 亮 插 件 ， 但 是 因 一 些 不 足 后 来 就 放 弃 了 。 目 前 我 们 使 用 的 代 码 高 亮 插 件 是   G o o g l e   的   c o d e - p r e t t i f y [ 1 ] ， 最 初 它 是 放 在   G o o g l e   C o d e   上 的 ， 现 在 也 托 管 到 了 G i t H u b ：   h t t p s : / / g i t h u b . c o m / g o o g l e / c o d e - p r e t t i f y   。 c o d e - p r e t t i f y   的 优 点 是 体 积 小 ， 使 用 简 单 ， 而 且 自 动 识 别 所 高 亮 的 语 言 （ 虽 然 有 时 候 识 别 的 不 对 ， 但 是 其 实 没 几 个 人 真 的 在 意 对 不 对 ， 大 致 能 区 分 不 同 的 语 言 成 分 就 好 了 ） 。 目 前 这 个 软 件 已 经 有 比 较 长 的 时 间 不 更 新 了 ， 虽 然 还 有   b u g ， 不 过 大 致 上 的 功 能 没 有 什 么 问 题 。 使 用 方 法 很 简 单 ， 首 先 你 得 在 页 面 中 引 入   c o d e - p r e t t i f y   的   j s     文 件 ， 然 后 在 你 要 高 亮 代 码 外 使 用     或     标 签 即 可 。 比 如 ： 然 后 看 起 来 效 果 就 是 ： < p r e   c l a s s = " p r e t t y p r i n t " > . . . < / p r e > < c o d e   c l a s s = " p r e t t y p r i n t " > . . . < / c o d e > 1 .   < s c r i p t   s r c = " r u n _ p r e t t i f y . j s " > < / s c r i p t > 2 .   < p r e   c l a s s = " p r e t t y p r i n t " > c l a s s   V o i l a   { 3 .   p u b l i c : 4 .       / /   V o i l a 5 .       s t a t i c   c o n s t   s t r i n g   V O I L A   =   " V o i l a " ; 6 .   } < / p r e > 1 .   c l a s s   V o i l a   { 2 .   p u b l i c : 3 .       / /   V o i l a 4 .       s t a t i c   c o n s t   s t r i n g   V O I L A   =   " V o i l a " ; 5 .   }
可 能 你 使 用 了   c o d e - p r e t t i f y   之 后 也 发 现 和 我 们 的 代 码 样 式 不 同 ， 其 实 ， 这 只 是 我 们 使 用 了 自 己 定 制 的 一 个   C S S   样 式 罢 了 ， 稍 微 研 究 下 我 们 的 页 面 代 码 ， 你 就 能 找 到 这 个   C S S [ 2 ]   的 ， 你 可 以 根 据 你 的 喜 好 进 行 修 改 。 当 你 做 好 了 一 个 可 以 在 浏 览 器 中 满 意 呈 现 的 页 面 之 后 ， 你 只 需 要 复 制 该 页 面 内 容 ， 贴 到 你 的 微 信 后 台 的 编 辑 器 中 即 可 。 2 、 英 文 注 释 标 签 、 英 文 注 释 标 签 我 们 经 常 会 发 布 各 种 英 文 文 章 的 译 文 ， 但 是 有 时 候 ， 一 些 词 汇 需 要 附 上 英 文 才 能 比 较 好 的 避 免 歧 义 。 通 常 大 家 的 做 法 都 是 在 中 文 后 面 用 括 号 圈 上 对 应 的 英 文 ， 但 是 随 着   H T M L 5   规 范 的 普 遍 支 持 ， 其 实 还 有 另 外 一 种 新 的 标 签 可 以 更 好 的 用 于 这 种 情 况 。 那 就 是   R U B Y   标 签 。 R U B Y   是 振 假 名 的 意 思 ， 用 于 在   H T M L   中 标 注 注 音 。 各 个 浏 览 器 对   R U B Y   标 签 的 支 持 程 度 不 同 ， 不 过 最 基 本 的 用 法 都 是 支 持 的 ， 包 括 微 信 内 的 浏 览 器 。 简 单 的 来 说 ， R U B Y   标 签 的 基 本 格 式 如 下 ： ， 这 个 标 签 用 浏 览 器 看 的 效 果 是 这 样 的 ： E n g l i s h   h e r e 这 里 写 中 文 。 当 然 ， 实 际 上   R U B Y   标 签 还 许 多 子 标 签 和 不 同 的 格 式 变 体 ， 但 是 一 方 面 各 个 浏 览 器 支 持 效 果 不 同 ， 另 外 一 方 面 对 微 信 浏 览 器 而 言 仅 支 持 这 种 基 本 格 式 。 需 要 深 入 研 究 的 同 学 可 以 自 行 搜 索 。 目 前 应 该 还 没 有 支 持   R U B Y   的   C M S ， 所 以 ， 一 般 情 况 下 你 需 要 手 工 编 辑 你 的 页 面 的   H T M L   来 插 入 这 种 标 签 — — 当 然 ， 我 是 自 己 开 发 了 一 个 我 的   C M S   的 插 件 。 此 外 ，   R U B Y   标 签 也 是 可 以 嵌 入 链 接 的 ， 这 种 情 况 也 比 较 常 见 。 你 可 以 自 行 摸 索 下 。 最 后 ， R U B Y   标 签 自 然 有 默 认 的 显 示 样 式 ， 显 然 ， 作 为 在 意 用 户 体 验 的 你 ， 肯 定 会 给 它 单 独 调 整 下   C S S   的 ， 是 吧 ？ 3 、 其 它 、 其 它 实 际 上 ， 除 了 以 上 两 点 ， 我 们 并 没 有 特 别 不 同 的 地 方 ， 不 过 用 户 体 验 的 细 节 还 是 有 所 调 整 的 ， 但 是 这 些 就 是 见 仁 见 智 的 地 方 了 ， 大 家 可 以 根 据 需 要 参 考 我 们 或 其 它 一 些 在 页 面 体 验 方 面 有 所 特 长 的 页 面 进 行 学 习 。 除 此 以 外 ， 做 了 几 年 的 微 信 文 章 发 布 ， 我 还 有 一 点 点 小 经 验 可 以 分 享 给 大 家 ： 不 建 议 调 整 正 文 字 号 ， 就 用 默 认 的   1 6 p x   即 可 ， 虽 然 看 起 来 比 较 大 — — 但 是 现 在 移 动 设 备 分 辨 率 越 来 越 高 了 ， 所 以 较 小 的 字 号 可 能 会 让 部 分 用 户 看 起 来 比 较 累 。 当 然 ， 也 可 以 考 虑 使 用   1 4 p x ， 如 果 你 的 文 章 不 全 是 密 密 麻 麻 的 字 的 话 。 正 文 文 字 的 颜 色 不 要 出 现 太 多 ， 除 了 黑 色 以 外 ， 最 多 有 两 种 为 宜 。 此 外 ， 在 特 殊 情 况 下 ， 你 还 可 以 考 虑 使 用 加 粗 ， 甚 至 斜 体 效 果 。 中 英 文 混 排 时 ， 以 及 掺 杂 数 字 时 ， 尽 量 在 英 文 单 词 与 汉 字 之 间 加 个 空 格 ， 关 于 这 方 面 ， 网 上 有 篇 《 中 文 排 版 指 北 [ 3 ] 》 ， 会 有 更 详 细 的 建 议 ， 不 过 我 认 为 最 重 要 、 最 基 本 的 就 是 这 条 了 。 5 .   } < r u b y > 这 里 写 中 文 < r t > E n g l i s h   h e r e < r t > < r u b y >
文 内 配 图 ， 如 果 有 可 能 尽 量 尺 寸 一 致 ， 最 少 要 考 虑 保 证 图 片 宽 度 一 致 比 较 好 。 配 图 下 方 ， 必 要 时 可 以 用 另 外 一 种 文 字 样 式 来 做 图 片 说 明 。 比 如 我 们 就 是 用 斜 体 、 灰 色 、 下 划 线 样 式 的 字 体 作 为 图 片 说 明 。 模 糊 的 配 图 不 要 也 罢 ， 除 非 必 要 ， 用 动 图 会 显 得 很   l o w — — 有 些 老 网 友 或 许 还 记 得   2 0   年 前 的 网 页 上 的 那 种   G I F   动 画 展 览 吧 ？ 题 图 ， 如 果 你 的 标 题 不 够 好 ， 那 就 选 张 好 的 题 图 吧 ， 如 果 你 能 有 一 张 切 题 的 壁 纸 级 题 图 ， 那 显 然 会 让 你 的 公 众 号 订 阅 者 更 高 兴 一 些 — — 如 果 细 心 的 话 ， 或 许 你 可 以 放 上 这 张 壁 纸 级 题 图 的 高 分 辨 率 原 图 的   U R L   地 址 ？ 微 信 后 台 的 文 章 编 辑 器 对 很 多   H T M L   标 签 是 不 支 持 的 ， 比 如   。 所 以 ， 大 家 如 果 采 用   d i v   布 局 的 话 ， 会 发 现 桌 面 浏 览 器 上 看 的 好 好 的 样 式 ， 复 制 到 微 信 后 台 的 编 辑 器 中 会 变 得 惨 不 忍 睹 。 这 种 情 况 下 ， 你 可 以 考 虑 用 一 些 新 的 块 级 元 素 ， 比 如   。 链 接 ， 微 信 文 章 仅 在 一 些 特 定 的 情 况 下 支 持 文 内 链 接 ， 所 以 ， 对 于 大 部 分 公 众 号 的 微 信 文 章 来 说 ， 都 是 没 办 法 在 文 内 加 上 链 接 的 。 但 是 作 为   W e b   世 界 ， 有 时 候 明 明 有 链 接 的 地 方 你 不 提 供 链 接 ， 你 可 以 想 象 读 者 的 怒 火 。 这 时 候 ， 我 们 有 两 种 方 式 可 以 稍 微 补 救 。 其 实 这 两 种 方 式 都 是 仿 照 纸 质 书 籍 这 种 无 法 做 到 超 链 接 的 出 版 物 的 。 1 .   对 链 接 的 文 字 加 上 特 定 样 式 （ 如 加 上 下 划 线 ） ， 以 暗 示 此 处 有 链 接 ， 然 后 在 后 面 加 个 上 标 ， 比 如 [ 1 ] ， 并 在 文 末 单 独 对 这 个 上 标 提 供 链 接 ， 这 样 需 要 的 读 者 可 以 复 制 该 链 接 访 问 。 不 过 要 注 意 的 是 ， 微 信 文 章     标 签 的 支 持 或 许 不 够 令 人 满 意 ， 你 可 以 用     标 签 来 达 成 类 似 效 果 。 2 .   如 果 文 内 链 接 不 多 ， 链 接 本 身 也 不 算 长 ， 你 可 以 用 括 号 圈 起 来 写 上 链 接 ， 不 过 如 果 链 接 太 多 ， 也 太 长 时 ， 这 会 影 响 正 文 阅 读 效 果 的 。 对 于 长 文 章 ， 你 应 该 考 虑 在 文 内 提 供 不 同 层 次 的 大 小 标 题 。 如 果 有 可 能 ， 你 还 应 该 在 页 首 提 供 一 个 目 录 、 摘 要 等 信 息 。 当 然 ， 我 们 使 用 了   C M S ， 这 种 信 息 是 自 动 提 取 生 成 的 ， 可 能 要 方 便 一 些 。   好 了 ， 大 致 我 就 总 结 这 些 ， 希 望 对 大 家 有 所 帮 助 ， 如 果 有 什 么 问 题 ， 请 留 言 讨 论 ， 也 欢 迎 大 家 分 享 自 己 的 经 验 。 （ 题 图 来 自 ： p i c s w a l l s . c o m [ 4 ] ） 推 荐 文 章 滑 动 查 看 更 多 输 入 文 章   I D   或 长 按 二 维 码 直 达 [ 1 ] :   h t t p s : / / g i t h u b . c o m / g o o g l e / c o d e - p r e t t i f y [ 2 ] :   h t t p s : / / d n - l i n u x c n . q b o x . m e / s t a t i c / j s / p r e t t i f y / p r e t t i f y . c s s [ 3 ] :   h t t p s : / / g i t h u b . c o m / m z l o g i n / c h i n e s e - c o p y w r i t i n g - g u i d e l i n e s D I V S E C T I O N S U P S P A N
[ 4 ] :   h t t p : / / s 1 . p i c s w a l l s . c o m / w a l l p a p e r s / 2 0 1 5 / 1 2 / 1 2 / a w e s o m e - b e a u t i f u l - w a l l p a p e r _ 1 2 4 4 1 3 5 8 2 _ 2 9 4 . j p g 阅 读 原 文
回复

举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

使用Markdown编辑器编辑 使用富文本编辑器编辑

Archiver| 手机版| 小黑屋|
Powered by Discuz! X3.4 Copyright © 2001-2020, Tencent Cloud. 商业源码建议获取授权，如侵犯您的权益，请联系客服处理