333
帝国cms自动添加文字背景作为文章图片
<style>
.image-container {
position: relative;
width: 100%; /* Adjust to your needs */
max-width: 600px; /* Adjust to your needs */
}
.image-container img {
width: 100%;
height: auto;
display: block;
}
.image-container .title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-size: 24px; /* Adjust to your needs */
background-color: rgba(0, 0, 0, 0.5); /* Adjust to your needs */
padding: 10px; /* Adjust to your needs */
}
</style>
<div class="image-container" id="imageContainer">
<img id="randomImage" src="" alt="Random Image">
<div class="title" id="imageTitle"></div>
</div>
<script>
// 假设您有一个方法来获取文章ID和标题，这里只是示例
function getArticleId() {
// 这里应该是从帝国CMS获取文章ID的逻辑
return 123; // 示例ID，需要替换为实际逻辑
}
function getArticleTitle() {
// 这里应该是从帝国CMS获取文章标题的逻辑
return '[!--pagetitle--]'; // 示例标题，需要替换为实际逻辑
}
// 生成伪随机数，基于文章ID确保每次对同一篇文章调用时结果相同
function pseudoRandomIndex(seed, max) {
let x = seed;
let y = (x ^ (x << 11)) & 0xFFFFFFFF;
y = y ^ ((y >> 17) | (y << 17));
y = y ^ ((y >> 5) | (y << 27));
y = y ^ ((y << 6) | (y >> 26));
y = y ^ ((y << 9) | (y >> 23));
y = y ^ (y >> 16);
return (y % max);
}
// 图片目录路径（需要替换为实际路径）
const imageDir = 'e/data/tmp/images/';
// 图片文件扩展名（这里假设所有图片都是jpg格式，您可以根据需要调整）
const imageExtension = '.jpg';
// 图片总数（这里假设是20张，需要根据实际图片数量调整）
const totalImages = 20;
// 获取文章ID和标题
const articleId = getArticleId();
const articleTitle = getArticleTitle();
// 选择随机图片
const randomIndex = pseudoRandomIndex(articleId, totalImages);
const imageFile = `${imageDir}${randomIndex}${imageExtension}`;
// 设置图片和标题
const imageElement = document.getElementById('randomImage');
imageElement.src = imageFile;
const titleElement = document.getElementById('imageTitle');
titleElement.textContent = articleTitle;
</script>
222
