YouRanSNS for Fresns 场景化 SNS 解决方案: YouRanSNS for Fresns 是一整套的可扩展社交解决方案，着重于个性化、定制化、场景化。需要一款个性化、场景化社交解决方案？来吧！一切，从这里开始。

需要一款个性化、场景化社交解决方案？来吧！一切，从这里开始。

## 简介

YouRanSNS 是一整套的可扩展社交解决方案，着重于个性化、定制化、场景化。

YouRanSNS 是悠然技术团队独立开发、维护。

## YouRanSNS 技术架构

经多方位、多方面的考察，YouRanSNS 后端选用了知名开源产品 Fresns ，它自身的定位就是通用型、多场景、灵活多样、免费开源，非常适合 YouRanSNS 的自身定位，YouRanSNS 全称也可以叫做 YouRanSNS for Fresns。

为了全端兼容，前端开发框架我们采用了国内很火的 uni-app ，YouRanSNS 兼容 App、小程序、H5。

YouRanSNS 在设计之初，采用了 DIY 模块化，所以 YouRanSNS 很多页面都可以根据自己的需求进行个性化 DIY。

有利有弊，利，在于自由程度高、适合行业多，弊，在于使用起来稍微复杂一点，但是我们保证，不会很复杂。

## YouRanSNS 使用帮助

从这里开始，我们开始一步一步的学习、搭建我们自己的社交平台。

如果您需要付费搭建，请访问 [付费搭建](https://www.0313.co/post/UUYGmW8W)。

## 一、后端安装与配置

- [Fresns 官方文档](https://docs.fresns.cn/guide/)
- [Fresns 常见问题](https://docs.fresns.cn/guide/faq.html)

## 二、前端安装与配置

- [YouRanSNS 源码获取](https://www.0313.co/post/hsW7OegQ)
- [YouRanSNS 初始化配置](https://www.0313.co/post/aDvvUEbq)
- [YouRanSNS 全局配置 Config.json](https://www.0313.co/post/C7MRcbOh)
- [YouRanSNS App 更新配置](https://www.0313.co/post/mbJcx7OC)
- [YouRanSNS 生成 H5](https://www.0313.co/post/kaCFxOpk)
- [YouRanSNS PC 端自动跳转到 H5 端](https://www.0313.co/post/ll1n9Ysx)
- [YouRanSNS 页面 DIY 简述](https://www.0313.co/post/YExoAbJy)
- [YouRanSNS template.json](https://www.0313.co/post/k3t68MOg)
- [YouRanSNS DIY 演示](https://www.0313.co/post/XzTXgdyZ)
- [YouRanSNS DIY 内容小组通用样式](https://www.0313.co/post/Z0pUH5eV)
- [YouRanSNS DIY 内容小组的自定义样式配置](https://www.0313.co/post/8yxuOXw6)
- [YouRanSNS DIY 即时聊天配置](https://www.0313.co/post/a0GsdUA9)
- [YouRanSNS DIY 打卡配置](https://www.0313.co/post/6kOAOXUg)
- [YouRanSNS DIY 快速发布模块设置](https://www.0313.co/post/iPR9a6OX)
- [YouRanSNS DIY 模块](https://www.0313.co/diy/)

## 三、其他相关资料

- [YouRanSNS 页面接收参数规则](https://www.0313.co/post/svRiYZAL)
- [YouRanSNS 全局颜色、间距、字体大小](https://www.0313.co/post/SNn5ltBP)
- [YouRanSNS 字体图标](https://www.0313.co/post/TgkgIu71)
- [常用 Css 讲解](https://www.0313.co/post/n4hwiraI)
- [YouRanSNS 主导航的修改](https://www.0313.co/post/6vyAK0rM)
- [为何是点击加载更多而不是上拉加载更多](https://www.0313.co/post/L9QyVNZw)
- [为什么要用原生导航栏而不是自定义导航](https://www.0313.co/post/oioF4CuM)

## 四、二开相关

### 目录结构
#### common 文件夹 > 全局css与js工具
- font.css ------ 全局字体文件
- style.css ----- 全局公用css
- tool.js ------- 全局公用方法
#### components 文件夹 > 组件
- block-filmstrip ------------------- 块，幻灯片组件
- block-hashtag --------------------- 块，话题组件
- block-horizontal-sliding-list ----- 块，横向滑动模块
- block-html ------------------------ 块，万能HTML解析模块
- block-live-chat ------------------- 块，即时聊天小组展示按钮
- block-operating-button ------------ 块，悬浮操作按钮
- block-quick-publish --------------- 块，快速发布
- block-record ---------------------- 块，打卡展示按钮
- block-statistics ------------------ 块，数据统计
- block-tail-button ----------------- 块，底部浮动按钮
- list-ask -------------------------- 列表，问答样式
- list-comment ---------------------- 列表，评论列表
- list-concise ---------------------- 列表，简单排序样式
- list-conversation ----------------- 列表，即时聊天样式，不可参与DIY
- list-record ----------------------- 列表，打卡，不可参与DIY
- list-interact --------------------- 列表，朋友圈样式
- list-news ------------------------- 列表，新闻样式
- list-public ----------------------- 列表，通用微博样式
- list-roll ------------------------- 列表，一行上下翻滚公告样式
- list-waterfall -------------------- 列表，瀑布流列表
- public-audio ---------------------- 公用，语音播放组件，不可参与DIY
- public-category-group ------------- 公用，分类，内容小组
- public-category-hashtag ----------- 公用，分类，话题
- public-comment-box ---------------- 公用，尾部回贴浮动栏，不可参与DIY
- public-empty ---------------------- 公用，无数据组件，不可参与DIY
- public-follow-groups -------------- 公用，我关注的内容小组列表
- public-follow-posts --------------- 公用，我收藏的帖子列表
- public-follow-users --------------- 公用，我关注的用户列表
- public-follow-users-posts --------- 公用，我关注用户，Ta们的帖子
- public-lazy-load-image ------------ 公用，图片懒加载组件
- public-list-user ------------------ 公用，用户列表
- public-loading -------------------- 公用，加载中组件，不可参与DIY
- public-nearby-content ------------- 公用，附近帖子列表组件
- public-not-logged-in -------------- 公用，未登录，请登录提示，不可参与DIY
- public-privacy-popup -------------- 公用，微信隐私弹窗
- public-publish-and-draft-buttons -- 公用，侧边栏草稿与发布的浮动按钮，可参与DIY
- youran-diy ------------------------ 主，YouranDIY主要引用模块

#### pages 文件夹 > 页面
- index ----------------------------- 主导航，首页
- category -------------------------- 主导航，分类页面
- find ------------------------------ 主导航，发现页面
- notification ---------------------- 主导航，通知页面
- my -------------------------------- 主导航，我的页面
- account/wechat-login/website-oauth.vue --- 微信扫码PC端登录
- comment --------------------------- 评论详情页面
- editor [文件夹] -------------------- 编辑器
	- draft.vue --------------------- 草稿列表
	- editor.vue -------------------- 编辑器主文件
	- editorAceTex.vue -------------- 艾特用户选择页面
	- editorHashtag.vue ------------- 话题选择页面
	- editorQuotePost.vue ----------- 引用帖子选择页面
	- editorRecord.vue -------------- 打卡编辑器
	- graffiti.vue ------------------ 涂鸦板
	- preset.vue -------------------- 预置内容页面
	- report.vue -------------------- 举报编辑器
- extensionsPlugin [文件夹] ---------- 扩展插件
	- AdminMenu.vue ----------------- 管理菜单插件
	- plugin.vue -------------------- 通用插件页面
	- TitleIcons.vue ---------------- 标题图标插件
- group ----------------------------- 内容小组列表
- hashtag --------------------------- 话题列表
- login [文件夹] --------------------- 登录
	- login.vue --------------------- 登录页面
	- userSelection.vue ------------- 用户选择页面
- my [文件夹] ------------------------ 主导航，我的
	- account.vue ------------------- 账号设置
	- accountCookies.vue ------------ Cookies 使用条款
	- accountEditEmail.vue ---------- 修改邮箱
	- accountEditPassword.vue ------- 修改登录密码
	- accountEditPhone.vue ---------- 修改手机号
	- accountPrivacy.vue ------------ 隐私政策页面
	- accountTerms.vue -------------- 用户条款页面
	- applyDelete.vue --------------- 账号注销页面
	- appVersion.vue ---------------- App端更新页面
	- cacheConfigUration.vue -------- 缓存设置页面
	- comment.vue ------------------- 我的评论页面
	- follow.vue -------------------- 我的关注页面
	- my.vue ------------------------ 我的页面
	- post.vue ---------------------- 我的发帖
	- poweredBy.vue ----------------- 技术支持页面
	- preset.vue -------------------- 预置语设置页面
	- userEditing.vue --------------- 用户资料修改页面
- notification [文件夹] -------------- 主导航，通知
	- commentsAndEt.vue ------------- 评论和艾特通知页面
	- conversationDetail.vue -------- 私聊对话详情页面
	- notification.vue -------------- 主导航，通知页面
- page [文件夹] ---------------------- 自定义DIY页面
- post [文件夹]  --------------------- 帖子
	- followList.vue ---------------- 收藏列表
	- likeList.vue ------------------ 点赞列表
	- post.vue ---------------------- 帖子详情页
- public [文件夹] -------------------- 公用
	- image.vue --------------------- 图片预览页面
	- navigateToMiniProgram.vue ----- 跳转到其他小程序
	- public.vue -------------------- 公用版权页面
	- search.vue -------------------- 搜索页面
	- video.vue --------------------- 视频预览页面
- publicPage [文件夹] ---------------- 公用页面
	- followGroups.vue -------------- 我关注的小组单页
	- followPosts.vue --------------- 我收藏的帖子单页
	- followUsers.vue --------------- 我关注的用户单页
	- followUsersPosts.vue ---------- 我关注的人的帖子单页
	- nearbyPost.vue ---------------- 附近的帖子
- register -------------------------- 注册页面
- user ------------------------------ 用户详情页面
#### YrMoveConfig 文件夹 > 配置文件
- appVersion.json ------------------- App更新配置
- category.json --------------------- 主导航，分类配置
- Config.json ----------------------- 全局配置
- find.json ------------------------- 主导航，发现配置
- group.json ------------------------ 默认内容小组列表配置
- group_gid.json -------------------- 自定义小组配置，不同小组不同样式
- index.json ------------------------ 首页配置
- my.vue ---------------------------- 主导航，我的配置
- page_1-18.json -------------------- 自定义的 18 个单页
- post.json ------------------------- 帖子内容页配置
- template.json --------------------- DIY 模板配置示例

### 本地储存（同步）
#### cacheAgreement
- 缓存用户是否同意网站协议
#### cachePreset
- 预置语储存
#### headlines
- 头条推荐，只在首页触发

## 演示

![微信小程序](https://www.0313.co/Images/QiTa/gh_7699f55fc084_430.jpg "微信小程序")
![安卓 App](https://www.0313.co/Images/QiTa/https___www.0313.co_App_youran.apk.png "安卓 App")

## 关于版权

免费、开源、可商用，MIT 开源协议，不限形式二开、不限形式传播，但是一定要遵纪守法不得将 YouRanSNS 用于任何违反法律的事情上。

## 联系我们

网址：[悠然创业社区](http://www.0313.co)

QQ群：592713454

QQ：97028048

## 鸣谢

- [Fresns](https://fresns.cn) 一款免费开源的社交网络服务软件
- [uni-app](https://uniapp.dcloud.net.cn/) 是一个使用 Vue.js 开发所有前端应用的框架
- [mp-html](https://jin-yufeng.gitee.io/mp-html) 一个强大的富文本组件

YouRanSNS 是采用 MIT 许可的开源项目，使用完全免费。

维护这样一个高质量的、长久性的开源项目是需要巨大的努力，只有在我们的赞助者慷慨的财务支持下才得以持续。

## 如何赞助

![微信收款码](https://www.0313.co/Images/QiTa/mm_facetoface_collect_qrcode_1683821259099.png "微信收款码")
![支付宝收款码](https://www.0313.co/Images/QiTa/1683821367736.jpg "支付宝收款码")

## 赞助后...

请联系QQ：97028048，悠然创业社区 “赞助用户组”，加入 VIP 聊天室，等等等...

zhaobing/YouRanSNS for Fresns 场景化 SNS 解决方案

简介

发行版

贡献者

近期动态

zhaobing/YouRanSNS for Fresns 场景化 SNS 解决方案 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

zhaobing/YouRanSNS for Fresns 场景化 SNS 解决方案